Identifying Pitfalls in Your UX Onboarding

It doesn’t matter how visually beautiful your app’s onboarding UX may be if it fails to engage the user quickly and highlight the value of your product. Good design and attractive aesthetics can certainly help, but they are not substitutes for an intuitive, compelling onboarding UX.

Done right, onboarding UX appeals to the user. It creates a good, memorable first impression in the user’s mind that delights them and keeps them using your product. Without this strong initial engagement, even the best products can be overlooked or abandoned.

In this post, we’ll be looking at several practical ways you can improve your product’s onboarding UX and create richer, more engaging onboarding experiences for your users. We’ll be looking at several real examples of how different companies approach design choices in their products that you can use as inspiration for your own onboarding UX work.

How to Avoid Common Onboarding UX Mistakes

Just as no two products are exactly alike, every onboarding UX is unique. That said, we can use real-world examples of onboarding UX to identify some of the most common pitfalls to avoid.

Reduce Friction

One of the most common mistakes in onboarding UX is focusing on your product’s features instead of reducing friction in the onboarding process itself. It’s as understandable as it is common; after all, we all want our users to be as excited about our products as we are, and reiterating the features that make your product great throughout the onboarding process is one way to create and sustain that excitement.

However, there’s plenty of time to emphasize how your product’s features can make your users’ lives easier — and the onboarding process is not the time to do it.

For example, take a look at the screenshot of online image editing tool Canva below, taken from Canva’s onboarding UX:

After asking users to choose which version of Canva is right for them — an important step in ensuring users are directed into the most relevant pathway — all users have to do to sign up is enter an email address or use the app’s social login function.

That’s it. Canva doesn’t even ask users to verify the email address they provided.

This makes for an effortless, streamlined onboarding UX that eliminates friction and removes as many barriers between registration and creation as possible in as little time as possible. Canva really does love great design!

Design for Discovery

In 1981, the U.S. Department of Energy convened a meeting of some of the world’s preeminent anthropologists, behaviorists, engineers, and nuclear physicists to solve a unique problem — how to minimize the risk of exposure thousands of years in the future to nuclear waste stored in the Yucca Mountain Nuclear Waste Repository in Nevada and similar sites. The group was known as the Human Interference Task Force.

With a half-life of more than 700 million years, Uranium-235 — a common element in nuclear weaponry and energy systems — is deadly to all known biological life. As such, it has to be stored securely and safely deep in underground facilities essentially indefinitely, since there’s no safe way to dispose of the highly toxic substance.

This poses a unique dilemma: What if the meaning of the trefoil symbol, which is universally used to indicate radioactivity, were lost? How can we convey a concept like radioactive waste visually using symbols? Would human beings understand the trefoil’s meaning in 10,000 years? This was the problem that the Human Interference Task Force was asked to solve. (Proposed solutions ranged from the improbable, such as the formation of a monastic order of atomic priests who would oversee nuclear waste storage, to the fantastical, such as breeding genetically modified cats whose fur would change color in the presence of radioactive isotopes.)

But what do radioactive waste, color-changing cats, and atomic priests have to do with discovery in UX design, you ask? We might not be tasked with warning future generations of the dangers of radioactive waste, but we do tackle similar problems every day in our UX work.

One of the most common pitfalls in UX onboarding is assuming that the user will innately understand the visual cues you’ve given them. Nothing will stop users in their tracks faster than an unfamiliar symbol, especially if that symbol is crucial to completing the onboarding UX.

For example, Instagram’s direct messaging function used to be accessed via this symbol:

To the uninitiated, the meaning of this icon is far from clear. Most users could probably infer that this icon has something to do with messaging, given the icon represents an old-school inbox document tray, but this is a prime example of how trying to innovate and establish new aesthetic conventions can backfire horribly — particularly among younger users who may never have used a physical inbox document tray. Even if a user keeps using the product, these moments when discovery is interrupted by the unfamiliar can be very jarring, which can leave a lasting negative impression of the product as a whole. Instagram eventually retired this symbol in favor of the current paper airplane icon.

Google made the same mistake with its Translate web app. Functionally, Google Translate is an excellent product — but imagine how you might feel when presented with the following icon:

You may already know that this icon accesses Google Translate’s freehand draw function, which lets users write in freehand script the words they want to be translated. This feature is particularly useful when translating Indo-European languages such as Arabic, Hindi, and Farsi. However, for brand-new users, the purpose of this function may not be immediately obvious.

Think Harder About Your UI

One of the biggest problems with established design conventions is the mistaken assumption that just because a certain UI element is popular or common, it must be the right navigational element for the user.

Many UX practitioners and UI designers fall back on lazy design conventions when it comes to UI and navigation. Elements such as dropdown and hamburger menus might seem like logical design decisions, but in most cases, there’s almost always a better, more convenient choice that will help users do what they want to do.

Dropdown menus force users to click multiple times to make a single choice and increase the likelihood of the user making a mistake due to stacking several navigational elements in close proximity to one another. Similarly, hamburger menus might seem like a good idea because they allow us to fit a lot of elements into a relatively small space. However, hamburger menus also make it much easier for the user to forget that certain navigational and UI elements exist by concealing them. And, like dropdowns, hamburger menus also force the user to click multiple times to perform a single action.

These design missteps are hardly exclusive to small, scrappy startups. Not so long ago, Facebook also relied upon a hamburger menu in its News Feed product in its iOS mobile application. The hamburger menu worked well enough, but Facebook saw a significant lift in engagement, user satisfaction, revenue, and perception of speed among users when it phased out the hamburger menu in favor of a tab bar at the bottom of the interface:

When designing UI and navigational elements, empower your users by putting choices in clear sight. Users feel more confident when their choices are clearly visible. This not only helps your users feel better when using your product, it also boosts engagement. Not every element can be visible, but we should challenge ourselves as designers and work harder for our users whenever we can.

Focus on engagement, not personalization

One of the largest shifts we’ve seen in recent years in how we communicate with users and prospective users is personalization. Today, most digital communication is personalized to some extent, from dynamic keyword insertion in online advertising to personalized onboarding UX pathways.

However, just because we can make our products and communications more personal doesn’t necessarily mean we should.

Personalization alone is no substitute for a well-designed, compelling user experience. However, done right, personalization can be a highly effective tool. Online ad retargeting tool AdRoll does this very well with its automated performance report:

This completely automated report is sent to AdRoll users every month and provides users with a summary of their performance across several key metrics. However, while many products offer similar functionality, AdRoll goes one step further by providing actionable, individualized recommendations based on a user’s performance report. This not only boosts engagement by empowering users to focus on achieving their personal goals, but also helps users understand how to use AdRoll more effectively by directing users to relevant help documentation if certain metrics are underperforming.

Tread Carefully

Onboarding UX is unique in that it has to accomplish multiple goals in a very short period of time. In many cases, genuinely innovative, useful products can inadvertently become victims of conventional wisdom by following design conventions that simply don’t make sense for a product or its users.

As with virtually all aspects of UX, onboarding is a delicate process that can push our skills as UX practitioners to their limit. Hopefully, the examples above have given you some food for thought for your next UX project.

Originally published at blog.nomnominsights.com on September 20, 2018.