When several similar items are presented together, the one that differs from the rest is the most likely to be noticed and remembered.
Overview
Also called the isolation effect, the Von Restorff Effect describes how distinctiveness captures attention and memory. In a list of furniture words with one animal among them, the animal is the word people remember.[1][2]
Distinctiveness can come from many sources: color, size, shape, spacing, position, motion, or meaning. In interfaces, it is the principle behind primary buttons, highlighted plans, notification badges, and alerts.[2]
The effect depends on contrast with surroundings. Emphasis works only when it is scarce: if everything is highlighted, nothing stands out. And because people learn to ignore things that look like advertising, too much visual shouting can cause important content to be skipped.[7]
Why it matters
Every screen competes for limited attention. The Von Restorff Effect is one of the most direct tools a design has for guiding people to the most important action or information, such as the next step, a critical warning, or a recommended option.
Used carelessly, it has the opposite effect: competing highlights create noise, and emphasis applied to the wrong element draws attention away from what matters.
Key takeaways
- Make the most important element distinct, such as the primary action on a page.
- Use emphasis sparingly. One clear point of emphasis is stronger than several.
- Do not rely on color alone. Combine color with shape, size, text, or icons so the distinction works for people with color vision deficiencies.[5]
- Ensure sufficient contrast for distinctive elements and their boundaries.[6]
- Avoid making important content look like an ad, which people may ignore.[7]
In practice
Common patterns in business applications, portals, and internal tools:
Supports the principle | Undermines the principle |
|---|---|
One visually distinct primary button per view. | Several buttons all styled as primary. |
A recommended option clearly highlighted among alternatives. | Every option decorated with badges and labels. |
Errors marked with color, an icon, and a text message. | Errors indicated only by turning a border red. |
Animation reserved for truly important changes. | Constant motion that competes for attention. |
Important notices styled consistently with the product. | Critical messages styled like promotional banners. |
Questions to ask in a design review
- What is the one thing on this screen people must notice?
- Is it visually distinct from everything around it?
- How many elements are competing for emphasis?
- Would the distinction still be clear without color?
Origin
The effect is named after German psychiatrist and pediatrician Hedwig von Restorff (1906–1962). In a 1933 study, she found that when participants studied a list of similar items containing one distinctive item, memory for the distinctive item was improved.[3][1][4]
Her original findings showed improved recall for the isolated item regardless of where it appeared in the list.[1] Psychologist R. Reed Hunt‘s 1995 review revisited what von Restorff actually found and argued that the effect is subtler than the popular summary suggests.[8]
Related concepts
- Selective Attention — people filter what they notice
- Law of Similarity — similar items are grouped, distinct ones stand apart
- Serial Position Effect — position also affects what is remembered
- Signifiers — distinctive cues signal what to do
- Cognitive Load — too much emphasis adds noise
- Aesthetic-Usability Effect — visual design shapes perception
References and further reading
- Wikipedia. Von Restorff Effect. https://en.wikipedia.org/wiki/Von_Restorff_effect
- Yablonski, J. Von Restorff Effect. Laws of UX. https://lawsofux.com/von-restorff-effect/
- von Restorff, H. (1933). Über die Wirkung von Bereichsbildungen im Spurenfeld. Psychologische Forschung, 18. https://doi.org/10.1007/BF02409636
- Wikipedia. Hedwig von Restorff. https://en.wikipedia.org/wiki/Hedwig_von_Restorff
- W3C. Understanding Success Criterion 1.4.1: Use of Color. WCAG 2.2. https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html
- W3C. Understanding Success Criterion 1.4.11: Non-text Contrast. WCAG 2.2. https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
- Nielsen Norman Group. Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop. https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/
- Hunt, R. R. (1995). The Subtlety of Distinctiveness: What von Restorff Really Did. Psychonomic Bulletin & Review, 2(1). https://doi.org/10.3758/bf03214414
- Nielsen Norman Group. Visual Hierarchy in UX: Definition. https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
- Yablonski, J. Laws of UX (format inspiration for this series). https://lawsofux.com/