---
title: "The Von Restorff Effect: Why What’s Different Stands Out"
url: "https://insideuxdesign.com/en/blog/the-von-restorff-effect-why-whats-different-stands-out"
language: "en"
description: "Learn what the von Restorff effect is and how to highlight CTAs, pricing plans and badges without banner blindness. Includes an example and a checklist."
published: "2026-07-29T09:00:00+02:00"
updated: "2026-10-15T00:09:50+02:00"
---

# The Von Restorff Effect: Why What’s Different Stands Out

What stands out from its surroundings sticks in memory. What Hedwig von Restorff found in 1933 and how to use emphasis in interfaces deliberately and accessibly.

Picture the dashboard of an invoicing app for freelancers. In the top right corner sit four bright orange buttons: “New invoice,” “Export,” “Add client” and “Upgrade now.” Five items in the sidebar carry red counters. Above it all, a yellow banner gently pulses, promising a discount on the Pro plan. Overdue invoices are marked by one thing only: the amount is shown in red.

Each of these elements was highlighted with good intentions. The result is still a screen where nothing stands out anymore. Anyone who wants to write an invoice has to find the right button among four equally loud ones. After a few days, people stop noticing the red counters. And the overdue invoice from an important client gets lost, because red is everywhere on this screen anyway.

Behind all this is a principle that psychologist Hedwig von Restorff described in 1933: what stands out from its surroundings is remembered better. The effect is one of the best known tools in interface design, and one of the most often misused. This article explains what von Restorff actually studied, how it translates to interfaces and why too much emphasis cancels itself out. The invoicing app serves as a running example throughout. It is made up, but typical.

## What Hedwig von Restorff found in 1933

Hedwig von Restorff was born in Berlin in 1906 and earned her doctorate at the Psychological Institute of the University of Berlin under Wolfgang Köhler, one of the founders of Gestalt psychology. Her work appeared in 1933 in the journal Psychologische Forschung under the title “Über die Wirkung von Bereichsbildungen im Spurenfeld,” roughly “On the effects of field formation in the trace field.” In 1935 she was dismissed from the institute. That same year, Köhler left Germany for Swarthmore College in the United States. Von Restorff went on to study medicine and worked as a physician in Freiburg until her death in 1962.

Her experiments were simple. Participants learned lists of pairs made from different kinds of material: nonsense syllables, numbers, letters, typewriter symbols and colors. In each list, some items came from the same category while the others were one of a kind. After a break, participants recalled as much as they could. The result: the isolated items were remembered more often than the similar ones.

In further experiments, von Restorff varied the conditions. When she reduced the number of standout items per list from four to two, the advantage grew, just as she had predicted. A later experiment, the one closest to how the effect is usually studied today, used a single isolated item: one number among 19 syllables, or the reverse, one syllable among 19 numbers. The advantage increased dramatically. The reversed version is telling, because it shows that numbers are not inherently more memorable. What matters is the difference from the rest of the list.

Psychologist Colin MacLeod pulled these details together in a 2020 historical review in the journal Memory & Cognition. He also highlights a point that usually gets lost in summaries: von Restorff herself saw the effect less as a special advantage for the standout item. She saw it more as a cost for the similar items, which interfere with each other and blur into a group, while the isolated item stays on its own. For interfaces, this reading matters more than it first seems.

Unlike some popular findings in psychology, the effect stands on solid ground: MacLeod describes it as robust and readily replicable. The debate is mostly about how to measure and explain it properly, not about whether it exists.

### More than an attention trick

The obvious explanation goes like this: the standout item gets more attention and is therefore stored better. It is not quite that simple. Memory researcher R. Reed Hunt pointed out in 1995 that von Restorff found the effect even when the isolated item appeared in the second position of the list. At that moment, it could not yet look different, because the similar items had not been shown yet. Hunt concluded that perceptual salience in the moment cannot fully explain the effect. What counts is the relationship to the whole context: what is similar and what is not.

## From memory to interfaces

Strictly speaking, the von Restorff effect is a finding about memory. Interfaces are usually about something else: what do people see first, and what can they find quickly? The principle still carries over, thanks to a related mechanism from perception research. In their 1980 feature integration theory, Anne Treisman and Garry Gelade described how a target that differs from everything else in a single feature, such as color, practically jumps out during visual search. This is known as the pop-out effect. When people have to search for a combination of features instead, say “orange and square” among orange circles and gray squares, the search takes much longer.

Both findings point to the same rule: emphasis is relative. An orange button does not stand out because orange is a strong color. It stands out because nothing else is orange. Jon Yablonski sums this up for practitioners in his collection “Laws of UX”: make important information and key actions visually distinctive, but use restraint so that emphasized elements do not compete with each other.

An element can differ along many dimensions: color, size, shape, position, white space, font weight, motion. The [Gestalt principles](https://insideuxdesign.com/en/glossar/gestalt-principles) describe the flip side: things that look alike and sit close together are perceived as a group. Emphasizing something means deliberately pulling it out of that group.

## Three typical places to use it

### The primary call to action

Almost every screen has one main action that most people want to take there. A call to action, or CTA, is an element that prompts exactly that action. On the invoicing app’s dashboard, it is “New invoice.” For this button to work, it needs a difference the other buttons do not have.

- **Before:** Four orange filled buttons of the same size side by side. None stands out, because all of them are equally loud.
- **After:** “New invoice” is the only filled button. “Export” and “Add client” become outlined buttons, and “Upgrade now” moves into the account menu as a text link.

Size helps twice here. A bigger button is not only more noticeable, it is also easier to hit, according to [Fitts’s law](https://insideuxdesign.com/en/glossar/fitts-law). At its core, all of this is about visual hierarchy, and it pays to write that hierarchy into your [design system](https://insideuxdesign.com/en/glossar/design-system): a scale of primary, secondary and tertiary buttons, plus the agreement that each view gets only one primary button. Then the team does not have to make the same decision on every screen. The article [Design Systems for Small Teams](https://insideuxdesign.com/en/blog/design-systems-for-small-teams) shows how to set this up without much overhead.

### The recommended pricing plan

Pricing pages show the effect particularly well. Three or four plans sit side by side, and one of them is larger, has a colored background or carries a label like “Most popular.” This helps people who are unsure which plan fits them. A recommendation like that gives the choice some structure without limiting it.

- **Before:** All three of the invoicing app’s plans carry a colored label: “New,” “Popular” and “Best value.” As a result, none of them is a recommendation anymore.
- **After:** Only the middle plan gets a stronger border and a label with a reason: “Recommended for freelancers sending up to 50 invoices a month.” The other two stay quiet.

The reason makes the difference. A label that explains who the plan is for helps people decide. A label that only creates pressure does not. Where the line to manipulation runs is covered in the section on pitfalls below.

### Notifications and badges

Badges are small markers, usually a dot or a counter, that point to something new or unread. They rely entirely on the von Restorff effect: a red dot on an otherwise calm icon catches the eye immediately. That is exactly why they wear out so quickly. When five menu items carry red counters and one of them only announces new templates, people learn to skip the counters. Then the one that really matters stops standing out too.

- **Before:** Red counters on “Invoices,” “Clients,” “Templates,” “Reports” and “Help.”
- **After:** One counter, on “Invoices” only, and only for overdue invoices, in other words for something that requires action. New templates appear as a subtle note on the templates page itself.

A useful question for every badge: does this person need to do something about it now? If not, it does not need a badge.

## When everything is emphasized, nothing is

Perhaps the most important lesson of the von Restorff effect is already in the original experiments. When von Restorff isolated fewer items, the effect got stronger. With just a single isolated item, it increased dramatically. Apply her own interpretation, that similar items weaken each other, to an interface, and the problem becomes clear: four orange buttons simply form a new, orange group. The standout becomes the norm, and the contrast is gone.

In practice, this problem creeps in. Marketing wants the upgrade to be more visible, the product team wants the same for the new export feature, and support wants the help link to stand out. Each request makes sense on its own, but together they produce a screen where everything is shouting.

Two habits help:

- **An emphasis budget:** Decide for each view how many elements may be emphasized at most, for example one primary button and one status message. Anyone who wants to highlight something new has to say what steps back in return.
- **Emphasis by subtraction:** Instead of making the important thing louder and louder, you can make the unimportant things quieter. An outlined button instead of a filled one, gray instead of colored text, more white space. The contrast then comes from the surroundings.

This also reduces [cognitive load](https://insideuxdesign.com/en/glossar/cognitive-load). Every emphasized element demands attention. When several compete for it at once, the brain has to sort them before it can act. The article [Cognitive Load: Why Less Is Often More in Interface Design](https://insideuxdesign.com/en/blog/cognitive-load-why-less-is-often-more-in-interface-design) goes deeper into this.

## Banner blindness: when the obvious gets overlooked

Emphasis has a downside that seems paradoxical at first: sometimes the most conspicuous thing is the one people miss. In 1998, Jan Panero Benway and David M. Lane reported on a study in which participants had to find a specific piece of information on a website. The right link sat in a large, colorful banner at the top of the page. Hardly anyone noticed that this very banner contained the information they were looking for. The title of their paper gave the phenomenon its name: “Banner Blindness.”

Design researcher Don Norman explained this shortly afterwards with schemas, the learned expectations people have about how a website is structured. People look for links where links usually are. A big, colorful banner does not fit that schema as navigation. It fits as advertising, and so it gets skipped.

The Nielsen Norman Group revisited the phenomenon in 2018 using [eye tracking](https://insideuxdesign.com/en/glossar/eye-tracking) and confirmed it. Kara Pernice names three traits people use to recognize ads: typical ad placement, such as the top of the page or the right rail; ad-like visual treatment, such as animation; and proximity to actual ads. One sentence from the article stands out: anything that stands out from its immediate surrounding context is likely to be considered an ad.

This is where the von Restorff effect hits its limit. Difference creates attention, but only as long as it reads as relevant. If an element looks like an ad, even the strongest emphasis will not help. For the invoicing app, this means:

- **Before:** A yellow, pulsing banner above the dashboard advertises the Pro plan. Right below it, in the same yellow, is the notice about two overdue invoices.
- **After:** The banner is gone. The overdue notice appears as a calm status line inside the invoice list itself, where people look anyway. The upgrade offer only appears when someone hits a limit of their current plan.

## Don’t rely on color alone

Color is the most convenient way to emphasize something, and also the least reliable. Not everyone perceives color the same way. With a [color vision deficiency](https://insideuxdesign.com/en/glossar/color-vision-deficiency), red and green, for example, can be hard to tell apart, and in bright sunlight on a phone, color differences fade for everyone.

The [WCAG](https://insideuxdesign.com/en/glossar/wcag), the internationally recognized guidelines for accessible web content, address this explicitly. Success criterion 1.4.1, Use of Color, at Level A requires that color is not the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. A required field marked only in red, or a link that differs from the surrounding text only by color, does not meet it. A difference in lightness can count as an additional cue if it reaches a [contrast ratio](https://insideuxdesign.com/en/glossar/contrast-ratio) of at least 3:1. But if people need to recognize a specific hue, such as green for valid and red for invalid, another cue is still needed.

Criterion 1.4.11, Non-text Contrast, at Level AA adds another requirement: user interface components and their states, as well as graphics needed to understand content, need a contrast ratio of at least 3:1 against adjacent colors. A recommended plan that only stands out through a pale border on a white background is then not just hard to notice. Its defining feature is also invisible to many people.

In practice: always combine color with a second cue, such as shape, size, font weight, an icon or a short piece of text. In the invoicing app:

- **Before:** Overdue invoices can only be recognized by their red amount.
- **After:** Next to the amount there is a warning icon and the text “Overdue for 12 days.” The recommended plan stands out through its border, label and position, not just its color.

A quick test: switch your screen to grayscale. Whatever still stands out is emphasized without relying on color. The article [Color Blindness in UX Design](https://insideuxdesign.com/en/blog/color-blindness-in-ux-design-guidelines-and-tools) introduces more tools.

## Motion: the strongest and trickiest tool

Nothing grabs attention as reliably as motion: a wiggling button, a pulsing dot, a counter ticking up. That is exactly what makes it the trickiest way to emphasize something. It is hard to ignore, even when someone is trying to read something else in peace.

For some people, it is more than an annoyance. In its explanation of success criterion 2.3.3, Animation from Interactions, the WCAG mentions people with vestibular (inner ear) disorders, for whom on-screen motion can trigger dizziness, nausea and headaches. This Level AAA criterion requires that motion animation triggered by interaction can be disabled, unless the animation is essential. Criterion 2.2.2, Pause, Stop, Hide, applies even at Level A: moving, blinking or scrolling content that starts automatically, lasts more than five seconds and is shown alongside other content needs a way to pause, stop or hide it.

Technically, there is a simple solution. Windows, macOS, iOS and Android all offer a setting to reduce motion. Websites can detect it with the CSS media query `prefers-reduced-motion`. Inside `@media (prefers-reduced-motion: reduce)`, you can tone animations down or replace them with calmer alternatives, for example a gentle fade instead of a wiggle.

For the invoicing app, this means:

- **Before:** The upgrade banner pulses constantly, and the counter for new messages bounces on every page load.
- **After:** There is no continuous animation anymore. When an invoice has been sent successfully, a short [microinteraction](https://insideuxdesign.com/en/glossar/microinteractions) confirms it once. If reduced motion is enabled, the confirmation appears without movement.

The rule of thumb: motion is for feedback and state changes, not for permanent advertising. Laws of UX also explicitly recommends considering people with motion sensitivity when motion is used to create contrast.

## Limits and pitfalls

**Emphasis as manipulation.** The same mechanism that guides people to the right action can guide them to the wrong one. A bright “Yes, I want this offer” button next to a barely visible gray text link to decline is not good design. It is a [dark pattern](https://insideuxdesign.com/en/glossar/dark-patterns). The same applies to a recommended plan that is not the best fit but the one that brings in the most revenue. Rule of thumb: emphasize what helps most people in this situation. The article [Spotting and Avoiding Dark Patterns](https://insideuxdesign.com/en/blog/spotting-and-avoiding-dark-patterns) covers this in more detail.

**Habituation.** Emphasis wears off. A badge that is always there eventually becomes part of the background. That is an argument for tying emphasis to real states and removing it once the state is over.

**Context beats recipes.** Whether something stands out always depends on its surroundings. A red button on a colorful campaign page disappears, while the same button in a gray admin interface jumps out. Blanket rules like “CTAs should always be orange” are therefore of little use. What matters is what creates contrast with everything else on that particular page.

**No magic numbers.** The web is full of case studies claiming that a different button color lifted [conversion](https://insideuxdesign.com/en/glossar/conversion) by some specific percentage. Results like these do not generalize. They depend on the context, the audience and the test method. Only your own test can show what works on your website.

## Checking your emphasis

You can check whether your emphasis works with very little effort.

**Blur test:** Squint, or apply a blur to a screenshot. Whatever still stands out is what people notice first. Is it the right thing?

**Grayscale test:** Turn off color. If the important elements remain recognizable, your emphasis does not depend on color alone.

**Five-second test:** Show participants a screen for five seconds, then ask what they noticed and what they would do next. If they name the main action, your hierarchy works.

**Tasks in usability testing:** In a [usability test](https://insideuxdesign.com/en/glossar/usability-testing), give participants a task whose answer sits in an emphasized notice. If they miss it, banner blindness may be at play. [Heatmaps](https://insideuxdesign.com/en/glossar/heatmap) or eye tracking can make this visible too, but they are optional.

**A/B testing:** With enough traffic, an [A/B test](https://insideuxdesign.com/en/glossar/a-b-testing) shows whether a change in emphasis actually changes behavior. Also check whether other important actions suffer as a result.

## Conclusion

In 1933, Hedwig von Restorff showed that people remember what stands out from its surroundings better. Her finding is robust, and it has a core that is still often overlooked: the effect comes from the relationship to the context. The fewer elements stand out, the stronger the difference works.

For interfaces, this means emphasis is a scarce resource. One primary button per view, one recommended plan with a reason, badges only for things that need action. Add two obligations: never use color as the only cue, and design motion so it can be turned off. And one caveat: anything that looks too much like an ad gets overlooked, no matter how conspicuous it is.

After the redesign, the invoicing app’s dashboard looks calmer, not louder. And that is exactly why what matters now catches the eye: the button for a new invoice and the one invoice that has been overdue for twelve days.

## Checklist

- Each view has at most one primary action that clearly stands out from everything else.
- There is an emphasis budget: new highlights replace old ones instead of adding to them.
- The recommended plan is the only emphasized one and says who it is for.
- Badges and counters only appear when action is needed, and disappear afterwards.
- Important notices sit within the content, not in ad-like banners or typical ad positions.
- No state is communicated through color alone (WCAG 1.4.1).
- Interface components and their states have at least 3:1 contrast against their surroundings (WCAG 1.4.11).
- Animations are short, have a purpose and respect `prefers-reduced-motion`.
- Motion that starts automatically and lasts longer than five seconds can be paused, stopped or hidden (WCAG 2.2.2).
- Emphasis helps people and does not push them toward decisions against their interests.
- The hierarchy has been checked with a blur, grayscale or five-second test.

## Sources

- [Hedwig von Restorff (1933): Über die Wirkung von Bereichsbildungen im Spurenfeld. Psychologische Forschung, 18(1), pp. 299 to 342](https://doi.org/10.1007/BF02409636)
- [Colin M. MacLeod (2020): Zeigarnik and von Restorff: The memory effects and the stories behind them. Memory & Cognition, 48, pp. 1073 to 1088](https://doi.org/10.3758/s13421-020-01033-5)
- [R. Reed Hunt (1995): The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review, 2(1), pp. 105 to 112](https://doi.org/10.3758/BF03214414)
- [Anne M. Treisman and Garry Gelade (1980): A feature-integration theory of attention. Cognitive Psychology, 12(1), pp. 97 to 136](https://doi.org/10.1016/0010-0285(80)90005-5)
- [Jon Yablonski, Laws of UX: Von Restorff Effect](https://lawsofux.com/von-restorff-effect/)
- [Don Norman (1999): Banner Blindness, Human Cognition and Web Design. Internetworking, published on jnd.org](https://jnd.org/banner-blindness-human-cognition-and-web-design/)
- [Kara Pernice, Nielsen Norman Group (2018): Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop](https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/)
- [W3C: Understanding Success Criterion 1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)
- [W3C: Understanding Success Criterion 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
- [W3C: Understanding Success Criterion 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)
- [W3C: Understanding Success Criterion 2.3.3: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html)
- [MDN Web Docs: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)