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

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.


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

Jump to a pattern:

Pattern: Free sample

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

Free Sample


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.


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.


  • 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


  • 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


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



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.

Plants vs Zombies playthrough

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.


  • 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


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


  • 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

Setup Wizard Pattern Illustration


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.

Fitbit Aria Setup Wizard

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


  • 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


  • 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


  • 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

inline cues


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.

Polar inline cues example

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.


  • 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


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


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



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 Paper App's user guided tutorial

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.


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


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


  • 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 pattern illustration


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.

wacom physical coachmark example

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.

Weather Channel app coachmarks

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.


  • 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


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


  • 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 anti-pattern illustration


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.

Fitstar Intro Tour

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


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


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


  • 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: Sign-in wall

Forced SIgn In Anti-Pattern Illustration


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's forced sign up

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.


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


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


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


  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.

  2. Hi Krystal, very helpful info! I’ve been trying to find onboarding processes that first ask “what type of user are you?”… we have an app that has no onboarding, but is starting to get some traction. We have made onboarding a top priority, but our challenge is that our recreational sports app provides benefits for different types of people (team managers, pickup group organizers, players, fans, etc.). Do you know if any examples that have a “what type of user are you?” question in it, and depending on which type, we take them through an adjusted walkthrough.

    Or is there a reason apps aren’t asking this in the onboarding, and we need to re-think the process?


    • Hi Aaron, thanks for your comments.

      Regarding a self-selection where a user chooses their persona…this pattern is one I’ve seen used, but should be used with caution. It’s not the most friendly. The reason for that is because users may (a) not want to be classified the same way you have classified them, (b) don’t understand your classifications, or (c) may click into other classifications because they think it sounds interesting (ie, maybe I’m a fan but I think it would be interesting to read about “Players.” Or perhaps I’m a player that is also a fan). Another risk you pose is alienating groups of people you didn’t anticipate. A good example of this last point came from Jeffrey Zeldman at An Event Apart: college websites that ask you to choose if you are a parent or prospective student or alumni aren’t anticipating existing students, teachers looking for a job, press, etc. Designing a persona selection tool that covers all possible cases would probably be unwieldy.

      You might consider instead structuring things around common actions. An example is eBay. They don’t ask people to choose “Buyer” or “Seller,” but they go into flows where visitors can buy, or where they can sell. I imagine buyers could also be sellers, so it would be restrictive to make people choose one or the other.

      Hope that helps!

  3. Thanks for this great write-up, Krystal.

    I am not sure I understand what “modeless” means in terms of interface design: is it an overlay on top of the interface, instead of a modal window that hides the interface underneath? Do you recommend they stay on screen until dismissed by the user, or act more like “growl” notifications that disappear after N seconds?

    • Hi Chris, thanks for your question!
      Modeless describes an interface element (dialog, window, etc) that does not block interaction with other parts of an interface.

      On the other hand, many dialogs are modal, meaning they require attention/action before they are dismissed and block interaction until they are attended to. This concept isn’t limited to visual UI. You can have interruptive, modal audio experiences that demand a user say or press something to continue with an experience.

      Modeless is usually the way to go though, depending on the situation, sometimes modal is OK. But modal is very interruptive and attention-demanding, risking user frustration if it’s not critical for them to spend time with it. You can also have modeless UI elements that are still annoying because they visually interrupt a user’s current task.

      It all comes down to making sure the method is right for the situation but, when in doubt, err on the side of not interrupting or blocking a user’s experience.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.