A walkthrough is the process of intentionally revealing functionality to a user.

While some people argue that a user should be able to figure out how an app works just by looking at it, walkthroughs are becoming an increasingly popular user experience strategy as apps become more complex. Today’s users and their usage patterns are so varied that to say that all apps should be equally intuitive is like saying that controlling a bicycle should be as intuitive as flying an airplane. While they’re both modes of transportation, they’re on completely different levels of complexity.

Therefore, designers must always keep intended users and usage patterns at the top of their minds when deciding if and how to implement a walkthrough. It is a constant struggle to balance functionality with ease of use, which is why walkthroughs can be incredibly useful – especially when implemented with care and precision.

Integrated Content

Generally, the more integrated a walkthrough is within an app, the better. Tacking on a walkthrough as an afterthought is a fundamentally lazy approach. Yes, there are some instances in which a separate walkthrough is appropriate (high function, steep learning curve apps), but these types of apps sacrifice short-term usability for long-term, learned functionality.

More often than not, it’s more effective to walk users through an app’s functions through a completely integrated and contextual experience. This can take the form of hints, reveals, in-app messages, etc. One just needs to keep in mind the usage pattern of a given app – this will determine how exactly one should integrate the walkthrough.

Invision-Walkthrough

InVision makes great use of hints to thoroughly explain each of their web app’s fairly intuitive features.

Foursqaure

Foursquare uses informative, tooltip style hints to reveal the functionality of their mobile app’s most commonly used features.

Swarm_Message

Swarm uses simple in-app messages to tell users about new features and changes to their app’s functionality.

Presence

Ideally, a walkthrough fits seamlessly into the background and only provides assistance exactly when needed. It gets out of the way at all other times. The aim should be to minimize the real estate of ever-present elements (such as a help menu) or any sort of visual hint that never disappears.

Walkthroughs should be shown just in time; they should reveal functionality only when users need it. This is because screen space on mobile devices is a precious commodity, so why waste it? If users never get to take their training wheels off, they’ll never be able to get very far with an app.

Google-Now

Google Now intelligently exposes its functions through the use of instructive copy in place of lorem ipsum. This way, users can clearly understand the app’s features and how to interact with them.

Harmony-and-Reporter

Both har•mo•ny and Reporter make use of simple, easily hidden hints. They both establish a visual hierarchy within the hints so that users can easily and quickly process information.

Choice

The question of whether or not to make walkthroughs optional can be highly controversial. When making a decision about including a wakthrough in your next app, consider your target user. Is he/she someone who likes to stringently follow the manual, or is he/she someone who likes to explore? Answering this question will determine how a walkthrough should be set up for a given app. Additionally, it’s interesting to note that studies in the video game industry have shown that mandatory walkthroughs are more effective than optional ones.

Airbnb

Airbnb makes their walkthrough optional so that users who want to jump straight into the app can do so. Their app is intuitive enough so that users can navigate through their app and make use of all of its functions with minimal friction.

Reporter

Reporter is an app that’s centered around a concept (Quantified Self) that’s completely new to most users. As a result, its walkthrough is made mandatory in order to make sure all users are brought up to speed.

Intent

It’s better to expose an app’s workflow as opposed to simply providing a tour (ie highlighting the location of various buttons, sections, etc). It’s more valuable to walk the user through the app’s functions by setting up his/her profile as opposed to simply showing the user where various app functions live.

Filament

Filament does a great job of walking users through the app via its workflow. The very first thing users do after signing up is make use of its primary feature (drag-and-drop code snippet) and in doing so, understand completely how the app works.

Snapchat

Snapchat also does a good job of taking users through the app’s central function upon sign up. This ensures that users understand how to use the app and therefore continue using it with minimal friction going forward.

Takeaways

“Good design makes a product understandable. It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.” – Dieter Rams

Walkthroughs are not inherently evil. Many of their common issues can be resolved simply by implementing them in the proper context and at the appropriate scale for their environment. This means that designers must consider their product’s end users and their usage patterns in order to determine how minimal or extensive a walkthrough should be, as well as to what extent it should be integrated into a product’s core UX. Take the following key points into consideration when thinking about designing a walkthrough:

1. Users & Usage Patterns

Are your users going to be using your app on a daily basis or only once in a while? This is a crucial question you need to ask in order to determine what degree of complexity you can get away with in your app, as well as to what scale your walkthrough will need to be. If your app is to be heavily used by expert users, you can teach them more complex, learned gestures in a walkthrough because they will use them on a regular basis until they become intuitive. On the other hand, for apps that are to be used only on occasion, gestures must be intuitive right off the bat because users aren’t going to remember a gesture explained in a walkthrough one month down the line.

2. Functionality vs. ease-of-use

Apps that are highly functional are generally initially harder for users to learn how to use. Keep this in mind when determining the scale of your walkthrough. Similarly, some apps have a minimal UI which makes it harder for them to have a thoroughly integrated walkthrough without fundamentally altering their core UX. These types of apps sacrifice some immediate ease-of-use for minimalism and a sense of long-term exploration, allowing users to grow with the app.

3. Temporality

Take into consideration the attention span of your potential users, as many can easily become impatient and/or confused. According to Steve Krug, users don’t analyze sites, they muddle through. Some users may not want to deal with a walkthrough and just want to try the app straight away. Others may be confused by an out of context, disembodied walkthrough, where they might try to tap on screenshots of the app, to no avail. Clearly, differing approaches must be taken as to when and for how long a walkthrough should be surfaced for these vastly different types of users.

With these three things in mind, can you think of a product that could use a helpful walkthrough?