Users rarely go looking for help. They're halfway through something, they get stuck, and they either find the answer right there or they leave: to a search engine, to a support ticket, or out of the product. A help center is still useful, but it's a library across town. Contextual help is the sign at the corner where people get lost.
There isn't one right pattern. There are several, and each fits a different kind of question.
1. Inline hints
One line of text next to a field or setting: "We'll send receipts here", "Use the ID from your Stripe dashboard". Best for answers that fit in a sentence. If the hint needs a second sentence, it probably wants to be one of the patterns below.
2. Tooltips
A short explanation on hover or focus, usually behind a small info icon. Good for definitions ("What's an active user?") and terms the interface can't spell out. Bad for steps. Nobody reads a five-step process in a tooltip, and on mobile there is no hover.
3. Empty states that teach
The first time someone opens a feature, the screen is empty anyway. Use it. Say what this page is for, show the one action that fills it, and offer a short video of someone doing it. An empty state is the only moment the user is guaranteed to be looking at that feature with no other distractions.
4. A help launcher that knows the page
A help button in the corner is common. One that opens the guides for the page the user is on is rare, and much more useful. Someone stuck on the billing page should see billing guides first, with search for everything else. This is the pattern that replaces "go to our help center and search".
5. Guides with a video and a demo
For tasks with several steps, a sentence isn't enough and a full help article sends people away. A short guide that opens on top of the product works better: a narrated video for people who want to watch, a click-through version for people who want to try, and written steps for people who skim. We compared the formats in help center videos vs articles.
6. Walkthroughs on the real screens
For long tasks people do rarely, like configuring permissions or connecting an integration, the best help points at the actual buttons, one at a time, and waits for the user to click. It costs more to keep accurate than the other patterns, so save it for the tasks where people most often give up. More on the differences in interactive demos vs product walkthroughs.
7. Onboarding checklists and what's new
Two patterns tied to moments rather than pages. A checklist guides the first session; we wrote a whole post on building a SaaS onboarding checklist. A what's-new note announces a change where it happened, which beats an email nobody connects to the feature. See feature announcement videos for how to show changes well.
Which pattern for which question
| The user is asking | Pattern | Example |
|---|---|---|
| What goes in this field? | Inline hint | Where to find an API key |
| What does this word mean? | Tooltip | What counts as an active user |
| What is this page for? | Teaching empty state | First visit to Reports |
| How do I do this here? | Page-aware help launcher with guides | Exporting a report |
| How do I do this long, rare task? | Walkthrough on the real screens | Setting up single sign-on |
| What should I do first? | Onboarding checklist | A new account's first session |
| What changed? | What's new, in context | A redesigned settings page |
Where to start
Don't try to cover the whole product. Pull a month of support tickets, group them by the page they came from, and start with the top three pages. Put a page-aware launcher with guides on those, add hints for the questions that need one line, and measure whether tickets from those pages drop. Then move to the next three.
Mistakes that make users ignore help
- Tooltip tours on first login that point at ten things in a row. Most people click through without reading.
- Help that covers the very thing the user is trying to do.
- Links that send users to a separate help site in the middle of a task.
- The same generic help on every page, so it never answers the question at hand.
How Steperly does it
Steperly puts help inside your app with a help widget that shows the guides for the page your user is on. Each guide is made from one screen recording and comes as a narrated video and a click-through demo with the steps written out. For new users there's an onboarding checklist, and for longer tasks, walkthroughs on the real screens.