The Designer’s Guide to Von Restorff Effect

Erkan Kerti
Prototypr
Published in
5 min readMay 2, 2018

--

Making items more memorable than the rest while designing interfaces

All others are the same *

If you create an object that is different than the others, it will have a high chance to be easily remembered. It will be distinguished because it will stand outside of a set consisting of multiple similar objects. German psychiatrist Hedwig von Restorff predicts that in a given set of objects if an object/shape is different than the rest, it’s more likely to be remembered. Von Restorff Effect (also called isolation effect), which is studied under isolation paradigm, explains the distinctive features of an item that isolate it from the rest of the objects. These features make the item perceived in a different way, or more correctly, get bigger attention. These distinctive features can be size, shape, color, and spacing (for texts: highlighting, making bold, making italic and underlining) etc. When you see a red apple in a basket containing many green apples, your attention sways to it, you remember it. Green apples, on the other hand, are less remembered and it is very unlikely that you will remember each of them individually. Also, when you see a bold text or an italic text your attention is caught by those texts.

Different one takes the attention.

When you define a set of objects in your UI, you can draw user’s attention to the places you want them to see or feel specifically. For example, if you want the user to feel the color of your product as blue, you can add little of blue around while another monochrome scheme is being used or you can add little blues to important action buttons to make them easily distinguishable while rest of the page is constructed as greyscale.

Too many people think that painting all over the page with your brand color is the only way to make the brand memorable. So they aimlessly want this, instead of making that color distinguishable by using it in little amounts on a single-colored page, such as in the picture below.

While the web page is greyscale, our perception gives emphasis on the orange. This way we can observe the firm as ‘orange’ rather than black or grey. Nice example from quantagroup.co.uk

While designing interfaces, making an item different from the peers affects the users’ attention, by getting inside their heads and attracting their emotions. This can be done to improve the user experience through emphasizing particular information or making certain actions salient.

For instance, if you give a user a form to fill but it’s too long, you can provide bullets and change the current step’s color or shape to enable a user to track the progress easily. What we gain from this is not only increasing the emphasis on current step but also giving less emphasis to others. Users can be easily distracted by the salient color of the current step and ignore the number of next steps. The sense you give to the user is like this: I came three steps already instead of this: There are still six steps more to complete.

Showing the current and completed steps by changing the shape/color/type of the circles.

The more attention for one, the less for the rest

So from the last example, the reverse effect will also be true. When the majority of your attention is grasped by the different one, less attention will be paid to remember the rest. And thus, you end up remembering the others less. When you make too many different objects which stand out by their colors, shapes or movement, human attention will be consumed too fast. It’s a valuable fuel for human psychology because, in a certain amount of time, it’s limited.

box differentiate business plan from the rest (Box)

While making a pricing table for your product, differentiating one of them by changing its size/color/shape will take user’s focus to that item. The user will choose the path you show first, and focus on the anchor point of your pricing table. This way, you are motivating users to pick a certain pricing option, such as ‘standard plan’ instead of enterprise or lite. If you want a user to observe all plans rather than your business preference, you need to make them same.

Same objects, no one stands out. This way user is not distracted. (Zendesk)

Making an object seem more important than the others will make others easily fade away. Therefore, balance is an important factor in isolation, and it should be preserved in really related interfaces.

Choose wisely

If you want to emphasize a text in your presentation that you want an audience to read and remember, you need to make it different. Or maybe you want to show the important dates for your party in the poster, you need to make them ‘different’ than the rest. So if you are building a user interface, and want people to follow certain things to improve the experience, differentiate items by their colors, shapes or sizes.

While making this, try not to forget, when you force a user to see/focus on certain parts of your user interface, if you end up with making many different shapes or colors, they can be easily distracted with the noise. Maintaining a balance is the key to make cleaner interfaces with correct emphasis on relevant elements. When you use too many distinctive elements, you’ll end up creating a messy UI which generates too much cognitive load on the user.

--

--