Knowledge Base / Cheat-sheets

UI/UX Testing

Usability heuristics, visual and interaction checks, responsive/cross-device coverage, and a dedicated tools roundup - five sections you can filter and toggle as you verify them. Progress is saved on this device.

What this checklist covers

Usability Heuristics

Nielsen-style usability principles worth checking on every screen before it ships.

Visibility & Feedback · Heuristic

  • Every asynchronous action (save, submit, load) shows a visible loading or progress state.
  • System status (online/offline, saved/unsaved, connection lost) is always visible, not hidden in a menu.

Consistency & Standards · Heuristic

  • Terminology for the same action or object stays consistent site-wide (e.g. always 'Delete', never mixed with 'Remove').
  • Icon meaning and placement (search, settings, close) matches platform and industry conventions.

User Control & Error Prevention · Heuristic

  • Destructive actions (delete, discard) require confirmation or offer an undo.
  • Users can back out of a multi-step flow without losing unrelated data.

Recognition & Efficiency · Heuristic

  • Field labels stay visible once a field has content, instead of relying on placeholder text alone.
  • Frequently used actions are reachable in two clicks or taps or fewer from the main flow.

Visual & Layout Testing

Checks for typography, spacing, color, and visual regressions across the UI.

Typography & Readability · Visual

  • Body text meets a comfortable minimum size (roughly 14px / 1rem or larger) across breakpoints.
  • Line length stays within about 50-75 characters for comfortable reading.

Spacing & Alignment · Visual

  • A consistent spacing scale (e.g. a 4px or 8px grid) is used across components.
  • Elements align to a visible grid, with no stray 1-2px misalignments between siblings.

Color & Contrast · Visual

  • Text-to-background contrast meets at least WCAG AA (4.5:1 for normal body text).
  • Color is never the only signal for state - error, success, and disabled states also use icon, text, or shape.

Visual Regression · Visual

  • Key screens are covered by automated visual-diff snapshots, not just manual eyeballing.
  • Visual diffs are reviewed on every pull request that touches shared components or global styles.

Interaction & Flow Testing

Component states, forms, navigation, and motion - the parts of the UI users actually touch.

Component States · Interaction

  • Every interactive element has default, hover, focus, active, and disabled states designed and tested.
  • Focus states are clearly visible and meet a minimum contrast for keyboard-only users.

Forms & Validation · Interaction

  • Validation errors are field-level, specific, and appear next to the offending field.
  • Required fields are marked clearly up front, not only revealed after a failed submission.

Navigation & Wayfinding · Interaction

  • Users can always tell where they are in the app (breadcrumbs, active nav state, page titles).
  • The browser back button behaves predictably and doesn't silently lose context.

Micro-interactions & Motion · Interaction

  • Animations and transitions serve a purpose (guide attention, show relationship) rather than being purely decorative.
  • Motion respects a 'prefers-reduced-motion' setting for users who opt out.

Cross-Device & Responsive Testing

Layout, touch input, and device coverage across the range of screens people actually use.

Breakpoints & Layout · Responsive

  • Layout is tested at common breakpoints (roughly 375px mobile, 768px tablet, 1440px desktop), not just a resize-drag.
  • Content reflows without horizontal scrolling or clipped text at any tested width.

Touch & Input · Responsive

  • Touch targets are at least 44x44px (or the platform equivalent) with adequate spacing between them.
  • Hover-only interactions have a touch-accessible equivalent - no hover-trap menus on mobile.

Device & Browser Matrix · Responsive

  • The app is tested on at least one real iOS and one real Android device, not emulators alone.
  • The latest two versions of major browsers (Chrome, Safari, Firefox, Edge) are covered.

UI/UX Testing Tools

Tooling that supports design QA, visual regression, usability research, and cross-browser coverage.

Design & Handoff · Tools

  • Figma, Sketch, or Zeplin specs are cross-checked against the built UI for spacing and color drift.
  • A shared design-token source (colors, spacing, type scale) is used by both design and code.

Visual Regression & Snapshot · Tools

  • A visual-diff tool (e.g. Percy, Chromatic, or BackstopJS) is wired into CI for key component and page snapshots.
  • Storybook or an equivalent tool documents component states for isolated visual review.

Usability & Analytics · Tools

  • Session replay or heatmap tools (e.g. Hotjar, FullStory) are reviewed periodically for friction points.
  • Remote usability testing (e.g. Maze, UsabilityHub) runs before major UI releases.

Cross-Browser & Automation · Tools

  • A cross-browser cloud (e.g. BrowserStack, LambdaTest) covers real device and browser combinations in CI.
  • Automated UI tests (e.g. Playwright, Cypress) assert on visible states, not just DOM presence.

Accessibility & Audit Tools · Tools

  • Lighthouse or axe DevTools runs on key pages as part of the UI/UX review, not as an accessibility-only checkbox.
  • A contrast checker (e.g. Stark, Contrast) is used during design review, before anything is built.