The von Restorff effect (isolation effect)

In short

If a list has nine words in black and one in red, the von Restorff effect says you are more likely to remember the red word after the list is closed.

It is also called the isolation effect. The effect has less to do with the different item than with its surroundings. An item only stands out when the items around it resemble each other.

In the interface, we use this effect on purpose, but we also destroy it easily. Two simple ways to destroy it: highlight everything, or leave the highlight to colour alone.

Hedwig von Restorff’s 1933 study

The effect is named after the German psychiatrist and pediatrician Hedwig von Restorff. Her study appeared in 1933 in volume 18 of the journal Psychologische Forschung. Its German title is “Über die Wirkung von Bereichsbildungen im Spurenfeld”.

The core of the experiments: participants saw a list of items that resembled each other. One of the items differed from the others. The different item was remembered better than the similar ones.

According to Wikipedia, making key information visually distinctive through colour coding, bold text or contrasting formatting can improve retention and recall.

Psychologist R. R. Hunt considers the common account of this finding incomplete. In 1995, Hunt published a paper in Psychonomic Bulletin & Review titled “What von Restorff really did”. According to Hunt, von Restorff’s data show that the effect doesn’t necessarily need perceptual salience.

According to Hunt, von Restorff also argued that the difference alone doesn’t produce the effect; it must be seen in the context of how similar the surrounding items are. That is very close to the idea of similarity in the Gestalt principles.

Where it is used in the interface

In the interface, we mostly use the von Restorff effect on purpose. The aim is to direct the eye to a single thing on the screen.

• Highlighted plan. In the pricing table, the recommended plan has a different background and border and carries a label such as “Most popular”. The other plans stay plain. Details are in the pricing page pattern.
• Primary CTA. A screen has a single filled, dark button; the rest have a border or are text buttons. The person doesn’t have to look for the main action. In the CTA button pattern, you can try one and two primary buttons side by side.
• Notification badge. The small number in the corner of an app icon uses the same effect. The icons resemble each other, and the one with the badge stands out.

A highlighted plan can also work with another effect. The expensive plan next to it provides a point of comparison; I describe that on the page about the anchoring effect.

How to make an element stand out

Colour comes to mind first. But there are other ways, each with its counterpart in the interface.

• Size and weight. A heading set larger or bolder stands out from the rest of the text on the same line.
• Shape. A filled button looks different next to buttons with a border, and a round badge next to square cards.
• Spacing. An element set a little farther from the others reads as a group of its own.
• Text. A label such as “Recommended” or “Off” can be read even if you can’t see the colour.

The most robust highlight uses at least two of these together. If one is missed, the other still works.

Live example: the same settings list, four states

The screen below shows the security settings of a fictional banking app. One of eight settings is off, and the person should notice. Switch between the states and pay attention to where your eye goes.

The same list, four states

Security and notifications

• Sign-in alert New

  Sends an email when someone signs in from a new device.

  On

• Payment alert Popular

  Every card payment triggers an instant message.

  On

• Face sign-in Recommended

  You sign in with your face instead of a password.

  On

• Two-factor authentication ImportantI recommend turning this on

  Asks for an extra code sent to your phone when you sign in.

  Off

• Automatic sign-out New

  Ends the session if you do nothing for a while.

  On

• Offer emails Offer

  Sends you personal offers by email.

  On

• Screenshot block Recommended

  Prevents screenshots on the account screens.

  On

• Foreign payment alert Important

  Warns you about a payment made abroad.

  On

Where does the eye go?

The row that is off stands out with a background colour, a thick border and a text label. The eye goes there first.

Because JavaScript is off, you see the list with “One highlight”. In the live example you also see the same list with no highlight, with every row highlighted and highlighted by colour only, and you can turn on a grayscale view.

The settings screen of a fictional banking app; the settings and states are made up. Of eight settings, only two-factor authentication is off. The colour blindness view shows the screen in grayscale. That is a rough approximation of what someone sees who can’t tell colours apart at all.

In the “One highlight” state, three things make the row stand out: the background, a thick border and a text label. In the colour blindness view the colour disappears, and the other two remain.

Overuse: when everything is highlighted

The condition for the von Restorff effect is calm surroundings. If every element on the screen carries its own colour or label, no element is left to stand out.

This usually happens gradually. Marketing wants a campaign label, and the product team puts a “New” badge on the new feature. Each request is reasonable on its own; the sum is noise.

Choose the one thing on a screen that really has to stand out. The rest stays at the same visual weight. Why a crowded screen tires people is covered on the page about cognitive load.

Accessibility: don’t highlight with colour alone

Colour is the easiest way to highlight, but also the most fragile. WCAG success criterion 1.4.1 Use of Color covers this topic and is at Level A.

According to the criterion, colour must not be the only visual means on the screen. That applies when conveying information, indicating an action, prompting a response or distinguishing an element. Anyone who can’t see the colour difference must get the same information through another visual cue.

The W3C Understanding page doesn’t ban colour. Colour coding is allowed as long as another visual cue is added. One example on the page is required fields: there is a symbol next to the red text as well.

If the lightness difference between two colours is at least 3:1, it can count as an additional visual distinction. But if the person has to perceive a specific colour, an additional cue is needed regardless of contrast. You can measure the ratios with the contrast checker.

In the example above, turn on the “Colour only” state, then switch to the colour blindness view. The green and orange dots turn almost the same grey, and the setting that is off disappears. For the other WCAG criteria, see the WCAG guide.

How to check it on your own screen

1. Write down which element on the screen should stand out. If several elements are on the list, the problem already starts there.
2. Blur the screen, or look at it with squinted eyes. Is the first thing you see the element you wrote down?
3. Convert a screenshot to grayscale. Is the highlight still recognisable? If not, add a label, symbol or border.
4. Count the badges and coloured labels. Ask of each: what do we lose without it?

If you want to measure with users whether the highlight really works, a first-click test is a good start. The other principles are in the list of laws of UX.

My note

The highlighting mistake I often see in audits is too much. The home page has buttons in four colours, and every card has a badge. The person doesn’t know where to look.

My rule is simple: one primary action per screen. If there is a recommended plan, only that one stands out in the table. Colour always comes together with text or a symbol.

If you want someone from outside to check what stands out on your screens, the UX Audit does this check together with accessibility.