By the end of this lesson you can
- Map every state a component can be in, including data states.
- Design states that are visually distinct and accessible.
- Communicate states clearly to developers.
The idea
In Stage 5 you built interactive states in the tool. Here we look at designing them well. Components have two families of states:
- Interaction states: default, hover, focus, pressed, selected, disabled.
- Data and validation states: empty, filled, loading, success, warning, error, read-only.
Design principles
- Distinct: each state must be recognisable at a glance, not just a slightly different shade.
- Not colour alone: pair colour with icons, text, borders or patterns.
- Consistent: focus and error look the same across every component.
- Combinable: states can overlap (focused and in error), so check combinations.
State matrix
A state matrix is a grid showing each variant against each state. It reveals gaps and helps developers implement every combination.
Why it matters in real projects
States are how a product communicates. Unclear states lead to repeated clicks, missed errors and lost data. Consistent states across components let people learn the system once. A state matrix also prevents the classic gap where developers invent their own error or disabled style.
A realistic example
A payments form shows errors only by turning the field border red. Colour-blind users and people in bright sunlight miss them, and support receives complaints about payments "failing for no reason".
The designer redesigns the error state: thicker red border, an error icon, a clear message under the field and a summary at the top of the form linking to each error. A state matrix shows error combined with focus and filled. Complaints about unexplained failures drop.
Step by step
List both families
Write interaction and data states for the component.
Design each state
Make each distinct using more than colour.
Check combinations
Design focus plus error, selected plus disabled, and so on.
Build a matrix
Lay out variants against states in a grid.
Check accessibility
Test contrast and colour-independence.
Share
Walk developers through the matrix.
Common mistakes
Mistake Error shown only by colour.
Instead Add icons and text.
Mistake Inconsistent focus styles.
Instead Use one focus style system-wide.
Mistake Forgetting loading states.
Instead Design what happens while data loads or submits.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Select state matrix
Design a full state matrix for a select (drop-down) component.
Steps
- List interaction and data states.
- Design each with more than colour.
- Lay out a matrix including combinations.
- Check contrast and ask a peer to identify each state.
Deliverable
A state matrix for a select component.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Components have interaction and data states.
- States must be distinct, accessible and consistent.
- Check combinations of states.
- A state matrix communicates them clearly.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Error message guidelines (opens in a new tab)Nielsen Norman Group
- Error summary (opens in a new tab)GOV.UK Design System
Your notes
Marking complete updates your course and roadmap progress.