Von Restorff Effect
The item that differs from its neighbours is the one that gets noticed and remembered.
Definition
Hedwig von Restorff's 1933 isolation experiments showed that an item which stands out from a homogeneous set is recalled far better than the surrounding items. Distinctiveness, not absolute salience, drives the effect.
Established research. Originates in published research and has been replicated. The effect is real. Its size in your product still needs measuring.
On this page
Distinctiveness is relative
The effect depends on contrast with the local context. One coloured button in a row of grey ones is distinctive. Six coloured buttons in a row of six are not, regardless of how bright the colour is.
This is the practical constraint most teams break. Every stakeholder wants their element emphasised, and the aggregate result is that nothing is. Emphasis is a zero-sum budget within a view.
Dimensions you can isolate on
- Colour, which is the strongest and the most easily overused.
- Size and weight, which survive greyscale and are safer for accessibility.
- Position, such as breaking the grid or offsetting from alignment.
- Shape, such as a pill among rectangles.
- Motion, which is extremely strong and should be reserved for genuinely urgent changes.
- Whitespace, where isolation by surrounding emptiness is quiet and highly effective.
Using emphasis as a budget
Do
- Allow one primary emphasis per view, with secondary emphasis clearly weaker.
- Make the emphasised element the one that matches the user's most likely goal.
- Use isolation to mark genuinely exceptional states, such as an over-quota warning in a list of normal rows.
Do not
- Give every card a coloured badge.
- Emphasise an element because a stakeholder owns it rather than because a user needs it.
- Rely on novelty that wears off. Distinctiveness fades as it becomes the norm in your product.
In practice
The recommended pricing tier
SaaS pricingOne tier gets a border, a slight scale increase and a label. The isolation carries the recommendation without additional copy. Two highlighted tiers destroy the effect entirely.
Unread and error rows
Lists and tablesA single visually distinct treatment for rows needing attention works well until the proportion of such rows rises. At high densities, invert the treatment and mark the normal rows instead.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
Über die Wirkung von Bereichsbildungen im Spurenfeld
H. von Restorff, Psychologische Forschung, 1933
Understanding Success Criterion 1.4.1: Use of Color
W3C, WCAG 2.1
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.
Applies when you are designing
Why this works
The reasoning this entry rests on.
- Banner BlindnessPsychology
- Selective AttentionPsychology
Applied through
Where this shows up as a concrete interface decision.
- Badge and TagComponent
- ButtonComponent
- Color AccessibilityUI foundation
- ContrastUI foundation
- EmphasisUI foundation
- SimilarityUI foundation
- Visual HierarchyUI foundation
Related concept
Connected closely enough to change how you apply this.
- Use of ColorAccessibility
- Aesthetic and Minimalist DesignHeuristic
- Serial Position EffectLaw