Interaction States define how patterns behave across contexts like hover, focus, pressed, disabled, or error. Agreeing these interactions ensures consistency, accessibility, and predictability for users. Use this tactic when building or updating patterns so teams don't reinvent states individually. You can also use Design Exploration to generate and test new state ideas that push interaction boundaries.
Interaction States
How to
-
Gather inputs
Run an Audit to review accessibility standards, brand guidelines, and examples from your existing product to identify required states.
-
Map state matrix
Create a shared grid of states (hover, focus, pressed, disabled, error, success). Include motion or transition notes if relevant.
-
Align behaviours
Decide how states should look and behave across platforms, noting exceptions where native patterns differ.
-
Validate and test
Review with designers, engineers, and QA to confirm feasibility. Run Accessibility Review to ensure states are perceivable, operable, and consistent.
-
Document and release
Publish the agreed states in Creating Specs and Guidance Setup. Use the Release tactic to communicate updates so teams adopt the changes quickly.
Generate states: Ask AI for comprehensive state matrices from your base design (default, hover, active, focus, disabled, error, loading). Check all states are visually distinct and accessible.