I’ve been keeping an ongoing collection of first time user experiences (FTUEs) at http://firsttimeux.tumblr.com/. In this post, I’ve distilled the most common approaches I’ve observed being used today into a list of 8 design patterns and anti-patterns.

Each pattern has a description, pros/cons list, design considerations, and an example. You may recognize a few of these because many are modern takes on well-established UX patterns.  My hope is for this to serve as a helpful reference as you develop your own first time user experiences.

Before we get into the list, let me quickly recap the 4 first time UX design principles from my 2012 post.

Show Interact, don’t tell

  • Teach people through contextual interactions (situated learning).
  • Don’t obstruct content with modal instruction.
  • Avoid long, “all-at-once” walkthroughs, because people have limited capacity for retaining information in their short-term memories.
  • Allow users to repeat onboarding instructions via Help.

Provide free samples

  • Entice users early by letting them use as many aspects of your product as possible before requiring them to log in.
  • Sample content should be compelling and relevant to the value proposition.

Show them what’s next

  • Onboarding flows should transition seamlessly into normal product use.
  • Set expectations and provide relevant next steps with clear calls to action.

Focus

  • A first time experience should focus on the most important, key feature(s).
  • Encourage exploration to uncover secondary or tertiary features.


Now, the list of FTUE patterns:

  • The free sample
  • Playthrough
  • Setup wizard
  • Inline cues
  • Guided tour
  • Coachmarks (borderline anti-pattern)
  • Intro tour (borderline anti-pattern)
  • The sign-in wall (anti-pattern)

Pattern: The free sample

Also known as: Limited functionality trial, freemium, lazy registration, or gradual engagement

Description:
This pattern enables new users to access a limited set of features without needing to create an account. More features, often those allowing data synchronization across multiple devices, are unlocked if the user creates an account. Some limited-time trials (like 30-day free trials) may leverage this pattern, but only if they don’t require a user to sign-up first.

Example: TurboTax’s SnapTax app allows users to try out the key features—namely, starting a tax return by using the camera—without needing to create an account first.

Pros:

  • Providing a preview greatly increases the odds of quality conversion
  • Free samples remove a customer’s perception of risk, giving him a more beneficial first impression
  • Allows the customer to experience your value proposition first-hand (which can be fun)
  • Establishes trust
  • Lets you monitor the customer’s interests and preferences, so you can provide a personalized experience when he creates an account

Cons:

  • You may need to save user-generated content locally until an account is created
  • It may be unclear where user data will be saved if there is no account set up
  • Requires a strong communication strategy to prevent user abandonment
  • Freebies may not fit with all business models

Considerations:

  • Provide a good amount of quality content in a free sample. Users shouldn’t be so limited that they can’t do anything without being prompted to sign up.
  • Ensure your business model can support a free sample approach
  • Have clear entry points for sign-in/sign-up actions
  • Reassure customers that their content will be saved even if they don’t have an account. If the user needs an account to save content, make this very clear before he begins.
  • Have consistent, respectful communication with the customer during the trial period
  • Save content generated during the sample period and transfer it automatically when an account is created

Further reading:
For a detailed look at why deferred sign-up can be beneficial, read Jared Spool’s famous article The $300 Million Button. Luke W. has written about the same concept in these two articles: Sign Up Forms Must Die and Gradual Engagement Boosts Twitter Sign-Ups by 29%. Finally, try “Conversion Psychology #1: Why Stealing Grapes is Good for Your Form Conversions [Case Study]

But also, learn from this case study about why you shouldn’t overlook the need for sign in/sign up actions to be easily discoverable, and to provide clarity about how content will be saved.


Pattern: Playthrough

Also known as: Interactive tutorial, warm-up exercise.

Description:
A playthrough is a tutorial-like experience in which the user is taken into a dedicated flow to complete tasks that represent the main interactions of a product.  Playthroughs often establish a goal up front (“let’s create a list!” or “kill all the zombies!”) and are performed in the context of the product’s normal interaction.  Users progress at their own pace, triggering text, audio or visual guidance as they hit specific points. Sometimes guidance appears before a user needs to complete an action, but in other experiences, like games, guidance will appear after the user has trouble.

Another aspect of a playthrough is that it provides a low risk of failure. Meanwhile, any successes made during it (points, added list items, etc) are saved and transitioned into the full product experience.

The playthrough in Plants vs. Zombies 2 uses a combination of exercises and text assistance to teach new players while allowing seasoned ones to skip.

Pros:

  • The user can learn by doing (situational learning)
  • A risk-free space for users to build skills and earn starting achievements
  • Develops a set of core competencies that help users transition to advanced actions
  • Provides a positive first impression by giving a person an early success

Cons:

  • Some playthroughs don’t offer the option to skip
  • Too much instruction or hand-holding can be irksome

Considerations:

  • Limit the playthrough to core, relevant tasks and a comfortable length
  • Carry forward any achievements into the normal product experience
  • Provide a skip option
  • Make guidance modeless so it does not interrupt or obstruct interaction

Pattern: Setup wizard

Description:
A setup wizard presents a series of steps or conditions that the user needs to complete in order to use a product. This pattern can be embodied in both physical (like a paper quickstart guide) and digital (like a software installation wizard) forms. Steps usually need to be done in a strictly prescribed order, which distinguishes a wizard from the more exploratory aspect of the playthrough pattern.

Setup wizards have historically been used with traditional desktop software applications or new hardware installation.  They’re also used in mobile apps that need a user to configure a few settings before use. Wizards can also be deployed as part of a companion device experience; one device, like a phone, may be used to display the steps needed to set up a secondary device, like a printer or thermostat.

The setup process for the Fitbit Aria scale involves using prompts on the scale as well as on a phone or laptop.

Pros:

  • A setup wizard can transform a complex set of conditions into understandable steps
  • Takes the burden of decision making off of the user
  • Digital wizards can auto-progress a user when a condition has been met

Cons:

  • Too many steps can seem overwhelming or tedious
  • It is possible for users to get lost or be deterred by errors
  • The prescribed nature of the steps may feel too rigid for some products

Considerations:

  • Use a wizard for complex setup experiences on software or hardware that absolutely requires the user to meet specific conditions. Forcing a user to create an account is not considered an appropriate required condition.
  • Use signposting to set expectations and orient the user
  • Chunk complex conditions into clear, highly relevant steps, but balance this against having too many steps
  • Ensure that the user can easily recover from any errors

Further reading:
Read more about the setup wizard design pattern. 


Pattern: Inline cues

Description
These are hints seamlessly integrated into the layout of surrounding content so they do not obstruct or interrupt user interaction. They don’t need to be dismissed, although some do let the user dismiss them, disappear after continued use, or, in the case of blank slate messaging, when content populates the screen. By having inline cues take the shape of normal, everyday content, designers hope that they will be more easily readable and relevant than other forms of instruction.

In Polar, people scroll through a stream of cards to vote on 2-choice polls. The app leverages a few poll cards to educate new users about the app’s voting features.

Pros:

  • Improved readability due formatting consistent with other content
  • Does not interrupt or obscure a content experience
  • Increased relevancy
  • Provide helpful information when there is a blank slate

Cons:

  • Because they are so subtle an flow with the rest of the content, they run the risk of being ignored

Considerations:

  • Ensure the cue’s information is relevant to its surrounding content
  • Use inline cues to reinforce other instructions provided elsewhere
  • Do not overuse them; inline cues should never overwhelm a the primary content
  • Be comfortable with the fact that users can easily pass them over (this is one of their good points). Because of this, you may want to avoid using them for mission-critical instruction.

Pattern: Guided tour

Also may be known as: User-guided tutorialsprogressive disclosure tutorial, just-in-time tooltips, spotlight tour.

Guided Tour

Description
A guided tour is a series of individual hints that progressively appear during the first-time use of a product or interface. The hints can take the form of tooltips, overlays, modal alerts or even, abstracted in terms of physical products, as stickers atop various components. Tours can be product-guided or user-guided; hints in a product-guided tour are automatically progressed in rapid succession, while hints in a user-guided are triggered, and often dismissed, by the user’s actions.

In some ways there is strong overlap between this pattern and the playthrough. The most distinguishing element is that a playthrough is a fully-contained experience apart from the main product, while a guided tour occurs within normal product usage and individual hints can be dismissed.

 

Facebook’s Paper app has a user-guided tour comprised of a few small tasks. Once completed, the tasks are automatically checked off and dismissed.

Pros:

  • The guided tour is relevant to the user’s current context
  • By presenting single tasks or instructions, they are easy to remember.
  • The new customer can learn at her own pace if the tour is user-guided.

Cons:

  • If the tour is product-guided, the user may be unprepared to go through all the instructions at once.
  • Some tours cannot be skipped, causing user frustration.
  • Some tours overuse hints.

Considerations:

  • Rely on the user-guided tour instead of the product-guided tour. This will give users the ability to learn at their own pace.
  • Let users dismiss individual hints (don’t just rely on a timer).
  • Provide an option to skip the entire tour.
  • Use modeless (not modal) hints so users can interact with the elements they explain.
  • If a hint asks a user to complete a task, have a clear completion state.
  • Allow users to recall information explained in the product tour via something like a Help section.

 

Pattern: Coachmarks (borderline anti-pattern)

Also known as instructional overlays

Description
Coachmarks are multiple call-outs that appear on a transparent overlay atop a viewport. Using text and, sometimes, arrows and images, they point to and explain the function of the product parts above which they appear. In digital products, coachmarks are modal overlays that explain functions in the UI. In physical products, coachmarks are screenprinted on a plastic film that overlays some view of the product.

Coachmarks are not new in the UX design space. They evolved out of a pattern more like the guided tour; Apple started to use the term “coachmarks” when it launched Apple Guide in System 7.5. Their use has exploded in the mobile space. Designers, grappling with the need to provide learning for experiences with as little real estate and time investment as possible, have added more and more content to single coachmark overlays.

 

To the left: The Wacom Intuos tablet comes sheathed in a clear plastic film that has coachmarks printed on it. To the right: The Flickr app uses coachmarks to point out the purpose of various interface elements.

Pros:

  • Easy-to-implement method of calling out product elements to a new user.
  • Because most coachmarks are grouped into one overlay, they are often easier to bundle so the user can re-access from a help screen or other prompt

Cons:

  • Coachmarks obstruct interaction with the very elements they call out.
  • Because they are perceived as an obstruction, users may quickly dismiss without reading.
  • They don’t solve underlying problems with confusing UI/product components.
  • Multiple coachmarks increase cognitive load and put a strain on short-term memory.
  • Many times, coachmarks involve text written in playful, hard-to-read fonts that are loosely placed across the viewport instead of organized in a “skimmable” format.
  • Coachmarks be difficult to rediscover after being dismissed.

Considerations:

  • Address any underlying UI issues first. Try to avoid coachmarks altogether.
  • Consider a user-guided tour or playthrough that allows a user to interact with the elements about which they are being instructed.
  • If you must use coachmarks, be ruthless about quantity. Consider that today’s scientists think we can only hold 3 to 4 items in our short-term memories.
  • Lay out coachmarks in a readable, easy-to-skim fashion, with legible fonts and helpful iconography.
  • Have the coachmarks overlay appear above the user’s normal view of the interface/product, instead of placing it on a screenshot. This will improve the transition when the user dismisses the overlay.
  • Instead of forcing a new user to see coachmarks automatically, consider making them available on-demand when a user explicitly seeks help.
Further reading:
Try reading this great piece on coachmarks over at Nielsen Norman Group.

 Pattern: Intro tour (borderline anti-pattern)

Intro Tour

Description
An intro tour contains canned content that explains a product’s features and/or value proposition.  As the name implies, it appears before the real product experience begins, making it different from the in-context guided tour. It can be a static slideshow, animated slideshow, or video.  An intro tour is commonly modal (the exception being those integrated with other content on a website) and so requires the user to finish or skip it to get into the main product experience.

In most of today’s products I’ve observed the intro tour being used like a sales brochure instead of a functional learning tool.

The Fitstar mobile app opens with an animated slideshow tour. Note the ability to skip the intro by tapping “Get Started” from any panel.

Pros:

  • Intro tours are an anti-pattern as they don’t offer much customer benefit. However, if you have a product with no other way to help new users, an intro is better than nothing.

Cons:

  • Intro tours show information out of context, which increases cognitive load and the likelihood that content will be forgotten.
  • Intros are seen as a barrier to the product, so users often skip or breeze through them in order to start using the product.
  • Intro tours are often guilty of showing irrelevant content or marketing content instead of functional info.
  • Some intros don’t let the user skip them.

Considerations:

  • Make the tour modeless. For example, integrate it into a home screen so that users don’t perceive it as a barrier.
  • If you must use a modal intro tour, allow a user to skip it from any screen.
  • Limit the number of panels in a slideshow, or the amount of seconds in a video. Following the rule of 3 is always a good start.
  • Be ruthless about providing succinct, functional instruction instead of marketing. Show screenshots or product components instead of abstract imagery.
  • If your tour uses sound for any critical information, provide redundancy through captions. Many users may be on mute or find it inconvenient to play audio.
  • Allow users to revisit the tour.

Anti-Pattern: The sign-in wall 

Sign-up wall

Description
The sign-in wall is shown when a customer is required to have an account before they can use any part of a product. This anti-pattern often appears at the end of an intro tour.

Showing a login form to new users is not in and of itself an issue, as long as there are other paths a user can take. But in this pattern, there is no option for the user except to sign in, sign up…or leave.

Secret is an iPhone app for anonymous sharing, but asks users to create or log in with an account on first launch. There is no other path for someone to take.

Pros:
There is really no value in using this approach with new customers.

Cons:

  • This asks for something of a potential new customer without letting them see what they get in return.
  • It places a wall between the customer and the experience of your value proposition.
  • Sign-up flows, due to requesting work on part of the user and the propensity for errors, are common bounce points.

Considerations:
It’s absolutely true that there will be some services critical to your experience that require a user to sign in with an account. And it is important to make sure the account registration or sign-in are quickly accessible. But before asking users to do this for you, provide them with free samples or a playthrough. You may be more likely to gain them as high-quality, registered customers.

Further reading:
If you haven’t visited these links already, visit Luke Wrobleski’s Sign Up Forms Must Die and Conversion Psychology #1: Why Stealing Grapes is Good for Your Form Conversions [Case Study].

2 comments

  1. My fall back rule for using a wizards, is if a single page dialog does not allow for all item required to be presented in a easy to understand manner. They can end up being as few as 3 pages, Two pages of selections, third page display summary of pages 1 & 2 to review to verify and confirm eliminating errors and establishing trust.
    Summary of all the steps and selections, in the order User encountered them, review prior to completion as an error prevention and User comprehension.

    I find wizards useful for installing software and as a setup tool for complex managements and maintenance systems.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>