Skip to main content

Guide

How to make a step-by-step guide with screenshots

Izly TeamLast updated: 6 min read

On this page

Why use screenshots in a guide?

Describing an interface task in words is long and ambiguous: “the third option in the top right menu” fails if the reader’s screen is different. A screenshot shows which button to press and lets the reader confirm they are in the right place.

A screenshot alone is not enough. Each image needs a short action sentence and, where relevant, a warning, so the document stays scannable and accessible to screen reader users.

What methods exist for making a screenshot guide?

Manual screenshots, recorder tools and screen video compared
CriterionManual screenshotsRecorder tool (step capture)Screen video
Preparation timeLong: capture, crop, paste for every stepShort: steps appear while you workShort: record and publish
Updating one stepReplace the image, reformat the documentEdit only that stepRe-record the video
ScannabilityHighHighLow: you have to watch to find a step
SearchabilityDepends on the documentStep text is searchableUsually only the title
Visual consistencyVaries by personProduced with the same rulesOne continuous take
LimitTiring for long tasksWorks only in supported environments (for example a browser)Hard to hide sensitive data afterwards

Which is right depends on the task. A five-step task done once a month can be made by hand; frequently changing, multi-step interface work saves time with a recorder tool. Video helps most when you want to show the live flow in an introduction.

How do you make a screenshot guide by hand?

  1. Rehearse the task once. Decide which steps are needed and drop the rest.
  2. Prepare a clean environment. Use a test account and sample data, and close extra tabs and notifications.
  3. Capture each step. Keep the same window size and zoom level so images appear at the same scale.
  4. Crop and mark the target. Keep only the relevant area and point at the button with a ring or an arrow.
  5. Write one action sentence under each image. “Click New record.”
  6. Hide sensitive information. Cover names, emails, ID numbers and passwords before sharing.
  7. Check order and numbering. Try the document with someone who has never done the task.

How do you make a screenshot guide with a recorder tool?

Step-capture tools take a screenshot on every click and produce a step sentence from the name of the clicked element. You then correct the result. The sequence below applies to most tools of this kind.

  1. Start the recording and work at a normal pace. Avoid unneeded clicks; each click becomes a step.
  2. Stop and review the step list. Delete extra or wrong steps and fix the order.
  3. Correct the text. Compare the automatic sentences with the interface names and rewrite vague ones.
  4. Edit the images. Crop, adjust the marker, add arrows and text if needed.
  5. Hide sensitive areas. Check whether the tool’s hiding method is permanent.
  6. Share. Link, PDF or an embeddable format: pick what suits the audience.

What makes a good screenshot?

  • Show the target. Mark the element to click with a ring, arrow or frame.
  • Crop. The area the reader must focus on should fill most of the image.
  • Keep the scale constant. Text size should be similar across images in one document.
  • Do not use real data. Work with a test account and made-up records.
  • Write alt text. Say in one sentence what the image shows; this also serves readers who use screen readers.
  • One step per image. One screenshot, one step.

How do you write step text?

Step text starts with a verb, uses the interface names exactly and asks for one thing. “Click Save.” “Type the customer’s name in the Name field.” Give warnings and tips as separate blocks instead of burying them in the step, so the reader does not miss them.

For more rules and weak-versus-strong examples, see the work instruction guide.

How do you handle sensitive data in screenshots?

Screenshots often carry more information than expected: usernames, emails, customer names, amounts, IDs in the URL. The safest approach is to use test data before recording; anything left is covered with a tool that changes the pixels permanently. A shape drawn on top or a light blur does not really remove information. See redacting sensitive data in screenshots.

How do you make a step-by-step guide with screenshots in Izly?

Izly applies the recorder-tool method to web applications. You start the Chrome extension, do the task, and every click becomes a step with a marked screenshot.

  1. Record. Start the extension. Recording runs only when you start it, the step count is visible while you record, and an unfinished recording is recovered when you reopen it. By design the contents of password fields are not read; the status of that commitment is on the Security page.
  2. Edit. Fix the text, duplicate a step, drag to reorder, merge neighboring steps, delete. Add tip, warning and heading blocks. On the image, move and style the marker, crop, and draw arrows and shapes.
  3. Redact. Mark sensitive areas with boxes; the server permanently replaces the pixels, and shared links and PDFs use only the redacted copies.
  4. Share. Anyone with the link, workspace members only, or just you; revoking a link closes access within a minute. You can also download a PDF.

Only Chrome is supported today and recording is limited to web applications; we give no date for a desktop app or other browsers. Title and description suggestions are optional, and a workspace admin can turn them off completely. See how it works or start free.

Frequently asked questions

What is the fastest way to make a screenshot guide?

For long, frequently changing interface tasks, a recorder that captures steps automatically takes the least effort. For short, rarely changing tasks, doing it by hand is fine. Speed matters at update time as well as at first creation.

Should a screenshot guide be shared as a PDF?

A PDF suits a signed handover package, an audit folder and offline use. For frequently changing tasks a link is better, because readers always see the current version; a PDF is a copy from the moment it was downloaded.

Do I need to add a video to the guide?

No. Video shows the live flow but makes it harder to find, search and update one step. A written step-by-step guide is more practical for most tasks; a video can be an optional extra.

What should I do if screenshots contain personal data?

First try test data. Redact whatever personal data remains permanently before sharing; a shape drawn on top is not enough. See the guide on redacting sensitive data for details.

Related pages

Record it once and let the guide write itself

With Izly you do the task once in the browser. Clicks and screenshots become a step-by-step guide that you edit and share by link.