Feedback
Every action needs a perceivable response that says it was received and what it did.
Definition
One of Don Norman's core design principles. Feedback is the immediate, informative return of information about the result of an action. It must be immediate, informative, and proportionate to the significance of the action.
Expert heuristic. A review criterion developed by practitioners. Useful and widely taught, but evaluated by judgement rather than measurement.
Feedback has layers
- 1.Input acknowledgement: the control shows it received the press, within about 100ms. Usually a state change on the element itself.
- 2.Process indication: something shows work is happening, if it takes long enough to notice.
- 3.Outcome: the result is visible, and the interface reflects the new state.
- 4.Consequence: any secondary effects are legible, such as a counter updating or an item appearing in a list.
Do
- Give every interactive element visible hover, active, focus and disabled states.
- Change the thing that changed, so the outcome is visible in place.
- Match feedback intensity to consequence: subtle for routine, prominent for significant.
- Announce non-visual feedback to assistive technology.
Do not
- Rely on a toast alone for an important outcome.
- Give the same feedback for success and failure.
- Animate feedback so slowly that it becomes the wait.
- Use sound or haptics as the only channel.
In practice
Drag and drop target highlighting
File and board interfacesHighlighting the valid drop zone as the drag begins is feedforward. Animating the item into place is feedback. Without the first, users drop into the wrong place and rely on undo.
Live order totals
CheckoutUpdating the total as shipping options change removes a surprise at the final step, which is where surprises are most expensive.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
The Design of Everyday Things
D. A. Norman, Basic Books, 1988, revised 2013
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applied through
Where this shows up as a concrete interface decision.
- ToastComponent
- Toggle SwitchComponent
- Loading StatesPattern
- Optimistic UIPattern
- MotionUI foundation
- Visual StatesUI foundation
Practical example
A worked decision where this was the deciding factor.
Short definition
The one-paragraph version, for when that is all you need.
Related concept
Connected closely enough to change how you apply this.
- Focus IndicatorsAccessibility
- Help Users Recognise, Diagnose and Recover From ErrorsHeuristic
- Visibility of System StatusHeuristic
- Doherty ThresholdLaw
- Affordances and SignifiersPrinciple
- DiscoverabilityPrinciple
- Gulfs of Execution and EvaluationPrinciple
- Natural MappingPrinciple