The Von Restorff effect describes how, when multiple similar stimuli are present, those with distinctive differences are more likely to stand out and be remembered. It’s also known as the isolation effect or the bizarreness effect.
German psychologist Dr. Hedwig von Restorff documented this effect during a study she conducted in 1933.
In this article, you’ll learn how and why you could leverage the Von Restorff effect to design specific sections, list items, and make choices stand out and be more memorable.
When something’s visually distinctive, it’s more likely to stand out and be remembered.
If users are able to recall content and recognize visual cues intuitively, you give them a better UX. They’ll engage and interact more efficiently. And that will advance business objectives. It can also advance business objectives directly by increasing brand recognition or influencing users to make key choices.
However, people often misunderstand the Von Restorff effect, probably because Dr. Hedwig von Restorff’s study was published in German.
The key takeaway here is that the Von Restorff effect is only in effect if the target stimuli (e.g., a key list item) is visually distinguishable from its counterparts (e.g., the other list items).
A target stimuli without counterparts (e.g., a standalone advertisement that’s completely independent of the rest of the content) can certainly stand out without the Von Restorff effect. It’s just that it won’t be comparatively distinctive. This means that it has to work harder to stand out.
However, it’s important to remember that if everything stands out, then nothing stands out. As target stimuli, they must stand out from something. So, with or without the Von Restorff effect, distinctiveness must be cultivated in moderation. Less is more, as they say.
The most important part of leveraging the Von Restorff effect isn’t making the target stimuli stand out; it’s making its counterparts uniform.
Breaking the grid (or ‘breaking the frame’) means placing content outside the bounds of a layout grid. This is one way of leveraging the Von Restorff effect.
One of the reasons why we use layout grids is that they facilitate scanability, which helps users to speed through content faster (not fully taking it all in necessarily, but understanding the gist of it, at least). The attributes of layout grids that facilitate scanability are alignment and consistent spacing. Alignment helps to establish a smooth reading flow and, to an extent, helps users understand that spaced-apart snippets of content are related. Consistent spacing helps with both equally.
It goes without saying that easier scanability means better UX. However, it can cause users to skip key content, decreasing engagement and conversions.
Luckily, we can leverage the Von Restorff effect to make said content stand out while still facilitating scanability — that is, by breaking the grid. As long as there’s alignment and consistent spacing, we can handle the standing-out part using a different approach.
One manifestation of the Von Restorff effect in UX design is ‘blockifying’:
Blockifying facilitates distinctiveness, alignment, and consistent spacing. It’s perfect for marketing sections, feature sections, article callouts, and just sections of content in general.
Also, blockiness is a ‘free’ attribute — it doesn’t express any other visual cue. So you’re safe to use it without having to worry about accidentally miscommunicating visual cues that don’t make sense in that context.
You can blockify while implementing other visual cues, though. For example, say a color has a specific meaning on your app or website. If you don’t want to convey any other visual cues, blockifying is a fairly neutral way of making something stand out. You can create a filled block for maximum impact or just go with a border for more subtlety.
Breaking the grid can also help with banner blindness, sometimes referred to as ad blindness. This is a phenomenon where users avoid looking at certain regions of an app or website because they believe that it contains an ad banner or something else that they consider undesirable. All of that is based on the fallacy that such things are inherently bad.
You can circumvent this behavior by breaking the semantic structure of the grid and placing said content somewhere different, unexpected, or even bizarre (as long as it’s relevant and doesn’t disrupt the user’s experience).
A common example of this is switching from a sidebar ad to an in-article ad:
Not only are users drawn to the article and, therefore, the approximate region of the ad, but people may perceive it as a part of the article. And this circumvents the ad blindness. After that, you can implement the usual tricks (e.g., blockifying) to make the ad content stand out from the article content. Plus, the distinctiveness of the ad being in the ‘wrong’ place enhances the Von Restorff effect as well.
Avoid instilling Von Restorff effect principles accidentally.
For example, while article callouts can help with pacing, it’s a common mistake to have them contain information that we don’t want people to remember (e.g., a throwaway quote or comment). We don’t want that — at least not at the expense of more important information:
The Von Restorff effect can also be leveraged to make specific list items more distinctive.
For unordered lists (e.g., bulleted lists), the Von Restorff effect can help users to recall often-forgotten items amongst a collection of items.
For ordered lists (e.g., numbered or alphabetically arranged lists), it can help users recall often-forgotten steps or the details of trickier steps.
However, lists must continue to convey that the list items are related, so making them stand out is more a matter of formatting than design. In most cases, simply making the target list items bold is enough to leverage the Von Restorff effect.
However, you should also consider other options, such as color and iconography, if their visual cues communicate something appropriately useful:
Some business models involve multiple pricing options. They either have multiple plans, a barebone, white label option, upsells, or anything along those lines in addition to a base offering. Such business models create additional options to frame the base offering as having more value — even though, in reality, it’s only by skewed comparison.
This is called the decoy effect, which is a type of framing effect.
By combining the framing effect with the Von Restorff effect, you can make your decoy, the option that you’re trying to make seem better, well…seem better. There’s obviously a point where this becomes disingenuous, though. Hopefully, you’re not making up faux pricing options; you’re using the Von Restorff effect to draw attention to the best one.
Pricing pages typically involve a lot of information, much of which is key to users making decisions. And so, to limit clutter, you won’t want to do anything too extravagant.
Once again, blockifying the target option (or blockifying it more than the other options) works well because it doesn’t convey unwanted visual cues. As components, you might describe them as ‘cards.’
Using drop shadows/box shadows can be effective, too.
Box shadows are normally reserved for top-layer elements such as modals to convey depth. But in this scenario, they can be used to metaphorically convey elevation. In addition, using marketing tags such as “Most popular” or “Best value” can make the target option more distinctive. You can also infuse your brand colors or a validating shade of green, as well as use decorative elements as long as they don’t make the design too cluttered. And finally, you’ll definitely want to play down the secondary CTAs.
Putting all of this together, you might end up with something like this:
In addition to making specific pricing options seem more appealing, framing techniques work for all kinds of choice-based interactions. But please don’t use them deceptively!
The only hard rule when it comes to the Von Restorff effect is that there must be more ‘consistents’ than ‘standouts.’
The Von Restorff effect is more powerful when there are fewer standouts and more consistents. Even when content needs are fairly static (users simply need what they need), there can be a bit of legroom to enhance the Von Restorff effect by increasing the standouts-consistents ratio.
For example, if you could find ways to add list items to a list without compromising the clarity (you might even enhance it), then you’d increase the standouts-consistents ratio, making the distinctive list items even more distinctive:
The Von Restorff effect can be leveraged to make key elements of an app or website stand out and be remembered without compromising visual consistency. You can leverage it on something as simple as a list item, something as large as an entire section, or something as complex as a pricing table where multiple cognitive biases come into play.
How you decide to go about that depends on what you’re trying to make distinctive, what kind of visual cues you want it to communicate, and, of course, what visual cues you want to avoid. That being said, there are some ‘safe’ design choices that work well in any scenario, such as blockifying sections and bolding text.
And remember — if everything stands out, then nothing stands out. So, use the Von Restorff effect in moderation.
Oh, and happy 118th birthday to Dr. Hedwig von Restorff (1906-1962).
LogRocket's Galileo AI watches sessions and understands user feedback for you, automating the most time-intensive parts of your job and giving you more time to focus on great design.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
We’ve all made silly mistakes in apps — clicked the wrong thing, deleted a file too soon. This guide walks through 12 real UX examples that help users avoid those moments entirely.
Users rarely welcome change, even when it improves their experience. Learn how to communicate updates, handle pushback, and keep users from jumping ship.
Documentation may not be your favorite part of the UX design process, but it’s crucial to the success of any design project.
I’ve spent enough time designing with WCAG 2.2 to know it’s not enough. Here’s why I’m skeptical and cautiously hopeful about WCAG 3.0.
Learn more →
