Product Adoption

Product Tour UI/UX: The most popular patterns (and how AI is changing the definition)

Sara Detrik

September 15, 2026

User Onboarding

Checklists, Tooltips & Modals

Product Tours & Walkthroughs

Retention & Churn

Checklists, Tooltips & Modals

You know you’re in trouble when your user journey looks like a rapid fire series of “next”s. It happens to the best of us. Your product tour isn’t working the way it should. The game is changing, and when retention hinges on your relationship with your customers, their behavior is often all you have to go off of. Which makes that “next” chain double damning. 

There’s a bigger decision today than “what widget goes where”. First, you have to answer should you even be walking your users through your product?

The answer comes down to expectations and making an informed decision about who’s in the driver’s seat: the product, the user, or an agent.

When you pick one, the patterns fall into place. So how do you make a choice between the three options and what does each mean for the playing field you’re entering? 

In this article, we’ll review each choice, the nine product tour patterns that follow, and new AI patterns you might want to consider.

Three ways to drive through your product

Before you even begin to think about patterns, you have to start by answering that larger question. Who’s going to be doing the most work to learn your product? Aka: who’s in the driver’s seat?

The best way to think about it are in three modes

  • Product-driven: You choose the path in the product and walk the user through what they need to know through a series of well-timed experience interruptions. In this path, you have chosen which one action matters the most to your user. You get total control over the output, but there’s a higher risk that users skip your tour. 
  • User-driven: The user chooses the path; you get as many obstacles out of the way as possible while showing them their progress. In this mode, the user showed up to your product with a specific task in mind. It’s great to respect user-intent, but the trade-off comes into play when it does nothing for someone who doesn’t know what they want to do.
  • Agent-driven: The user says what they want and the product does the set-up on their behalf. This one’s best-in-class, but tough to pull off. It’s the fastest path to value if you can get a single sentence to become the correct first outcome. But when it fails, it’s hard to track what it got wrong.
Three ways to drive through your product
Mode Who’s doing the work You’re betting that… The trade
Product-driven The product picks the path and walks the user down the road. You know the path that matters most to your user. Complete control of sequencing, but users are more likely to skip.
User-driven The user picks while the product clears a path and shows progress. The user arrives with intent. Respects user intent, unless they have none.
Agent-driven The user states their intent; the product does the setup. You can turn a sentence into a perfect first outcome. Fastest path-to-value, but hard to see failure when it misreads.

Here’s how to pick. 

  • If you can name the one action that connects to retention… go product-driven and walk your users there. 
  • If users arrive with a specific job in mind… go user-driven, get out of the way, and show them their progress.
  • If the first useful outcome is mostly configuration… go agent-driven so instead of teaching the set-up, you start users off with a result.

Once you’ve decided your driver, you narrow down what patterns will work best for the best product tour UI for adoption and retention.

The nine product tour patterns

A product tour pattern is a surface over your product, the visual indicator to your user that there’s information they need to know. The level of importance helps determine which pattern it belongs in.

A lot of the success of these patterns comes down to a second axis: timing. Does it appear upfront? On-demand? Or does it trigger based on specific behavior? Even the same pattern, when paired with different kinds of timing, becomes a varied series of experiences for your user. 

Most pattern lists mix components, timing, rules, and capabilities to create effective guidance series. For this article, we focus on the driver as a way to determine which pattern is the most effective choice for your product tour UI. 

The nine product tour patterns
# Pattern What it looks like Which mode does it belong with?
1TooltipA pointer anchored to an elementProduct-driven
2ModalA blocking layer over the product UIProduct-driven
3SlideoutsA panel that slides into the screenProduct-driven
4PinsA dot or pulse inviting a click or hoverProduct-driven
5ChecklistA finite list with visible progressUser-driven
6Empty stateThe screen before contextUser-driven
7Review-and-editA generated result waiting approvalAgent-driven
8Inline suggestionAuto-complete, appears in placeAgent-driven
9Ask-anythingA way to request help at any momentAgent-driven

For product-driven modes

This is what we traditionally understand as a product tour, where patterns stop the user’s experience in order to share information.

Tooltips

A tooltip is a short, quick message pinned to one thing on the product/the user’s screen. 

There are two versions of the tooltip, one that’s gated and won’t let the user continue until they complete an action. The other is a passive tooltip, that still explains and stays out of the way. 

  • Use it when there’s a specific action that matters to the user, but there’s not really an obvious way to find it.
  • Don’t use this when you’re just labeling something. Don’t waste a precious step on what a re-name could fix for you. 
  • Tooltips fail when you gate more than one or two steps. When you force a third full stop, users begin to get frustrated and that’s how you start the “next” flow. 
  • Gate the one action that predicts your customer’s retention. Every other tooltip should be passive. 

For more on writing and targeting, read our tooltip guide.

Modals

A modal is a box that covers up the entire screen until it's dealt with, also known as a pop-up.

This is a big swing, since it costs user patience. The best use this full stop to offer something useful to their user, like picking a template or naming a project, rather than the more typical ‘welcome to the platform’ message. 

  • Use it when one decisions has to happen before anything else starts making sense. 
  • Don’t use this when the content is information only. It’s too big of an interruption for something simple to land.
  • Modals fail when you hit another in the same session. People learn to close boxes without reading them, then don’t unlearn it. 
  • If the modal isn’t collecting a decision, make it a slideout instead. 

For more on copy and timing, read our modal guide.

Slideouts

A slideout is a panel that slides in from the edge of the screen ( usually a corner) and offers users information without stopping them from taking other actions.

Think of it as an in-between for tooltips and modals. Let’s say you want to pin information that’s more than a sentence, but you don’t want to stop people in their tracks. A slideout is that middle ground. It can carry a paragraph, an image, a short video, and two buttons, without blocking a user’s work. That makes it the right choice for the message that's too big for a tooltip and too optional for a pop-up.

It's also the most useful pattern for new features, surveys, maintenance heads-ups, and nudges towards upgrading to a new pricing tier.

  • Use it when your message needs more room than a tooltip but doesn’t require a user decision.
  • Don’t use it when you need an answer to move your user forward, or when a message only makes sense when it points at one specific button or area.
  • Slideouts fail when you ship too many of them at one time. Because slideouts don’t block anything, they often become the default for every announcement. But that teaches your users that this is a catch-all, and they stop looking entirely.
  • Treat that corner of the screen as a budget rather than empty space.

Remember, slideouts on mobile are a different animal. A panel that takes a tidy corner of a desktop screen ends up covering about a third of a phone for the same message. 

Hotspots and pins

A pin is a dot or pulse placed next to a button, or an area of interest, that invites a click without demanding immediate action. It is the politest pattern. 

  • Use it when the feature you’re pointing to is optional, and finding it doesn’t make or break the user experience. 
  • Don’t use this when the action is required. This pattern is a suggestion, and you’re looking for a tooltip.
  • Pins fail when nobody sees it due to faulty design (white on white, etc) or when it goes stale. This pattern needs to be tied to behavior, since it registers to users when it’s still there after their 90th day on the platform.
  • Check whether a suggestion (below) does the same job at a better moment.

For user-driven patterns

Sometimes, your user knows exactly what they want to do. Here are two patterns that help you step out of the way.

Checklists

A checklist shows a short list of setup steps and how many a user has left.

A user goes in wanting an outcome, but doesn’t know how much work is between them and their desired action. A list gives them an end to work towards, so what they have to do becomes more reasonable in their mind.

  • Use it when setup takes several steps and won’t happen in one sitting.
  • Don’t use it when all your steps lead to articles; avoid building a reading list.
  • Checklists fail when the pattern grows. Every new feature adds an item until the list is twenty points deep. Make sure someone continues to update and prune this pattern.
  • Every item should produce a tangible outcome a user can see. If checking off a box doesn’t change anything, cut it from the list.

Empty screens

Every product has screens that start blank. That’s free real estate for instructions that sit where the work happens, then disappear when a user succeeds and the empty screen changes.

  • Use it when any screen in your core flow starts empty.
  • Don’t use it when… honestly, try to use it. There’s not really any reason not to take advantage of an empty state.
  • An empty screen fails when it stays empty because product and engineering have too big of a roadmap, so a tooltip just has to do. 
  • Review all your empty screens before you plan a single product tour step. How many do you have and how can you use them to cut down on tooltips and modals?

For agent-driven patterns

This is the new pattern that AI introduced, and it’s been going on strong with some of the fastest growing PLG companies in the game.

The question at signup

Instead of touring five features, you ask “what are you here to do”. Then, use the answer to build a personalized first outcome.

Many PLG leaders adopted this one. Airtable's relaunch in July 2025 made it the center of their onboarding: you describe what you want to track, and it builds a working base from the sentence. Zapier does the same for automations.

  • Use this when the first useful outcome is mostly configuration.
  • Don’t use this when there’s nothing structured that the answer could turn into.
  • This question fails when you don’t consider the hidden guided context behind your AI answer. If you’re not being laser targeted on what comes after your ‘what brings you here’, and stopping at setting a field in your CRM, then you’re creating a frustrating experience for your users.  
  • With this pattern, you can replace your template gallery with a single box.

The first draft

This is directly tied to the question at signup. Build the first version of whatever task the user is working on, so their first job is to make tweaks,

Fixing something is easier than starting it. A rough version that's kind of right beats twelve polished templates that are all slightly wrong. That rougher draft is built off of whatever context the user provides, making it immediately more personalized and specific, even if they don’t get it in one shot. 

  • Use this when you can get close enough that correcting is faster than building.
  • Don’t use this when being wrong is expensive to undo. Anything that touches billing, permissions, or data other people can see is not for this tactic.
  • The first draft fails when it’s far, far offbase. If the rough draft isn’t even close to what the user needs, this pattern can become a deeply frustrating experience.
  • Whatever a user would have built in their first session, build it and let them correct it.

What AI changed

AI stepped into product tours and improved both modes and introduced the third.

  • When you interrupt: AI got better at picking the moment, which replaces a pin.
  • When you get out of the way: AI gives people something to ask. In-app help replaces a support tab and an unnecessary tour. 
  • When you do the setup: AI made this new mode possible. 

However, this doesn’t take people out of the equation. Someone still has to decide what a good first outcome looks like. AI can build toward a definition of "set up correctly”, but it can't tell you what that means for your product. That work moved earlier in the process, to an internal decision that happens before anyone builds a step. 

Who does this well

Who does this well
Pattern Worth a look What to notice
Tooltips (gated)FigmaYou have to draw a shape before it moves on
ModalsMiroThe welcome box is a template picker, not a greeting
HotspotsGrammarlyA pulsing dot runs a demo inside a real document
Inline suggestionNotionSuggestions on a blank page instead of a tour over it
ChecklistsStripe, VercelOrdered, finite, every item a real setup step
Empty screensAttioSetup instructions live where the records will go
Ask-anythingIntercomAnswers “how do I…” inside the product, on demand
The question at signupAirtable, ZapierOne sentence becomes a working base (Airtable, July 2025)
The first draftCanvaAsks what you’re making, then makes a version of it

For full teardowns, check out the best user onboarding examples

Interactive demos: aka a different animal

An interactive demo and a product tour are not the same thing. An interactive demo runs before signup, usually on its own page, and often built in an entirely separate tool. It wins in three situations: long sales cycles, expensive decisions, and products nobody can get into without talking to sales.

How to build a product tour

  1. Pick one outcome that a user reaches where they can understand the full value of your product. Think "published their first experience” instead of "saw the editor."
  2. Use your data to see where people stall out.
  3. Choose who’s driving, then choose the pattern.
  4. Write your messaging in verbs. "Add your first record”.
  5. Build the product tour where you can track and make changes without requesting tickets, so when you iterate you don’t have to wait on engineering’s roadmap.
  6. Measure success based ont the behavior your tour caused, not getting to the finish line.

Remember: keep it short. Wanting to cover more features in one tour is an impulse that overwhelms your user.

When to not build a product tour

  1. Your product is simple enough that the tour winds up being the hard part. If someone gets the idea in thirty seconds, a four-step walkthrough is the most complicated thing on the screen.
  2. You already know why a user is there. Instead of a 5-path tour, ask one question and give them the single path they came for.
  3. The tour is covering a confusing interface. If a tooltip exists because a button's label is bad, that’s a bandaid for a larger problem.

Before designing a tour, ask what you'd have to remove in order not to need one. Sometimes that's the cheaper project.

How to measure your product tour

Completion rate is the most common way people report their product tour success, but it answers the wrong question. It tells you if someone made it through the tour, but not if it worked.

What you want to know is whether the people who experienced the tour (and your chosen patterns) will be deeper users than the people who didn't. For that, you need a control group that didn't get the same experience. Without one, you're comparing motivated users to unmotivated users and reporting the gap as a result.

This gets more important the more you let the product drive. You can test two versions of a tooltip cleanly since you wrote both. You can't test a generated setup the same way, because what the model produced varies, not the words you chose. Once the experience stops being identical for everyone, a control group becomes the only honest way to answer the question.

Your product analytics will show you the final effect. But what it usually won't show you is cause. That's what a holdout gives you, and it's what Appcues Impact and Uplift are for — measuring whether an experience made the difference, with control groups built in rather than reconstructed afterward. It sits on top of the measurement you already have.

Build the tour, then find out if it worked

Choosing the pattern, oddly enough, is the quickest part. The hardest is shipping the patterns, changing your tactics when they underperform, and knowing which version moved your numbers — then doing that continuously, across the whole customer relationship instead of just the first ten minutes.

That's what Appcues does: build these experiences without waiting on a release, put them in front of the right people at the right moment, and find out whether they caused the change.

See how it works!

FAQs

How do you use slideouts effectively?
How do you design a modal people actually read?
How do you create a tooltip that doesn't get skipped?
How do you improve the first-run experience?
How do you reduce time to value in onboarding?
How do you measure whether a product tour worked?

Stay connected with Appcues

Sign up for Quickcues and get our monthly updates!