Adobe Creative Cloud

July 5, 2016 /UX/UI Design /

XD Essentials: The What, When and How of App Walkthroughs in Onboarding

“I have designed an app, should I put in a walkthrough?” Many of you have probably had to answer this question. Some people argue that shipping an app with a guided walkthrough is like selling a product with a manual, while others say an app should be so intuitive that user should be able to figure out how it works just by looking at it. Either way, one thing is for sure —once someone opens your app, they need to know how to use it.

In this article, we’ve gathered a few tips based on popular app walkthroughs, along with how you can use them to level-up your app.

What is a Walkthrough and Should I Have One?

A walkthrough is the process of intentionally revealing functionality to a user. The purpose of this process is to provide insight about what your app can do. Think of a walkthrough as an entry ramp for people to use your app: it shouldn’t be generic or disruptive, it should be beneficial to the user.

Walkthroughs can include a variety of techniques to explain the app during a user’s first encounter, but it should only be employed if it’s really essential. If your app is simple or self-explanatory, it may not need a walkthrough. If your app has complex actions (such as in-app gestures) or hidden features, a walkthrough is a great place to present them, so users don’t miss out.

How To Design a Walkthrough?

Walkthroughs have the opportunity to be incredibly effective when designed with care. Moreover, when a walkthrough is well-designed, it doesn’t feel like walkthrough at all — it becomes part of the core user experience. Like with many things regarding design, it’s easier said than done. We’ve identified five ways to create a beneficial walkthrough design:

1. Integrate It Into Your App

The more a walkthrough is integrated within an app, the better.  A good walkthrough should feel like an invisible hand that guides a user along their journey. It’s most effective to walk users through an app’s features by providing a completely integrated and contextual experience (e.g. hint, reveal, in-app message, etc.), rather than present a slideshow or static instruction before users get started.

walkthrough (2)

Foursquare uses contextual hints to reveal the functionality of the app’s most commonly used features.

2. Keep It Light and Simple

As Herbert Simon once said, “A wealth of information creates a poverty of attention.” Another important thing about walkthroughs: only show what users need to know to get started — nothing more, nothing less. Information overload has detrimental results, so don’t present all of your features up-front in a massive wave of pages. A walkthrough should only surface the highest priority points a user will need for during their first use. It’s crucial to have a walkthrough implemented in a way that doesn’t overwhelm or confuse users.

Uber knows the meaning of the old adage, “less is more. Simple copy explains how the app works and users are able to start using it in less than a minute.

Uber boils down their service to a few main points and uses the first screens to focus on benefits instead of features.

Uber boils down their service to a few main points and uses the first screens to focus on benefits instead of features.

Apps with less intuitive designs — such as those that rely on gestures to get around — typically require some form of user walkthrough to teach new users the gesture-based interface. Walkthroughs for these apps should be visually captivating, but also simplistic and intuitive.

walkthrough

Mailbox did an incredible job with their introduction screens. Instead of swiping through a static instruction, they ask you to interact with each page as if it’s your own email.

3. Take Advantage of Graphics and Animations

A first impression is everything. A good looking walkthrough is important because it’s often the first thing your users see and you don’t want to miss an opportunity to engage. Walkthroughs are much more engaging when they use illustrations. It’s even better when walkthroughs use animations, which are great at grabbing attention.

Animation-filled walkthroughs like Dropbox’s page tutorial really grab a user's attention. Image credit: vektordigital

Animation-filled walkthroughs like Dropbox’s page tutorial really grab a user’s attention. Image credit: vektordigital

4. Make It Interactive

It’s better to expose an app’s workflow as opposed to simply providing a tour. A walkthrough is supposed to educate your user about how your app works, and the best way to get people to see the functionality of your app is by making them use it. When done right, an interactive walkthrough can be extremely valuable for your users.

Duolingo does a great job of walking users through the app via its workflow: users are encouraged to jump in and do a quick test in the selected language without signing up. It has the same format as the future language lessons users will take. This ensures that users understand completely how the app works.

It’s more valuable to walk a user through an app’s functions rather than simply showing them various app functions.

It’s more valuable to walk a user through an app’s functions rather than simply showing them various app functions.

5. Provide an Easy Way To Skip It

There will always be users that aren’t interested in a walkthrough no matter how great looking or informative it is. They don’t want to learn about the app, they just want to try it. It’s a good idea to make it possible for such users to jump straight into the app by making your walkthrough optional. An easy solution is to have a simple skip button whether it literally says “Skip” or “X” in the top right corner of the screen.

Slack makes their walkthrough optional so that users who want to jump straight into the app can do so.

Slack makes their walkthrough optional so that users who want to jump straight into the app can do so.

Conclusion

When done well, walkthroughs can be a very useful and powerful tool for your users. A good user walkthrough provides a solid understanding of how apps can service a user’s needs. Keep in mind that you are the one who sets the tone for user’s journey — make sure it’s spectacular and unforgettable.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD