How to design a successful web app walkthrough

We’ve all interacted with an app walkthrough at some point or another. Heck, some of us designed them.

But when you take a look at the design literature out there, you will notice there is very little that specifically deals with app walkthroughs. They are such an important aspect of an app’s overall experience because, after all, they are the first interaction a user has with an app (if the walkthrough is present that is).

In this post, I have gathered a few tips for you by observing current apps to see what they do with their app walkthroughs and what we can learn from them.

Should your app have a walkthrough?

I wanted to start this post by pointing out that there are some apps with should have walkthroughs but don’t, and some apps that have them but shouldn’t.

The purpose of a walkthrough is to provide insight about what your app can do. If your app is simple enough, or self-explanatory enough, it may not need a walkthrough, in which case save your time for something more vital.

But, if your app has hidden functionality, a walkthrough is a great place to demo it, so that users don’t miss out.

Take Litely for example. Litely is a photo editing app and it has a bunch of hidden gestures that can improve the experience of the overall app. It lets you view the picture, before you added any filters, by simply taping the photo with two fingers. Instagram lets you do this too but it uses only one finger. No one knows about this functionality because Litely doesn’t tell you about it; if you discover this functionality in Litely, you do so by accident.

On the other hand we have an app like SoundCloud, which has a lovely looking walkthrough at the beginning of the app experience. However, one of the screens explains to you something very obvious: how to follow another user and what to expect from the search icon. You’d be ard pressed to find an app user who doesn’t understand the magnifying glass icon, so when it comes to this specific screen from SoundCloud there’s little to gain from wasting a user’s time. The walkthrough would have been just as successful without it.

Pay attention to the design

It’s hard to create a walkthrough if you haven’t created the app, so walkthroughs are often created last. This frequently leads to a lot of inconsistencies.

If you are going to have a walkthrough, make sure the design of it is just as solid as the rest of your app. A good looking walkthrough is important because it is in fact the first thing your users will see. It’s crucial to have the walkthrough implemented in your brand’s style so you don’t confuse users.

Take advantage of graphics and animations

Walkthroughs are so much more engaging when they use great pictures or images. Better yet, walkthroughs that use animations are great at catching users’ attention. The best example of this is Box. Box is a cloud based file storing app; when you first use their app they have a quick walkthrough where they demonstrate to you how the app is versatile and supports many different file formats across various devices.

Better yet, the walkthrough uses a single file and it animates it as the file jumps from one slide to another. The experience is so pleasant because it’s clever and looks really well thought out. The visual design of the walkthrough is good too as the slides/pages have a clean design.

Make it interactive

Because a walkthrough is supposed to educate your user about how your app works you might want to consider making it interactive. The best way to get people to see the cool functionality of your app is by making them use it. The current version of Mailbox, an email client app, has a nifty walkthrough that tells you about the hidden functionality of sorting email by swiping it left or right. It tells you that if you swipe right the email will archive; next, it makes you do it. It can be a dangerous decision to make users interact with your walkthrough but in Mailbox’s case the request is simple, all the user has to do it swipe! It’s a brilliant idea show the user exactly what they can expect from the app.

If done right, an interactive walkthrough can be a fun way to get people excited about using your product.

Provide an easy way to skip

I’m sad to say some users will not care for your walkthrough no matter how great looking, how well thought out, or how informative it may be.

It’s a good idea to not block people from using your app, and you don’t want users who aren’t interested in the walkthrough compelled to complete it. An easy solution is to have a simple skip button whether it literally says “Skip this” or it’s a big ol’ X in the top right corner of the screen. If you go with a button you have some room to play with copy; you can say something like “I’ve got this!” or a little bit bolder like “I’ve got it, let me use it.” Have fun with it and maybe you’ll convince your user to stick it out.

Lovely is an app that does this well. When you first open the app there is a walkthrough but you can always skip it by pressing the big orange button that says “Get Started”. It’s always there, from the beginning and not just towards the end.

There are other options available to you. What you can simply do is allow users to freely swipe through the walkthrough. In the case of Box, all a user has to do is wipe left a few times to get through to the end and use the app. There are no gimmicks implemented by the app that stop you from doing just that.

Authentic Weather is another example. When you download the app all you get is a simple page screen walkthrough, which disappears when you tap it anywhere. The walkthrough is then done and the user can enjoy the app. If someone cares to read what the screen said, great! If not, they are into the app now anyway.

Walkthroughs and onboarding

Sometimes walkthroughs incorporate onboarding or they are not actually walkthroughs at all and the user has to create an account in order to use the app. Whether or not this is the right thing to do is a whole other discussion. I will point you towards this article, which talks about why you might not want to do that: Two Reasons to Forgo Sign Ups and Let People Use Your Product First. If you are making people follow a strict sign up from the get-go consider these two scenarios.

Scribe is an app which lets you share information between your iPhone and you Mac such as phone numbers or images. In order to use the app you have to connect the two. When you open the app for the first time, it gives you specific and clear instructions on how to proceed. It tells you exactly what to do and if something goes wrong it even provides solutions. The app goes out of its way to help users in completing the onboarding with ease.

Crazy Blind Date was a dating app from OKCupid that found users blind dates, as the name suggests. In order to create an account the user had to upload a photo first. The experience of doing so could be terrifyingly difficult. The copy was actually incorrect – you could also upload a photo – but you could not upload a photo if your phone was offline, fail to take one and the icon itself is not prominent enough. This poor usability is probably the reason Crazy Blind Date is no longer available.

Featured image/thumbnail, uses iPhone 5c mockup by Ben Lee

Paula Borowska

Paula is a freelance web designer who documents her travels with photos and words. She works with small companies to help them create products that change the lives for their customers all in the hopes of gaining more customers and retaining their current ones longer.