The Power of Contrast and Differentiation in UX and UI: The Von Restorff or Isolation Effect

Have you ever wondered why some elements on a website or an app stand out more than others? Why do you remember the red button more than the blue one? Or why do you click on the banner that has a different font than the rest of the text? The answer lies in a psychological phenomenon known as the Von Restorff effect or the isolation effect. In this article, we will explain what this effect is, how it works, and how you can use it to improve your UX and UI design.

What is the Von Restorff effect?

The Von Restorff effect, named after the German psychiatrist Hedwig von Restorff, who first described it in 1933, is the tendency to remember something that is different from the rest of the items in a group. For example, if you see a list of words that are all black except for one that is green, you are more likely to recall the green word than the others. This is because the green word is more distinctive and attracts more attention than the homogeneous black words.

The Von Restorff effect is based on the principle of salience, which means that the more noticeable or prominent something is, the more likely it is to be remembered. Salience can be influenced by various factors, such as color, size, shape, position, contrast, novelty, emotion, or relevance. When something is salient, it activates more neural pathways in the brain and creates a stronger memory trace.

How does the Von Restorff effect apply to UX and UI design?

UX and UI design are all about creating products that are functional, accessible, enjoyable, and memorable for users. The Von Restorff effect can help designers achieve these goals by highlighting the most important or desirable elements on a website or an app. By making these elements stand out from the rest of the content, designers can guide users’ attention, increase engagement, and influence behavior.

For example, if you want users to sign up for your newsletter or buy your product, you can use a different color, shape, or size for your call-to-action button. This will make it more visible and attractive for users and increase the chances of them clicking on it. Similarly, if you want users to remember your brand name or logo, you can use a unique font, style, or animation that distinguishes it from other elements on the page.

However, using the Von Restorff effect in UX and UI design requires some balance and moderation. If you make everything stand out, nothing will stand out. Too much salience can create visual clutter and confusion for users and reduce their cognitive load and satisfaction. Therefore, designers should use contrast and differentiation sparingly and strategically, focusing on the most relevant and valuable elements for users.

How to test the Von Restorff effect in UX and UI design?

One way to test whether your UX and UI design is using the Von Restorff effect effectively is to conduct user research and testing. You can use various methods and tools to measure how users perceive and interact with your product, such as eye-tracking, heat maps, click maps, surveys, interviews, or usability tests. These methods can help you collect quantitative and qualitative data on user behavior, preferences, emotions, and feedback.

For example, you can use eye-tracking to see where users look first when they visit your website or app. This can help you assess whether your salient elements are capturing their attention or not. You can also use heat maps or click maps to see where users hover or click most on your product. This can help you evaluate whether your salient elements are driving engagement or action or not.

Another way to test whether your UX and UI design is using the Von Restorff effect effectively is to conduct A/B testing. This is a method of comparing two versions of your product with different levels of salience for a specific element. You can then measure how each version performs in terms of key metrics, such as conversion rate, retention rate, bounce rate, or satisfaction rate.

For example, you can create two versions of your landing page with different colors for your call-to-action button. You can then split your traffic between these two versions and see which one generates more sign-ups or sales. This can help you determine which color works best for your target audience and optimize your design accordingly.

Conclusions

The Von Restorff effect is a powerful psychological principle that can help UX and UI designers create products that are memorable and persuasive for users. By using contrast and differentiation to make important or desirable elements stand out from the rest of the content, designers can attract users’ attention, increase engagement, and influence behavior.

However, using the Von Restorff effect in UX and UI design also requires some balance and moderation. Too much salience can create visual clutter and confusion for users and reduce their cognitive load and satisfaction. Therefore, designers should use contrast and differentiation sparingly and strategically, focusing on the most relevant and valuable elements for users.

To test whether your UX and UI design is using the Von Restorff effect effectively, you can use various methods and tools to measure how users perceive and interact with your product, such as user research, testing, or A/B testing. These methods can help you collect data and feedback on user behavior, preferences, emotions, and outcomes.

By applying the Von Restorff effect in UX and UI design, you can create products that are not only functional, accessible, and enjoyable, but also memorable and persuasive for users.

Bibliography

1 H. von Restorff, “Über die Wirkung von Bereichsbildungen im Spurenfeld,” Psychologische Forschung, vol. 18, no. 1, pp. 299–342, 1933.

2 S. M. Kosslyn, Image and Mind. Cambridge, MA, USA: Harvard University Press, 1980.

3 N. Tractinsky and A. S. Meyer, “Chartjunk or goldgraph? Effects of presentation objectives and content desirability on information presentation,” MIS Quarterly, vol. 23, no. 3, pp. 397–420, Sep. 1999.

4 J. Nielsen, “The Isolation Effect (Von Restorff Effect),” Nielsen Norman Group, Nov. 2016.

‍