Quick Replies
Joule / Components / Quick Replies
Intro
Quick replies offer guided answers for users to select, streamlining interaction with Joule and expediting problem resolution.
Quick replies in compact Joule panel (left) and expanded Joule panel (right)
Usage
- Try to keep the number of characters (including spaces) in a quick reply under 20. Do not show over 32 characters (including spaces).
- Try to keep the number of quick replies under 6. Do not provide more than 11 quick replies.
- List the quick replies most likely to be tapped first.
Anatomy
A. Container
The container contains the quick reply text.
B. Text
The quick reply text displays expected user responses to Joule text messages.
Quick reply anatomy
Behavior and Interaction
Quick Reply Selection
- Tapping a quick reply displays a user text message containing the quick reply content.
- All quick replies in the group will disappear.
Interaction of quick reply selection
Quick Reply States
Quick replies have several states that provide visual feedback on a quick reply’s interaction.
A. Enabled State
Communicates a quick reply’s default state.
B. Hovered State
Indicates that the quick reply is a hover target when the cursor is over the quick reply.
C. Focused State
Indicates that the quick reply is focused when navigating with a keyboard.
D. Pressed State
Communicates that the quick reply has been pressed.
E. Disabled State
Discloses that the quick reply has been disabled.
Quick reply states
Adaptive Design
Max Width
- Quick replies truncate and do not wrap to maintain consistency in heights.
- Quick replies are limited to a maximum size of the group container width.
- Quick reply group containers are limited to a maximum size to ensure readability across devices.
Long quick replies in compact Joule panel (left) and expanded Joule panel (right)
Resources
Joule for iOS: Quick Replies
Joule for Web: Joule Web UI Kit Guidelines
Related Components/Patterns: Text Messages