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.
How to
-
Gather inputs Run an Audit to review accessibility standards, brand guidelines, and examples from you 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 Creating Guidance Pages. Use the Release tactic to communicate updates so teams adopt the changes quickly.