Embracing Walkthroughs, Tooltips & Hints

With mobile apps, first impressions are everything. If users download your app, try it for a few minutes and don’t get it, they’re not going to fight through. They have to get it—and love it—almost immediately. I’ve been designing and redesigning a mobile app (for location and directions) and have been struggling to make sure every icon, every swipe, every feature is completely intuitive to every new user. So far, I have failed. I am turning to “walkthroughs” and other ways to instruct new users on how the app works. I resisted the idea of our app coming with the equivalent a digital instruction manual, but the more I Iooked at it, the more I realized that some of my favorite apps that I use all the time now… they have walkthroughs and hints.

New app experiences should be intuitive, responsive, and intriguing. Achieving such elegance isn’t easy, and even some of the biggest and best tech companies fail once or twice with their product. Some people question whether walkthroughs are evil, overused and take them as a signal that the [designers] blew it. Others emphasize on using walkthroughs in specific cases and outline principles for using them.

Despite that, a lot of the most popular apps on our phones do in fact use walkthroughs, coach marks, or hints to onboard users. Since these apps have hundreds of millions of users, let’s assume for a moment that they might have some insights we can learn from. Somehow, there aren’t very many articles or blog posts about the topic.

So, to better understand how the most popular apps use walkthroughs, I decided to gather and study screenshots from some of the most popular content creation apps and highlighted recurring, subtle trends that help guide users through.

Here are some ways apps like Facebook, Instagram, Twitter, Snapchat and Vine use walkthroughs and hints:

1. Walkthroughs

Both of the apps involving email productivity used detailed walkthroughs.

a.) Mailbox

4 out of the 13 steps of the Inbox walkthrough process.

Mailbox introduces new gestures: long vs. short swipes. These gestures are difficult to explain in words and tinkering with new functions using actual messages in your inbox feels scary without a bit of a walkthrough. Once logged in, Mailbox looks just like many other email interfaces. You wouldn’t know these hidden gestures existed without some sort of tutorial beforehand. The wireframe-like screens acts as a safe playground to allow you to practice archiving, discarding, saving for later and adding email to a list.

b.) Inbox

4 out of the 5 steps of Mailbox’s walkthrough process.

Inbox by Gmail takes a different approach. Instead of placing a focus on new gestures, their walkthrough describes 4 key value propositions of using this app: bundles, highlights, reminders and snooze. Gmail subtly introduces the swipe left gesture to snooze in the graphic. Once you land on the inbox, the visual changes are immediate. Emails are highlighted and bundled into categories like travel and finance. The app emphasizes its safe, explorable playground to tap and swipe.

2. Walkthrough Tutorial Videos

Snapchat’s 25-second video, “How to Snap!”

Apps like Snapchat has a clever advantage. They send their initial “How to” animation video via a Snap and continue to send new product updates like Snapcash straight to your app’s Snapchat inbox. Their product inherently gives them a way to send information in a way that is intuitive to the user. Users are likely to view or at least notice the subject of the new tutorial video since they don’t have to get that information via an outside channel— an email or blog post, etc.

3. Tooltips & Quick, Subtle Hints

Many of the content creation apps included subtle ways throughout the app to show users a new gesture or action in order to save time in the long run. Users in turn do not have to try and recall the lengthy details and are required to exert minimal effort to learn. These hints at most require one tap and do not remove you from the experience of the app. Here are a few types of hints you might see:

a.) Hints that appear the first time you download & use the app:

b.) Hints that reveal as you explore and discover:

c.) Hints that appear regularly as you use the app:

L to R: Facebook, Twitter, Instagram, Snapchat

d.) Popups that explain new concepts in detail:

Snapchat explains new Stories and how to add to your own Story.

Takeaways:

When should I use walkthroughs? I’d lean toward no, but it depends. Consider these points:
(a) Demonstrating new gestures? (Mailbox’s long vs. short swipe)
(b) Explaining features that are difficult to explore and find on their own?
(c) Introducing more details of the app’s value proposition to help those who quickly downloaded the app without much research?
Use short and subtle hints. Focus on one, single interaction at a time. This is a simple, effective way to teach new concepts as the user explores your app.

…but be picky about when to use them. Does the UI element need to be explained or can users explore it on their own with visual affordances? A great example of this is Snapchat’s “ghost” icon. Rather than explaining that you can create stop-frame videography, users are encouraged to test it out to understand how it works.

Consider both placement and frequency of your hints. Some introduce concepts once at the beginning, others appear as a subtle, constant reminder. If you are teaching features for heavy use on a regular basis, it could be beneficial to have these hints reoccur like Twitter’s scroll up for new tweets indicator.
…but be sure to quickly get them out of the way. Snapchat, Vine, Facebook and Instagram all have notifications that disappear when you click anywhere else on the screen. Foursquare makes you acknowledge the tip by specifically clicking a target button like “Cool” or “Got It” before it disappears.

What are the best or most creative walkthroughs and hints you’ve come across? I’d love to hear about them. Contact me via @nguyenist on Twitter or drop me an email at stephanie@landmarkdirections.com.