How to Add Step Numbers to Screenshots for Tutorials & Docs

Why numbered steps beat paragraphs of instructions

Instructions fail at the moment of transfer: the reader looks at a paragraph, holds three actions in their head, switches to the app, and forgets which button came second. Numbered badges on the screenshot itself remove that memory load — the reader’s eye goes 1, 2, 3 across the actual interface, matching each number to written steps below the image. Numbers also make instructions verifiable: a reader who gets lost can find the badge they finished and resume, and a support agent can say "you are stuck between 2 and 3" instead of re-describing the screen. For docs teams, numbered screenshots shorten the text around them — a sequence that needed five sentences of "then click the gear icon in the upper right" becomes a screenshot and five short lines. Fewer words, faster reading, fewer support tickets.

The rules: one action per screenshot, numbers near the target

Numbered screenshots go wrong in predictable ways, and a few conventions prevent most of them. Keep each screenshot to one moment in the flow — if the interface changes after a tap, that is the next screenshot, not another number on this one. Three to five numbers per image is the comfortable ceiling; past that, split the sequence. Place each badge immediately beside its target, never centered over it, so the number does not hide the control it labels; be consistent about the side you favor. Match the reading order of your audience — top-to-bottom, left-to-right for most locales — so the visual order and the numeric order agree. And keep the written steps in lockstep: the badge numbered 3 on the image must be step 3 in the text below it, or the reader trusts neither.

• One moment in the flow per screenshot
• Three to five badges per image, maximum
• Badges beside targets, never covering them
• Numbering follows natural reading order
• Image numbers and written steps always match

Keep one style across the whole guide

A tutorial is a set of screenshots, and inconsistency between them is what makes documentation look homemade. Decide the style once: one badge color (ideally a brand accent that contrasts with your product’s UI), one badge size, one arrow and highlight style, one background treatment and padding, one export size. Then apply it to every image in the guide — and to the next guide, so your documentation looks like a system rather than a pile of one-off edits. Consistency has a maintenance payoff too: when the UI changes and screenshot 4 needs retaking, a known style means the replacement drops in without visually clashing with its neighbors. Write the choices down somewhere, even as a note — future you, redoing one image six months from now, will match the set exactly.

Blur sensitive data before your tutorial goes public

Tutorial screenshots are captured in real accounts, and real accounts leak: an email address in the corner, customer names in a table, API keys in a settings pane, revenue figures on a dashboard. Before a guide ships, sweep every screenshot for data that is not yours to publish — including the margins, notification bar, and browser tabs, not just the area the tutorial is about. Where possible, capture from a demo account with fictional data; where not, mask. Use solid redaction for anything that must stay unreadable (keys, tokens, account numbers) and blur or mosaic for softer material like names and faces, which hides them without making the guide look censored. Do the sweep at full zoom, and make it the last step before export so late edits cannot reintroduce a leak.

FAQ