UX & UI Audit

An expert UX-analyst review grounded in observed evidence at specific viewports — screenshots, DOM, interaction traces — not generic design opinions. Output is multi-track: an executive summary in plain English, a designer's findings list with annotated visuals, and an engineer's fix list with code-level guidance.

---

When to use

• The user provides a URL and asks for UX, UI, design, or usability feedback.
• The user shares screenshots and asks what's wrong with them.
• The user wants a desktop ↔ mobile comparison or responsiveness check.
• The user asks why their site isn't converting.
• The user mentions WCAG, accessibility audit, or EU Accessibility Act compliance.

When NOT to use

• Single-component design critique ("is this button OK?") → just answer.
• Design-system / token strategy questions → use a design-system skill.
• Pure copywriting reviews → use a copy/CRO skill.
• Production bug reports → use an issue-triage skill.

---

Step 1 — Ask before auditing (max 3 questions)

Ask only what you can't infer. Skip any answered ones.

1. Primary user action — what do you want visitors to do? (sign up, buy, book a demo, read content, etc.)
2. Primary device — is most traffic mobile, desktop, or roughly split?
3. Scope — homepage only, key flow (e.g., signup → onboarding), or full site?

Optional, only if relevant:

• Brand guidelines or design system to reference?
• Specific user persona to evaluate against?
• Compliance bar — WCAG 2.2 AA (default since Oct 2023), AAA, EN 301 549, or EU Accessibility Act (mandatory since Jun 28 2025 for many private-sector products)?

If the user wants to skip, default to: action = primary CTA on hero, device = both, scope = homepage + 1 key inner page, compliance = WCAG 2.2 AA.

---

Step 2 — Gather evidence

See references/evidence-gathering.md for the full evidence-gathering protocol (required captures, interactions, scans including PSI API setup, and optional checks).

---

Step 3 — Tag every finding

• [Observed] — Directly visible in screenshot, DOM, or scan output.
• [Inferred] — Best-guess from indirect signals (e.g., "users likely abandon here" — no funnel data).
• [Needs user data] — Requires analytics, session recordings, or user testing to confirm.

---

Step 4 — Run the framework

Audit these 15 dimensions, comparing desktop ↔ mobile in each. For dimensions 2–12, the side-by-side comparison table is required so non-technical readers can scan.

1. First Impression — what does the homepage say in 5 seconds? Trust, clarity, brand fit.
2. Layout & Responsiveness — alignment, spacing, overflow, horizontal scroll, grid adaptation, card resizing. Check whether the site uses container queries (@container) for component-level responsiveness — modern sites should; pure viewport-only breakpoints are a 2023-era pattern.
3. Navigation & IA — nav discoverability, hamburger usability, sticky header behavior, search, focus trap correctness when menus open.
4. Typography & Readability — sizes (mobile body ≥16px to prevent iOS auto-zoom), hierarchy, line-height (1.4–1.6 body), line-length (45–75ch), truncation. Check fluid typography (clamp()) for scale stability.
5. Content Prioritization — above-fold content, CTA prominence, hierarchy, what got demoted on mobile.
6. Buttons, Forms & Touch — tap-target compliance (see severity rubric), spacing ≥8px between targets, input types (tel, email, numeric inputmode), autocomplete attributes, inline validation, error visibility, <label> associations.
7. Visual Consistency — color usage, spacing scale, border radii, shadow style, icon style, design-system adherence.
8. Media & Imagery — hero clarity, image crops/focal points (object-fit/object-position), video controls + captions, loading perception, modern formats (AVIF/WebP), explicit width/height to prevent CLS.
9. Accessibility — WCAG 2.2 AA — all violations with axe rule IDs. Pay special attention to the 9 new WCAG 2.2 criteria: 2.4.11 Focus Not Obscured (Minimum), 2.4.12 Focus Not Obscured (Enhanced), 2.4.13 Focus Appearance, 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum 24×24), 3.2.6 Consistent Help, 3.3.7 Redundant Entry, 3.3.8 Accessible Authentication (Minimum), 3.3.9 Accessible Authentication (Enhanced). Also: contrast ratios, focus visibility, keyboard traps, alt text, ARIA correctness, forced-colors support.
10. Performance Perception — pull Core Web Vitals from the PageSpeed Insights API call made in Step 2 (mobile + desktop). Report field data (real users) from loadingExperience.metrics when present, lab data from lighthouseResult.audits, top 3 opportunities by numericValue, and observation-grade findings (font swap FOUT/FOIT, scroll smoothness, View Transitions API). If PSI was unavailable, skip this dimension and add to "What I couldn't assess."
11. States — empty states, loading skeletons, error states, success states, hover/active/focus/disabled on interactive elements.
12. Conversion & Friction — CTA visibility & repetition, trust signals (logos, testimonials, security badges), form length, distractions.
13. Edge Cases & Preferences — long content, long names, large numbers, zoom 200% (no h-scroll), dark mode (if supported), prefers-reduced-motion, forced-colors, RTL (if i18n).
14. Modern web hygiene — viewport meta has user-scalable=yes (don't block zoom), no horizontal scroll at any tested width, Safari/Chrome/Firefox parity if observable.
15. Comparison Verdict — for each major section, does mobile preserve the desktop's intent? Where does it diverge?

---

Step 5 — Severity rubric

Level	Definition	Example
Critical	Blocks core task; violates WCAG A; breaks compliance	Primary CTA invisible on mobile; form submit doesn't work; 1.5:1 contrast on body text; user-scalable=no set; new WCAG 2.2 SC 3.3.8 violation (cognitive function test for auth)
High	Significantly degrades UX or conversion; WCAG AA violation	Tap targets <24×24 CSS px (WCAG 2.2 SC 2.5.8); hero CTA hidden below fold on mobile; no focus indicators; sticky header covers focused element (WCAG 2.4.11)
Medium	Friction or polish gap; users complete the task but feel it	Tap targets meet WCAG 24px but miss Apple HIG 44pt; inconsistent spacing; truncated headings; weak empty states; no prefers-reduced-motion support
Low	Refinement	Slightly off-grid icons; minor color drift; missing micro-interaction; no forced-colors styling (works but unbranded in High Contrast Mode)

Tap-target rubric (apply per-element):

• WCAG 2.2 SC 2.5.8 minimum: 24×24 CSS px → fail = High
• Apple Human Interface Guidelines: 44×44 pt → miss = Medium
• Material Design: 48×48 dp → miss = Medium
• Spacing between targets: ≥8 px → fail = High (taps overlap)

---

Step 6 — Produce the report

Write the report to ux-audit-{{domain}}-{{date}}.md. See references/report-template.md for the full report structure, required sections, and the verbatim finding format with example.

See references/output-and-rules.md for output delivery instructions and hard rules.