Salience

011 min

Why salience decides what gets seen first

Say a designer is reviewing the payment screen of a subscription app. The "Apply coupon" link has a bright orange background. The "Pay now" button is grey, and so is every field around it. In testing, people keep stopping at the coupon link, and a few never find the button.

Both labels are clear. The coupon link wins because it differs from its surroundings and the button does not. Perception researchers call that difference salience, and they have measured it for decades. Designers use the same idea each time they decide what a viewer should see first.

This article follows the payment screen through four questions. How does a visual system score a scene? What raises the score? When do goals and habits override it? And when does a high score point at the wrong thing?

023 min

How salience is worked out

The best-known model of this scoring was published in 1998 by Laurent Itti, Christof Koch and Ernst Niebur. It splits an image into separate maps for colour, brightness and orientation. In each map, every location is compared with the area around it, so a spot that differs from its neighbours gets a high score. The maps are then added into one saliency map, and attention goes first to its highest point.

One consequence matters for the payment screen. A feature that is everywhere scores nothing. If every item on the screen has an orange background, the colour map has many equal peaks and none of them wins. Salience belongs to the scene, not to the element. A viewer with colour-blindness receives a different colour map from the same screen, so the scores differ for them too.

Across photographs from outdoor scenes to paintings, the places the model attended were mostly things of interest to a viewer, such as faces, flags, people, buildings and vehicles. Software already uses such scores to crop photos around the interesting part and to compress the rest harder.

031 min

Where the idea of salience comes from

The experiments came first. Anne Treisman's feature integration theory, built on experiments she ran with Garry Gelade in 1980, held that a unique feature is found no matter how many other items are present. Her explanation was an early stage of seeing that handles basic features, such as colour and orientation, across the whole visual field at once, before attention selects anything.

In 1985 Christof Koch and Shimon Ullman proposed a circuit design in which attention follows a map of local differences. Itti, Koch and Niebur turned that design into a working computer model in 1998, one that could be run on any image. From 1989, Jeremy Wolfe and colleagues built guided search models that add the viewer's goals, which the section on goals returns to.

Where the first theory fell short

The first theory said that a combination of two features has to be searched one item at a time. During the 1980s, researchers found that searches for a combination of two features were often faster than the theory allowed. Viewers can use what they know about the target, such as its colour, to narrow the search before they look. That makes salience one input among several.

042 min

What raises the salience of an element

Back to the payment screen. The coupon link wins because it differs on a feature the visual system measures early. A designer has a short list of such features to work with:

• Colour: a hue that few nearby items share.
• Brightness contrast: an item much lighter or darker than its surroundings.
• Size: larger or smaller than the neighbours.
• Shape, orientation and texture: the odd form in a group of similar ones.
• Motion: change over time, the feature that is hardest to ignore.
• Position and white space: an item with empty space around it differs from a crowded neighbourhood.

Each lever works only against its context, so the useful question is never "is this bright?" but "is this brighter than what is around it?". Levers can be combined. If the coupon link were both orange and larger, it would differ in two maps instead of one. The same rule governs a call to action, a price, a navigation label, one highlighted bar in a chart, a product on a shop shelf and a title in a streaming row. Each competes with its neighbours for the first look. Reading paths such as the Z shape and the F shape, which designers often draw over layouts, describe where people tend to look. They are a reason to test placement, not a measure of salience.

Salience also works away from screens. In the men's washrooms at Schiphol Airport in Amsterdam, a small fly image was etched into the bowl of each urinal. The image is a small mark on plain porcelain, so it differs from its surroundings and gives the eye a place to settle. An airport manager told NPR in 2009 that spillage dropped by 80 percent after the flies were added. NPR's report also credits an urge to aim at a target, so contrast is probably only part of the effect.

051 min

When goals override salience

Testers on the payment screen came to pay, and a goal changes the scores. With no task, attention goes to the highest point of the saliency map. With a task, the viewer's knowledge of the target changes how much each map counts. Picture someone searching a bin of brightly coloured toys for one red plastic dragon. Before they decide what to look for, no single colour is noticed first. Once they decide, every red toy is noticed. Salience is the viewer's response to a scene, so it shifts when the viewer's purpose shifts.

Salience is one input among five

The 2021 version of Jeremy Wolfe's guided search model combines five sources of guidance into one priority map: the viewer's knowledge of the target, bottom-up feature differences, recent history, reward, and the structure and meaning of the scene. Attention goes to the highest point on that map. A screen designer controls only one of the five, the bottom-up differences. The other four belong to the viewer and the task, which is why a high score in a design review can still fail in use.

062 min

When salience and importance disagree

The payment screen has one more problem. Even after the coupon link is toned down, testers may miss the Pay button if they expect it somewhere else. Expectations are learned, and they can beat salience.

071 min

Applying salience to a screen

For the payment screen, a designer can work in this order.

1. Decide what must be seen first, before choosing any style. Here it is the Pay button.
2. Give that item one clear difference from its neighbours, using one lever from the list above. Add a second only if the first is not enough.
3. Reduce competition. The coupon link should differ less than the button, or sit lower on the screen.
4. Check the result in poor conditions: a small screen, a dark theme and a colour-blind simulation.
5. Test with real tasks. People in a hurry to pay behave differently from people looking at a screenshot.

Two limits apply. When many items differ strongly, none of them wins and the screen reads as noise. And the same lever can hide things. A bright "Accept" button beside a faint "Decline" link is a recognised dark pattern, a design that steers people against their own interest. Use salience on what the viewer came to do.

081 min

Salience and accessibility

Two WCAG 2.2 criteria bear directly on salience. SC 2.2.2 Pause, Stop, Hide (Level A) requires a way to pause, stop or hide any moving, blinking or scrolling content that starts automatically, lasts more than five seconds and sits beside other content. The W3C notes that continuous movement distracts some people with cognitive disabilities or attention deficits. Motion is the strongest lever, so it is also the one that can make the rest of a page hard to use.

SC 1.4.1 Use of Color (Level A) says colour cannot be the only way to carry information. That also protects viewers whose colour channel differs, such as people with colour-blindness, who receive a different saliency map from the same screen.

091 min

Salience vs. nearby concepts

Several neighbouring ideas share the word or the idea, and each answers a different question.

Salience is the result of those inputs in one particular scene, and the first look it predicts. Visual hierarchy is what a designer builds with it. Salience bias is what a viewer may do with the outcome later.

The word has other senses too. Linguists use it for prominent words, political scientists for the issues voters care about, and clinicians for the importance a person gives to experiences. This entry covers the perception and design sense only.

?4 questions

Questions people ask

§11 sources

Sources