Outbound Navigation
Joule / Patterns / Outbound Navigation
Intro
The outbound navigation pattern enables users to transition from Joule to other parts of the application or external content. This allows users to access relevant content or actions without unnecessary friction, maintaining a smooth and intuitive user experience.
Usage
Do
- Provide clear messaging: Ensure Joule clearly informs the user that the action will trigger outbound navigation.
- Maintain context: Preserve the user’s context before and after the navigation. For example, allow users to easily return to Joule from the destination.
Don't
- Avoid abrupt outbound navigation: Don’t enable outbound navigation without user initiation, as this can cause confusion and disrupt the user experience.
- Don’t overuse outbound navigation: Avoid excessive use of outbound navigation, which can make Joule seem inefficient and frustrate users.
Behavior and Interaction
Depending on the type of destination, there are different interactions.
In–App Destination
Initiation
When users request information or actions related to content within the same app, Joule provides a clear message indicating that it will navigate to a specific section within the app.
Transition
A smooth transition animation brings users from Joule’s interface to the in-app content.
A minimized Joule panel helps users maintain their context and easily return to the Joule interface.
External App Destination
Initiation
When users request actions that require opening another app, Joule informs them about the outbound navigation to that app.
Transition
Joule does not display its panel in an external app, as it can’t maintain the context of the previous conversation.
If the required app is not installed on the user’s device, Joule directs them to download the app.
In-app destination behavior with a minimized Joule panel
External app destination behavior with no Joule panel
Non-Mobile Native Web Destination
Initiation
When users request information that requires accessing web content, Joule opens the web page using the app’s default mechanism.
Transition
Depending on the existing app setup, different mechanisms may be used to display the link.
Non-mobile native web destination behavior, where users are redirected to a hybrid viewer