Before: one happy path
The card shows a normal button and field but gives no clue for loading, focus, disabled, or error conditions.
Core idea
Every interactive element has states. Design the normal path, then specify focus, selected, loading, disabled, empty, and error states before the screen feels finished.
- Default shows what the control is. Hover and focus show it is reachable. Pressed or selected shows what changed.
- Loading states reassure users when the interface cannot answer immediately.
- Disabled states need an explanation or the user may not know how to continue.
- Error and empty states are part of the product, not edge-case decoration.
Visual example
A settings card should explain every important state.
Saving... Fix email
Before and after
Make state visible before users ask what happened.
After: state set
The component set names the current selection, shows loading feedback, keeps focus visible, and explains the error.
Worked example
Why the improved version works
The improved card closes the gap between action and feedback. When a setting is selected, the state is visible. When saving starts, the button says so. When a field fails, the message sits next to the field.
The disabled control no longer just turns grey. It gives the user a reason and a next step, which is more useful than silently blocking the action.
Common mistakes
Watch for these patterns
Designing only the normal state and leaving errors to be invented later.
Removing focus styles because they look busy in screenshots.
Greying out disabled controls without explaining why they are unavailable.
Showing loading with a spinner only, without preserving the action label or context.
Visual comparison
Which component set communicates state clearly?
One set only shows the happy path. The other includes selected, loading, focus, and error feedback.
Wähle eine Option, um die Design-Logik zu sehen.
Übung abgeschlossen
Next lesson
Motion as Feedback
Use motion to explain change without stealing attention.
Small exercise
Diagnose missing state
Compare two component sets, then spot the area where a missing state cue makes the interface harder to understand.