Visual Weight

011 min

Why visual weight decides what gets noticed first

Picture a designer reviewing the settings page of a project-management app. Two buttons sit at the bottom of the form. "Delete workspace" is wide, bright red and in bold type. "Save changes" is small grey text on a white background.

Nothing is broken, because both buttons work. But a person who scans the page looks at the red button first. A person reading the page would take deleting to be the main action.

The word weight is borrowed. Elements on a screen have no mass, so their weight exists only in how the eye treats them. The designer's job is to see which elements the eye treats as heavier, and to check that this matches what each one is worth to the user.

That raises a practical question: what makes one element draw more attention than another?

021 min

What gives an element visual weight

To fix the page, the designer first needs to know what the eye responds to. Vision scientists have studied this with visual search tasks. A person looks for one target among many other items, and the researchers note which differences help the person find it fast.

Jeremy Wolfe and Todd Horowitz reviewed this work in 2004. They rated colour, motion, orientation and size as the attributes with the strongest evidence for guiding where attention goes. The designer's red button has colour and size on its side.

Weight depends on the surroundings

An attribute adds weight only when it differs from what is around it. Laurent Itti and Christof Koch reached this point in their 2001 review of computer models of attention. They found that how noticeable something is depends strongly on its context.

A single dark square on a pale page is seen at once. The same dark square among many dark squares is not. On the settings page, the red button works because the rest of the form is grey and white. If every control on the page were red, none of them would be noticed first.

032 min

The features that add or remove visual weight

Design writers have turned research and practice into lists of features that raise or lower weight. Steven Bradley's 2014 article in Smashing Magazine is one of the fullest. The table follows it.

No single feature decides the result. The features add up. Bradley's own example is a small dark shape in open space near the top of a page, which can outweigh a larger, paler, irregular shape near the bottom.

Where the guides disagree

The table says darker elements weigh more. Digital Photography School tells photographers the opposite: light tones and highlights draw the eye more than dark tones. The same site also lists dark-coloured elements as giving a heavy feel in another guide.

Both rules describe contrast with the surroundings. Dark type on a pale page is noticed because it is darker than the page. A bright window in a dim room is noticed because it is brighter than the room. Itti and Koch's point about context explains both: the element that differs most from what is around it is noticed first, whichever way it differs. On a dark page, a pale element is the one that differs.

042 min

How visual weight balances a layout

Once every element has a weight, the next question is how the weights fit together. The answer is balance. The art psychologist Rudolf Arnheim argued in Art and Visual Perception that weight and direction are the two properties with the most influence on how balanced an image looks.

A layout can be balanced in two ways. In symmetrical balance, equal weights sit at equal distances on both sides of the centre. In asymmetrical balance, unequal weights balance because the lighter element sits farther from the centre, or because one large pale area faces one small dark one. The farther an element sits from the centre, the more weight it adds to its side, which is why asymmetrical layouts can feel stable.

Hokusai's colour print of the Great Wave, shown here, puts two very unequal shapes in one frame. A large dark wave fills one side and a small mountain sits in open space on the other.

An experiment on balance

Balance is not only a designer's opinion. In 1985, McManus, Edmondson and Rodger tested it in a laboratory. They asked each participant to place a fulcrum under a picture so that it looked balanced. With plain test pictures, the balance point depended mostly on the position of an object. Its size and colour mattered less.

Bradley guesses that colour counts most, because people notice colour before shape. The two sources measure different things: what people notice first, and where people say a picture balances. Neither result makes the other wrong.

052 min

Why faces and text add visual weight in any style

Some of the strongest attractors are not simple features at all. In 2009, Moran Cerf, Paxon Frady and Christof Koch tracked the eye movements of people looking at photographs. People looked at faces 16.6 times more than at regions of the same size and position, and at text 11.1 times more. Text came close to faces in how well it attracted gaze, and people found it hard to look away from both even when they had reason to.

Photographers say the same. Digital Photography School's guide lists eyes, faces and text as heavy elements in a frame. For a designer, this means a headshot next to a button tends to draw the eye before the button does, unless the button is made much stronger.

Movement

Motion is on Wolfe and Horowitz's list too. An auto-advancing carousel, a pulsing badge or a looping animation therefore tends to draw the eye away from static content, even when its colour and size are modest. A designer who adds motion to an element is adding weight to it, whether or not that was the aim.

Because motion is so hard to ignore, accessibility rules limit it. WCAG 2.2 success criterion 2.2.2, Pause, Stop, Hide, requires a way to pause, stop or hide movement that starts by itself, lasts more than five seconds and appears beside other content. A moving element that readers cannot stop keeps its weight for as long as the page is open.

061 min

Why visual weight cannot be measured exactly

Designers like to treat the lists above as rules. They are closer to habits, and two points show why.

There is no ruler

Bradley says plainly that he knows of no way to measure the weight of a design element exactly. He tells designers to rely on experience and judgment. A 2016 paper proposes a measure for photographs that starts from light contrast, but it is a research method and not a tool in a design app.

The practical result is that the only reliable test is a person looking at the page. Your own eye is a fair first check, and a few other people are a better one.

Colour rankings are conventions

Guides often rank colours, with red as the heaviest and yellow as the lightest. Bradley words it as what is considered true. It is a convention of the field, not a measured result. A pale red on a cream page can weigh less than a dark blue on the same page, because contrast with the surroundings does most of the work.

071 min

Visual weight in real interfaces

Back to the settings page. The UK government's GOV.UK Design System shows how a team can turn weight from a habit into a rule. Its button guidance says to use a default button for the main call to action on a page, and secondary buttons for secondary actions.

Applied to the settings page, "Save changes" gets the default style. "Delete workspace" gets a low-weight style on the form, so a person who wants it can find it but nobody is steered to it. The red appears only on the confirmation step, after the person has chosen to delete.

081 min

Where lowering visual weight has a limit

Lowering weight sounds easy: make the element paler. That works until the element is hard to read. Success criterion 1.4.3, Contrast (Minimum), in the Web Content Accessibility Guidelines (WCAG) 2.2 requires text to reach a contrast ratio of 4.5:1 or more, and 3:1 for large text. Text that falls below it is hard to read for people with low vision.

So "Save changes" in pale grey would fail, even if the designer wanted it quiet. The designer has to lower weight with features that do not hurt legibility. Remove the filled background, drop the bold type, reduce the density around the control or move it lower on the page. Only text in an inactive component has no contrast requirement.

092 min

Applying visual weight

These moves work for most screens.

• Name the one thing the person should do or read first on the screen.
• Give that element the strongest combination of features: contrast with its surroundings, enough size, and a clear place on the page.
• Remove weight from its competitors instead of adding more to the winner. Cut a colour, a border or a bold style.
• Give the main element empty space. Space around an element adds to its weight and costs nothing else.
• Check against the legibility floor in the last section before you finish lowering anything.
• Look at the result. Blur the screen or squint at it, then ask a few people to point to where they look first. If they point somewhere else, the weights are wrong.

A worked pass over the settings page

Take the two buttons from the first section and list the features from the table for each.

The pass changes five features, and none of them needs a new element. The only new decision is the confirmation step described above.

101 min

Visual weight vs. nearby concepts

Visual weight is a quantity that every element has. The neighbours below are a result of it, a cause of it, or a setting that changes it.

?4 questions

Questions people ask

§10 sources

Sources