A condition of an interface element.
Interfaces are never static.
A button changes over time.
[IMAGE PLACEHOLDER: UI element state changes]
Questions
States answer questions.
[IMAGE PLACEHOLDER: UI feedback examples]
Default
Hover
Active
Disabled
Loading
Communicate possibilities.
[IMAGE PLACEHOLDER: Button states overview]
Empty
Focused
Completed
Validation
Guide input.
[IMAGE PLACEHOLDER: Form state examples]
Communicate completion.
[IMAGE PLACEHOLDER: Success state examples]
Communicate problems.
[IMAGE PLACEHOLDER: Error state examples]
Examples
Default
↓
Hover
↓
Click
↓
Loading
↓
Success
Continuity
[IMAGE PLACEHOLDER: State transition timeline]
User
↓
Interaction
↓
State Change
↓
Feedback
↓
Next Action
[IMAGE PLACEHOLDER: State flow diagram]
What happens after interaction?
[IMAGE PLACEHOLDER: State design workshop]
Not:
"What does it look like?"
But:
"What happens when the user clicks?"
[IMAGE PLACEHOLDER: Designer evaluating interactions]
Design behaviour before visuals.
[IMAGE PLACEHOLDER: Session recap infographic]