Incorporating Visual Distinction to Accomplish User Goals

Von Restorff Effect

When a designer says to a client, “Let’s do something different and creative, something that is out of the box”. The client may be immediately faced with questions like, “Will it work? Why deviate from the usual ones, the ones that are not common in the market?” It might just sound like a leap in the dark to the client. But guess what, the von Restorff effect is evidence that doing something different from the established norm, does work in aiding memorability.

In 1933, Hedwig von Restorff, a German psychiatrist conducted a memory experiment. She gave her participants a list of similar but distinct objects. Out of all the objects, one object on the list was in a unique colour. When the participants were asked to recall the list after a brief period of time, the uniquely coloured object’s recall rate was 8 times higher than the rest. She deduced that when multiple homogenous stimuli are presented, the one that differs from the rest is more likely to be retained.

Simply put, the von Restorff effect elucidates that in a group of similar elements, the one that looks different from the rest is most likely to be remembered.

This is also called the isolation effect: the distinctive feature of the element isolates it from others. According to neuroscientists, our mind and brain have a tendency to remember things that are different. They search for visual discrepancies and lookout to break habits. Some of the ways to make an element stand out are by altering their size, colour, spacing, shape, highlighting, underlining or making the element bold or italic.

Wondering how we can harness this law to effectively design web pages that would enhance user experience and lead to higher engagement? The von Restorff effect has been widely used in almost every website and services, some of which make use of it more effectively than others. The requirement to make every single element and content visually distinct is fundamental in design. When this principle is used sparingly and strategically, the design not only helps draw the user’s attention but also directs them to the most valuable information. Some of the common examples are:

1. Pricing Plan chart

In the example above, the design draws the user’s attention to the most popular offering (most likely the profitable one too), the Pro pricing plan. By isolating one choice in the field, the designers help improve recall of the most desirable product offering, and ultimately lead to higher conversion rate since the users will rush for the highlighted plan instead of spending more time exploring the alternatives.

The designer could also isolate the pricing plan by increasing its size and changing its colour. In the example given below, the designer has made use of the colour red which is known to evoke feelings of alertness and attention.

2. Call to Action

Ever observed why Buy now and Sign up buttons stand out the most on any webpage? The button is designed to draw the users’ attention and perform the click action. The designers want the users to differentiate between the simple buttons and call to action buttons, and make it as obvious and unobstructed as possible. By simply changing the font, colour, and shape of the button, designers attempt to steer the user’s attention. The designers are also likely to make cancel and logout buttons much smaller than Call to Action (CTA) buttons. This way the user grabs another product while finding their way out.

3. Incoming Notifications

The von Restroff effect can also be observed when alerting users to incoming notifications. From the example stated above, the users can clearly distinguish which app requires their immediate attention and action.

4. News Websites

This effect is also commonly used in news websites to place emphasis on featured content to make a specific content stand out against other headlines and ads. The user’s attention is drawn by usage of scale to create contrast between the featured content and adjacent content. The focus is drawn on the featured headlines that break out the implied columns of content. For example:

This principle is not only limited to website designing but also helps to inflate sales and effectively marketing the product. One of the prime examples of this is when Apple launched their iPod in 2001. The identifying characteristic of this product was the colour. You knew who had an iPod because of the white earphones. By leveraging this simple and trivial idea, Apple managed to create differentiation. When everyone had black earphones, they opted to take the opposite path, which made them stand out.

Selective Attention

Humans live in an overstimulating world full of distractions. Everyday, at any given moment, humans are subject to a plethora of sensory information with multiple signals competing for their attention. Our ability to focus on things around us is limited in terms of capacity and duration, hence we only focus on relevant information. This phenomenon is known as selective attention.

Selective Attention refers to the ability to select from many objects and focus on one particular object or stimuli in the design or web page, and filtering out other distractions. Attention being a limited resource, this type of filtering allows us to overlook unimportant elements and focus on what really matters. The user may tend to stay focused only on the part of the webpage that seems relevant and meets their goal. This concept is evident from the presence of Tunnel Vision and Banner Blindness in digital interface.

Tunnel Vision

When the brain adapts to selectively attend to the web page content due to cognitive overload, the human visual system acquires a tunnel vision, that is, the user focuses on a particular element and disregards the others.

In a research study conducted by Neilson and Norman (2012), users ignored the year at the top of the design and read the entire writeup before they found the year 2000. Hence, the strong tunnel vision prevented the users from noticing the year at the top of the design.

Retrieved from Nielson and Norman (2012)

One way to prevent tunnel vision usability is by positioning related items close together. This makes the design more accessible and also helps the low-vision users who magnify the screen to perceive the information when it is in proximity.

Banner Blindness

It refers to the tendency of users to ignore elements that they perceive to be advertisements on a webpage. When we choose to selectively attend to content, we may omit the content that is not helpful and defeats our goal, for example, digital ads.

Users may search for elements that would help them achieve their goal – especially design patterns such as search bars, navigation, links, or buttons; and would instinctively look for these items in common locations. They would also ignore legitimate content if it:

• has an ad-like visual hierarchy, such as animation
• are placed in close proximity to actual ads
• has ad-specific placement like right-hand side of the page

Therefore, it is vital to visually differentiate between content and an ad to minimise the possibility of it being inadvertently perceived as an ad by not placing them in the same section. This could be done by carefully choosing colours, background, and type of the content carefully. The designers must also be mindful of not mixing content and ads.

Key Takeaways:

The von Restorff effect is a powerful guideline for how to use contrast to direct people’s attention to the most relevant, impactful, and engaging content. It can help to inform our design decisions to lay emphasis on important call to action or relevant information by creating visual distinction, and help to ensure that users of the products and services are able to quickly identify what they need to achieve their goals.

Designers could also employ restraint when placing visual elements of the webpage to avoid mixing of content as well as to ensure salient items do not get mistakenly perceived as ads. Additionally, taking into consideration the positioning of related items, carefully choosing the colour, background and the type of content are other considerations that designers must follow.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]