Link copied!

Saliency in UX Design

Saliency in UX Design

What is visual saliency? Color in user experience and interface design.

Saliency shows how different an object is compared to its surroundings and defines how our attention is distributed in space. By using composition, color and heatmaps to track saliency, we can direct user attention whenever needed with the goal of providing intuitive UX.

What is Saliency?

There is barely any content on this page so far and yet you stare at it. There is something here that grabs your attention. Something, that for whatever reason, you look at. Of course, there is always a reason and in this case it is simply how our brain processes what we see on a subconscious level.

We are immediately drawn to the most striking object in front of us. We want to observe, follow and understand it. If the only thing on this page was a tear, you would have dedicated your entire focus and meaning to it. Saliency shows how different or prominent one object is compared to those that surround it. It is basically a more scientific word for attention.

The reason for this phenomenon is pretty simple. Our eyes gather so much visual data that it cannot be processed all at once, thus our brain has to neglect some of what we see in order to attend to what seems to matter the most. You can see clearly only what you focus on, not what falls in your peripheral vision.

Bottom-Up Saliency

When we look at something for the first time, like entering a room we’ve never been to before, everything we see looks equally confusing. We have no idea what’s going on and for a fraction of a second we have to decide where to focus our attention. However, we do not really decide that. Our brain does it for us.

This is what we call bottom-up saliency and is one of the two types of visual attention we can experience. Bottom-up saliency can be defined as whether an object can capture our attention based on how different it is to the surroundings without us voluntarily doing so.

The human brain autonomously encodes how interesting the things we see are in terms of saliency. You can imagine the process as if a heatmap of all salient locations was created. The locations are then ordered and we begin switching our attention from the most to the least salient one. This is what happens when we say to have scanned a room or a web page.

There are things we see that draw our attention much more effectively than others. These things are faces, orientation, color contrast, different textures or a unique shape.

This bottom up processing is driven by the strongest force on earth, fear of the unknown. It is independent of any personal goals and in any new environment, the most salient objects will always draw our attention first.

Top-Down Saliency

The second type of saliency we can experience is the so-called top-down saliency or also known as selective attention. Our knowledge of how exactly the top-down saliency works however, is not as advanced because of its more complex and goal-driven nature.

An interesting fact to know is that although the two saliency types constantly overlap or work together, top-down saliency can override bottom-up saliency. A person always has the freedom to consciously redirect their attention to whatever they want or need.

It is still a challenge for researchers to evaluate the exact pieces of visual information that are more likely to attract our attention while performing a certain task. What is known for sure though is that we purposefully direct all our focus towards something that already exists in our mind.

Having the ability to ignore bright distractions and focus solely on the specific features or information we are currently interested in is extremely powerful. It is also the barrier that protects our subconsciousness from being easily manipulated for whatever reason.

Saliency in Practice

One of the best ways to measure saliency are Heat Maps created from eye-tracking devices. These devices are often used in neuromarketing to map where the eyes of potential users are directed as means to better understand how attention is formed in different groups of people.

Practical usage is always a mixture between bottom-up and top-down saliency. In today's world where users are overloaded with content by default, it is crucial to simplify the users journey and use saliency as a way to reinforce an objective. The purpose of good design is to underline exactly what the users came for, saving them both time and energy.

Salience can help eliminate confusion and intuitively direct lost users to their goal. This has become the holy grail of commercial “landing page” layouts and call-to-action buttons where masterful use of saliency has successfully increased conversion rates for countless businesses on the web.

Like any other tool in a designer's toolkit, salience can also be very deceptive. Oftentimes used to hide important and unwanted information from users as in case with ever present terms and agreements. Or even scam users with misperceived affordances such as a fake download button. Users will often click buttons or links based on their salience without actually carefully reading them.

With the constant advancements in neuroscience, our understanding of salience evolves every day, however, the ethical aspects are often neglected. As technology and algorithms advance, it is unknown at what point neurological data might become so powerful that the concepts of choice and perception are nothing but an illusion.