5 Common Types of User Onboarding that Help Users Become Oriented with a Website and Applications

14.9.2017, 5 minutes read

While using applications or viewing websites, you surely have come across different welcome windows with a task to get you familiar with the user interface and its features. It’s user onboarding, which can be in the form of pop-up windows, progress bars, or less noticeable hotspots. What do they provide and when to use them?

1. Welcome windows

They’re one-time welcome greetings, which are displayed to the user at the first launch of the application.

Although by its name it might seem it’s used just to greet the user, their content should contain more than just an ordinary “Hello” or “Welcome!”. Welcome messages have much greater potential that you can use to direct new users to take a certain action.

This form of user onboarding is commonly used in applications that are dependent on input data, and the application wouldn’t work without them. These include social networking applications such as Facebook, Tumblr, or the Slack communication platform - an unlimited source of perfect user onboarding.

slack-user-onboarding-app-welcome-page

Slack’s welcome window contains a minimum of visual elements and simple copywriting. Design of the introduction page displays only the frame of the graphical user interface, which is a hint of what the user will see when the desired action is taken.

The minimum of visual elements evokes in users the importance of this step. Notice the simplicity of the Slack’s welcome window – one significant CTA and the bright stripes in the left-hand panel indicate the main navigation elements, which will be displayed to the user in the next step.

This layout is an excellent onboarding method, because it motivates users.

The use of welcome windows is various, depending on the type of application, but remember that their content shouldn’t be anything that could mislead the user. For example, if the user logs in to the social network step-by-step and a welcome window offers them the opportunity to write their first post.

The user doesn’t know yet what kind of post is it, where it will be posted, what’s its purpose, meaning, and not even how to edit or delete it later.

2. Hotspots

The goal of this user onboarding technique is to point out to users the certain features that play a key role in the user environment, even without noticeable warnings.

The specific feature of this user onboarding using “hotspots” is inconspicuousness. Users in this case pay attention to animated visual elements. When the user clicks on the pulsating object, there’s a brief comment showing up that explains in more detail the meaning of the element or action.

slack-hotspot-screenshot-appHotspots in Slack application inconspicuously remind the user to use help. Source: UserOnborad.com

slac-hotspot-app-screenshotA window with an explanation displays after the user clicks on hotspot. Source: UserOnborad.com

Even though it’s a simple and at first glance not a very noticeable guide, this is its biggest advantage. It doesn’t provide information to the user instantly and massively, but nonviolently. That’s why a user who likes to learn things "on the go" doesn’t have to close the window with a guide but simply ignore it.

In order to bring this method of user onboarding the desired "Aha!" effect, you shouldn’t overdo it with too much of help windows. It’s recommended to put 1 to 3 help items on one screen. The more help indicators there will be, the more annoyed the user may become.

After all, the task of user onboarding is to show users what all they can do by just a few clicks. Try to keep it in your mind – user onboarding is not supposed to make things complicated, but to make them easier.

The only disadvantage of this user onboarding is its popularity, which increases possibility of people getting used to ignoring them after some time. On the other hand, you can make these visually ambiguous help in different and original visual forms.

3. Progress bars

You might know them from online tests, questionnaire surveys or e-shops. They occur wherever users should be informed about the current status. These ongoing indicators in mentioned e-shops are used during registration or in a shopping cart. They show the progress the customer has reached, but also provide information on how much he has left to complete the process.

Human is a competing creature, so progressive completion of the steps and filling the progress bar will motivate them to continue in the registration until the end. It’s likely that with the status indicator fulfilling the tasks will be more attractive and less irritating.

As user onboarding in the form of a progress bar encourages users to continue step-by-step, it’s an ideal guide for more complicated systems. For example, a LinkedIn professional social network is used as a status indicator.

linkedin-progressbar-screenshot

If you need more input data from users, the likelihood that they fulfill them all at once without having to bother them is minimal. The Onboarding system which LinkedIn uses requests this data from users gradually.

linkedin-progressbar-screenshot

4. Built in notification

This style of user onboarding is ideal for making notifications which should be beneficial to the user and linked to a specific action. In addition to providing information about news and useful functions, this style can also serve to gain feedback.

That’s why it uses built in notifications by Foursquare – a social network for searching services in your area. The application will ask you to rate how you were satisfied with visiting specific locations. Foursquare uses its own user community to assemble a list of recommended places.

buil-in-notification-fourthsquare-app-screenshotIn the first step, application asks you to rate your own experience.

buil-in-notification-fourthsquare-app-screenshot

You can describe your experience further in the second step.

5. Bubble tips

This type of user onboarding guide is similar to hotspots. It has almost identical purpose – the task of bubble help is to draw user’s attention to key elements.

Both types are different from each other by its displaying. Pulsating hotspot effect is nice, but to display information, the user has to click on it first. This is the problem – because of its insignificant displaying, that step might not even happen.

Slack noticed this disadvantage, and decided to replace pulsating points in their onboarding guide with bubble help. It appears automatically when the app is first launched, so that the new user can see the support points immediately.

yeself-app-onboarding-system-web-screenshotThis is how bubble tips look like in the YesElf onboard guide.

How to use these bubble tips? Just don’t overdo it with a big amount of text – use short and concise sentences. Get inspired by Slack or our case study. Or Facebook. When writing this post, Facebook, for example, alerted us to a new item in the profile with this bubble. Is this a coincidence? :)

facebook-bubble-onboarding-system-screenshot

Have any from these user onboarding types caught your attention so much you’d like to put it on your website or application? Ask our YesElf for help.  

Book a Yeself demo to see how customer experience management can improve your business

request demo

Try YesElf for free

Request a personalized version of our YesElf platform and test its features in real life. It’s non-binding and free for the entire month!

I’m interested