Panel

The panel is a container for grouping and displaying information to the user.

Panel

Usage

These are some best practices when using the panel foundation with the digital assistant.

Dos

Do use panel to create a seamless conversational experience. You can nest chat elements in the panel.
Do use the floating panel to give users more space on the screen to multitask.

Don’ts

Don’t put conversational elements outside of a panel.
Don’t use floating panel if the user’s main action is to engage with the conversation.

Structure

The panel groups and displays information to the user. It includes a header, conversation stream, and footer.

A. Header

The header includes control actions for the entire panel.

B. Conversation Stream

The digital assistant uses the conversation stream to log and interact with the user. Most of the conversational components display in this area.

C. Footer

The user inputs a request in the footer. Most interactions between user and digital assistant such as text and voice input begin here.

Panel Structure

Specifications

These visual design specifications apply to the panel style and spacing.

Panel Multitask Mode Example

Multitask Panel Specifications

Panel Header Example

Panel Header Specifications

Panel Footer Example

Panel Footer Specifications

Colors

These color specifications apply to the panel component.

The static menu gives users easy access to content and actions when interacting with the digital assistant. The menu items can include links or postbacks. You can use the static menu to help users or give users access to common actions and messages.

Static Menu

Usage

Dos

Do use it for only the core functions.
Do present the same menu for every user.
Do use language that is descriptive but still concise. The user should be able to clearly understand what function each menu item will perform.

Don’ts

Don’t overflow the menu with too many options. Keep a maximum of 6 items.
Don’t customize the menu for each user.

Structure

These visual design specifications apply to static menus.

A. Static Menu Button

The static menu component follows the Fiori Menu component. The menu button opens the static menu. The static menu button is sap-icon://chain-link.

B. Menu

The menu shows a list of actions in a hierarchical format.

C. Nested Menu

The nested menu component follows Fiori Menu component design. The nested menu shows a sub-menu with a list of actions.

For a link: use the chain-link icon (sap-icon://chain-link).
For an entry or action: use the post icon (sap- icon://post)

Static Menu Structure

Specifications

These specifications apply to the static menu.

Static Menu Button

Static Menu

Nested Menu

Nested Menu Specifications

Colors

These color specifications apply to the static menu.

Color Specifications for Static Menu

Menu Selection

The menu selection component includes a list of options that users can select to help them complete an action. These actions let users to give a specific answer to the digital assistant from a list of preset options.

Menu Selection in Digital Assistant

Usage

Dos

Do use menu selection to identify the framework of the task.

Don’ts

Don’t use quick reply buttons to display actions specific to slot filling.

Identify Tasks

Quick Reply

Structure

The menu selection component can display up to five relevant options to avoid a long list of options.

A. Header Text

The header text includes a response from the digital assistant and introduces the user to the menu options.

B. List Item

The list item displays options that the user can select.

C. “View More” Button

The “View More” button lets the user to expand the menu and see additional options.

Menu Selection Structure

Behavior and Interaction

Users can select one of the options in the menu selection component. After the user selects an option from the menu selection, slot filling starts can begin. When the user selects an option, that option disappears and a a text message displays. After the user dismisses the menu selection, no additional navigation is available.

Menu Selection User Selects An Option

In the menu selection, it’s best to keep the text in the list items fairly short and to-the-point. If the text is too long, the text can wrap.

Text Wrapping

The menu selection displays up to five options. If there are more than five options, the “View More” button displays. The user can select “View More” to expand the view for up to ten options.

View More Menu Items

(Optional) If you need to give the user with more than ten options (not recommended), you can use a selection page with search functionality.

Search Function

Specifications

These visual design specifications apply to menu selection style and spacing.

Menu Selection Style

Colors

These color specifications apply to the menu selection component.

Menu Selection Colors

Mockup

Quick Reply

Quick reply buttons in the digital assistant let users continue the interaction and select the next steps related to the their primary request. The buttons help users discover actions that are relevant to the request.

Quick Reply

Usage

These are some best practices when using Quick Reply in the digital assistant.

Dos

Do keep labels concise, straightforward, and under 30 characters.

Don’ts

Don’t use labels to negate an action, such as “Add to my calendar and “No, don’t add it”. Give users easy actions to select.

Do Use Actions

Quick Reply: Don't Use Negating Buttons

Structure

Quick reply must include a header. Content and footers are optional. Here are some best practices for the quick reply structure.

A. Header Text

The header text includes a response from the digital assistant and introduces users to the quick reply buttons.

B. Quick Reply Button

The quick reply buttons give users suggestions for how to interact and respond to the digital assistant.

C. Horizontal Scroll Button

The horizontal scroll button can be left or right arrows. If you have more quick reply buttons that extend beyond the digital assistant area, the horizontal scroll helps users scroll through the options.

D. “See All” Button

The “See All” button lets users see all the quick reply buttons at one time. You can include up to 11 buttons at a time.

Quick Reply Structure

Placement

You can put quick reply buttons under a response or under a card. Don’t put these actions inside a card. For actions that need to be inside the card, use standard buttons instead.

Quick Reply Buttons Under Response

Quick Reply Buttons Under Card

Behavior & Interaction

Horizontal scroll and “See All” buttons only display if the total width of the quick reply buttons is larger than the width of the content area. The user can scroll horizontally to explore more buttons.

The user can select the horizontal scroll buttons to move through the quick reply options.

Quick Reply Horizontal Scroll Buttons

The “See All” button helps the user access and find buttons easily. When the user selects the “See All” button, up to 11 buttons display and fit into the content area.

User Clicks See All Button

When the user selects the quick reply button, the request is sent and all buttons disappear.

User Clicks Reply Button

Specifications

These visual design specifications apply to the quick reply component.

Quick Reply Example

Quick Reply Specifications

Quick Reply Buttons

Quick Reply Button Specifications

Colors

These color specifications apply to the quick reply component.

Mockup

Media Card

Media card displays enriched message content. It is similar to Object Cards. The media content can be an image or video.

Media Card

Usage

These are some best practices when using the media card with the digital assistant.

Dos

Do use media card to enhance the message content and convey the information better to users.

Don’ts

Don’t use images or video that aren’t related to the message.

Structure

The media card can contain text, image/video, and action buttons. All media cards must have a header. Content and Footer are optional. Content and Header can be switched.

A. Header

The header displays a title and introduces the media card. The header content is similar to the Object Card.

B. Content (Optional)

The content on the media card can contain an image or video.

C. Footer (Optional)

The footer includes action buttons the user can select for the media card. The footer content is similar to the Object Card.

Media Card Structure

Header

A. Title

The title introduces the header.

B. Icon (Optional)

The icon gives a visual reference for the header.

C. Subtitle (Optional)

The subtitle gives the details of the header.

D. Status (Optional)

The status shows the current stage the media card is in. Statuses can also be replaced with buttons.

Content (Optional)

The media card content can have an image or video.

Media Card Content

Footer (Optional)

The footer contains action buttons that the user can select for the media card. A Media Card can contain up to three actions.

Footer

Variations

Size

You can have two media card variations depending on the screen size and device: 4-column and 8-column that follows the structure of Responsive Grids.

Here are the recommendations for the media card content area.

4-column cards:

Maximum height 10rem (160px)
Minimum height is 2.75rem (44px).

8-column cards:

Maximum height is 20rem (320px)
Minimum height is 2.75rem (44px)

Header and Content Switch

The header and content can switch places with each other.

Image Ratio

When the image width and height ratio is smaller or larger than the ratio of the media content area, the image fills the space and keeps the correct proportions.

Variation: Image Ratio

Specifications

These visual design specifications apply to the media card style and spacing.

Header

The examples show the specifications for the header in the media card.

Header Example for Media Card

Header Specifications for Media Card

Footer

The examples show the specifications for the footer in the media card.

Footer Example for Media Card

Footer Specifications for Media Card

Colors

These color specifications apply to the media card.

Color Specifications for Media Card

Mockup

Text Message

The text message is a primary user interface component for the user to interact with the digital assistant. The text area displays requests from the user and responses from the digital assistant.

Text Message

Usage

These are some best practices when using text messages in the digital assistant.

Dos

Follow the guidelines for creating appropriate messages.
Match the user’s request (utterance) to the corresponding digital assistant’s intent.

Don’ts

Don’t use this the text message if you have a hierarchyin the digital assistant’s response. Instead, use the Formatted Text component for this purpose.

Structure

Text messages in the conversation stream are:

messages from the user.
messages from the digital assistant.

A. Messages from the User

The blue chat bubble represents the user user’s request or response. The user can type in text or use voice input. The user can delete their message from the conversation stream.

B. Messages from the Digital Assistant

The message from digital assistant is generated from artificial intelligence. The digital assistant’s message is based on the current context and the user’s request.

Text Message from User and Digital Assistant

Behavior and Interactions

These are best practices for a text message in the digital assistant.

Error Handling

When there is a problem and the user is disconnected from the digital assistant, a message displays to let the user know there is a connection problem. There are two types of errors:

a connection error.
a fail to send error.

Connection Error

A connection error happens when the digital assistant client fails to reach the server. When this happens, the digital assistant:

“Reconnecting”: displays this message while it tries to reconnect to the server. During this time, the user can’t interact with the digital assistant.
“Failed to reconnect Try again”: displays this message if it can’t reconnect.

Digital Assistant Tries to Reconnect to Server

Digital Assistant Can't Reconnect to Server

Fail to Send Error

Fail to Send happens when a user sent a message but the system could not receive or process the message for some reason. In this case, the message rebounds and the user gets the option to resend it.

User's Message Can't be Sent

Delete Message

When the user hovers over one of their text messages, the user can delete their message to the digital assistant. The deleted message is deleted from conversation stream.

User Deletes Message

Specifications

These specifications apply to the text message.

Text Message Width

Text message width is proportional to the panel width and it can expand until it reaches the maximum width of (current panel width – layout margin*2)*0.75.

Text Message Specifications

Spacing

Text message is considered as one individual component, which means that there is the same amount of spacing between each text message.

A. Padding and margin between text messages

This is the padding and margin between the text messages. Follow the message guidlelines for Fiori 3.

Padding and Margin Between Text Messages

B. Padding between system message and card

This padding between a system message and any kind of card (media card, carousel, object card, etc.) is 0.75 rem.

Padding Between System Message and Card

Colors

These color specifications apply to the text message.

Color Specifications for Message Text

Object Card

Object cards add more information to the conversation. Object cards have flexible structure to meet the needs for a variety of use cases. The object card lets users take action or go to SAP Fiori for the information source.

Object Card

Usage

Dos

Do use the card content to summarize the object.
Do use statuses to highlight progress, importance, and numerical scores. Use semantic colors to represent positive, negative, and urgent information.
Do present relevant information and prioritize the information in the list by level of importance.

Don’ts

Don’t overwhelm the user with too much content. Present relevant information and keep it concise.

Structure

The object card can include text, images, and action buttons. All object cards must have a title. Other optional features are subtitle, footnote, description, status, and action button.

A. Header

The header displays a title and introduces the object card.

B. Content (Optional)

The object card content is flexible. You can use different combinations of object details, maps, images, and more.

C. Footer (Optional)

The footer includes action buttons that users can select to perform an action. An object card can have up to three actions.

Object Card Structure

Header

The header displays a title and introduces the object card.

A. Title

The title introduces the header.

B. Icon (Optional)

The icon gives a visual reference for the header.

C. Subtitle (Optional)

The subtitle gives more details for the header.

D. Description (Optional)

The description gives details for the header. The description can only be implemented on an eight-column card (medium- and large-size screens).

E. Status (Optional)

The status indicates the current stage of the object card. Status can also be replaced with buttons.

Object Card Header

Content (Optional)

You can build content with several combinations of object details, maps, images, etc. If you are using object detail, it includes a set of attributes, as explained below.

A. Section Title

The section title introduces the content area.

B. Label

The label describes an item in the object detail.

C. Value

The value can include text or a link. The value gives information about the label.

Object Card Content

Footer (Optional)

The footer includes action buttons that the user can select. Quick actions let the user select a response to the displayed information. An object card can include up to three actions.

Object Card Footer

Behavior & Interaction

After the user selects a buttons on the object card, the button doesn’t display any more.

User Selects Button

Specifications

These visual design specifications apply to the object card style and spacing.

Header

Here are some examples and specifications for a floating panel in an object card header.

Floating Panel for Object Card Header

Floating Panel Specifications for Object Card Header

Content Area

Here are some examples and specifications for a floating panel in object card content.

Floating Panel for Object Card Content

Floating Panel Specifications for Object Card Content

Footer

Here are some examples and specifications for a floating panel in the object card footer.

Floating Panel for Object Card Footer

Floating Panel Specifications for Object Card Footer

Colors

These color specifications apply to the object card component.

Colors for Object Card

Mockup

List Card

The list card shows a set of items or links in a list format. List cards are useful in conversational design to show links, action buttons, graphical text, and more. The user can view and share content, take actions, from the list card. It has a flexible structure to meet the needs for all kinds of use cases.

List Card

Usage

These are some best practices when using list cards with the digital assistant.

Do’s

Do keep list items relevant to the topic. List items can display more options or information for context.
Do keep titles consistent with list items.
Do keep image usage consistent. List items will either all have an image or no image. Use a blank container with one of the Fiori accent colors in the case there is no applicable image.
Do present relevant information and prioritize it accordingly in the list items, by level of importance from top to bottom.

Don’ts

Don’t overwhelm users with too much content. Show only the most relevant information and keep it concise.

Structure

List cards follow the structure of a header, content, and footer. By default, the list card displays three items. If you have more items, “View More” displays in the footer bar. The user can select “View More” to see up to three more items (six total items). These are some best practices for the list card layout.

A. Header

The header displays a title to introduce the collection of list items and a filter bar.

B. Content

The content of the list card consists of the list items.

C. Footer

The footer redirects the user to further actions beyond the displayed list items.

List Items Structure

Header

The header includes some or all of the following.

A. Title

The title to introduce the header.

B. Icon (optional)

The icon gives a visual reference to the header.

C. Counter (Optional)

The counter indicates the number of list items currently shown in the list card.

D. Subtitle (Optional)

The subtitle provides further details of the header. This will truncate once it reaches the maximum of two lines.

Header Content

Content

The content includes some or all of the following.

A. Title

The title introduces the list item. This will truncate once it reaches the maximum of two lines.

B. Icon (Optional)

The icon provides a visual reference for the list item.

C. Status (Optional)

The status shows the current state of the list item. This will truncate once it reaches the maximum of three lines. The status can also be replaced with a Quick Reply or Menu Selection components.

D. Subtitle (Optional)

The subtitle provides further details of the list item. This will truncate once it reaches the maximum of two lines.

E. Footnote (Optional)

The footnote provides further details of the list item. This will truncate once it reaches the maximum of one line.

F. Description (Optional)

The description provides further details of the list item. This will truncate once it reaches the maximum of one line.

List Card Content

Footer

The footer includes some or all of the following.

A. “Open in App” Button (Optional)

The title introduces the list item. This will truncate once it reaches the maximum of two lines.

B. “View More” Button

The “View More” button appears when there are more than six items in the list. When the user selects “View More” the list expands to show up to three more items.

List Card Footer Content

Behavior and Interactions

These are best practices for a list card in a digital assistant.

The “View More” button appears when there are more than six items in the list. When the user selects “View More” the list expands to show up to three more items.

View More

Mockup

Image

Images are a powerful way to capture the user’s attention and to communicate your message. You can use the image component to integrate useful images into your digital assistant. An Image displays separately from text messages.

Image in Floating Panel

Usage

Here are some best practices when using the image component with the digital assistant.

Dos

Do show images to support or enhance the page content (for example, visual representations of designs, functions, or features).
Do show images in a gallery.

Don’ts

Don’t use to display standardized images for business-related content (such as products, parts, product and company logos, or ad campaign images).
Don’t use to display icons.
Don’t use to display images in a carousel. Use the carousel for multiple images.

Structure

The image is a standalone component that lets you add images to your digital assistant’s responses. An image can display with cozy or compact spacing in the digital assistant.

Compact Spacing

A. 1.5rem (24px)

Space before sectional timestamp.

B. 1rem (16px)

Spaces between components.

Cozy Spacing

A. 2rem (32px)

Space before sectional timestamp.

B. 1.5rem (24px)

Spaces between components.

Image Compact Spacing

Image Cozy Spacing

Behavior and Interactions

Images can display in various ways, depending on the image dimensions inside the digital assistant content area. There are three types of images:

images that are larger than the content boundary
images that are smaller than the content boundary
images that are too wide or too tall

Image Larger Than Boundary-Portait

Image Larger Than Boundary-Landscape

Image Smaller Than Boundary

Image is Too Tall

Image is Too Wide

Mockup

Carousel

The carousel lets users browse through a set of items and view one item at a time. The user can select navigation buttons to move to the next or previous item. The carousel is most useful when the items in the carousel are visually distinct and the user can see items side-by-side for comparison.

Carousel

Usage

These are some best practices when using the carousel with the digital assistant.

Dos

Show strong visual representations of the items in the carousel set.
Make sure the message before the carousel clearly tells the user what happens when the user selects an item.

Don’ts

Don’t use carousel if there is only one item in the set.
Don’t show items that are visually similar to each other.

Structure

These are some best practices for the carousel layout.

Main View Carousel

The carousel component includes content, action items, navigation buttons, and page indicators. Using buttons is optional. Refer to the image to the right for each part of the carousel layout below.

A. Content

The content includes all the items in the set to display in the carousel. Each item is shown as a Media Card.

B. Action List Items

You can attach List Card items to the content to let users to perform actions in the carousel. You can list up to three items in the list.

C. Navigation Buttons

Navigation buttons let the user move forward and back through the items in the carousel. The back button is on the left of the carousel and the forward button is on the right. The navigation buttons can display inside the page indicators or inside the content.

D. Page Indicators

The page Indicators show the total number of pages (items) in the carousel and the current page in the set that the user is on. Page indicators display either above or below the content.

Carouse Layout

A. Image

Image is center-aligned and scaled to display the full image within the following constraints:

Max height: 200 px
Max width: 416 px

Empty space is filled with background color: HEX #FFFFFF

B. Header

Header consists of a title and subtitle corresponding with the information in the main view Carousel.

C. Section

The section consists of a maximum of 8 value-pairs (Label Title + Content). Display as 2-columns if there’s 1 line of content. Use a 1-column display if there’s more than 1 line of content.

2-column value-pairs are always displayed above 1-column value-pairs.

D. Value-Pair

A value-pair consists of a Label Title + Content.

In 1-column display, the value-pair content is constrained to a maximum of 250 characters. Truncate after 250 characters using ellipses.

If there is truncated content, the primary action button is “Open in App,” which will allow the user to see the full content.

E. Action List Items

Actions available in the Carousel should be available in the Detail Page as action list items, with a maximum of 3 actions.

Detail Page Structure

Behavior and Interactions

The carousel in a digital assistant user interface for the web follows the Fiori 3 carousel specifications.

Navigation Button

The user moves through carousel items using the navigation buttons (right and left icons). The navigation button changes on hover, while pressing, and on select. The navigation button can display on top of or to the side of each item in the carousel. In addition, paging indicators let the user know where they are in the carousel items.

Navigation Button Behavior

Action Items List

All the items of the list are clickable buttons. When the user selects an item, the action is performed and a message displays.

Action Items List

Content

When the user hovers over the content, a light shadow displays below the card to let the user know it is clickable. When the user selects content in the carousel, a new view model opens displaying more details.

Carousel Content

Detail Page

When the user selects (clicks on) the content, the detail page opens in the panel. The carousel displays up to 3 actions on the carousel. These are also available in the detailed page as action list buttons.

Detail Page

Specifications

Carousel

These visual design specifications apply to the carousel style and spacing.

Carousel Specifications

Navigation Buttons

The navigation button style depends on if the buttons display within the page indicators or over the content. Navigation buttons over the content have a shadow that page Indicators don’t have.

Navigation Button Below Item

Navigation Button On Item

Paging Indicator: Icons

The paging indicator tells the user where they are in the carousel. The current position inside the set of items is displayed using an optional paging indicator (dots).

Page Indicator: Icon

Paging Indicator: Count

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Page Indicator: Count

Action List Item

Follow the specifications for Action List Item in the Fiori Design Guidelines, if the actions are attached to the content. Apply the cozy conversation specification for actions.

Action List Item

Detail Page

There’s a padding of 16 px (1 rem) between the end of the detail page content and the action items list. If the list covers content, the content is scrollable and there’s a gradient overlaying the content above the action items list.

Colors

These colors are the standard theme to use for the carousel.

Mockup

Analytics Card

Analytics Card is a representation of data visualization content. An Analytics Card is used for brief exposure to data for simple queries while also providing users with a quick link to deeper level analytics in the originating apps.

Structure

Fiori CUX supports two types of Analytics Card: Chart Card and Metric Card.
Chart Card consists of the followings: Header, Content Summary, Content, and Footer. Metrics Card consists of the followings: Title, Subtitle, Metric, and Subtitle 2.

Chart Card

A. Header

Header Area is a simplified version of Object Card Header. It only contains the title and subtitle.

The title ideally should address or summarize the user’s query utterance.
For example: if a user asked “How much did each plant spend in total for Q1?,” the title may be formatted with groups and measures (“Total Spend ($) by Plant”), followed by a subtitle that includes filters or dimensions (“in Q1, 2021”).

B. Content Summary

The Content Summary contains several sets of data that can be represented by supported chart types: bar, line, combo, pie, and donut. Generally, these charts should only show a limited amount of data points.

C. Content

The Content contains the visual representation of the chart data, including the chart items (for example, bars, columns, lines, and so on), x- and y-axes with titles and axis labels, and grid lines. The legend is optional.

C. Footer

By clicking “Open in App”, the user is taken to the originating app where they can view the content/query.

Chart Card

Metric Card

A. Title

Similar to the title in Chart Card’s header, the title ideally should address or summarize the user’s query utterance.

B. Subtitle

This can be used similarly to Chart Card’s subtitle but also as an update timestamp or status. Interchangeable with subtitle 2.

C. Metric

The Metric should be a numerical value paired with a clarifying unit.

D. Subtitle 2

See Subtitle.

Metric Card

Variations

Analytics Card includes both Metric Card and Chart Card. Depending on the type and the purpose of the data, it is important to choose the appropriate chart variation. Fiori CUX supports 6 chart variations.

Behavior & Interaction

Select & Deselect

Clicking on the content area in a specific chart/graph element like a bar or a slice will select said element, and the content summary will change accordingly to highlight the details.

Another click on the same selected element or within the content area but not a chart or graph element will deselect the selected element and return content area to the default state.

Select & Deselect (Donut & Pie Chart)

Unlike the bar chart, user can select multiple elements on the donut or pie chart. A click on another element will highlight the content summary, changing the Total Amount. A second click on the same selected element will deselect it, whereas a click within the content area but not a chart element will deselect all the selected elements.

View More

By clicking “Open in App” or “More”, it opens the content/query in another or main app.

Object Card

Object cards add more information to the conversation. Object cards have flexible structure to meet the needs for a variety of use cases. The object card lets users take action or go to SAP Fiori for the information source.

Object Card

Usage

Dos

Do use the card content to summarize the object.
Do use statuses to highlight progress, importance, and numerical scores. Use semantic colors to represent positive, negative, and urgent information.
Do present relevant information and prioritize the information in the list by level of importance.

Don’ts

Don’t overwhelm the user with too much content. Present relevant information and keep it concise.

Structure

The object card can include text, images, and action buttons. All object cards must have a title. Other optional features are subtitle, footnote, description, status, and action button.

A. Header

The header displays a title and introduces the object card.

B. Content (Optional)

The object card content is flexible. You can use different combinations of object details, maps, images, and more.

C. Footer (Optional)

The footer includes action buttons that users can select to perform an action. An object card can have up to three actions.

Object Card Structure

Header

A. Title

The title introduces the header.

B. Icon (Optional)

The icon gives a visual reference for the header.

C. Subtitle (Optional)

The subtitle gives more details for the header.

D. Description (Optional)

The description gives details for the header. The description can only be implemented on an eight-column card (medium- and large-size screens).

E. Status (Optional)

The status indicates the current stage of the object card. Statuse can also be replaced with buttons.

Object Card Header

Content (Optional)

You can build content with several combinations of object details, maps, images, etc. If you are using object detail, it includes a set of attributes, as explained below.

A. Section Title

The section title introduces the content area.

B. Label

The label describes an item in the object detail.

C. Value

The value can include text or a link. The value gives information about the label.

Object Card Content

Footer (Optional)

The footer includes action buttons that the user can select. Quick actions let the user select a response to the displayed information. An object card can include up to three actions.

Object Card Footer

Variations

Details (Optional)

Object card details show an overview of an object with one or more attributes. When the user selects the object information, the card detail displays and can include links to more details. The card is responsive and supports all SAP Fiori screen sizes. Depending on the view, the card adjusts to a narrower or wider length with several columns. See more information on object detail details in the Specifications section.

Object Card Details

Header

The object card header can adjusts to various screen sizes and devices users have. The object card header displays with different variations.

For card headers with a single line title and subtitle, the text is center aligned vertically when the image is taller than the text content area (Image 1, 3, 6 to the right).
For card headers with multiple lines of title and subtitle, the text is top aligned vertically when the text content area is taller than the image (Image 2, 4, 5 to the right).

Object Card Header Variations

Content Area

Object card content can adjust to the variety of screen sizes and devices.

Small screens (floating panel): content area fits in a 4-column card (image 1 to the right).
Medium and large screens (full size): content area fits in an 8-column card. The text wraps to form another column (image 2 to the right).

Object Card Content Area

Footer

The object card footer can adjust to the variety of screen sizes and devices. Spacing between buttons changes based on the device (compact vs. cozy).

Small screens (floating panel): footer has a stacked button layout (image 1, 2 to the right).
Medium and large screens (full size): footer has a side-by-side button layout (image 3, 4 to the right).

Object Card Footer

Behavior & Interaction

After the user selects a buttons on the object card, the button doesn’t display any more.

User Selects Button

Specifications

These visual design specifications apply to the object card style and spacing.

Header

Floating Panel

Here are some examples and specifications for a floating panel in an object card header.

Floating Panel for Object Card Header

Floating Panel Specifications for Object Card Header

Full Screen

Here are some examples and specifications for a full screen in an object card header.

Full Screen for Object Card Header

Full Screen Specifications for Object Card Header

Content Area

Floating Panel

Here are some examples and specifications for a floating panel in object card content.

Floating Panel for Object Card Content

Floating Panel Specifications for Object Card Content

Full Screen

Here are some examples and specifications for a full screen in object card content.

Full Screen for Object Card Content

Full Screen Specifications for Object Card Content

Footer

Floating Panel

Here are some examples and specifications for a floating panel in the object card footer.

Floating Panel for Object Card Footer

Floating Panel Specifications for Object Card Footer

Full Screen

Here are some examples and specifications for a full screen panel in the object card footer.

Full Screen for Object Card Footer

Full Screen Specifications for Object Card Footer

Colors

Colors for Object Card

Media Card

Media card displays enriched message content. It is similar to Object Cards. The media content can be an image or video.

Media Card

Usage

These are some best practices when using the media card with the digital assistant.

Dos

Do use media card to enhance the message content and convey the information better to users.

Don’ts

Don’t use images or video that aren’t related to the message.

Structure

The media card can contain text, image/video, and action buttons. All media cards must have a header. Content and Footer are optional. Content and Header can be switched.

A. Header

The header displays a title and introduces the media card. The header content is similar to the Object Card.

B. Content (Optional)

The content on the media card can contain an image or video.

C. Footer (Optional)

The footer includes action buttons the user can select for the media card. The footer content is similar to the Object Card.

Media Card Structure

Header

A. Title

The title introduces the header.

B. Icon (Optional)

The icon gives a visual reference for the header.

C. Subtitle (Optional)

The subtitle gives the details of the header.

D. Status (Optional)

The status shows the current stage the media card is in. Statuses can also be replaced with buttons.

Content (Optional)

The media card content can have an image or video.

Media Card Content

Footer (Optional)

The footer contains action buttons that the user can select for the media card. A Media Card can contain up to three actions.

Footer

Variations

Size

You can have two media card variations depending on the screen size and device: 4-column and 8-column that follows the structure of Responsive Grids.

Here are the recommendations for the media card content area.

4-column cards:

Maximum height 10rem (160px)
Minimum height is 2.75rem (44px).

8-column cards:

Maximum height is 20rem (320px)
Minimum height is 2.75rem (44px)

Header and Content Switch

The header and content can switch places with each other.

Image Ratio

When the image width and height ratio is smaller or larger than the ratio of the media content area, the image fills the space and keeps the correct proportions.

Variation: Image Ratio

Specifications

These visual design specifications apply to the media card style and spacing.

Header

The examples show the specifications for the header in the media card.

Header Example for Media Card

Header Specifications for Media Card

Footer

The examples show the specifications for the footer in the media card.

Footer Example for Media Card

Footer Specifications for Media Card

Colors

These color specifications apply to the media card.

Color Specifications for Media Card

Menu Selection

The menu selection component includes a list of options that users can select to help them complete an action. These actions let users to give a specific answer to the digital assistant from a list of preset options.

Menu Selection in Digital Assistant

Usage

Dos

Do use menu selection to identify the framework of the task.

Don’ts

Don’t use quick reply buttons to display actions specific to slot filling.

Identify Tasks

Quick Reply

Structure

The menu selection component can display up to five relevant options to avoid a long list of options.

A. Header Text

The header text includes a response from the digital assistant and introduces the user to the menu options.

B. List Item

The list item displays options that the user can select.

C. “View More” Button

The “View More” button lets the user to expand the menu and see additional options.

Menu Selection Structure

Behavior and Interaction

Users can select one of the options in the menu selection component. After the user selects an option from the menu selection, slot filling starts can begin. When the user selects an option, that option disappears and a a text message displays. After the user dismisses the menu selection, no additional navigation is available.

Menu Selection User Selects An Option

In the menu selection, it’s best to keep the text in the list items fairly short and to-the-point. If the text is too long, the text can wrap.

Text Wrapping

The menu selection displays up to five options. If there are more than five options, the “View More” button displays. The user can select “View More” to expand the view for up to ten options.

View More Menu Items

(Optional) If you need to give the user with more than ten options (not recommended), you can use a selection page with search functionality.

Search Function

Specifications

These visual design specifications apply to menu selection style and spacing.

Menu Selection Style

Menu Selection Spacing

Menu Selection Style

Menu Selection Spacing

Colors

Menu Selection Colors

Quick Reply

Quick reply buttons in the digital asssistant let users continue the interaction and select the next steps related to the their primary request. The buttons help users discover actions that are relevant to the request.

Quick Reply

Usage

These are some best practices when using Quick Reply with the digital assistant.

Dos

Do keep labels concise, straightforward, and under 30 characters.

Don’ts

Don’t use labels to negate an action, such as “Add to my calendar and “No, don’t add it”. Give users easy actions to select.

Do Use Actions

Quick Reply: Don't Use Negating Buttons

Structure

Quick reply must include a header. Content and footers are optional. Here are some best practices for the quick reply structure.

A. Header Text

The header text includes a response from the digital assistant and introduces users to the quick reply buttons.

B. Quick Reply Button

The quick reply buttons gives users suggestions of how to interact and respond to the digital assistant.

C. Horizontal Scroll Button

The horizontal scroll button can be left or right arrows. If you have more quick reply buttons that extend beyond the digital assistant area, the horizontal scroll helps users scroll through the options.

D. “See All” Button

The “See All” button lets users see all the quick reply buttons at one time. You can include up to 11 buttons at a time.

Quick Reply Structure

Placement

You can put quick reply buttons under a response or under a card. Don’t put these actions inside a card. For actions that need to be inside the card, use standard buttons instead.

Quick Reply Buttons Under Response

Quick Reply Buttons Under Card

Behavior & Interaction

Horizontal scroll and “See All” buttons only display if the total width of the quick reply buttons is larger than the width of the content area. The user can scroll horizontally to explore more buttons.

The user can select the horizontal scroll buttons to move through the quick reply options.

Quick Reply Horizontal Scroll Buttons

The “See All” button helps the user access and find buttons easily. When the user selects the “See All” button, up to 11 buttons display and fit into the content area.

Quick Reply See All Button

When the user selects the “See All” button to expand the quick reply buttons, the “See All” and arrow buttons disappear.

Quick Reply User Selects See All

Specifications

These visual design specifications apply to the quick reply component.

Quick Reply Example

Quick Reply Specifications

Quick Reply Buttons

Quick Reply Button Specifications

Colors

These color specifications apply to the quick reply component.

List Card

Static Menu

The static menu gives users easy access to content and actions when interacting with the digital assistant. The menu items can include links or postbacks. You can use the static menu to help users or give users access to common actions and messages.

Static Menu

Usage

Dos

Do use it for only the core functions.
Do present the same menu for every user.
Do use language that is descriptive but still concise. The user should be able to clearly understand what function each menu item will perform.

Don’ts

Don’t overflow the menu with too many options. Keep a maximum of 6 items.
Don’t customize the menu for each user.

Structure

These visual design specifications apply to static menus.

A. Static Menu Button

The static menu component follows the Fiori Menu component. The menu button opens the static menu. The static menu button is sap-icon://chain-link.

B. Menu

The menu shows a list of actions in a hierarchical format.

C. Nested Menu

The nested menu component follows Fiori Menu component design. The nested menu shows a sub-menu with a list of actions.

For a link: use the chain-link icon (sap-icon://chain-link).
For an entry or action: use the post icon (sap- icon://post)

Static Menu Structure

Specifications

These specifications apply to the static menu.

Static Menu Button

Static Menu

Nested Menu

Nested Menu Specifications

Colors

These color specifications apply to the static menu.

Color Specifications for Static Menu

Image

Panel

The panel is a container for grouping and displaying information to the user.

Usage

These are some best practices when using the panel foundation with the digital assistant.

Dos

Do use panel to create a seamless conversational experience. You can nest chat elements in the panel.
Do use the floating panel to give users more space on the screen to multitask.
Do use the full-screen panel if the user’s main action is to engage with the conversation.

Don’ts

Don’t put conversational elements outside of a panel.
Don’t use floating panel if the user’s main action is to engage with the conversation.
Don’t use a full-screen panel if the user needs to multitask or engage with content outside the conversation.

Structure

The panel groups and displays informaiton to the user. It includes a header, conversation stream, and footer.

A. Header

The header includes control actions for the entire panel. The header has two control actions: a maximize/minimize button to switch from floating to full-screen size and a close button to close the panel.

B. Conversation Stream

The digital assistant uses the conversation stream to log and interact with the user. Most of the conversational components display in this area.

C. Footer

The user inputs a request in the footer. Most interactions between user and digital assistant such as text and voice-input begin here.

Panel Structure

Variations

There are several ways you integrate the digital assistant panel into the your target system.

Multitask Mode (Web Only)

Users can use multitask mode to access other information on the screen.

Users can minimize the digital assistant into a floating panel with the maximize/minimize button.
Then users can move the floating box around the screen to access other content in the application by dragging the panel from the header area.
Users can’t resize the the panel.
The maximize button switches the panel from multitask mode to full-screen mode.
Multitask mode (floating panel) is only available on web, but not on mobile.

Panel in Multitask Mode

Full-Screen Mode (Web and Mobile)

Users can use full-screen mode to complete tasks in the digital assistant area.

Users can complete tasks in the digital assistant area without having to navigate to and from other applications.
Users can select the maximize/minimize button to to switch from full-screen mode to multitask mode.
Full-screen mode is available on web and mobile.

Panel in Full-Screen Mode

Specifications

These visual design specifications apply to the panel style and spacing.

Panel Multitask Mode Example

Multitask Panel Specifications

Full-Screen Panel Example

Full-Screen Panel Specifications

Panel Header Example

Panel Header Specifications

Panel Footer Example

Panel Footer Specifications

Colors

Carousel

Carousel allows the user to browse through a set of items and view at least one item at a time. The user can navigate to the next or previous item by selecting paging indicators. Carousel is most helpful when the items within the set are visually distinct, as in images, and can be viewed side by side for comparison.

Floating Carousel

Full screen Carousel

Usage

Dos

Show strong visual representations of the items in the set.
Ensure that the message preceding the component clarifies to the user what happens when they select an item.

Don’ts

Don’t use if there is only one item in the set.
Don’t show items that are visually similar to each other.

Layout

Main View Carousel

The Carousel component is composed of content, page indicators, navigation and navigation buttons. Buttons are optional.

A. Content

The content includes all the items in the set to be displayed in the Carousel. Each item is shown as a Media Card.

B. Action List Items

Action List Items can be attached to the content, allowing users to trigger actions directly with Carousel.

C. Navigation Buttons

Navigation buttons allow the user to traverse the items in the Carousel by going forward or backward in the list. The backward button appears on the left of the Carousel, while the forward button appears on the right. The Navigation Buttons can appear either inside the Page Indicators or inside the Content.

D. Page Indicators

The Page Indicators show the total number of items in the Carousel and the current position in the set that the user is on. They appear either above or below the Content. Page Indicators that have 8 or less items appear as dots, with each one representing each item in the Carousel Content. Page Indicators with 9 or more items appear as just a number, showing which item is currently in view out of the total number of items.

Detail Page

The detail page contains more information about an item in the carousel. It consists of an image, header, a section, and action list buttons (if there are actions in the Carousel).

A. Image

Image is center-aligned and scaled to display the full image within the following constraints:

Max height: 200 px

Max width: 416 px

Empty space is filled with background color: HEX #FFFFFF

B. Header

Header consists of a title and subtitle corresponding with the information in the main view Carousel.

C. Section

The section consists of a maximum of 8 value-pairs (Label Title + Content). Display as 2-columns if there’s 1 line of content. Use a 1-column display if there’s more than 1 line of content.

2-column value-pairs are always displayed above 1-column value-pairs.

D. Value-Pair

A value-pair consists of a Label Title + Content.

In 1-column display, the value-pair content is constrained to a maximum of 250 characters. Truncate after 250 characters using ellipses.

If there is truncated content, the primary action button is “Open in App,” which will allow the user to see the full content.

E. Action List Items

Actions available in the Carousel should be available in the Detail Page as action list items, with a maximum of 3 actions.

F. Gradient

If the action items list buttons cover the content (i.e., there’s less than 1 rem padding between the end of the content and action items list), the content is scrollable. A gradient will overlay the content above the action items list to indicate that there’s more scrollable content.

Behavior and Interactions

Navigation Button

The Navigation Button changes on hover, while pressing, and on select.

Action Items List

All the items of the list are clickable buttons. Action will be performed immediately after clicking, after which a message will follow.

Content

Upon hovering the content, there will be a light shadow below the card indicating that it is clickable. Clicking Content of the carousel indicates clicking the entire carousel, after which a new view model will open showing more details.

Detail Page

Upon clicking the content, the detailed page opens in the panel. Any actions, up to a maximum of 3, that are available on the carousel (i.e., “Order”) are also available in the detailed page as action list buttons.

Specifications

The following visual design specifications apply to the Carousel style and spacing in a compact conversation stream.

The following visual design specifications apply to the Carousel style and spacing in a cozy conversation stream.

Detail Page

There’s a padding of 16 px (1 rem) between the end of the detail page content and the action items list. If the list covers content, the content is scrollable and there’s a gradient overlaying the content above the action items list.

Navigation Buttons

The appearance of the navigation buttons depends on whether it is placed in the Page Indicators or over the Content. As shown in the image, navigation buttons over the Content have the shallow which don’t exist in Page Indicators.

Action List Items

Apply specs for Action List Items if they are attached to the content. Note to apply the cozy mode specs for that.

Colors

Text Message

The text message is a primary user interface component for the user to interact with the digital assistant. The text area displays requests from the user and responses from the digital assistant.

Text Message in Light Theme

Text Message in Dark Theme

Usage

These are some best practices when using text messages in the digital assistant.

Dos

Follow the guidelines for creating appropriate messages.
Match the user’s request (utterance) to the corresponding digital assistant’s intent.

Don’ts

Don’t use this the text message if you have a hierarchyin the digital assistant’s response. Instead, use the Formatted Text component for this purpose.

Variations

Text messages in the conversation stream are: Messages from the User or from Messages from the Digital Assistant.

A. Messages from the User

The chat bubble represents the user user’s request or response. The user can type in text or use voice input. The user can delete their message from the conversation stream.

B. Messages from the Digital Assistant

The message from digital assistant is generated from artificial intelligence. The digital assistant’s message is based on the current context and the user’s request.

Text Message from User and Digital Assistant

Layout

Text Messages from the user are always on the on the right in a blue chat bubble. Text Messages from the digital assistant are usually on the left. The text content is left-aligned.

Text Message Layout

Behavior and Interactions

These are best practices for a text message in the digital assistant.

Error Handling

When there is a problem and the user is disconnected from the digital assistant, a message displays to let the user know there is a connection problem. There are two types of errors: a connection error and a fail to send error.

Connection Error

A connection error happens when the digital assistant client fails to reach the server. When this happens, the digital assistant:

“Reconnecting”: displays this message while it tries to reconnect to the server. During this time, the user can’t interact with the digital assistant.
“Failed to reconnect Try again”: displays this message if it can’t reconnect.

Digital Assistant Tries to Reconnect to Server

Digital Assistant Can't Reconnect to Server

Fail to Send Error

Fail to Send happens when a user sent a message but the system could not receive or process the message for some reason. In this case, the message will rebound, and an option to resend it will appear.

User's Message Can't be Sent

Delete Message

When the user hovers over one of their text messages, the user can delete their message to the digital assistant. The deleted message is deleted from conversation stream.

User Deletes Message

Specifications

These specifications apply to the text message.

Responsiveness

Text message width is proportional to the panel width and it can expand until it reaches the maximum width. The same rules apply to both user messages and system messages. These are the sizing specifications for screen sizes: