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.

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.

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. Status can also be replaced with buttons.

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.

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.

Behavior & Interaction

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

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.

Content Area

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

Footer

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

Colors

These color specifications apply to the object card component.

Mockup

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

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.

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.

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.

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.

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.

Footer

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

Colors

These color specifications apply to the media card.

Mockup

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.

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.

Structure

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

B. List Item

C. “View More” Button

Behavior and Interaction

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.

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.

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

Specifications

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

Colors

These color specifications apply to the menu selection component.

Mockup

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.

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.

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.

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.

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.

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.

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

Specifications

These visual design specifications apply to the quick reply component.

Colors

These color specifications apply to the quick reply component.

Mockup

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.

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

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.

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.

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.

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.

Mockup

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

B. Menu

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

C. Nested Menu

Specifications

These specifications apply to the static menu.

Colors

These color specifications apply to the static menu.

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.

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.

Specifications

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

Colors

These color specifications apply to the panel component.

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.

Usage

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

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.

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.

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.

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.

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.

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.

Specifications

Carousel

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

Navigation Buttons

Paging Indicator: Icons

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.

Detail Page

Colors

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

Mockup

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.

Usage

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

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.

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.

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.

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.

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.

Colors

These color specifications apply to the text message.