04 — UI, UX, and Usability Checklist#

Review whether the product helps people complete meaningful tasks with understandable navigation, predictable interactions, inclusive experiences, and evidence-based improvements. This focuses on product usability; complete the dedicated Accessibility, Testing, Security, and Performance checklists separately.

Scope: Frontend-specific. This file is one part of the 04_UI_UX_and_Usability.md checklist. Apply the domain-wide release gate across all applicable scope files; each checklist ID remains unique.

Review details#

• Project / product:
• Release / version / environment:
• Scope and applicable jurisdictions / markets:
• Reviewer / owner:
• Review date:
• Decision: Pending / Approved / Approved with documented exceptions / Blocked

How to use#

1. Copy this template into project-specific review records; leave the shared template unchecked.
2. Mark [x] only when a check has been verified with user-research findings, design reviews, prototypes, task-based observations, implementation evidence, or recorded decisions. Track failed and N/A items with reasons in project notes or issues, keyed by UX ID, not in this shared checklist.
3. Prioritize real user goals, observed task outcomes, and critical errors rather than visual preference alone. Tailor checks to supported platforms, user groups, risk, and product maturity.
4. Complete ## API Checks and ## Frontend Checks separately where applicable; record N/A with a reason for projects that lack the relevant interface.
5. Revisit important journeys after changes to target users, features, navigation, integrations, or design patterns. This checklist does not establish formal WCAG conformance.

Information architecture and navigation#

• UX-018 Define a clear hierarchy for primary navigation, secondary navigation, page titles, and related content.

• UX-021 Prefer plain, descriptive navigation labels over ambiguous icons or internal jargon.

• UX-022 Identify the current location or step within the journey using visible headings, active navigation, or progress indicators as appropriate.

• UX-025 Use breadcrumbs, local navigation, tabs, or search only where they genuinely aid findability for the content structure.

• UX-026 Assess whether navigation depth and menu choices are manageable for the expected audience and tasks.

• UX-031 Confirm navigation remains usable on small screens and with keyboard or assistive technology.

• UX-032 Check that destructive, privileged, or irreversible actions are not confused with routine navigation.

• UX-017 Organize features and content around user tasks and terminology instead of internal team or system structure.

• UX-019 Make key destinations discoverable from likely entry points without requiring users to memorize a route.

• UX-020 Use consistent labels for the same concept across menus, links, page titles, buttons, and help content.

• UX-023 Give users an obvious way to return to a safe previous location or cancel a nonfinal action.

• UX-024 Ensure the information hierarchy supports direct deep links, search-result entry, and page refresh where applicable.

• UX-027 Use card sorting, tree testing, or equivalent task-based research when key categories or menu structures are uncertain.

• UX-028 Check that search results, filtering, sorting, and category labels match user expectations for retrieval tasks.

• UX-029 Provide meaningful empty results, alternative search suggestions, or recovery paths when content cannot be found.

• UX-030 Define consistent behavior for internal links, external links, downloadable documents, and opening new contexts.

Interaction and visual design#

• UX-037 Use buttons for actions and links for navigation consistently in the interface.

• UX-048 Ensure color, motion, icons, and visual hierarchy do not carry essential meaning without alternative cues.

• UX-049 Provide readable content with sensible line lengths, headings, spacing, and sufficient visual priority for important information.

• UX-051 Review dialogs, notifications, and overlays for interruption cost, dismissal, focus, and recovery behavior.

• UX-033 Use a consistent design language for spacing, typography, color, icons, feedback, and component behavior.

• UX-034 Choose established interaction patterns when they satisfy user needs; document and test deviations from conventions.

• UX-035 Make each page or step communicate its purpose, expected action, and what happens next.

• UX-036 Make primary and secondary actions visually and verbally distinguishable without hiding necessary alternatives.

• UX-038 Keep terminology grounded in users' language; explain uncommon concepts where they are essential.

• UX-039 Provide visible, timely feedback for submitting, saving, processing, completing, and failing actions.

• UX-040 Distinguish background work, slow responses, and completed actions so users do not mistakenly repeat operations.

• UX-041 Show loading, empty, offline, unavailable, and error states that explain the condition and next step.

• UX-042 Prevent errors through clear constraints, defaults, examples, and appropriately timed confirmation for harmful actions.

• UX-043 Allow users to correct mistakes without re-entering unrelated information wherever practical.

• UX-044 Use undo, edit, cancel, or confirmation patterns proportionate to the impact and reversibility of an action.

• UX-045 Make forms ask only for necessary information and explain required fields, formats, and consequences.

• UX-046 Keep labels and instructions visible when a field has a value; do not rely on placeholders as the only labels.

• UX-047 Use actionable, specific error messages near the affected controls and a clear summary when appropriate to the flow.

• UX-050 Test text expansion, zoom, localization, and varying content lengths for overflow or clipped actions.

• UX-052 Avoid manipulative patterns, misleading urgency, preselected choices, or hiding important costs and consequences.

Usability feedback and iteration#

• UX-062 Prioritize issues by user impact, task criticality, observed frequency, and remediation effort rather than visual preference alone.

• UX-053 Create a usability study plan tied to specific research questions, user groups, and priority tasks.

• UX-054 Use representative participants and realistic task scenarios rather than relying only on internal stakeholders.

• UX-055 Observe participants attempting tasks without directing them through the intended interface.

• UX-056 Record task completion, critical mistakes, points of hesitation, workarounds, and qualitative feedback.

• UX-057 Define any quantitative usability metrics in advance, including how completion and abandonment are counted.

• UX-058 Include appropriate assistive technology, accessibility, mobile, and low-confidence-user scenarios for the audience.

• UX-059 Test prototypes or early implementations before expensive irreversible design decisions.

• UX-060 Distinguish user statements from observed behavior and avoid overgeneralizing small exploratory samples.

• UX-061 Capture each usability problem with reproduction context, affected journey, frequency or severity, and recommended follow-up.

• UX-063 Assign owners and dates for fixing high-impact usability defects and for retesting changes.

• UX-064 Verify revised designs address observed problems with new users or suitable follow-up evidence.

• UX-065 Maintain feedback channels for live users and route recurring issues into product improvement work.

• UX-066 Review funnels, abandonment, error/support trends, and user satisfaction together rather than using one proxy as proof of usability.

• UX-067 Record what the team learned, which design decisions changed, and which assumptions remain untested.

• UX-068 Establish a regular cadence for evaluating important journeys after major product, policy, or audience changes.

User research and journeys#

• UX-001 Define the product's primary user groups, their goals, contexts, constraints, and most important tasks using documented evidence rather than assumptions.
• UX-002 Describe primary and secondary personas or audience segments only where supported by user research, and distinguish assumptions from findings.
• UX-003 Review support tickets, feedback, analytics, existing studies, or field observations to identify recurring user problems and unmet needs.
• UX-004 Include new, returning, infrequent, and experienced users when identifying target journeys.
• UX-005 Consider users with disabilities, assistive technologies, low bandwidth, shared devices, or limited digital confidence in research plans.
• UX-006 Document end-to-end journeys, including preparation, entry points, off-platform steps, handoffs, and follow-up tasks.
• UX-007 Identify top user tasks and their expected outcomes; prioritize them by user value, frequency, and risk.
• UX-008 Map the current and proposed journey for critical tasks, including moments of confusion, waiting, abandonment, and rework.
• UX-009 Review how users discover the service and understand what it does before signing in or submitting information.
• UX-010 Validate critical workflow assumptions through interviews, contextual inquiry, prototypes, or task-based usability sessions.
• UX-011 Define observable success criteria for each priority journey, including task completion and serious errors.
• UX-012 Record accessibility, privacy, trust, and safety concerns surfaced during research, assigning them to responsible review domains.
• UX-013 Ensure research prompts and tasks describe realistic goals without leading participants toward an intended answer.
• UX-014 Gather feedback on alternative paths and exceptional circumstances rather than only the ideal happy path.
• UX-015 Check that the experience makes sense when users pause, leave, resume, or return after an extended interval.
• UX-016 Assign ownership and a review cadence to research findings, open questions, and unresolved journey problems.

Frontend Checks#

• UX-083 Verify the main task is identifiable and its primary call to action is easy to locate on each key screen.
• UX-084 Confirm responsive layouts work across supported devices, viewport sizes, orientation changes, and varying zoom settings.
• UX-085 Check headings, landmarks, navigation, and grouping communicate the interface's structure without relying on visual styling alone.
• UX-086 Verify labels, instructions, and help text remain visible and meaningful when inputs are populated.
• UX-087 Check keyboard navigation, focus movement, and focus restoration across menus, dialogs, route transitions, and error states.
• UX-088 Provide accessible names and appropriate text alternatives for meaningful controls, icons, images, and status feedback.
• UX-089 Ensure error messages identify the affected field or action and provide a workable correction or recovery step.
• UX-090 Check that client and server validation disagree neither silently nor through contradictory user messages.
• UX-091 Verify field values and meaningful task progress are preserved after recoverable errors, page refreshes, or temporary connectivity losses where feasible.
• UX-092 Display actual save/submission state and protect users from unintended repeat actions.
• UX-093 Test back/forward navigation, deep linking, refresh, and session expiration for predictable journey continuity.
• UX-094 Check touch target suitability, pointer alternatives, and interaction patterns on devices with touch or precise pointers.
• UX-095 Honor reduced-motion preferences where motion is nonessential and avoid surprise animation or autoplay behavior.
• UX-096 Check text enlargement, translations, right-to-left display, and long user-generated content for clipping and broken layouts where applicable.
• UX-097 Keep overlays, banners, tooltips, and toast notifications from obscuring essential tasks or trapping focus.
• UX-098 Measure user-perceived delay across key screens and show useful progress or skeleton states rather than misleading indefinite spinners.
• UX-099 Confirm filtering, sorting, pagination, and search results communicate active controls and an understandable result count or empty state.
• UX-100 Ensure privacy notices, pricing, confirmations, destructive-action warnings, and required disclosures are legible at the decision point.
• UX-101 Verify assistive-technology announcements for asynchronous results, validation changes, and critical status updates with appropriate manual testing.
• UX-102 Check representative browsers/devices for broken assets, console/runtime errors, horizontal scrolling, and inconsistent interaction states.

Release gate#

• Priority user journeys, target user groups, and expected outcomes are documented and have been reviewed with appropriate stakeholders.
• Representative usability evidence supports that users can complete critical tasks, including handling common errors and recovery paths.
• No unresolved, unaccepted usability issue blocks essential tasks, causes material confusion, or risks significant unintended consequences.
• Core navigation, forms, system feedback, and critical mobile/responsive experiences have been reviewed against agreed design and user needs.
• API and frontend user-experience dependencies are understood, with owners and documented treatment of failures, latency, and partial results where applicable.
• Responsible reviewers have recorded the decision and accepted risks in project-specific records.

Domain-specific approval rule: Block UX sign-off for unresolved critical-task failures, deceptive or materially misleading interface behavior, inaccessible core journeys awaiting required specialist review, or unknown user-impact risks lacking an accountable owner. UX approval does not substitute for accessibility conformance or production verification.

Trusted references and scope#

The checklist adapts the following authoritative user-experience, design, and accessibility guidance into observable project review questions. General design heuristics are not universal hard requirements; evaluate their suitability for the actual audience and context.

• Nielsen Norman Group — 10 Usability Heuristics for User Interface Design — feedback, consistency, user control, error prevention, recognition, and recovery.
• GOV.UK Service Standard — Understand users and their needs — evidence-driven problem framing.
• GOV.UK Service Standard — Make the service simple to use — intuitive tasks and end-to-end usability.
• GOV.UK Service Manual — Plan user research for your service — inclusive research questions, participants, and iteration.
• GOV.UK Service Manual — Using moderated usability testing — representative tasks and observational findings.
• Nielsen Norman Group — Tree Testing: Evaluate Menu Labels and Categories — information architecture and findability testing.
• U.S. Web Design System — Components — established visual and interaction patterns.
• GOV.UK Design System — Recover from validation errors — clear messages, field recovery, and preservation of input.
• W3C WAI — Form Instructions — labels and accessible instructions.
• W3C WAI — Validating Input — error guidance and accessible validation.
• W3C — Web Content Accessibility Guidelines (WCAG) 2.2 — relevant accessibility success criteria, with detailed conformance review in 05_Accessibility.md.

Applicability: Some practices are service-, platform-, or audience-specific. Do not treat GOV.UK's design-system implementation decisions as mandatory for unrelated products. Human usability evaluation is essential where risks or complexity warrant it; quantitative usability metrics require a suitable sample and method.

Source review date: 2026-11-12.

Suggested testing tools#

Choose tools appropriate to the project's stack and risks; automation supports evidence but does not approve the checklist.

• Test focus: navigation, responsive layouts, form errors, visual states, and user flows; include browser and client behavior where applicable.
• Cross-stack: Lighthouse + Storybook.
• Python: Playwright + pytest; for pytest-based suites, run python -m pytest -q.
• TypeScript: Playwright + Storybook + Vitest; for Vitest-based suites, run npx vitest run (or npx playwright test for E2E).
• JavaScript: Playwright + Storybook + Jest; for Jest-based suites, run npx jest --ci (or npx playwright test for E2E).
• Evidence: Save tool versions, configuration, test environment, fixtures, results, and links in project-specific review records using the existing checklist IDs. Expert review remains necessary where relevant.

Suggested AI skills for verification#

These are optional agent review aids, not automated passes or release approval. Each linked repository had at least 1,000 GitHub stars when checked on 2026-11-12; counts are per repository, not per skill, and do not indicate security or correctness.

• web-design-guidelines — Audit interface design and usability patterns (vercel-labs/agent-skills, 33,937 repo stars).
• webapp-testing — Exercise key browser flows and visual states (anthropics/skills, 193,495 repo stars).
• interaction-design — Review interaction, feedback, and error handling (wshobson/agents, 42,437 repo stars).

How to check: In a project-specific copy, have the agent audit the frontend scope and map findings to this file's existing checklist IDs, with code/configuration references, reproducible test results, failed or inapplicable cases, and uncertainties. Independently verify findings; keep shared template boxes unchecked and retain human approval requirements.

Before use: Read the skill's SKILL.md, referenced scripts, license, and requested tool permissions. Only execute vetted skills with appropriate access in a controlled environment.

Important warning: reference only#

⚠️ Reference only — not a definitive or exhaustive checklist. This template is a starting point for review, not the ultimate authority or a guarantee of project safety, quality, regulatory compliance, accessibility, security, or launch readiness.

Use project-specific judgment and independent verification. Requirements and risks evolve and differ by project, technology, and jurisdiction. Adapt the checks, consult current authoritative sources, perform relevant tests, and obtain qualified specialist review or approval when appropriate. Checking every box does not replace these steps.