SAP Fiori for watchOS: Navigation

Material Design: Navigation 

SAP Fiori for Wear OS uses Roboto as its primary font, which is based on Material Design’s type hierarchy. With its variety of styles, the Roboto font family matches the needs of Wear OS. 

Resources

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 smartwatch layout, such as rules for handling different screen shapes, margins, text alignment, and touch targets.

Smartwatches on which Wear OS can run come with differently shaped displays, such as round, rectangular, and square. When you are designing the layout, optimize it according to the different screen shapes.

Margins

To optimize the space without cropping elements, margins on rectangular screens can be smaller than on round screens. Use percentages for the margins so that the outer margins on the different smartwatch devices can be scaled proportionally. The minimum margins for rectangular screens are 2,5 % and 5,2 % of the total device size for round screens.

Text Alignment

Centered text appears more visually balanced on a round screen and should be used when the text is short. Left aligned text improves the readability and should be used for long text. 

Touch Target

Consider accessibility when designing the spacing of interactive elements. On small screens like smartwatches, it can be more difficult to select the desired UI element, so the touch target for interactive elements must be at least 48dp by 48dp.

Resources

SAP Fiori for watchOS: Layout

Material Design: Screen Shapes 

The right choice of colors is an important aspect that should be considered in smartwatch 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 Wear OS is based on the color parameters from the Horizon visual theme. The colors displayed below are the main reference colors.

UI Colors

Compared to mobile apps, colors in smartwatch apps are generally brighter and less saturated. Additionally, smartwatch apps are only available in dark mode to save battery life and accommodate different light conditions, such as low 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 smartwatches. 

From the Horizon color palette, we have added a semantic name layer to help you decide which colors to use. UI colors are grouped according to their usage into the following categories:  

• Surface colors
• Text colors 
• Borders colors 
• Semantic colors 
• Accent colors 

Surface Colors

Surface colors are applied to the background of components, such as chips, buttons, and cards. To provide a sense of hierarchy, surface colors are identified by the first letter S followed by a number sequence (e.g., S0, S1, S2).

Text Colors

Text colors are applied to the text and icons of all components. Text colors are identified by the first letter T followed by a number sequence (e.g., T1, T2, T3).

Border Colors

Border colors are applied to linear elements, such as divider lines. Border colors are identified by the first letter B followed by a number sequence (e.g., B1, B2, B3). 

Semantic Colors 

Semantic colors are applied to any UI element that conveys an important status, state, or level of priority. Semantic colors can be identified by the following naming (e.g., negative, critical, and positive status).

Accent Colors

Accent colors provide an additional level of color luminance and are used to accent areas of the UI, such as avatars, icons, and data visualizations. Accent colors are identified by the word “Accent” followed by a number sequence (e.g., Accent 1, Accent 2, Accent 3).

Resources

SAP Fiori for watchOS: Colors 

Material Design: Wear OS Colors 

SAP Fiori for Wear OS 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 smartwatches.

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 smartwatch 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 smartwatch app is different compared to mobile apps. Therefore, the most important aspect of creating a smartwatch 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 smartwatch cannot be compared to the experience of a mobile device and therefore follows different design principles.

In contrast to a smartwatch app, apps on a mobile device represent an end-to-end experience. That means, while the mobile device contains the complete app, the smartwatch 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 smartwatch:

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

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

The image above shows that the way users interact with smartwatch 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 smartwatch app quickly decrease, but also the general user experience of the app will be negatively affected. This may cause users to discontinue using the smartwatch 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 smartwatch.
• Don’t apply mobile app information architecture to the smartwatch.
• Don’t assume that the mental model for the mobile app is the same as for the smartwatch app.

Differences Between watchOS and Wear OS

Keep in mind that there are also platform-specific differences when it comes to smartwatch apps. The following table shows a rough overview of the most important differences of the operating systems Wear OS from Google and watchOS from Apple that influence the design of a smartwatch 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 smartwatches:

• 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 smartwatch 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 smartwatch 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 smartwatch 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 smartwatch app from taking out their phone during interactions, the activities on the smartwatch 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 smartwatch, 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 smartwatch 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 actions, especially negative actions such as “Delete” or “Decline”, recognizable.

On a smartwatch, 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 smartwatches are rich notifications that can be actionable. These are mirrored from your phone by default but can also be customized for the smartwatch.

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 smartwatches show their full potential in combination with a paired smartphone, the smartwatch app should be considered as a companion to the mobile version of the app. The smartwatch experience should always be an extension and not a standalone app.

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

For example, the handover feature can be used for notifications: if users get a notification on their smartwatch, 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 smartwatch, such as KPIs: provide a handover that takes the user to the respective settings on their smartphone.

Leverage Watch Interactions

On a smartwatch, 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 smartwatch 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 smartwatch makes text input highly frustrating for users. Remember that after 5 seconds of interaction with the smartwatch, 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 smartwatch 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 iOS: SAP Fiori for watchOS Design Principles

Material Design: Design Principles

The product icon of SAP mobile apps communicate the purpose of SAP’s mobile experience and supports business users in recognizing the app in the Play Store and on their home screens.

Our product icon design direction complements the Horizon visual design and creates a recognizable mobile brand. The balance between individual icon metaphors, characteristic shapes and coherent visual design embraces the SAP mobile product family.

We have created a guide that describes exactly how the style should look like and how to create a new icon.

Approach

As a base for the product icons, we use the same origin as the SAP Fiori icons. The best way to start creating app icons is to simply pick out an SAP Fiori icon that is the best metaphor for your app and then apply the style. It is not mandatory to use an icon as a base but it should follow the style.

Anatomy

The product icon is composed of three layers and stand for the three-tier architecture.

1. Database Layer
2. Logic Layer
3. UI Layer

The first level is the database layer and is the base shape of the app icon, then comes the second layer, this represents the logic layer and finally the UI layer which is the third layer of the product icon. For some icons there is also the possibility to use a highlight layer if needed.

• Use product icons that communicates the purpose of the app
• Use simple product icons because they are usually easier for people to understand and recognize
• Use the same style to complement the Horizon visual design
• Design your icon as a full-bleed square image

• Do not use product icons from other sources
• Do not include too many details, it will be difficult to determine and might make an icon seem noisy
• Do not use other colors for the app icon
• Do not use any color for the app icon background
• Do not use a picture for product icons

Specification

Product Icon Creation

To learn more about the best practices and process for creating Android product icons, refer to the Material Design Product Icons article.

Resources

Material Design: Iconography – Product Icons