Entry Point
Joule / Patterns / Entry Point
Intro
The entry point for Joule is the Joule icon button in the top app bar. By tapping on the Joule icon, users can open the Joule panel and start a conversation. Depending on the layout of the top app bar, the icon can be placed on the top app bar or hidden in the overflow menu.
Joule entry point in top app bar (left) and entry point in overflow menu (right)
Usage
Do
- On a home screen, always expose the Joule icon in the top app bar.
- Make sure the position of the entry point is consistent across devices.
- When displaying the Joule icon, always show it as the first item in the top bar and menu.
- Provide the entry point on every screen where users might need help from Joule.
Don't
- Don’t use the Joule icon button as a switch. Joule’s icon button doesn’t indicate the activeness of Joule.
- Don’t use other buttons (e.g. FAB) as an entry point.
- Don’t show multiple entry points on one screen.
Behavior and Interaction
Tapping on Joule Icon
Tapping on Joule Icon when Joule is Active
When users tap on the Joule icon in the top app bar, the default large panel opens, allowing them to start a conversation.
Tapping Joule icon to open the panel
When the Joule panel is in its half or minimized state, tapping on the Joule icon returns the panel to its default large state.
Tapping Joule icon when the minimized panel is active
Variations
Depending on the layout of the screen, Joule’s entry point can either be exposed in the top app bar or hidden in the overflow menu.
Entry Point in Top App Bar
Entry Point in Overflow Menu
By default, the Joule icon is placed in the top app bar. We recommend placing the Joule icon as the first action button in the top app bar for the best ease of use.
Joule icon placed in top app bar
If exposing the Joule icon in the top app bar isn’t an option, place the icon in the overflow menu. We recommend placing the Joule icon as the first action button in the menu for the best ease of use.
Joule icon in overflow menu