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.
To introduce users to new features, products or functions.
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.
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.
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.
We see the following types of components:
Coach marks are contextual tooltips that focus' on the benefits of a feature. They can appear automatically when users see a new feature.
Internetbank private example
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.
Rocket bots example
Trello onboarding example
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.
As we learn more, we will add links to SEB-design components here.