Tourtip
Tourtips are popups used to educate users of specific functionality.
Anatomy
- Container: Parent container of the Tourtip which houses the title, description, count, image and buttons.
- Title: Short and engaging description of the highlighted functionality.
- Description: Concise but detailed explanation of the functionality.
- Caret: Directs the user’s eye towards the element with the new functionality.
- Highlighted Element: The existing element on the page being referenced.
- Highlight: Used in combination with the overlay to draw attention to the highlighted element.
- Overlay: Used to help focus the users attention on the Tourtip and the Highlighted Element while conveying the blocking nature of this component. Interaction with the overlay does not dismiss a tourtip.
- Count: (Optional) Only used when stringing multiple Tourtips together to create a tour. Displays the total number of steps in the tour as well as the current step.
- Image: (Optional) An image or gif may be added to help aid users in understanding the new functionality.
- Buttons: Actions used to close or navigate through a tour.
Usage Guidance
When to Use
- To highlight a UI element to help users discover or understand new functionality.
- For first time users as they explore functionality of the Workday app.
- For existing users when new functionality is introduced.
When to Consider Something Else
- Use Bottom Sheet if there is no specific UI element to reference or if the callout of new functionality is more generalized to the overall feature.
- Based on user action, when using an info or question mark icon to display detailed explanations about a task use Bottom Sheet.
Behaviors
Timing
Tourtips should be displayed carefully and minimally. Likely only on initial visits to the area of focus. Once a user has either dismissed a Tourtip or navigates through a whole tour they should likely never reappear unless somehow specifically prompted by the user.
Stringing Multiple Together
Multiple Tourtips may be strung together to create a more in-depth tour. Caution should be used when doing so to prevent cognitive overload to the user. Keep tour steps to a minimum when possible. When stringing them together ensure users can navigate back and forth between multiple steps with the included buttons. Tourtips automatically come with animation transitions between steps.
Blocking Behavior
Tourtips are purposefully blocking, meaning any underlying elements cannot be interacted with while a Tourtip is displayed. This is to create the required focus on the highlighted elements to ensure full user understanding. Highlighted elements are also blocked from interaction until the tour is complete or dismissed.
Closing
Tourtips need to be manually closed with an explicit close, done, or similar type of button. Ensure users have the opportunity to close Tourtips at the beginning of a tour by including a close button. To prevent accidental closures of Tourtips they cannot be closed by tapping directly on the overlay.
Actions
Do
Allow the user to skip or exit a tour by providing an explicit button.
Don't
Use actions outside of navigating, closing, or completing a Tourtip.
All actions within a Tourtip should ultimately close the Tourtip or advance the tour. An action could potentially help move the user forward with the intended new functionality, but doing so would still close or complete the tour.
Positioning
Tourtips are automatically positioned based on the highlighted element and the amount of surrounding space. They may be positioned to the left, right, above or below the element. The tourtip will expand to fill the screen minus the x6 (24pt) safe area. The caret will always be aligned with the center of the highlighted element, but may live anywhere along the edge of the parent Tourtip container. Only one Tourtip should be used per element.
Scrolling
Content within Tourtips will automatically switch to allow scrolling if there is not enough room on screen. This can be caused by the placement of the Tourtip according to the highlighted element; long titles or descriptions, large images; or user based accessibility settings.
Examples
Multi-Step
Multiple Tourtips may be strung together to create a more in-depth tour. The count should display the total number of steps as well as the number of the current step. Only one Tourtip can be shown at a time.
Images
Don't
Dont add purely decorative images.
Do
Consider a tourtip without images for a simpler experience.
Images or gifs may be used to help aid users in understanding the new functionality. Images or gifs should only be used if they can clearly communicate the purpose or goal of the new functionality. They should not be purely decorative from a design standpoint.
Highlights
The shape of the highlighted areas need to be defined with our shape tokens. The shape token should be one token size larger than the highlighted element. The size of the highlight should be extend x2 (8pts) on all sides beyond the highlighted element.
Accessibility Guidelines
Coming soon!
Content Guidelines
See the Product Tours page in the UI Text section of the Content Style Guide for further guidelines.
Anatomy
- Container: Parent container of the Tourtip which houses the title, description, count, image and buttons.
- Title: Short and engaging description of the highlighted functionality.
- Description: Concise but detailed explanation of the functionality.
- Caret: Directs the user’s eye towards the element with the new functionality.
- Highlighted Element: The existing element on the page being referenced.
- Highlight: Used in combination with the overlay to draw attention to the highlighted element.
- Overlay: Used to help focus the users attention on the Tourtip and the Highlighted Element while conveying the blocking nature of this component. Interaction with the overlay does not dismiss a tourtip.
- Count: (Optional) Only used when stringing multiple Tourtips together to create a tour. Displays the total number of steps in the tour as well as the current step.
- Image: (Optional) An image or gif may be added to help aid users in understanding the new functionality.
- Buttons: Actions used to close or navigate through a tour.
Usage Guidance
When to Use
- To highlight a UI element to help users discover or understand new functionality.
- For first time users as they explore functionality of the Workday app.
- For existing users when new functionality is introduced.
When to Consider Something Else
- Use Bottom Sheet if there is no specific UI element to reference or if the callout of new functionality is more generalized to the overall feature.
- Based on user action, when using an info or question mark icon to display detailed explanations about a task use Bottom Sheet.
Behaviors
Timing
Tourtips should be displayed carefully and minimally. Likely only on initial visits to the area of focus. Once a user has either dismissed a Tourtip or navigates through a whole tour they should likely never reappear unless somehow specifically prompted by the user.
Stringing Multiple Together
Multiple Tourtips may be strung together to create a more in-depth tour. Caution should be used when doing so to prevent cognitive overload to the user. Keep tour steps to a minimum when possible. When stringing them together ensure users can navigate back and forth between multiple steps with the included buttons. Tourtips automatically come with animation transitions between steps.
Blocking Behavior
Tourtips are purposefully blocking, meaning any underlying elements cannot be interacted with while a Tourtip is displayed. This is to create the required focus on the highlighted elements to ensure full user understanding. Highlighted elements are also blocked from interaction until the tour is complete or dismissed.
Closing
Tourtips need to be manually closed with an explicit close, done, or similar type of button. Ensure users have the opportunity to close Tourtips at the beginning of a tour by including a close button. To prevent accidental closures of Tourtips they cannot be closed by tapping directly on the overlay.
Actions
Do
Allow the user to skip or exit a tour by providing an explicit button.
Don't
Use actions outside of navigating, closing, or completing a Tourtip.
All actions within a Tourtip should ultimately close the Tourtip or advance the tour. An action could potentially help move the user forward with the intended new functionality, but doing so would still close or complete the tour.
Positioning
Tourtips are automatically positioned based on the highlighted element and the amount of surrounding space. They may be positioned to the left, right, above or below the element. The tourtip will expand to fill the screen minus the x6 (24pt) safe area. The caret will always be aligned with the center of the highlighted element, but may live anywhere along the edge of the parent Tourtip container. Only one Tourtip should be used per element.
Scrolling
Content within Tourtips will automatically switch to allow scrolling if there is not enough room on screen. This can be caused by the placement of the Tourtip according to the highlighted element; long titles or descriptions, large images; or user based accessibility settings.
Examples
Multi-Step
Multiple Tourtips may be strung together to create a more in-depth tour. The count should display the total number of steps as well as the number of the current step. Only one Tourtip can be shown at a time.
Images
Don't
Dont add purely decorative images.
Do
Consider a tourtip without images for a simpler experience.
Images or gifs may be used to help aid users in understanding the new functionality. Images or gifs should only be used if they can clearly communicate the purpose or goal of the new functionality. They should not be purely decorative from a design standpoint.
Highlights
The shape of the highlighted areas need to be defined with our shape tokens. The shape token should be one token size larger than the highlighted element. The size of the highlight should be extend x2 (8pts) on all sides beyond the highlighted element.
Accessibility Guidelines
Coming soon!
Content Guidelines
See the Product Tours page in the UI Text section of the Content Style Guide for further guidelines.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.