UI/UX Principles

User Experience

UI/UX Principle #54: Great Experiences Still Need Great Onboarding

October 19, 2017

By focusing on great onboarding experiences that encourage discovery and learning, you can increase your engagement, your conversion, and your retention rates – three common high-level metrics for any application.

We recommend investing in onboarding no matter how intuitive your application is, based on the significant value it adds to the overall experience.

Smashing Magazine found that: “90% of all downloaded apps are used only once and then eventually deleted by users. People often abandon apps because of a poorly designed interface or an overall negative experience. Instead of having their problem solved by the app, people get confused trying to wade through a jungle of screens, menus and buttons.” Hence the deep need to invest in onboarding! Even though creating great onboarding requires time and a concerted design effort, it correlates strongly with your objectives of conversation and retention, so the consequences of not having it are much worse.

There are dozens of techniques; however, here are three universal methods you can start focusing on right now:

#1: Interactive Onboarding Wizards that get your users further engaged and converted

#2: In-Line Learning that trains your users as they go

#3: Empty States that motivate, persuade, and direct

Method 1: Interactive Onboarding Wizards that Get Your Users Further Engaged and Converted

Guiding users through your application’s steps and processes can be helpful, even if it’s just guiding them how to set things up. Duolingo, a commonly referred to example of great user onboarding, draws in users for more discovery from the outset:
 
Instead of telling the user how the application works, users are converted through the process of setting up their account interactively. Before signing up, users are able to see what their personalized language-learning curriculum will look like. Duolingo gives a preview of the product as users take a short interactive quiz.
 
Early on Duolingo offers the opportunity to sign up with Facebook or Google. Alternatively, users can click “Not Now” and continue learning how the application works before making a final decision about whether to convert.
 
In 2015, Duolingo reported that it had converted 100M users. An engaging onboarding wizard plays a role in that. By using a similar approach with your application, you can target an increased rate of conversion as well.

Method 2: In-Line Learning that Trains Your Users as They Go

In-line learning teaches users about the basic functionality of an application by allowing them to learn in context.
 
Slack is a great example. In Create a Good Onboarding Experience, the authors at Slack include a GIF which shows how SlackBot uses in-line learning to teach users the basics of the app:
Slack in line onboarding
 

The GIF illustrates how the application teaches users three key functions of Slack:

  1. Starring a message
  2. Responding with an emoji
  3. Pinning a message
Users do have the option to explore the application and learn on their own. But for users who need more guidance, SlackBot steps in and teaches them the functionality of the application “in-line.”
 
In 2016, Recode reported that Slack “is adding a million active users every five to six months.” That degree of astronomical growth is hard to expect for every company. Regardless, part of Slack’s success can be attributed to their effectiveness at onboarding new users.

Method 3: Empty States that Motivate, Persuade, and Direct

When a user loads an application for the first time – when there’s no data yet to be displayed – you have an empty state. 

Empty states are often an afterthought in design, but they have the opportunity to be part of a user’s first impression.

Rather than leaving users with an empty screen that increases confusion and impacts usability, consider focusing on creating helpful empty states.

Below are two wireframed empty states: the first with dummy data (“0 Visits”) that shows users what their dashboard will look like once it’s populated with information.

The second wireframe has a populated empty state that’s more engaging and helpful, and shows users what they can expect once they start using the app. It’s much easier to visualize the results you’ll get, and start seeing the value of the app. 

dummy data vs populated data

Quora: An Example of Comprehensive Onboarding 

Quora – a question and answer website with responses crowd-sourced from its users – is a simple app at its core.

But designers and developers at Quora have invested heavily in the onboarding experience. Quora’s onboarding has several key features:

  • Progress bars to guide users through steps to setup their account
  • “Getting started emails” to create additional understanding
  • Tutorial boxes interspersed throughout onboarding
  • A task list for a user to set up their account
  • …and much more
Quora onboarding screens
We all know Quora is simple to use. But by providing onboarding up front, Quora ensures that users have a grasp of the basic functionality of the app so they won’t need additional help in the future.

Conclusion: Every App Needs an Onboarding Experience

In this post, we’ve mentioned a variety of applications – from language learning to group messaging, to a repository for crowd-sourced information.

While your application might be different, the same principles apply.

In addition to the three mentioned in this article, there are dozens of onboarding techniques. Bottom line, great experiences still require great onboarding. The value lies in increasing your engagement, conversion, and retention.

Founder and CEO of Fresh Consulting, student of all things creative, innovative, and fresh, professional snowboard instructor trainer, father.

You might also like...

23

Aug.

UI/UX Principle #53: More Flexibility Can Lead to More Complexity

Imagine a computer science class – the teacher starts by introducing you to five complex subjects ALL at once! The first day of class? Data structures. Algorithms. Cyber security. Server optimization. Database management.  There’s a reason computer science courses aren’t designed that way. Knowledge, skills, and familiarity with a subject should be layered. The key lies in … Continued

29

Jun.

UI/UX Principle #52: Manage Data Density, High-Level to Low-Level

For enterprise applications, interacting with data is central to a user’s workflow. Yet, when designing a UI with high data density, figuring out how to display complex data sets that make sense to your users can be a real challenge. The overarching goal is enabling users to understand & comprehend data. This allows them to … Continued

24

May.

UI/UX Principle #51: Use Progressive Disclosure to Simplify Complexity

Da Vinci said “Simplicity is the ultimate sophistication,” and today, successful digital applications are no exception. In digital UX design, presenting features, navigation, and information in layers progressively allows designers to keep it simple.   Great user experiences encourage discovery while hiding the complexity that can otherwise overwhelm a user. After all, not every use case requires offering users … Continued