The native file viewer is an extension of the attachment control that allows users to view video, audio, and text media, as well as preview file types.

Usage

Use the native file viewer to provide a preview of text, video, audio, and text media, as well as preview file types.

Anatomy

A. App Bar

The native Android app bar allows the user to close the native file viewer.

B. Native File Viewer

The file viewer displays a variety of file types such as PDF, ZIP, video, text, and image file types. It allows users to interact and preview the attached file types.

Behavior and Interaction

Tap

Tapping on the screen hides the navigation bar, which allows the user to view content free of distractions.

Scrolling

Scrolling is supported for file types whose content can scroll vertically. When the content of a text or PDF file extends beyond the fold, the user can scroll to preview that file’s contents.

Pinch to Zoom

Pinch to zoom allows users to zoom in and out to further inspect textual or graphical content.

Adaptive Design

Compact & Expanded Screen Sizes

Depending on screen size, the native file viewer scales proportionately to maintain the content’s aspect ratio. On compact and tablet screen sizes, content is displayed in proportion with the overall device size.

Variations

Because the native file viewer displays different file types, the viewer is flexible in how media and content is displayed. The following are the native file viewer variants:

Text Viewer

The text viewer displays textual file types such as .docx, .rtf, and .txt. Text files are displayed edge-to-edge based on the device width. If content exceeds the fold, text will scroll vertically.

Image Viewer

The image viewer displays image file types such as .svg, .jpg, .jpeg, and .png. Images are displayed edge-to-edge based on the device width. Since image media may have different aspect ratios, the video viewer’s aspect ratio is variable depending on the source video’s format.

Video Viewer

The video viewer displays video file types such as .mov, .mp4, and .mpeg. Videos are displayed edge-to-edge based on the device width. Since video media may have different aspect ratios, the video viewer’s aspect ratio is variable depending on the source video file’s dimensions. In addition, a media player toolbar is displayed at the bottom of the page.

Audio Viewer

The audio viewer displays audio file types such as .mp3, .wma, and .wav. Since audio files have no dimensions, the file viewer will display an icon within a container. This container will have a locked aspect ratio of 16:9.

PDF Viewer

The PDF viewer variant is a subset of the text viewer; however, it displays a PDF file type instead. The PDF content is displayed through white canvases against a gray background that mimics the pages within a document.

ZIP Viewer

The zip variant is a standalone viewer for ZIP files. When the user opens the ZIP file, the ZIP contents are displayed as a list of files and/or subfolders.

Resources

Development: Native File Viewer

Related Components/Patterns: Attachment Form Cell

Multi-message handling helps users manage multiple messages within an app, making it easy for users to take action.  

Anatomy

Multi-message handling follows the basic structure of a bottom sheet, prioritizing message components based on their importance. Error messages should appear first to capture the user’s attention.

A. Banner

The banner contains:

• Optional icon or image
• Message summary
• Button

B. Bottom Sheet

The bottom sheet displays message details.

C. Section Header (Optional)

The section header includes a title and action button for additional functions.

D. Filter Feedback Bar (Optional)

The filter feedback bar allows users to quickly filter messages.

E. Message Item

The message item includes an icon or image, message content, and an optional action button to support user interactions.

Behavior and Interaction

Trigger

The banner notifies the user of messages. Tapping the banner opens the multi–message handling bottom sheet for detailed viewing and interaction. 

Tap to Scroll

When the bottom sheet is open, tapping a message item automatically scrolls to the related field or section with the error, allowing users to address the issue. 

Clear

Tapping the “Clear All” button removes all messages displayed in the bottom sheet. 

Tapping the “Clear” button in a section header removes only the messages within that specific section. 

Resources

SAP Fiori for iOS: Error Handling 

Related Components/Patterns: Banner, Bottom Sheet, Header, Filter Feedback Bar, Object Cell 

The document scanner leverages Google’s ML Kit, allowing users to digitize physical documents with an on-device flow. Users can select automatic or manual capture and easily edit, retake, or delete specific or all scanned documents. 

Anatomy

A. Camera View

The camera view enables users to focus on and capture their scan through either manual or auto mode. The shutter button allows users to manually capture their scans regardless of the enabled mode. The user can also utilize their phone’s flash to brighten the environment in which they are scanning.

B. Gallery View

The gallery view provides a view of all the captured scans and enables users to filter, clean, crop, rotate, retake, and delete their scans. Once the user feels the scans are sufficient, the “Done” button saves all the scans in the gallery and prompts the user to the next page in their in-app journey. 

Behavior and Interaction 

Automatic Capture 

When the user first opens the document scanner, it defaults to auto capture mode and prompts the user to position the document in the frame. As soon as a potential document is detected, a blue outline appears, instructing the user to hold the camera steady as the document is being scanned. Once the document is captured, the user is directed to the gallery view. 

Manual Capture 

Users can switch to manual capture mode by tapping on the “Manual” section in the mode toggle. In manual mode, the user is prompted to position the document within the camera’s view. Once a potential document is detected, the blue outline appears, and the user can tap the shutter button to capture the scan. After capturing, the user is taken to the gallery view. 

Add Another Scan 

The user can add another scan to their gallery view by tapping on the “Plus” button next to the first document’s thumbnail. Once pressed, the user returns to the camera view, allowing them to scan using either auto or manual capture mode. 

Crop and Rotate 

The crop and rotate section of the gallery view allows users to automatically crop, rotate, and adjust the edges of the scan. While adjusting the scan corners, a magnified view shows up to help with more precise cropping. 

Filter

The filter section of the gallery view allows users to automatically or manually adjust shadows, amplify the color, and grayscale the scanned document. If there are multiple scans in the gallery view, the user can apply the filters to one of the scans or all the scans in the gallery. 

Clean

The clean section of the gallery views allows users to erase any stains, wrinkles, and fingers captured in the scan. When the “Clean” button is pressed, the user is guided to choose the brush size and mark the area to fix. 

Retake & Delete 

When a document thumbnail in the gallery view is selected, users can tap on the “Retake” button to try scanning the document again. They can also delete the scan by pressing the “Delete” button or the “Cancel” button in the top left. If there is only one scan, the screen navigates back to the previous page. If there are multiple scans, pressing the “Delete” button only deletes the selected scan versus all of the scans in the gallery. 

Resources

Development: ML Kit Document Scanner 

SAP Fiori for iOS: Document Scanner 

An avatar is a visual element used to display user profiles, initials, placeholders, icons, or business-related images, such as logos and product pictures.

Usage

Consider using round avatars to represent user profiles and square avatars for objects.

• Don’t use avatars as interactive icons. Instead, use an icon button.
• Don’t display more than one letter in an initial.

Anatomy

A. Avatar

The avatar is a round or square container that contains an image, an icon, or an initial. One alphabetical character is supported for an initial.

B. Badge (Optional)

An optional badge can be placed in the bottom right corner on top of the avatar to display a status.

C. Avatar Group

Multiple avatars can be grouped horizontally in an avatar group. To avoid clutter, we recommend displaying no more than six avatars. The last avatar can indicate the number of additional avatars when there are too many avatars to display.

The avatar group supports round avatars with a size of 16dp (default) or 24dp.

D. Label (Optional)

A short label can be displayed together with the avatar group to provide descriptive information.

Behavior and Interaction

Since an avatar is typically part of a specific component, such as an object cell, card, or object header, it is not interactive and serves a decorative or informational purpose.

Wrapping Behavior

The avatar group label should be short and concise. In cases where the label is longer than the allocated space, it wraps to a new line by default. As a nested component, the wrapping behavior can be overridden by the parent component. If the label gets truncated, the user should still be able to view the full label, for example, by navigating to a detail page or by displaying a tooltip on long press.

Variations

Size

The size of an avatar is customizable, preferably in increments of 8dp. The avatar group can display avatars with a size of 16dp or 24dp.

Shape

Depending on the context, the avatar can be round or square with rounded corners.

Color

By default, the avatar uses the SAP Fiori accent color palette. If required, the color theme can be customized or branded colors can be introduced.

Layout

Depending on the use case, one label can be placed before, after, below, or above the avatar group.

Resources

Development: Avatar, Avatar Stack

SAP Fiori for iOS: Avatars and Images 

SAP Fiori for Web: Avatar

Elevation refers to the perceived virtual height or distance from the background to a component’s surface. This concept is a combination of techniques and visual cues, such as tonal color, shadows, and scrims, that allows for a layered yet cohesive visual experience. 

Tonal Color 

Material 3’s tonal color is essential for conveying materiality and depth using distinct shades across the UI. This approach also helps define a component’s tactile area and visual emphasis relative to other containers and surfaces, providing a visually balanced user experience. Tonal color is further defined by the surface and surface container color roles.  

Surface

Surface Container

The surface container color role comprises five tonal colors defining the components’ elevation on the screen. The higher the surface container, the more prominent it appears on the screen. The surface container color roles can also be paired with shadows to further emphasize a container. 

Scrim

Resources

SAP Fiori for iOS: Elevation 

Material Design (Elevation) 

Android Developers (Elevation)  

Related Components/Patterns: Color, Accessibility 

Navigation Components

The navigation region holds the primary navigation components such as:

• Navigation Bar
• Navigation Rail
• Navigation Drawer
  

These components help users to navigate between destinations within the app and access important actions. The adaptive navigation feature dynamically swaps out navigation components during runtime as the window sizes change. The scaffolding automation provided by Android automatically adjusts the standard M3 navigation components to fit the relevant breakpoints.

Profile and Setting

To maintain consistency across all SAP products, the entry point for the user profile and settings is located on the right side in the top app bar. It’s recommended to place the user profile on the home screen only.

Dialogs

Dialogs are a type of modal that are used to provide high priority information, display critical information, or ask for specific user actions or decisions. They prompt the user to react and interrupt the process of the application. It is recommended that dialogs have a clear and specific purpose, such as confirming an action or communicating critical details to the user. Dialogs should only be implemented when necessary to avoid disrupting the user experience. Additionally, dialogs should be responsive, adapting to different screen sizes and orientations to provide a consistent experience across devices.

Resources

Development: About Adaptive layouts, Design for Large Screens, Get Started with Large Screens

Material Design: Layouts

Optimizing your app for all window size classes requires a clear understanding of its structure and the relationships between screens. In compact mode, users navigate through screens hierarchically, whereas in larger window size classes, multiple panes can be displayed side by side on one screen.

Starting with One Window Size Class

Begin by designing your app for a specific window size class, such as compact, and make sure its layout is responsive and adaptive.

Creating an Information Architecture

Develop a hierarchical model that illustrates the structure of your app.

Identifying Related Screens

Look for screens that are closely related in the information architecture, such as a list screen and its detail view. These screens typically interact directly with each other.

Merging Related Screens into Panes

For larger screens, integrate related screens into a single display using multiple panes. For example, one pane could show the list, while another shows the detail view.

Adjusting Designs for Different Window Sizes Classes

Tailor your design for various window sizes by considering the following questions:

• What needs to be displayed? Ensure that all essential details available on large and medium screens are available on compact screens, even if it requires an additional tap to view certain elements. For example, a filter might be shown beside a list on a large screen but open on a new screen after a tap in compact mode.
• How should the screen be divided? Determine the best way to split content across panes for different screens.
• What size adjustments are necessary? Adjust element sizes to fit different window sizes appropriately to make your app’s layout responsive and adaptive while maintaining visual coherence across devices.
• What needs to be relocated? Some components might need to be moved. For example, the bottom navigation bar in compact mode might transition to a navigation rail or drawer on medium and large screens.
• Which components should be exchanged? Replace certain elements better suited for specific window sizes. For example, a navigation bar in compact size could be swapped for a navigation rail or drawer on larger screens.

Material 3 defines three standard canonical layouts: list-detail, supporting pane, and feed. Each layout offers a different approach to organizing content and components based on the available window space.

The list-detail layout is ideal for displaying explorable lists of items alongside each item’s supplementary information – the item detail.

The supporting pane layout organizes app content into primary and secondary display areas, with the primary area occupying most of the app window and the secondary area presenting supporting content.

The feed layout is unique for using a grid composition that allows for browsing content easily, such as news, photos, and social media.

The M3 navigation components such as navigation bar, rail, and drawer enhance canonical layouts by keeping primary navigation options within easy reach while minimizing screen space.

Panes

Panes are used to arrange UI elements. A layout may include 1–2 visible panes of different widths, adjusting dynamically to the window size class. Depending on the window size class, an alternative layout option is to stack the panes vertically, for example, with the supporting pane positioned below the focus pane instead of beside it. Additionally, for extra-large windows, a standard side sheet can serve as a third pane.

When there are multiple panes, it’s important to consider the size of each pane. For example, in a list-detail layout, the list should have a fixed width, while the detail pane should be flexible, adjusting to the available space by growing or shrinking. This ensures that the layout remains visually appealing and adapts smoothly across different window size classes.

Pane Types

In all layouts, there should be at least one flexible pane that can adjust to the window size, ensuring responsiveness across various screen sizes. The available pane types are:

• Single-pane layout
• Two-pane layout
• Fixed and flexible layout
  

Each window size class corresponds to a specific breakpoint where the layout needs to adjust to fit the available space, device conventions, and ergonomics. The three primary window size classes are compact, medium, and expanded. These size classes provide the basis for designing adaptable layouts that work across various devices and orientations. Material 3 also supports large and extra-large window size classes, which are best suited for creating content designed for extra-large tablets or external displays. These window size classes offer multiple pane layouts and start at a screen width of 1200dp.

The Importance of Designing with Window Size Classes

When designing applications, it’s important to use window size classes rather than focusing on specific devices because the available window space is dynamic and can vary based on user behavior, such as using multi-window modes or unfolding a foldable device. Additionally, devices can be categorized into various window size classes depending on their orientation.

Width and Height Window Size Classes

Available width and height are classified separately, so your app always has two window size classes – one for width and one for height. Typically, available width holds more significance than available height because vertical scrolling is more common. Therefore, the window size class related to the available width is likely more relevant to your app’s UI.

Density-Independent Pixels (dp)

SAP Fiori for Android uses a system of pixel units (dp) that allows for a design to scale to screens with different pixel densities. The UI therefore adapts to various device displays regardless of pixel density.

Increment System

SAP Fiori for Android layouts are designed in increments of 4dp and 8dp for smaller elements for scalability purposes. Using an incremental system allows for all measurements in a design to be predictable and easier to scale when designing on multiple devices.

Spacing

Margins and Padding

Margins are the spaces between the left/right window edge and the component. Typically, these margins are set to 16dp or 24dp, depending on the window size. For larger window size classes, margins can be adjusted more flexibly to improve legibility, similar to the design element of letterboxing.

Padding is the horizontal or vertical space between elements within a component. Padding ensures consistency and allows for easy scalability.
The padding between elements within a component should add up to an increment of 4dp. This height affects the overall vertical layout.

Spacers

In a layout, a spacer is the space between two panes. Spacers are 24dp wide and can have a drag handle to adjust the size and position of the panes. The touch target of the handle slightly extends over the panes.

Parts of Layout

For a seamless transition between different window size classes and to provide the user with better orientation, three regions play an important part:

• App Bar
• Body
• Navigation

Touch Target

Accessibility is key when designing the spacing of interactive elements. It’s essential to provide sufficient space to place elements, aiming for a minimum touch target size of 48dp x 48dp with 8dp padding between multiple touch targets.

Resources

Material Design 3: Understanding Layout, Applying Layout

During the UX Feedback Session for Mobile Apps we aim to explore your mobile solution and understand your experiences with the SAP BTP SDK/MDK for Android and iOS.

Our team of mobile UX design experts is eager to offer insights and address any questions you may have regarding the design of your mobile app and the SAP Fiori mobile design components. We are keen to learn about your specific use cases and welcome any suggestions you may have to enhance our mobile UX components.

What to Expect

• Walkthrough of your app and design challenge(s)
• UX guidance on UI components and design patterns
• Discussion about potential improvements to the app

Setup

• Location: Remote Microsoft Teams call
• Duration: 60-90 minutes
• Participation: By invite only

How to Register

If you want to schedule a UX Feedback Session for Mobile Apps, register here. We will reach out to you to provide further information.

In the SAP Fiori for Android & iOS Release Rollout, we present the latest UI additions and enhancements of the SAP BTP software development kits for Android & iOS.

Our lead UX designers and developers walk you through each change, explaining new or improved capabilities and providing a demo.
Based on the release schedule, up to four sessions are planned per calendar year.

What to Expect

• Presentation of release highlights including demos
• Demo of key improvements and new capabilities
• Q&A with lead designers and developers

Setup

• Location: Remote Microsoft Teams call
• Duration: 60-90 minutes
• Participation: By invite only

How to Register

If you want to get invited to our recurring release rollout sessions, register here.

Card layouts are structured containers that determine how cards are arranged and displayed in a user interface. These layouts control the placement, order, and visual presentation of cards, ensuring an aesthetically pleasing design. The layouts adjust to multiple devices, window size classes, and orientations, ensuring consistency across layouts.

Usage

A layout is used to group cards with similar content, ensuring a visually structured arrangement. The proper usage of a grid layout draws the user’s attention to the most important cards on a page, resulting in improved efficiency and higher quality.

Make sure that the layout is optimized for different window size classes to display the cards in the best way possible. Find more information in the staggered layout and carousel layout articles.

Anatomy

When designing card layouts for native apps, consider the following key factors that determine the horizontal width of the screen.

A. Columns

Content is organized into columns on the screen. This is where the cards are placed.
In responsive layouts, the column width is not defined by fixed values. This allows the content to adjust to any screen size. The number of columns displayed in the grid is determined by the breakpoints of window size classes, ranging from 4, 8, or 12 columns.

B. Gutters

A gutter is the space between columns that helps to visually separate content.
Gutter widths have predefined values at each breakpoint range. To enhance the content’s adaptability to a given screen size, gutter widths can change at different breakpoints.

C. Margins

Margins are the spaces between the content and the left and right edge of a window area. Margin widths are defined by specific values for each window size class and change at different breakpoints to better fit the screen size.

Behavior and Interaction

Scrolling

Cards can be scrolled vertically or horizontally, depending on the layout. You can also combine different layouts, for example, a carousel with cards and a list with cards below it.

Adaptive Design

The layouts are designed to be compatible with multiple devices. They change according to the window size class and automatically adjust the number of columns to ensure a visually appealing and user-friendly layout. Depending on the window size class, the card width and height adjust automatically, ensuring that the content remains fully visible.

If there is a navigation rail or navigation drawer, the number of columns decreases and adjusts to the remaining screen width.

Resources

SAP Fiori for Web: Cards (SAPUI5), Cards (Web Component)

Related Components/Patterns: Carousel Layout, Staggered Layout, Cards Overview

The rating control can be used in various contexts to provide insight regarding the opinions and preferences of an object.

Anatomy

A. Icon

The icons represent the average object rating value through several states: on, off, and half. The states of these icons depict a rating from a scale of one to five.

B. Counter/Label

The counter or label supplements the rating. It can be used to display the number of ratings, the exact rating value, and more.

Behavior and Interaction

The rating control is currently display-only.

Variations

Size

Small vs. Large

The rating control can be displayed in a small or large format depending on the fit to context.

Counter/Label

Without vs. With

The counter or label for the rating can be hidden as needed.

Color

Default vs. Accent

The accent color for the icons can provide a unique variation when needed.

Resources

Development: Rating Control, FioriRating

SAP Fiori for iOS: Rating Control

SAP Fiori for Web: Rating Indicator

The card body is the central part of the card that is used to display additional information alongside the content shown in the card header. By using the card body, several components from the SAP BTP SDK for Android can be integrated into a card, enabling the recreation of card types such as object cards, list cards, and many more.

Usage

While the card body is optional, it can be used for different use cases. To improve user comprehension, we recommend including additional details. Avoid using the card body for complex tasks; instead, provide additional functionality and detailed information on a subsequent details page that users can access by pressing the card.

To maintain compact card sizes, be mindful of not overcrowding the card body with too many components. Additionally, consider the following aspects when adding components to the body:

• Limit the number of components in the card body.
• Use components that are relevant to the context of the card.
• Only use components that are listed below in the Variations section or variants of components that have been adapted for cards.
• Make sure that the placement of the components within the card body is consistent throughout your app. For example, a KPI is placed in the body and centered aligned, other cards in your app should follow the same pattern.

• Don’t include any components in the card body that are not listed below.
• Don’t overcrowd the card body with too many elements.
• Don’t add additional components such as a status or tags to the card body. Use the card header for that.

Anatomy

The card body is a single container that can hold various components. The container is flexible in height to accommodate a reasonable number of UI components until the maximum height of the entire card is reached.

Variations

In addition to the SAP Fiori for Android components that can be added to the card body, the card system also offers variants. These variants are specifically tailored to seamlessly fit within a card. The reduced horizontal and vertical spacing of the variants compared to the default components, ensuring a concise card design.

You can include the following components in the card body: 

Existing Components

A. Avatar row 

B. Header

C. Key value cell

D. Status info label

E. KPIs

F. KPI progress view

G. Illustrated message

H. Calendar

Variants for Cards

A. Card Cell

The card cell component is a simplified version of the object cell, featuring a thumbnail, title, subtitle, footnote, and right accessories. There are a few variations for the right accessories such as a small KPI, status info label, two icon buttons, or a single button.

B. Divider/Spacing 

The divider can be placed between elements to better separate them visually or by hiding the divider a white space can be applied. 

C. Text

The text component can be used to add a short description on the card. The description should provide additional information related to the content. Keep the description short and precise to prevent it from wrapping into multiple lines.

D. Custom Composable

The custom composable allows custom components to be integrated into the body container. It provides flexibility in cases where the existing components included in the body do not support the use case. For example, a diagram or “live” map can be integrated.

E. Image

You can use an image in the card body to highlight information, such as an address of a hotel.

F. Data Table

The data table provides a title for each of the two available columns. You can have up to three entries. To accommodate various use cases, you can configure entries to adjust the text color, icon, and placement of an icon. You can choose to display a divider below the table, along with a text indicating that there are more items in the data set.

Behavior and Interaction

States

Use a suitable illustrated message to communicate different states.

For example, when there is no relevant content or data to be displayed in the body, include an empty state indicator. This indicator serves as an informational message for users, notifying them that there is currently no information or data available, or that new data or information needs to be generated.

Resources

Development: Card System, Card Cell

SAP Fiori for iOS: Card Body

SAP Fiori for Web: Card Content

Related Components/Patterns: Cards Overview, Card Header, Card Footer

The step progress indicator is a progress indicator for tracking and displaying a user’s state in a user flow. It allows the user to navigate to another step in both the horizontal view and the vertical “All Steps” view.

A step can be displayed as either a regular step or a dynamic step.  

Usage

Anatomy

Horizontal View

A. Current Step Name (Optional) 

Name of the selected step. Show the current step name in the header if no step names are displayed under the step nodes. 

B. “All Steps” Button (Optional)

The “All Steps” button shows the total number of steps and directs users to an overview page of the steps. Show the “All Steps” button when the flow is long.

C. Step Node

The step node is a numeric circle that indicates the sequence of the flow. It also indicates the state of the step. You can also use letters or other simples to replace the number.

D. Line

A line is used to connect the nodes. Don’t use a line after the last node.

E. Step Name (Optional)

The step name of each step is shown below the step node. Only show step names when the header of the current step name is disabled.

Vertical View

A. Step Node

The step node is a numeric circle that indicates the sequence of the flow. It also indicates the state of the step. You can also use letters or other simples to replace the number.

B. Line

A line is used to connect the nodes. Don’t use a line after the last node. In the vertical view, the length of the line is dependent on the step name text.

C. Step Name

The step name of each step is shown next to the step node. In the vertical view, show the full text of the step name.

Behavior and Interaction

Text Wrapping

In the horizontal view, a step name allows truncation. In a vertical view, a step name allows text wrapping to show the full text. Always try to be concise for the names. Otherwise, it may distract users when they are focusing on the task on the screen.

The current step name truncates after one line. Full text is available in “All Steps” view.

A step name can wrap up to two lines. Adjust the width of the line to allow more space for the text. If any step name is longer than two lines, use the “All Steps” button to allow users to view the full text

Value States

Default

Idle state of an enabled step.

Active

Selected state of a step.

Complete

Triggered when required actions are complete and users have navigated to another step.

Error

Triggered when users already navigated to another step but required actions of this step are incomplete.

Error Active

Triggered when users tap on a step that has incomplete required actions.

Read-Only

A read-only step is a step that is not tappable.

Navigation and Interaction

Tap on the Node

When users tap on a step indicator node, they are navigated to this specific step.

If the step is already on the screen, the step node stays without moving.

If the user scrolls to tap a step beyond what was on the screen, the selected step is displayed as the first step in the indicator.

View All Steps

Users can tap on the “All Steps” button to view all steps vertically on a new screen.

If the user taps on a step from the “All Steps” list, they are navigated to the selected step. The selected step is displayed as the first step in the indicator.

Scrolling

Users can press and scroll left or right on the step progress indicator to view steps that are outside the screen. The indicator automatically comes back to the active step when users tap anywhere on the screen.

Variations

Dynamic Steps

Dynamic steps are used to indicate a sub-step or an indeterminate step. Same as regular steps, dynamic steps also have different value states: default, active, error, error active, and read-only.

Adaptive Design

A step progress indicator can adapt to both mobile and tablet sizes. For the tablet version, the horizontal step progress bar can have broader width for each step than the mobile version, and the “All Steps” view is displayed in a dialog window.

Resources

Development: StepperProgress

SAP Fiori for iOS: Step Progress Indicator

SAP Fiori for Web: Wizard Floorplan

Related Components/Patterns: Header, Persistent Footer, Dialog

A circular progress indicator is a visual element that displays the status of ongoing processes, such as logging in, uploading files, or refreshing content in a circular shape. It typically consists of a circular track and a moving indicator that fills up the track as the progress increases.

Usage

Anatomy 

Behavior and Interaction 

Variations 

Checkout Use Cases

Checkout use cases are processing states triggered by user actions. During a checkout process, any user action on the affected content is not encouraged; it may interrupt the process. Use only the indeterminate variant in these cases. A checkout use case can be one of the following types:

Resources

Development: FioriCircularProgressIndicator

SAP Fiori for iOS: Feedback Indicators

Material Design: Progress Indicator

A linear progress indicator visually represents the status of ongoing processes, such as logging in, uploading files, or refreshing content by animating an indicator along a fixed track. It communicates the state of an app and indicates available actions, such as whether users can navigate away from the current screen.  

Usage

Anatomy 

Behavior and Interaction 

Variations 

Resources

Development: FioriLinearProgressIndicator, FioriProgressBar

SAP Fiori for iOS: Linear Progress Indicator

Material Design: Progress Indicator

A contact cell, commonly found in an object detail, gives quick access to the various methods of communicating with a contact. A contact cell consists of an image, labels (headline, subheadline), description, and contact actions.

Anatomy

A. Detail Image (Optional)

A rounded frame that displays an image of a contact. If no image is available, an initial is displayed.

B. Headline

Used for the name of the contact.

C. Subheadline (Optional)

Can be used to add further information about the contact, such as a job role.

D. Actions

You can set four different actions – calling, video calling, messaging, and emailing.

On phones, there is a maximum of three actions, on tablets, a maximum of four.

Behavior and Interaction

Contact Cell

Tapping on the contact cell itself navigates the user to the profile detail screen of the contact.

Call Action

Tapping on the call icon triggers an alert prompting the user to confirm whether they want to make the call.

Video Action

Tapping on the video icon triggers an alert prompting the user to confirm whether they want to make the video call.

Message Action

Tapping on the message icon triggers a modal where the message can immediately be drafted and sent.

Email Action

Tapping on the email icon triggers a modal where the email can immediately be drafted and sent.

Adaptive Design

The contact cell is supported on both phone and tablet devices. The width of the name and title container is flexible and can be set by you.

You can use up to four actions, however, if four actions are used, a profile image can’t be used.

Resources

Development: ContactCell

SAP Fiori for iOS: Contact Cell

Related Components/Patterns: Object Cell

This Figma Design Kit contains SAP Fiori for Wear OS UI components, patterns, page types, and fundamental elements such as colors or typography. It helps accelerate design and development processes and encourages consistency across SAP applications.

Download the Roboto font here.

Download Material Design Icons here.

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

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 AR scanner is a quick way to initiate augmented reality experiences, detecting an image through a device’s live camera. It ensures that the AR image can be accurately placed using the scanned item as a location anchor.

Usage

Anatomy

Behavior and Interaction

Resources