Entry Point

Joule / Patterns / Entry Point

Intro

The entry point for Joule is the Joule icon button in the navigation bar. By tapping on the Joule icon, users can open the Joule panel and start a conversation. Depending on the layout of the navigation bar, the icon can be placed on the navigation bar or hidden in the overflow menu.

Joule entry point in navigation bar (left) and entry point in overflow menu (right)

Usage

On a home screen, always expose the Joule icon in the navigation 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 navigation 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 navigation bar, the default large panel opens, allowing them to start a conversation.

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 navigation bar or hidden in the overflow menu.

By default, the Joule icon is placed in the navigation bar. We recommend placing the Joule icon as the first action button in the navigation bar for the best ease of use.

If exposing the Joule icon in the navigation 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.