Compiled by the Toutour team through in-depth web research: 32 onboarding patterns, 10 data-backed anti-patterns. Tags also tell you which package each pattern belongs to.
π ηΉι«δΈζη β Toutour, free (MIT) β‘ Get Toutour Pro
β Interactivity requires JavaScript. If you're seeing this line in a chat preview panel, it means the script has been blocked β download this file and open it directly in a browser, and all the demos will come alive.
Whatever can be made interactive, we made interactive β every card's dashed box can be played with directly. Tags represent Toutour's stance on each pattern:
Memory decays once the tour ends; the checklist persists across sessions, turning "unfinished setup" into visible progress. Each item can carry a mini-tour as its payload.
Next-Next-Next passive tours "get finished but never get learned." Action-gated steps lock Next until the user actually performs the action.
One tour serving everyone = wrong for most people. Add one question to the welcome card, different roles get different tours, and the GA4 funnel gets segmented along with it.
Finish a step and get dead silence β the user isn't sure "did it work?" Acknowledge, locate, celebrate are three different things; only the last one earns an animation.
New features that ship quietly go unnoticed, but users won't sit through the tour again. A pulsing dot is a non-intrusive invitation β the explanation only expands once it's clicked.
Already built in: persistent beacons + single-point guidance, capped at 2 per page.
Explanations shown at signup are long forgotten by the time they're needed. Help needs to show up right when it's needed β only when a user first enters a panel does it offer that panel's mini-tour, once and only once.
Already built in: a first-visit rule engine + stall trigger, with a per-session cap on offers.
New accounts are full of blank screens β a tour pointing at an empty table is pointing at nothing. The empty state itself is a tour surface: explanation + first-step CTA.
Already built in: available in both the generic and store variants; once real content exists, it retires for good.
Say everything at once = nothing gets absorbed. This isn't a widget, it's a pacing policy: main tour β€5 steps, overflow automatically demotes to a mini-tour or a checklist item. Toutour's two-tier structure is itself this pattern.
Turn a minor tip into a blocking modal, and what users learn is "see it, dismiss it." Priority determines the container: must-see β modal, element explanation β tooltip, announcement β slideout.
A browser permission prompt popping up out of nowhere is almost irreversible once denied. Explain the benefit with your own UI first β only call the real API once "Enable" is clicked; "Not now" keeps the right to ask again later.
Filling out your profile first, inviting teammates first β that's wasting the user's highest motivation, right when they arrive, on zero-value busywork. Step 1 should produce a "first result"; dump the busywork on the checklist.
Every decision you force during setup is friction, and most people just accept the default as-is β a badly-set default silently defines the product experience. This lives in the customer's form, not in the overlay.
β #freq has no default (friction)
β #tz defaults to UTC β recommend pulling in the browser timezoneA tour dies the moment the page changes, and can't be shared. The URL is addressable (support can hand a customer a link that jumps straight to step 3) + it auto-resumes after being interrupted.
The Free engine has startAt and resume() built in; Pro adds named routing across main and sub-tours, welcome-card suppression, and fast-forwarding through action-gated steps.
app.example.com/?tt_tour=setup&tt_step=3
Tour completion rate is a vanity metric. Activation (the first real value) and time-to-value are what predict retention. The customer declares one aha event, and the event stream carries elapsed time.
Already built in: an event map + a GA4 activation event, carrying time-to-value.
Big finding: the entire award-site design culture almost never uses a spotlight tour. Guidance is woven into the page itself β these are "ambient" tours.
Below a 100vh full-bleed hero there's no hint of continuation, so it reads as "that's the whole page" β the false-bottom effect kills exploration. Fix: expose half a card plus an arrow that disappears. The #1 ailment of vibe-coded sites.
The load wait is unavoidable anyway, turn it into the first beat of brand narrative β name, a one-line positioning statement, a progress count. Different from a skeleton: a skeleton previews the layout, a preloader narrative delivers a message.
When the cursor nears an interactive zone, it becomes the instruction itself (drag / hold / view pill). A tooltip speaks once and disappears; a cursor label re-teaches every time you get close.
Describing a motion in words is the worst way to teach it. The game industry's answer: demonstrate the motion itself β a ring fills in as you hold, a drag handle wobbles toward the direction.
Before an audio-driven experience starts, give an explicit choice first: sound on / off. Browsers already block autoplay anyway β turn a technical constraint into an orientation moment.
Every entrance animation needs two escape hatches: a visible skip button + an automatic static version under reduced-motion (vestibular disorders, ADHD, power-saving mode). This isn't a feature β it's the pass bar for everything you ship.
prefers-reduced-motion β flip it in your system settings and watch the arrows and pulses all stop.Players quit within three seconds of confusion, and there's no sales rep to call and win them back β so the game industry has spent forty years honing "the tutorial that doesn't feel like one."
The classic platformer's first level: flat ground, one slowly approaching threat, jump is the only move you need β the layout itself makes the correct behavior the natural behavior. Web translation: the first screen carries exactly one primary action.
A step beyond level-gating: completion detection switches to real app events. "Add your first product" completes the moment a product_created event fires β done yesterday, done in another tab, done before the tour even started, it all counts. Order doesn't matter, and the tour never breaks just because the user went off-script.
Games use light and color to pull your eye toward the right path β no arrows needed. Web version: no modal, no tooltip β just make that one target pulse while everything else desaturates slightly. Most guidance moments only need to point at one thing.
The trigger isn't "page load" β it's hesitation. The relevant screen is open, the expected step hasn't been done, mouse and keyboard have sat idle for N seconds β only then does a prompt appear. Help with precise timing reads as smart; help that pops the instant the page loads reads as an ad.
The store's aha moment is "an anonymous visitor completes a purchase" β SaaS-style tours don't translate here. These patterns hide the tour inside the purchase flow itself.
A 3β7 question branching quiz whose answers map directly to a filtered product set. For a store, this is the tour β you learn the catalog's decision dimensions while answering. A commercialized version of the segmentation quiz.
Apparel's first friction point is size uncertainty β returns. Two or three inputs on the PDP, look up a table to output a suggested size. No ML needed β a size chart is enough.
"What room? What's the budget?" β a faceted filter turned into questions. Shares 80% of its skeleton with E1, but stateless: outputs a filtered URL, doesn't store a profile.
The best onboarding is tearing down a wall. Push account creation to the order-confirmation page β for someone who already paid, that's just one extra password field. Baymard: forced registration before checkout is a self-inflicted top cause of cart abandonment (roughly 24β35% across survey waves).
autocomplete suggests scope ("running shoes β in men's / in women's"), users learn the catalog taxonomy while typing. A tour can only point at the search box once; autocomplete teaches on every query.
The page where nothing turns up is the most common dead end. The rescue version: keep the query editable, show best-sellers and nearby categories, and log the query for the store owner while you're at it.
First-purchase discount popups work (vendor benchmark ~2.4% vs ~1.7%), but the variables decide whether it's a tour or an ambush: a 6β10 second delay or exit-intent trigger, a genuine one-time code, a frequency cap, a decline button that doesn't shame the user.
Chinese ecommerce fuses acquisition, activation, and referral into one loop (new-user pricing, cash red envelopes, unlock-by-inviting) β the most aggressive onboarding on the planet. The only cleanly portable idea: a new-customer-only, clearly-stated concrete benefit β everything else needs backend economics plus fraud prevention, and slides fast into manipulation.
Free already flags these ten patterns during analysis (with the figures below); Pro goes further and refuses to generate the harmful patterns, and hands you a guardrailed alternative component instead (honest offers, zero-results rescue, etc.). Most tools generate more overlays β few tools refuse to generate the harmful ones.
Independent peer review (peer-reviewed)
Β· Andersen, E., O'Rourke, E., Liu, Y.-E., et al. (2012). The Impact of Tutorials on Games of Varying Complexity. CHI 2012. doi:10.1145/2207676.2207687 β A/B experiment with 45,000+ players across 8 tutorial designs: tutorials were only effective for the most complex products (playtime up to +29%), with no significant effect for simple interfaces.Independent industry research (independent-industry)
Β· Kendrick, A. (2020). Mobile Tutorials: Wasted Effort or Efficiency Boost? Nielsen Norman Group. nngroup.com/articles/mobile-tutorials β n=70 between-subjects experiment, 4 iPhone apps: card-tutorial group SEQ 4.92 vs skip group 5.49 (p=0.047); no significant difference in success rate or time.First-party / vendor-reported (vendor-reported β read for direction, not as precise values)
Β· Morell, D. (2015). Google+: A case study on App Download Interstitials. Google Webmaster Central Blog. developers.google.com/search/blog β the interstitial saw only 9% tap install and 69% leave immediately; after switching to a small banner, mobile-site daily actives rose +17% while installs fell only β2%. This is self-disclosure against the vendor's own prior approach, so bias is relatively low.Trust grade key: peer-reviewed is the highest trust; independent-industry has no conflict of interest from selling tour tools; vendor-reported samples come from the vendor's own customer base and carry selection bias, noted where cited. Pattern names are common industry terminology; all prose on this page is original synthesis.
Β© Toutour Β· telaaurealab.com β Free MIT open source (engine + scroll hints + anti-pattern warnings); Toutour Pro includes finished code and Playwright verification for all cards marked "Pro".