Patterns for new user experiences

12 min readJan 7, 2019

A version of this post was originally published at www.kryshiggins.com in 2014.

I’ve been cataloguing first time user experiences for several months. Now, I’d like to share the most common patterns products have been using. I’ll share some pros and cons of each pattern, provide other design considerations, and show an example of that pattern in action. 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 recap first time UX design principles:

1. 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 an on-demand help section

2. 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.

3. 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.

4. Focus

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

And now, the patterns.

Pattern: Free sample

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

The free sample 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.

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 of the free sample pattern

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 of the free sample approach

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 for the free sample pattern

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

Pattern: Playthrough

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

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 of playthroughs

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 of playthroughs

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

Considerations for playthroughs

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

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 of setup wizards

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 of setup wizards

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 for setup wizards

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

Pattern: Inline cues

Inline cues are educational elements 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 of inline cues

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 of inline cues

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

Considerations for inline cues

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 tutorials, progressive disclosure tutorial, just-in-time tooltips, spotlight tour.

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 linear succession, while hints in a user-guided are only triggered when the user reaches the appropriate point in their experience. In the latter case, hints may appear in different orders for different users.

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.

Unlike a playthrough, a guided tour occurs within the everyday product context.

Pros of guided tours

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 of guided tours

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 for guided tours

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

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.

The Wacom Intuos tablet comes sheathed in a clear plastic film that has coach marks printed on it. Unfortunately, all that context is lost when the user unwraps the tablet.

The Weather Channel app uses an overlay with coach marks to point out the purpose of various interface elements, but again, this context is lost as soon as the user dismisses the screen.

Pros of coachmarks

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 of coachmarks

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 for coachmarks

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.

Anti-Pattern: Intro tour

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 of intro tours

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 of intro tours

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 for intro tours

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: Signup wall

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.

Cons of signup walls

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 for sign-in walls

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 entry points are easily accessible. 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.