Back to Designs page

Table of Contents

Related Research

No research entries have been linked to this design.

Resources

No resources available for this entry.

Additional tags

No tags are assigned to this entry.

Onboarding patterns

Design type: Onboarding | Product area: Hybrid Cloud Console
Zhenpeng Chen avatar

Author: Zhenpeng Chen
Last edit: July 11, 2023

Note

To all use cases (*The following design patterns are including the implemented design patterns that are being used in a product but not excluding the exploration that going to be implemented in a live product. Please be aware that we are not suggesting using certain patterns across all products but here is now each design pattern being used in a specific scenario for its product.")


Get started card

A get-started card generally includes the following components and some can be optional.

  1. Illustration) An illustration associated with the onboarding content can be included on the onboarding card.
  2. Title) The title briefly communicates what the onboarding card covers.
  3.  Description) The description summarizes the onboarding card outcomes.
  4. Buttons) Action buttons, primary action, dismissable action.
  5. The placement of the get-started card should be on top of the main elements on the page. (refer to the image below)

Use case in ACM:

 

 

Use case in RHTAP:


Onboard in empty state

An onboarding pattern could also be used in an empty state. As shown in the images below, the primary message is the empty state and the onboarding message/actions are being seemed as secondary-level information.

Use case in ACM Governance:

 

Use case in ACS:

The case here is to de-emphasize the onboarding message in a way users can dismiss it and only show in the first time when users landed on this page.


Onboard in modal

An onboarding modal will launch for the first time when users landed on the page. We can also use a modal to implement the progress of setting up an application.

Use case in OpenShift Virtualization:

 

Use case in RHTAP:

1 of 3
2 of 3
3 of 3

 

Use case in Console:

 

Use case in RHTAP: