Figma – Annotated usability audit

Goal

In this session you prepare the audit for homework 3 in FigJam or Figma: you place annotations on screenshots that show which principle is violated, what the consequence is, and what fix is possible. Along the way you also practice the basic Figma interface (pasting images, zooming, layers), which we build on in chapter 6.

What is an annotated audit good for?

The result of an audit is usable if the finding is where the problem is. Instead of "contrast is low on page 3" listed in a separate document, a marking drawn on the screenshot with a comment written next to it is understood immediately. An annotation has three components: where (a marking on the image), what (observation), and why it is a problem (principle and consequence).

Task: six annotated findings

1. Choose a service and a task (for example booking an appointment or buying a ticket), and walk through the task. Along the way take screenshots of the key moments (start, decision, error, confirmation).
2. Create a new FigJam or Figma file, and paste the screenshots next to each other, in the order of the task. Give each screen a title.
3. Mark the problems on the image with a rectangle or an arrow. One marking should show one problem; number the markings.
4. Write the findings on a sticky or text box placed next to it, in this structure:
   • Observation: what you see (not an opinion).
   • Principle: which heuristic or WCAG principle is affected.
   • Consequence: what it causes for the user (from the point of view of the persona).
   • Improvement direction: what you would change, and why.
5. Do a manual accessibility check: in the browser, walk through the task with the Tab key, and note if the focus is lost or an element cannot be reached. Make one finding from this.
6. Check the contrast: choose one text and one interface element, measure their contrast ratio (with a contrast checker tool), and write down the result. If the number is below the AA level, that is a finding.
7. Make a state list in a separate section: normal, loading, empty, error, success, disabled. For each, write whether you found it, and if so, of what quality.
8. Sort by severity: mark which finding has the biggest impact (the severity scale is covered in more detail in chapter 8; for now a "high / medium / low" classification with justification is enough).
9. Update the persona if the audit showed a new risk, and mark what changed.
10. Share the file with the instructor.

Checklist

• There are six findings, each tied to a principle and with a consequence.
• At least two findings are accessibility ones.
• The findings are observations, not "not pretty" type opinions.
• The improvement directions do not merely propose a "prettier" solution.
• The state list is complete.

Learning resources

• Nielsen Norman Group – 10 Usability Heuristics
• W3C – WCAG 2.2 Quick Reference
• Figma Learn – official help: pasting images and comments