ahmedhamadto/software-forge/ux-usability-review

UX Usability Review

Overview

A structured usability audit methodology based on Don't Make Me Think by Steve Krug. Guides you through 8 sequential phases to systematically evaluate an interface for cognitive load, scanability, navigation clarity, content quality, mobile usability, accessibility, and the overall user experience. The core principle: if a user has to stop and think about how to use your interface, something needs to be redesigned.

When to Use

• Before launching a product, feature, or redesign
• When users report confusion, abandonment, or support requests about basic tasks
• During design reviews or code reviews that affect user flows
• When evaluating a competitor's interface for strengths and weaknesses
• When onboarding a new team member to UX standards
• As a complement to the ui-polish-review skill (that skill covers visual quality; this one covers usability)

When NOT to Use

• For purely visual/aesthetic evaluation (use the ui-polish-review skill for that)
• For performance or technical audits
• As a substitute for actual usability testing with real users (this is a heuristic review, not a user test)
• For content strategy or copywriting projects (though content clarity is covered)

Process

Work through each phase sequentially. At each phase:

1. Ask targeted questions about the specific interface being reviewed
2. Read the relevant chapter summary from front-end-design/dont-make-me-think/ for detailed guidance
3. Suggest and execute concrete tests (grep patterns in source code, manual inspection tasks, quick user tests)
4. Flag findings with severity: CRITICAL / HIGH / MEDIUM / LOW / INFO
5. Summarize findings before moving to the next phase

If the application does not have a relevant surface for a phase (e.g., no homepage for an internal tool), acknowledge and skip with rationale.

digraph audit_phases {
  rankdir=TB;
  node [shape=box, style=rounded];
 
  p1 [label="Phase 1\nDon't Make Me Think"];
  p2 [label="Phase 2\nVisual Hierarchy\n& Scanning"];
  p3 [label="Phase 3\nNavigation"];
  p4 [label="Phase 4\nWords & Content"];
  p5 [label="Phase 5\nHomepage Clarity"];
  p6 [label="Phase 6\nMobile Usability"];
  p7 [label="Phase 7\nGoodwill & Courtesy"];
  p8 [label="Phase 8\nAccessibility"];
  report [label="Usability\nReport", shape=note];
 
  p1 -> p2 -> p3 -> p4 -> p5 -> p6 -> p7 -> p8 -> report;
}

Phase 1: The "Don't Make Me Think" Test

Reference: front-end-design/dont-make-me-think/ch01-dont-make-me-think.md, ch02

Goal: Evaluate whether each screen is self-evident -- a user should immediately understand what it is and what to do without expending mental effort.

Questions to ask:

• For each screen: would a first-time user immediately understand what this is and what to do next?
• Are there clever, creative, or branded labels where conventional ones would be clearer? ("Job-o-Rama" vs "Jobs", "Quick Procurement Module" vs "Shopping Cart")
• Is it obvious what is clickable and what is not? (Links look like links, buttons look like buttons, non-interactive elements do not look clickable.)
• Are users expected to read and comprehend, or can they scan and act?
• The 5-second test: if someone saw this page for only 5 seconds, could they tell you what the site does and what the primary action is?

Tests to run:

# Find potentially clever/non-standard labels and navigation items
grep -rn "nav\|Nav\|navigation\|menu\|Menu\|sidebar\|Sidebar" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Find link/button text to review for clarity
grep -rn ">.*<\/a>\|>.*<\/button>\|>.*<\/Link>" --include="*.tsx" --include="*.jsx" --include="*.html"
 
# Check for elements styled to look clickable but are not (or vice versa)
grep -rn "cursor:\s*pointer" --include="*.css" --include="*.scss"
grep -rn "cursor-pointer" --include="*.tsx" --include="*.jsx" --include="*.html"
 
# Find tooltips (may indicate UI is not self-explanatory)
grep -rn "tooltip\|Tooltip\|title=\"\|data-tip\|aria-label" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Check for instructional text that might indicate confusing UI
grep -rn "Click here\|click here\|Please note\|Note:\|Instructions:\|How to\|how to\|Steps:" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

The 5-Second Test (manual):

1. Open the page. Look at it for exactly 5 seconds. Look away.
2. Can you answer: What is this site/app? What is the main thing I can do? Where would I start?
3. If any of these are unclear, the page fails this test.

Visual inspection checklist:

• [ ] Is every interactive element visually distinguishable from non-interactive elements?
• [ ] Are labels conventional and immediately understandable (no jargon, no cleverness)?
• [ ] Can you identify the primary action on each screen within 2 seconds?
• [ ] Is the page self-evident (no instructions needed) or at minimum self-explanatory (brief moment to understand)?
• [ ] Would removing any "How to" text or instructions break the experience? (If yes, the UI needs redesign, not instructions.)

Finding template:

[SEVERITY] Cognitive Load: [description]
  Affected: [screen/component]
  Issue: [what makes the user think]
  User question: [the question mark in the user's head — e.g., "Is this clickable?" or "What does 'Synergy Hub' mean?"]
  Fix: [specific recommendation — e.g., "rename 'Synergy Hub' to 'Team Dashboard'"]

Phase 2: Visual Hierarchy & Scanning

Reference: front-end-design/dont-make-me-think/ch03-billboard-design-101.md

Goal: Verify the page supports scanning behavior -- users do not read web pages, they scan them. The design must make the most important content immediately findable.

Questions to ask:

• Is there a clear visual hierarchy where the most important thing is the most prominent?
• Are pages broken into clearly defined, visually distinct areas?
• Is text formatted for scanning? (Meaningful headings, short paragraphs, bold key terms, bullet lists.)
• Is there excessive visual noise? (Too many competing elements, background patterns, unnecessary decoration, animation overload.)
• Are related items visually grouped (proximity) and unrelated items visually separated?

Tests to run:

# Check for heading structure (are headings used to break up content?)
grep -rn "<h[1-6]\|<Heading\|role=\"heading\"" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Find long text blocks without headings or formatting (walls of text)
# Look for paragraphs or text blocks without structure
grep -rn "<p>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Check for bullet/ordered lists (good for scanning)
grep -rn "<ul\|<ol\|<li" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Find text formatting helpers (bold for key terms)
grep -rn "<strong\|<b>\|<em>\|font-bold\|font-semibold\|fontWeight.*bold" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Check for potential noise: excessive decoration, patterns, animations
grep -rn "background-image:\|background-pattern\|animation:\|@keyframes" --include="*.css" --include="*.scss"

Visual inspection checklist:

• [ ] Can you identify the page's purpose and primary content within 3 seconds of looking at it?
• [ ] Are there clearly defined visual areas (header, main content, sidebar, footer) with obvious boundaries?
• [ ] Is body text broken into short paragraphs (3-4 sentences max) with descriptive headings?
• [ ] Are key terms bolded or otherwise highlighted for scanners?
• [ ] Is the page free of excessive visual noise (competing elements, unnecessary decoration, distracting animations)?
• [ ] Is whitespace used effectively to create breathing room and visual grouping?

Finding template:

[SEVERITY] Scanning & Hierarchy: [description]
  Affected: [screen/section]
  Issue: [e.g., "400-word paragraph with no headings, no bold, no lists"]
  Impact: [users will skip this content entirely rather than read it]
  Fix: [e.g., "break into 3 short paragraphs with descriptive headings, bold key terms, use bullet list for features"]

Phase 3: Navigation

Reference: front-end-design/dont-make-me-think/ch06-street-signs-and-breadcrumbs.md

Goal: Verify that navigation is clear, persistent, and enables users to always answer three fundamental questions: Where am I? Where can I go? How do I get back?

Questions to ask:

• Is there persistent global navigation visible on every page?
• Can the user always answer: Where am I? Where can I go? How do I get back?
• Is there a clear "you are here" indicator in the navigation (active state, highlight, bold)?
• Does every page have a name/title that matches what was clicked to reach it?
• Are breadcrumbs present for deep hierarchies (3+ levels)?
• Is there a persistent, accessible search function?
• Is the logo linked to the homepage?

Tests to run:

# Check for navigation component
grep -rn "<nav\|<Nav\|role=\"navigation\"\|Navbar\|Header\|AppBar\|TopBar" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Check for "you are here" indicators (active/current state in navigation)
grep -rn "active\|current\|isActive\|aria-current\|selected\|activeClassName\|pathname" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.css" --include="*.scss"
 
# Check for breadcrumbs
grep -rn "breadcrumb\|Breadcrumb\|aria-label=\"breadcrumb\"\|role=\"navigation\".*breadcrumb" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Check for search functionality
grep -rn "search\|Search\|type=\"search\"\|role=\"search\"\|searchParams\|useSearch" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Check for back/home navigation
grep -rn "back\|Back\|home\|Home\|logo.*href\|logo.*link\|Logo.*Link" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
 
# Check for page titles/headings matching navigation labels
grep -rn "<title\|<h1\|document\.title\|useTitle\|Head>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

The Trunk Test (standalone quick-check): Land on any interior page of the site blindly (not the homepage). Can you immediately answer:

1. What site is this? (Site identity/logo visible)
2. What page am I on? (Page name/title visible)
3. What are the major sections? (Global navigation visible)
4. What are my options at this level? (Local navigation visible)
5. Where am I in the scheme of things? (Breadcrumbs or "you are here" indicator)
6. How can I search? (Search box visible or easily findable)

If any of these questions cannot be answered within 5 seconds, flag it.

Visual inspection checklist:

• [ ] Is global navigation persistent and visible on every page (not hidden behind a hamburger on desktop)?
• [ ] Is there a "you are here" indicator showing the current page/section?
• [ ] Do page titles match the navigation labels that led to them?
• [ ] Are breadcrumbs present for content deeper than 2 levels?
• [ ] Is the logo clickable and linked to the homepage?
• [ ] Can the user always get back to where they came from (back button works, breadcrumbs, or explicit back link)?

Finding template:

[SEVERITY] Navigation: [description]
  Affected: [screen/flow]
  Trunk test: [which questions could not be answered]
  Issue: [e.g., "no 'you are here' indicator — active nav item has no visual distinction"]
  Fix: [e.g., "add font-weight: 600 and a left border accent to the active navigation item"]

Phase 4: Words & Content

Reference: front-end-design/dont-make-me-think/ch04, ch05-omit-needless-words.md