Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Onboarding

To introduce users to new features, products or functions.

Guidelines

Short description

The purpose is to guide or introduce the user to new features, products or functions. This pattern is still being discovered and open to feedback.

When and how to use it?

Onboarding is the process of familiarizing a user with products and/or systems that are new to the user.

This design pattern should be considered when introducing something new to the user. This something new can be be either a big introduction for a new customer or a small feature in a product page.

Big onboardings:
  • New customer at SEB, first time logging in to for example IBP.
  • A new platform is launched (Business Arena, Morning and Nexus).
Small onboardings:
  • A new option in the menu is available.
  • A new feature on a product page is implemented.

Don’t overdo it and use onboarding components only once. However, consider providing the information from the onboarding to the customer at a later stage.

If the task the user needs to complete is especially complicated, you may need to complement with “help components”, which could include the same information as in the onboarding.

Onboarding components

We see the following types of components:

  1. Coach marks
  2. Walk-through tour
  3. Blank-slate tips
1. Coach marks

Coach marks are contextual tooltips that focus' on the benefits of a feature. They can appear automatically when users see a new feature.

  • Once they are dismissed, they don't appear again
  • Often the surroundings is opaque to bring focus to the coach mark.

Component: Coach marks

FX example

FX example

Internenbank private example

Internetbank private example

Slack example

Slack example

 

2. Walk-through tour

Use the walk-through tour when you want to motivate the user to start using the system, or show best practices. Think of it as a wizard to give the users the best start.

Component: Walkthrough

Rocket bots

Rocket bots example

Trello onboarding example

Trello onboarding example

 

3. Blank-slate tips

These are used when you want to guide the user AND give them some foundation to start with. It's an interactive guide where the user is using the product itself, so you give them more than an empty state. 

 lookback.io example

lookback.io example

manage.ensighten.com

manage.ensighten.com example

 

Do's and don'ts

Do
  • If repeated help is needed, use “help components” instead.
Don't
  • Avoid showing the same customer the onboarding component more than once.
  • Don't rely too much on onboarding components, the design should be easy to understand on its own.

 

Page last updated

Feedback

Was this helpful?