Intro

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
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
Identify Tasks
Quick Reply
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
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
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
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
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
Search Function

Specifications

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

Menu Selection Style
Menu Selection Style

Colors

These color specifications apply to the menu selection component.

Menu Selection Colors
Menu Selection Colors

Mockup