How to Create a Website Screenshot Appendix for a UX Research Report

A useful website screenshot appendix gives readers visual context for a research finding: the page state, control, error, or interaction step that helps explain what happened. It does not replace the finding. In the report, explain what the participant did, what you observed, and how that observation supports your conclusion; use the screenshot as supporting evidence.

Include only captures that clarify a task or finding. For each one, preserve enough context to interpret it, record the conditions that matter, check for private information, and connect its figure number to the relevant report text. There is no universal required screenshot count or appendix format.

1. Decide which screenshots belong

Start with a task, observation, or finding—not with a folder of screenshots. A capture earns space when it helps a reader understand a visible interface state relevant to the report.

Include: a control that participants overlooked, an error state, an interaction step, a confusing page layout, or a responsive difference that bears on a finding.
Omit: decorative captures, repeated states that add no new evidence, and images whose relevance is not explained in the report.
Do not overclaim: a screenshot shows a visible state. By itself it does not establish that a design caused a problem or that all users will experience it.

Google’s image guidance recommends using screenshots purposefully and being selective about which user interfaces to capture. A screenshot appendix is optional: published research papers sometimes document study materials with screenshots, but that example does not establish that every UX report needs an appendix. [Google for Developers: Diagrams, figures, and other images; USENIX: Blind and Human]

2. Capture a reproducible and interpretable state

Recreate the page and interaction state that supports the finding. Record the capture date and the conditions that could affect what the reader sees or how the state could be reproduced.

Navigate to the relevant page using the study’s test account or data.
Perform the task or interaction that produced the state. If the screenshot is a static page, record that context instead.
Capture the relevant state and note the date, viewport or device, browser, operating system, locale, and account or test-data state where they matter.
Save an original capture separately from any cropped or redacted report copy when your research handling process permits it.
Record a safe page reference. A URL can expose private information, so include it only if it is appropriate for the report’s audience and distribution.

These details are a practical record, not a mandated schema. Include what readers need to interpret the figure or reproduce a meaningful comparison; omit irrelevant fields. NIST’s work on website interaction logging addresses the broader challenge of recording and analyzing usability-test behavior and the value of deliberate, interpretable representations. It does not prescribe a screenshot-appendix format. [NIST SP 500-248: Design of a File Format for Logging Website Interaction]

3. Crop and annotate without losing context

Crop toward the relevant control or state so the reader’s attention lands on the evidence, but leave enough surrounding interface to show where it appears. A tight crop that removes the page context may make the image harder to understand.

Keep the visual treatment consistent across the report, especially when operating-system or browser chrome is visible. If two figures are intended for comparison, make the capture style and relevant conditions comparable. Numbered callouts can help readers follow a complex image; use them sparingly and explain every marker in the caption or nearby text. Tie figure numbers to a finding, task, or report section.

Google recommends cropping screenshots to relevant information and keeping screenshot appearance consistent within a document. [Google for Developers: Diagrams, figures, and other images]

4. Review and redact private information

Before sharing, inspect the full image—not only the area you plan to discuss—for names, email addresses, physical addresses, account IDs, customer records, access tokens, private URLs, browser notifications, and confidential content.

Decide whether each sensitive detail is necessary to interpret the finding.
Remove or cover information that is not needed. Use a fully opaque solid-color overlay for redaction; blur and mosaic can be reversible.
Check the exported image at its final size to make sure covered content cannot be read or recovered from visible layers.
Flatten an export that supports separate image layers, and inspect the flattened result before sharing.
Note in the figure record if privacy redaction or cropping changed the image in a way relevant to interpretation.

Google’s guidance says not to include personally identifiable information in screenshots and recommends a fully opaque overlay when source screenshots contain it; it warns that blur or mosaic may be reversible. [Google for Developers: Diagrams, figures, and other images]

5. Write captions and accessible descriptions

Introduce each figure with a complete sentence in the report. A concise caption should identify the page or interaction state and explain why it matters to the finding, without claiming more than the image shows.

Give the image concise, descriptive alt text that conveys its relevant content. If a figure is complex, explain the important details in the surrounding report text instead of trying to fit the whole interpretation into alt text. Captions, alt text, and longer descriptions serve different purposes.

Caption pattern: “Figure 4. Checkout error state after the participant submitted the shipping form; the inline message is the state discussed in Finding 2.”

Alt text pattern: “Checkout form with an inline error message below the shipping address field.”

Adapt the examples to what is actually visible. Do not present an interpretation as a visual fact if the image alone cannot establish it.

6. Use a per-figure record

A small, consistent record makes an appendix easier to review and trace. This is a practical template, not a formal standard; record only details that help interpret or reproduce the capture.

Field	What to record
Figure number and title	A stable number and a concise description.
State shown	The page, task, or interaction state visible in the capture.
Capture context	Date and relevant viewport or device, browser, operating system, locale, and account or test-data state.
Report link	The finding, task, or section this figure supports.
Caption and alt text	A brief explanation of the visible evidence and a descriptive text alternative.
Changes	Any privacy masking, crop, or other edit that affects interpretation.
Page reference	A URL or page identifier only when safe and appropriate for the audience.

Example record:

Figure: 4 — Checkout shipping error
State: Inline validation message after submitting the shipping form
Captured: 2026-10-04
Context: Desktop viewport; study browser and test account; English locale
Supports: Finding 2, “Participants did not know which address field needed correction”
Caption: Checkout form with an inline message beneath the shipping address field.
Alt text: Checkout form showing an inline error below the shipping address field.
Changes: Customer name covered with an opaque overlay; crop retains the form heading.
Page reference: Internal checkout test page (URL omitted from distributed report)

7. Make screenshot comparisons fair

When comparing responsive layouts, versions, or interaction states, state the conditions that make the comparison meaningful. Depending on the study, those conditions can include viewport or device, browser and operating system, page version, user or account state, locale, and interaction state. Keep the capture style consistent, and identify any condition that differs.

A comparison can be misleading if one image shows a different account state, language, viewport, or page version. The relevant axes depend on the question; there is no universal checklist that applies to every report.

8. Assemble and review the appendix

Order figures by the sequence of tasks, findings, or report sections that readers will follow.
Use stable numbering and refer to each figure by that number in the main report.
Check that every cited figure exists and that its number, caption, and report reference agree.
Read the finding beside its image: does the text explain participant behavior and the observation, while the image supplies relevant visual context?
Confirm that the crop preserves context, redactions are opaque and flattened, and alt text describes the visible content.
Add a short method note when capture conditions or privacy edits could affect how a reader interprets the image.

A screenshot appendix is supporting material. The main report should still make its evidence and reasoning understandable to someone who does not inspect every figure.

Capture screenshots for the appendix

For occasional captures, use your browser or operating system’s screenshot function, then crop and redact in an image editor. For repeated captures, a website screenshot API can make viewport and output settings repeatable. Keep the research record alongside each capture: a screenshot service cannot infer the study task, finding, account context, privacy decision, or caption for you.

ScreenshotNeo API example

ScreenshotNeo is a website screenshot API and MCP server for developers. A GET request returns a PNG, JPEG, WebP, or PDF capture. The example below saves a WebP screenshot of a page; replace the target with a page that is safe to capture and share. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

The Python and Node.js examples check for HTTP errors before saving the response. Store API keys outside source code in production, and avoid capturing pages containing real participant or customer information unless your study’s privacy and sharing process permits it.

Or skip the browser setup

Use ScreenshotNeo’s one-call API when you want a capture without configuring a browser automation stack. It accepts cookie and consent banners like a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the API documentation for options such as full-page capture, CSS selectors, viewport and device presets, custom CSS or JavaScript, wait conditions, request blocking, caching, and PDF output. Capture conditions still belong in your research record, and inspect the result for privacy before putting it in a report.

Performance, reliability, and cost notes

Repeatability: keep viewport, locale, page version, and interaction state aligned when you need comparable images. Save the capture date and relevant context.
Reliability: inspect each returned image for the expected page state. A successful request alone does not establish that the intended content rendered or that the state matches the research observation.
Privacy: review the captured page and output before sharing. Do not send private URLs, credentials, or participant data to a capture workflow unless approved for the study.
Cost: manual browser and operating-system captures do not require a screenshot API subscription. For ScreenshotNeo, the free plan provides 1,000 shots per month without a card; paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Every feature is available on every plan.
Billing checks: ScreenshotNeo responses include X-Page-Verdict and X-Billed headers. Use these to distinguish capture outcomes when reviewing API usage.

Troubleshooting screenshot appendices

Problem	Likely cause	What to do
The image does not show the state discussed in the finding.	The page or interaction state differed, or capture happened before it rendered.	Reproduce the task state, check account and test data, and record relevant wait or interaction conditions. Verify the image itself before assigning a figure number.
A tight crop is hard to interpret.	The crop removed the page heading, surrounding control, or other location cue.	Widen the crop enough to establish where the relevant element appears.
A comparison looks inconsistent.	Viewport, browser, locale, account state, page version, or capture appearance changed.	Align the conditions that matter to the comparison and disclose any unavoidable difference.
Private information remains visible.	The review missed content outside the focal area, or a blur/mosaic effect was used.	Inspect the full image, cover unnecessary information with an opaque solid overlay, flatten layered exports, and review the final file.
Figure references point to the wrong image.	Figures were reordered without updating citations or captions.	Run a final pass over every in-text reference, figure number, caption, and appendix entry.
The ScreenshotNeo request returns an HTTP error.	The access key, URL, or request may be invalid, or the service did not return a successful response.	Check the key and encoded URL, inspect the HTTP status and response, and consult the API documentation. Do not save an error response as though it were an image.
The API response is not the expected page image.	The target rendered a bot check, blank page, timeout, failed load, or another unexpected state.	Inspect the output and response’s `X-Page-Verdict` and `X-Billed` headers. Correct the target or capture conditions and retry only when useful.

Frequently asked questions

How many screenshots should a UX research report include?

There is no source-backed universal count. Include the figures needed to clarify relevant findings and omit redundant or decorative captures.

Does every usability report need an appendix?

No. Use an appendix when it helps readers review supporting interface states without interrupting the main report. The findings should remain understandable in the report itself.

Should I put the URL under every screenshot?

Only if it is safe and useful for the intended audience. A URL can contain private paths, tokens, or other sensitive information; a page or task identifier may be a safer reference.

Can I use a screenshot as proof that a design is unusable?

A screenshot documents a visible state. Explain the participant’s action, the observed behavior, and the reasoning that connects them to the finding; do not ask the image to establish that conclusion alone.

Final checklist

Each screenshot clarifies a task, visible state, or finding.
The report explains the observation and conclusion in text.
Capture conditions needed for interpretation are recorded.
Crops retain enough interface context.
Every figure has a useful caption, descriptive alt text, and a report reference.
Private information is removed with opaque, flattened redactions.
Comparisons disclose or align the conditions that affect interpretation.
Figure numbers and citations match after final ordering.