In the past I’ve covered patterns and anti-patterns for onboarding new users and principles for first time user experiences.  In this post and the two that will follow, I’ll be digging into each of the 3 ways we can better engage new users:

1. Guided interaction

2. Free samples

3. Personal focus

Today’s post is focused on guided interaction. So let’s jump into what it means, discover patterns for making guided interaction a reality and see a few examples.

Ditch the user manual

In 2000, St. Michael’s Grammar School initiated the Great Barrier Reef project, taking Biology students out of their classroom in Southern Australia and up to Queensland. The goal was to teach the students with hands-on marine biology activities in the context of a real aquatic ecosystem.  The pilot was a success and the school continues offering this curriculum because of its efficacy in giving them practical skills.  This is an example of situated learning (or “learning by doing”), where guidance is provided in an authentic context.  

GBR

The Great Barrier Reef project put biology students in a situated learning environment.

Think of the last time you learned to do something new. Maybe it was swimming. Or riding a bike. Did you easily ride a bike after reading a book? Did you feel like a confident, comfortable swimmer after watching a YouTube video? Probably not. Instead, you likely took swimming lessons over a few weeks. You learned how to ride a bike with training wheels. Videos and books are abstracted from the context of use and passive, making it hard to retain the information they provide. Learning by doing the activity itself is more effective as long as in-context guidance is provided.

And people just don’t read the manual.

Here's a manual on how to read the manual!

Here’s a manual on how to read the manual!

When new customers come to our products, they’re expecting to jump in and get started. It’s like unwrapping a gift.

Unfortunately passive educational techniques like introductory slideshows or videos are still how the majority of sites and apps greet these new folks.  While these elements might be great at appeasing internal stakeholder qualms about users not discovering all the features of the product, they are anti-patterns because they keep those users away from direct interaction. Website slideshows (sometimes called carousels) often fail at teaching users information that sticks. 

IntroTour

A user manual, for your phone.

An authentic context

When we force people to read or watch something before they can interact with our products, we’re not letting them get their feet wet. They don’t know what they don’t know. But we also don’t want to toss them into the deep end with no hope of survival.  Instead, we want to provide just the right amount of guidance so that they can get started with the real product, but have a successful time of doing it.

GoodGuidance

Guided interaction in the context of scuba diving.

Guided interaction plays an important role in scaffolded instruction, where guidance is gradually increased as the user explores. When the user acclimates himself to the new product environment, guidance is gradually and eventually removed.

Scaffolded instruction

Guided interaction is about providing a scaffolding for instruction

Good guidance will:

  • Facilitate exploration in an authentic space
  • Gradually engage
  • Provide clear next steps

Let’s take a look at 3 patterns that allow us to build guided interaction into our onboarding flows for digital products.

Pattern 1: Playthrough tutorials

Playthrough

A playthrough is a dedicated, authentic interaction space where beginners can explore and learn core skills. Playthroughs are separate from the full product experience, similar to the introductory level of a game.  Users move at their own pace within the playthrough, triggering text, audio or visual guidance as they complete tasks. Once they are complete, the playthrough ushers the user into the full product experience with new skills (and any “winnings”) in tow. A playthrough reduces critical failures in new interfaces by providing a safe place to practice sensitive core actions.

Plants vs. Zombies

Plants vs. Zombies 2 is an iPad game with a playthrough tutorial. It teaches new players the core concepts of the game before they enter the full game world.

MyoArmband_Gestures

Myo armband uses a playthrough tutorial that teaches a user about individual gestures and how to combine them to control sample apps.

A playthrough pattern is good for:

  • New and unfamiliar interaction models
  • Education for sensitive actions (such as deleting or sending a message)
  • Teaching core competencies

Pattern 2: User-guided tutorial

UserGuidedTutorial

When your product is built on familiar ground but has a few new concepts sprinkled about, a user-guided tutorial may be your best option. In this pattern, the user enters the full product experience and guidance is triggered as she explores. Hints appear as modeless tips on first visit to a section or in response to a user’s action, and do not show again after the user completes the suggested action or closes the hint.

Facebook Paper

Facebook Paper has a user guided tutorial that only appears when a user enters specific sections. When she does, a non-modal cue appears that teaches the task, gives her realtime feedback, and confirms successful completion of the action.

Tumblr User Guided Tutorial

Tumblr’s website has a selective, simple user guided tutorial where hints about text styling only appear when a user chooses to write a text-based post.

A user-guided tutorial is different than a product tour where hints are shown in a forced linear order.  In the user-guided tutorial, hints only display when they’re relevant to the user’s current intent. Therefore hints may appear in different orders for different users.

A user-guided tutorial is good for:

  • Familiar interaction models with a few new concepts scattered about
  • Or, breaking out instruction on a large task across multiple screens

Pattern 3: Inline cues

inline cues

Inline cues are hints seamlessly embedded into surrounding content. They provide lightweight guidance without interrupting the user’s interaction. You can find inline cues in the physical world; for example, icons on paths that indicate which side is for cyclists and which side is for walkers. They don’t require your attention, but serve as occasional, gentle reminders.

Wacom's Bamboo iPad drawing app has an image on the first empty sketchbook page that invites the user to doodle atop it, but also uses its default drawing as subtle education about zooming and tapping to find the color picker.

Wacom’s Bamboo iPad drawing app has an image on the first empty sketchbook page that invites the user to doodle atop it, but also uses its default drawing as subtle education about zooming and tapping to find the color picker.

Polar app mixes instructional voting cards in with its normal voting cards for supplemental education.

Polar app mixes instructional voting cards in with its normal voting cards for supplemental education.

Inline cues in digital products are often temporal and opportunistic. For example, if an inline cue suggests an action, and the user completes that action, it would self-dismiss.  Inline cues can help users understand what to do with a blank slate, such as the default boilerplate lists offered by many note-taking apps. And they can also be used to provide education during waiting or loading states.  

Because they are seamlessly woven into surrounding content, inline cues are best for:

  • Very familiar interaction models
  • Supplemental “what’s next?” education

Don’t overdo it

Good guidance means being selective. Your guided interaction must maintain a balance between user freedom and beneficial assistance.

  • Don’t waste the user’s time. Don’t educate about obvious interactions, like pointing to a share button and telling a user that this is how she should share. Focus on the big, standout tasks in your product to maintain credibility with your user.
  • Don’t use guidance to cover up poor product quality. Similar to the above, don’t waste the user’s time by providing guidance to make up for poor site navigation.
  • Don’t use modals. A user can’t learn in context if he is constantly being peppered by pop-ups that give him instructions. Try to make education modeless at all costs.
  • Allow escape. There are always button mashers, people who want to explore completely free of any guidance. Give these folks to dismiss individual tips or to skip a whole tutorials.

I put together this exercise to help teams work out the best level of guidance for their products. Try it out as a way to kickstart an existing product audit or new product concepts.

In the next post, I’ll cover the second new user onboarding best practice, “Free samples.” Stay tuned!

2 comments

  1. Really nice article with good examples.

    I do, however, have to disagree on Tumblr’s changed interface. It was—and continues to be for me since I use the app occasionally—obscure as to how to get to the text editing tools. A tiny plus sign to the left of the input box is barely a “user-guided tutorial,” more like a hidden tutorial. Before, all the text editing tools were clearly and always visible. I don’t think this is an improvement in usability.

    • Yes–I think their follow-up education is lacking. Their initial user-guided tutorial is helpful because it illuminates the options that would be exposed by the “+,” but first time user education is only as good as the reinforcement you provide later in the permanent UI :)

Leave a Reply

Your email address will not be published. Required fields are marked *