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?

Comments
  • John P Kelliher

    The best applications I have experienced (notice I don’t say used) are the ones that actually grow as you interact with them. This does not mean that I cannot access the any site features whenever I choose; but ideally, the application has intended objectives for it’s newest users. As those features are mastered, more complex walkthroughs appear.

    Having multiple modes of learning available to a user from first use is ideal for those of us with varying levels of technical experience, or simply varying attention spans. Maintaining a clear starting point, that one can always return to if the explorer becomes lost or simply wants to see what else may have been missed, is essential to consistently helping a user back to the pathway that was designed to best lead the User Experience.

    Tie the walkthrough to a robust contextually based manual, interactive support, and an active community forum and you have several modes of learning available at your fingertips. The real magic is experienced when every mode of learning is able to refer to the same topic where you find yourself in need of assistance. This requires a very dynamic set of active terms that link each mode together.

    And as I mentioned from the first line, the best applications I have experienced, I never noticed the transition between use and learning.

  • Pingback: UX/UI | Pearltrees()

  • Please disable pop ups and think a bit more on the “send to email” cta, putting time with the paper airplane got me thinking “7minutes to send this to email?”. Once I hovered I got it and thought “that’s not how it should be done…”. Advice, turn the pop up into a sticky bar where you are the subscribe form (doing the same thing apparently) and remove the reading time out of the send to email button, maybe that will help a bit more.

    Nice article though, but these frictions almost made me close it and not read it.

    Thanks.

  • What are the current industry techniques and libraries for creating walkthroughs?

  • Can you please help me with the best practices to follow when making an intuitive walk through for an application that has grown a bit complex over time and deals with young children?

  • raf

    I have a question? What do you about finding the walkthrough in the menu of the App when you want to look at it again or show it top somebody esle