How to number the steps on a screenshot
Numbered markers, and why they beat four arrows on the same image. Where to place them, what breaks when you delete one, and how to decide between one image with five numbers and five images with one each.
You are explaining how to do something, you have a screenshot of the screen it happens on, and there are four or five things the reader has to do in order. The instinct is to draw arrows. The better answer, almost always, is small numbered circles — one per step, placed on the thing the step acts on — with the words living in the caption underneath rather than crammed onto the image.
This page is about doing that well: why numbers work, where to put them, what has to happen when you delete one, and when the honest answer is that this should have been three images.
Why numbers beat four arrows
An arrow says "this one". Two arrows on the same image say "these two", with no statement about order. Four arrows say very little at all — the reader’s eye has to find them, then guess a sequence from position, and the guess is usually reading order, which is frequently wrong. If step one is a button at the bottom right and step two is a field at the top left, arrows actively mislead.
A number does two jobs in one mark: it points, and it carries the position in a sequence. That is why every software manual converged on the same convention. It also lets the prose refer to the image precisely — "tap 3, then 4" — instead of "tap the button on the right, the second one, no, the other right".
The second advantage is silent: numbers are compact. Four arrows plus four text labels can consume a third of a screenshot and cover the interface you are trying to show. Four small circles consume almost nothing, and the words move to the caption where they can be as long as they need to be, can be translated, and can be read by a screen reader.
Where to put the marker
- Next to the target, not on top of it. A marker sitting over the button hides the button, which is the one thing the reader needs to recognise on their own screen.
- Consistently. If the first marker sits to the upper-left of its target, put all of them upper-left. Inconsistent placement makes the reader re-derive the relationship each time.
- In empty space where there is any. Interfaces have generous padding; use it. If the target is in a dense row, place the marker just outside the row and accept a slightly longer visual jump.
- Away from the edge. A marker touching the edge of the image gets clipped by rounded corners in chat apps and by aggressive cropping in previews.
- With enough contrast to survive downscaling. A marker that reads at full size and disappears in a thumbnail has failed at the size most people will first see it.
One more rule, mostly ignored: if the sequence crosses the image in a confusing path, add a faint line from each marker to its target rather than moving the markers. The line is cheap; a marker sitting on top of the thing it labels is not.
What breaks when you delete one
You place 1, 2, 3, 4, then realise step 2 was unnecessary and delete it. Now the image says 1, 3, 4. On a decorative image nobody cares. On an instruction image it is a genuine defect: a reader who sees 1, 3, 4 assumes they have missed a step and goes looking for the missing 2, and the caption underneath, which now numbers its steps 1, 2, 3, no longer matches the picture at all.
So the markers have to renumber themselves, and the renumbering has to run by the order in which they were created rather than by which one happens to be on top or which one was most recently touched. Z-order-based renumbering produces images where nudging a marker changes its number, which is a wonderful way to ship a wrong diagram. If your tool does not renumber, the practical workaround is to place the numbers last, after the sequence is settled, and to accept redoing them when the sequence changes.
One image with five numbers, or five images with one each
The right answer depends on whether the steps happen on the same screen.
- Same screen, and the reader can see all the targets at once: one image with numbers. Splitting it into five near-identical screenshots makes the reader diff them, which is much harder than following a sequence.
- Different screens: one image per step, no question. A screenshot of screen A cannot show a step that happens on screen B, and pretending otherwise with an arrow pointing off the edge helps nobody.
- Same screen but more than about six steps: split it. Six numbered markers is roughly where an image stops being an instruction and becomes a puzzle. Split at a natural boundary — "set it up", then "run it".
- The step is a state change rather than a click — a toggle turning on, a field filling in: two images, before and after, side by side. A number cannot express a change.
The words go underneath
Text baked into an image cannot be selected, searched, translated, read aloud, or corrected without re-exporting. So keep the image to numbers and put the sentences in the caption or the numbered list beneath it. The exception is a single short label where the position on the image carries meaning that a caption cannot reproduce — a label on one column of a chart, for instance.
When you do put text on the image, size it independently of your line weight. These are two different decisions that most tools bind together, and the result is either hairline arrows next to legible text or legible arrows next to text you cannot read.
Doing it in Marka
Marka has a numbered counter tool: tap where you want the next marker and it places 1, then 2, then 3. Deleting one renumbers the rest by creation order rather than by which marker is on top, so the image stays consistent with the list you wrote under it. Marker size, stroke weight and text size are all proportions of the image’s short edge, so the same marker looks right on a 4K desktop capture and on a phone screenshot, and text size is deliberately decoupled from stroke weight so you can have thin arrows and large labels at the same time. The counter is one of the Pro tools; cropping and the mosaic brush are free. Nothing is uploaded and there is no account. The interface is in Simplified Chinese in this version — the tools are icons, but it is worth knowing before you install.
Frequently asked questions
How many numbered steps can one screenshot carry?
About six before it stops working. Beyond that the reader spends more effort finding marker five than performing step five. Split at a natural boundary — configuration first, then execution — rather than by counting to six and cutting.
Should the number sit on the button or beside it?
Beside it. A marker on top of the button hides the exact thing the reader has to recognise on their own screen. Put it in the nearest empty space, consistently on the same side for every marker, and add a short faint connector line if the association is not obvious.
What happens if I delete step 2 out of four?
The image must not be left reading 1, 3, 4 — a reader will assume they missed something and your caption list will no longer match. The markers need to renumber, and the renumbering should follow the order the markers were created in, not which one is stacked on top, otherwise nudging a marker can silently change its number.
Should I write the instruction text on the image?
Only if the position carries meaning. Text baked into an image cannot be searched, translated, read aloud or corrected without re-exporting, so keep the image to numbers and put the sentences in a numbered list underneath, where they can be as long as they need to be.
Do arrows still have a use?
Yes — when there is exactly one thing to point at, an arrow is clearer and quicker than a numbered marker, because it needs no sequence. The switch happens at two: as soon as there are two ordered targets, numbers say something arrows cannot.
Do it in Marka
Marka is a screenshot markup app for iPhone, iPad and Mac. Brush a mosaic over what should not be seen, point an arrow at what should, number the steps, crop it to the shape you are posting in, and send. Everything is processed on the device — no upload, no account, no analytics, and a 2.4 MB download. Opening, cropping, the mosaic brush and export are free; Pro is a one-time purchase that covers all three platforms.