UX and psychology: why visual hierarchy matters

Let's start with a little game. Read this list of words only once and try to remember it:

APPLE
BANANA
APRICOT
CAR
PINEAPPLE
PEACH

Which words do you remember? You may not have remembered all of them, but chances are the word "car", the only one that isn't a fruit, didn't escape your memory.

The same thing happens when users look at an interface: what stands out and remains memorable is what differentiates itself from everything else and succeeds in attracting their attention.

How attention works

Our brains are constantly processing enormous amounts of information. Even when we're sitting in the office, seemingly focused in front of a screen, we're bombarded with stimuli: an incoming email notification, colleagues aligning on tasks that need to be completed, another colleague getting up to go to the bathroom at the edge of our field of vision, and so on.

The only way we can make sense of this flood of information is by applying a filter that decides what deserves attention and what can remain in the background. Our brains have learned to do this in the most efficient way possible, automatically establishing a priority order.

The same thing happens when we look at a digital product screen. That's why it's important to understand how we work and how to guide our users' attention toward the elements we want to emphasize.

A car among fruits: the Von Restorff effect

But how do we decide which elements pass through the filter of our attention and which do not? A German researcher, Hedwig von Restorff, asked herself the same question in 1933 and conducted a study that led to an interesting conclusion:

In Von Restorff's original experiment, the distinctive element could be a number within a list of syllables, a differently colored item within a list of items of the same color, and so on. The effect occurred:

• Only when the list was otherwise homogeneous.
• Regardless of the distinctive element's position within the sequence.
  

This effect, which takes its name from the researcher and is also sometimes called the isolation effect, applies to your digital products as well: users perceive visual patterns, and anything that breaks those patterns captures their attention.

The Von Restorff effect in UX

Once you understand it, the Von Restorff Effect can be found everywhere, including in UX. It's the reason why elements on a page should not all appear on the same visual level; designers decide what users will most likely want to see first and make it stand out.

Too many CTAs, and none that really matter

Landing on a screen with multiple CTAs that all look the same, sharing the same color, shape, and style, creates confusion for users. Users want to be guided through the page:

• What is most important?
• What action do we want them to take?
  

For example, a modal containing two primary buttons with the same color and visual weight is effectively the same as a page with no buttons at all.

Similarly, when presenting users with a pricing page, if we want them to choose the premium plan or the annual subscription rather than the monthly one, we should highlight it, for example, with a colored border or a solid-colored CTA instead of one with only an outlined border.

Differentiating elements reduces the user's decision-making load, allowing them to immediately understand where to direct their attention.

Warnings and errors: standing out is not optional

The same principle applies to security alerts and error messages. If they used the same visual language as the rest of the platform, they could easily go unnoticed. This is why they are often differentiated through dedicated colors (by the way, have you already read about what colors mean within a platform?) and specific icons.

Be careful, however: color cannot be the only way to distinguish an important message from its surroundings. According to the accessibility guidelines, and specifically Criterion 1.4.1, alternative ways of conveying information should be provided to accommodate users who have difficulty distinguishing colors, such as people with color blindness or reduced visual acuity. These alternatives may include:

• Textual content
• Borders
• Icons with a clear and unambiguous meaning

Designing according to the Von Restorff effect

So how can the Von Restorff Effect be applied in practice? For every screen, there is one simple question to ask: what should the user notice first?

You don't capture users' attention by highlighting every element. Instead, you need to carefully choose what is truly worth emphasizing. In fact, if you overload a design with colors, badges, and animations, the result is not increased attention, it is the complete loss of the effect.

An interesting example comes from 1998, when Benway and Lane, two web usability researchers, identified a phenomenon known as banner blindness. When users were presented with banner ads, they tended to ignore them entirely despite their bright colors and visual prominence, because they associated them with advertising. Here too, the brain acts efficiently by allocating fewer resources to anything it instinctively recognizes as irrelevant.

To preserve the effect, it is important to focus on:

• A single priority for each view
• Contrast between elements
• Reducing visual noise
  

If, when looking at your latest screen, you cannot immediately identify the primary action, the issue is not the visual design, it's the prioritization within your product. This is often the kind of problem that can be solved by an external perspective, someone who can help you design and structure your application more effectively. Get in touch if you'd like support in shaping the UX of your digital product.