Navigating on the watch should be quick and easy. To help users find their way around, it is important to keep the number of taps to complete an action and the overall app hierarchy to a minimum.

Choose a suitable navigation concept for your watch app if it has more than one screen. Hierarchical or page-based navigation are best used for watch apps.

SAP Fiori for watchOS uses SF Compact as its primary typeface. SF Compact is optimized for small screens and works seamlessly with the watchOS accessibility features, such as Dynamic Type. SF Compact has multiple weights in its display and text versions. For complications, we recommend using SF Compact Rounded.

When designing for small screens, it is important to keep content within the layout legible, aligned, organized, and accessible. The following article presents some best practices that offer guidance for the design of a watch app layout, such as rules for handling different screen sizes, margins, and touch targets.

The right choice of colors is an important aspect that should be considered in watch apps. It communicates the meaning and relationship of content, providing users with guidance to help them complete their tasks.

Horizon Reference Colors

The color palette for SAP Fiori for watchOS is based on the color parameters from the Horizon visual theme. The colors displayed below are the main reference colors.

Color Palette

Compared to mobile apps, colors in watch apps are generally brighter and less saturated.  Additionally, watch apps are only available in dark mode to save battery life and accommodate different light conditions, like lower light or direct sunlight.

We recommend using the dedicated color palette to provide optimal readability and accessibility for users – which is even more important in critical situations due to the smaller screen size and rather short looks at glanceable content on watches.

Core Colors

The current color palette is derived from the main control parameters from the Horizon theme. The following table shows the main reference colors for SAP Fiori for watchOS apps.

Accent Colors

Accent colors are used to emphasize key parts of the UI or to highlight information. The following table shows the main accent colors for SAP Fiori for watchOS apps.

Resources

SAP Fiori for Wear OS: Colors 

Material Design: Wear OS Colors 

SAP Fiori for watchOS provides a consistent and holistic user experience for SAP software on wearables. Wearables are computer technologies that users wear on their bodies, creating a more personalized experience. Common types of wearable devices are watches.

The purpose of wearables is to support an activity in the real world by providing additional information, for example, evaluations based on sensors tracking the body’s vitals, or glanceable instructions without touching the device.

Differences Between Mobile and Wearable Devices

Designing for watch apps presents a fundamentally different approach from designing for mobile apps. Not only is the screen that users interact with much smaller, but also the way and duration users interact with the watch app is different compared to mobile apps. Therefore, the most important aspect of creating a watch app is to define focused wearable requirements instead of trying to mirror the scope of the mobile app. In addition, the user experience on a watch cannot be compared to the experience of a mobile device and therefore follows different design principles.

In contrast to a watch app, apps on a mobile device represent an end-to-end experience. That means, while the mobile device contains the complete app, the watch version focuses more on informing the user selectively, with, for example, relevant notifications or complications, and a maximum of one or two functions that can be performed quickly.

Passive use and brief glance interactions with the end device predominate on the watch:

In general, the usage of watches is divided into the following categories:

• 85 % passive use, such as usage of the sensor
• 10 % looking at the watch, such as notifications, complications
• 5 % performing actions, such as setting timers

The image above shows that the way users interact with watch apps differs greatly from mobile apps – especially in terms of passive usage. As a result, the design process for watch apps must start with specifying the requirements. If guidelines for wearables are not considered, not only will the added value of a watch app quickly decrease, but also the general user experience of the app will be negatively affected. This may cause users to discontinue using the watch app because they do not depend on it.

• Focus on single actions and relevant information.
• Try to use one-tap interactions.
• Minimize hierarchies within the app.
• Leverage a “favourites” or “recents” feature as well as usage patterns to infer user-based relevance of content.

• Don’t translate mobile app capabilities to the watch.
• Don’t apply mobile app information architecture to the watch.
• Don’t assume that the mental model for the mobile app is the same as for the watch app.

Keep in mind that there are also platform-specific differences when it comes to watch apps. The following table shows a rough overview of the most important differences of the operating systems watchOS from Apple and Wear OS from Google that influence the design of a watch app.

Design Principles

The following principles provide an overview of the fundamental factors of good user experience for wearables and additional guidance for SAP-specific software on watches:

• Focus on critical information and tasks
• Enable quick and informed actions
• Show timely and relevant notifications
• Provide device transitions
• Leverage watch interactions
• Include privacy and security features

Focus on Critical Information and Tasks

If you need a watch extension of your app, you have to consider the most important and most used activities of your mobile app. Only focus on these one or two features for the watch and avoid a complex information architecture.

Also consider the context in which the features you selected will be used:

• Where might the users be at the point of interaction with the watch app?
• Do users require hands-free interactions?
• Is the user’s environment changing?
• What options could help users continue their task smoothly?

Keep in mind that users should always be able to see what the system is doing and that it is responding to their actions. Therefore, the UI should inform them about activity or status.

If your feature includes displaying multiple work tasks or to-dos, it must be apparent to users how many tasks they need to complete as well as the current progress. Also enable reminder notifications for critical work tasks or newly created ones.

Enable Quick and Informed Actions

To avoid users of a watch app from taking out their phone during interactions, the activities on the watch must be meaningful and quick to complete. In addition, the action to be performed should match the current context and the respective user. Therefore, only show one relevant action for this user that can be completed in less than 5 seconds. If the interaction takes more than 5 seconds on the watch, users are more inclined to use their phone instead.

For actions to be performed quickly and easily, the app should also have a simple navigation structure as well as a minimal or no hierarchy. For more details about navigation within watch apps, see Navigation. If possible, users should be able to complete an action and gain value with one tap.

The home screen of your app should contain actionable content. A good example for this is the Apple Clock app: instead of showing the user controls to set a custom timer, the app provides commonly used defaults on launch and further defaults can be found with a simple scroll. The timers the user sets most frequently are surfaced to the top of the list. This is also an example for so-called “smart defaults” that will be perceived by users as valuable, and usage will increase.

If your app provides different actions, use button hierarchy to highlight the primary from the secondary action or to make semantic, especially negative actions, such as “Delete” or “Decline” recognizable.

On a watch, errors can quickly occur by accidentally pressing a button. Especially in cases of negative or destructive actions, a loading screen or confirmation screen should be integrated to quickly undo mistakes.

Show Timely and Relevant Notifications

An important feature of watches are rich notifications that can be actionable. These are mirrored from your phone by default but can also be customized for the watch.

Notifications should be short and concise, appear in the right moment, and be of relevance and added value for the user. This could be, for example, a notification that appears when the decibel level is above a threshold that can cause hearing impairment or a notification reminding the user of a task that needs to be done at a certain time.

Make sure that the notification text is short but contains the most important information for the user. For non-destructive routine actions, consider providing notification actions.

Provide Device Transitions

Since watches show their full potential in combination with a paired smartphone, the watch app should be considered as a companion to the mobile version of the app. The watch experience should always be an extension and not a standalone app.

Therefore, users should be able to continue any interaction they started with the watch app on their phone. Make sure to offer users a seamless handover from the watch to other devices.

For example, the handover feature can be used for notifications: if users get a notification on their watch, they have the option to open it on their phone to get the full context. Another example is the manual setting of displayable elements on the watch, such as KPIs: provide a handover that takes the user to the respective settings on their smartphone.

Leverage Watch Interactions

On a watch, where space is limited, it is important to offer the most common and native device interactions. Make use of touch gestures, such as scrolling and tapping, and use “swipe right to go back”. Similar gestures between watch and smartphone help users to quickly familiarize themselves with watch interactions.

Enable haptics to build an engaging and personal watch experience. System-provided haptics, such as scrolling with the Digital Crown, give users a feeling for actions. Use haptics for different states (e.g., success or failure) and actions (e.g., start and stop).

The small screen of a watch makes text input highly frustrating for users. Remember that after 5 seconds of interaction with the watch, users are switching to their phone. To avoid this, consider offering fallback options, such as predefined answers in text fields or voice input that is converted into text.

Include Privacy and Security Features

Since a watch is worn directly on a user’s body and can collect not only movement but also data through various sensors, it is extremely important in a corporate context to inform users about what data the app is collecting. Only access user data that is necessary and essential for the current app context and avoid recording personal data. Transparency about data privacy and the protection of personal data is essential for the user acceptance of your app.

Ensure that confidential company data is also protected, and only show necessary data that is essential in relation to the current task and context. Strive to let users configure how sensitive data is displayed on their watch.
Avoid including sensitive, personal, or confidential information in a notification. Especially company sensitive data must not appear in a notification.

Resources

SAP Fiori for Wear OS: Design Principles

Human Interface Guidelines: Designing for watchOS

SAP Fiori for watchOS is a design language specifically adapted for SAP software running on watchOS devices.