Menu Selection

Intro

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

Menu selection on compact (left) and regular screen (right)

Usage

Do

  • List important or frequently used menu items first.
  • Group logically related items.
  • Consider menu length.

Don't

  • Don’t mix menu selection items without icons, with menu selection items with icons in one menu selection list.

Anatomy

A. Menu Selection Item

The menu selection item is a button from a list that the user can select.

B. Icon (Optional)

The icon visualizes the label associated with a menu selection item.

C. Label

The label describes the action that is triggered by the menu selection item. The label is mandatory.

Menu selection item anatomy

Behavior and Interaction

Tapping on a menu selection item sends out the chosen item as a user message. Unlike quick replies, the menu selection list remains visible to the user after a selection has been made. We recommend initially showing 3-5 items in the menu selection.

Tapping on a menu selection item

“View All” Button (Optional)

The Joule system allows up to 15 items in the menu selection. The “View All (#)” button is displayed under the menu selection list whenever there are more than 6 items in the initial list. Tapping the “View All (#)” button shows the remaining list items.

*# = total item counts in the menu selection.

Tapping on the “View All” button

Variations

Label Only

Menu selection items without icons and with labels only are used if not all menu items have a corresponding icon.

Menu selection items without icons

Icon and Label

Menu selection items with icons and labels are used if all menu items have a corresponding icon.

Menu selection items with icons

Resources

SAP Fiori for Android: Menu Selection