Overview

AI Quick Replies are suggested actions that the AI may propose to the user as a quick way to answer predictable prompts. They are instrumental in enhancing user experience by reducing friction in communication, speeding up interactions, and providing a more user-friendly interface.

AI Quick Reply - Look and Feel

When to Use

2
AI Quick Reply - Dos.png
do
false
  • Provide choices that are clear and relevant
  • Display up to 5 quick replies
  • Keep the length of the quick reply short
  • Use clear and concise language
  • If possible use a verb
AI Quick Reply - Donts.png
dont
false
  • Avoid showing irrelevant replies
  • Avoid displaying disabled replies
  • Avoid redundant or repeating replies
  • Avoid Yes / No / OK / Done replies

Anatomy

Image
1
41.52; 55.28
Quick Reply Bar
The Quick Reply actions are displayed as buttons. When there is not enough space, the buttons wrap into a new line.

Interaction States

The Quick Reply buttons inherit the behavior and appearance of the Secondary buttons but have deviations in the color and shape to match the context of the AI Container better.

When crafting button labels, prioritize action-oriented verbs for clarity and user engagement. Keep labels concise, focusing on the intended outcome to enhance user understanding. Consistency, simplicity, and testing for clarity across various contexts are essential for creating compelling and user-friendly button labels.

Image
AI Quick Reply - Interaction States

See also:

BTP UI Text

UI Action Text
Forbidden Terms

Responsiveness

AI Quick Reply - Compact.png

AI Quick Reply - Desktop

AI Quick Reply - Cozy.png

AI Quick Reply - Mobile

On touch-enabled devices, the size of the quick reply buttons and the spacing between them grows for easier interaction.

Resources

Design

AI Quick Reply - Visual Design Specification

Code Samples

UI5 Demo Kit

Web Components

Fundamental Styles