Layout
Joule / Foundation / Layout
Intro
The layout for Joule is designed to organize and present conversational elements in a clear and intuitive manner. This includes structuring messages, input fields, and interactive components to ensure smooth communication between the user and Joule. It aims to support quick comprehension of responses, easy navigation, and accessibility while maintaining a consistent and aesthetically pleasing appearance.
Horizontal Spacing
Panel Padding: 16dp
The padding between elements to the border of the Joule panel is 16dp.
Horizonal padding of 16dp for welcome screen (left) and conversational threads (right)
Vertical Spacing
Padding Between Different Groupings: 24dp
Within the Joule panel, there are three main groupings:
- Timestamp
- Content sent by the user
- Content created by Joule.
The spacing between these different groupings is 24dp.
Vertical padding of 24dp between the timestamp and the content sent by the user as well as between user-created content and content created by Joule
Padding Within Same Grouping
Padding Between Two User Text Messages: 4dp
Within the same grouping (content sent by user), the spacing between two text messages is 4dp.
Padding Between Two Joule Text Messages: 12dp
Within the same grouping (content sent by Joule), the spacing between two text messages is 12dp.
Padding Between Interactive Components: 16dp
Within the content created by Joule, there are seven interactive components:
- Quick reply
- Object card
- Illustrated message
- Menu selection
- List
- Carousel
- Media
The spacing between these interactive components is 16dp.
The spacing between a text message and any of these interactive components is also 16dp.
Response Actions Padding: 4dp
Response actions are placed under every group of Joule responses, regardless of the Joule response type (text message, card, illustrated message, etc.).
The padding between Joule responses and response actions is 4dp.
Vertical spacing of 4dp between two text messages (left) and spacing of 16dp between interactive components (right)
Vertical spacing of 4dp between Joule response and response actions