F3.01.1visual weightdesignresearch

Size, luminance, colour, position and whitespace jointly set visual weight

Aliases: visual mass · salience stack · multi-cue weight

What it is

A dashboard puts a pale area chart across half the viewport and pins an 8-pixel red dot at the top right. Most people name the dot first. Visual weight is not “who owns more pixels.” It is the ranking that falls out when size, luminance, colour, position and isolation by whitespace vote at once. Large can be light; small can be heavy. The other channels decide.

Why it happens

Early vision splits the scene into feature maps: spatial scale, light–dark contrast, hue difference, distance from the start of the display, and how thoroughly blank space isolates an object. Selection does not crown a winner on any single map. It looks for peaks on the stacked sum. The area chart wins on size, but it sits near the background in luminance, carries little hue, crowds other charts, and has no private margin, so the stacked peak is modest. The dot is negligible in size, yet it peaks on luminance, hue and isolation together, and that total comes first. Enlarging a heading rewrites only one input. Leave the other four alone and the order can stay put.

Studying it

Do not ask which item “feels more important.” Switch channels off. From one screen, make a greyscale version, an equal-size version, a hue-stripped version, a shuffled-position version, and a version that removes isolating whitespace. Measure first naming or first fixation. The independent variable is which cue was killed; the dependent variable is whether rank flips. An eye tracker gives the first landing on the scanpath; a five-second test keeps only naming order and costs less. Changing one visual parameter and declaring “weight changed” measures a single channel, not the compound.

Where it stops holding

The five cues are not equal. Motion and flicker, when present, briefly outrank still size and whitespace — a different capture system. Colour-blind or low-vision readers barely get the hue channel, so luminance has to carry the ranking. On printed posters and far-view in-car screens, positional convention and reading direction gain weight; at a close desktop they matter less than luminance and isolation. Lab findings that “size wins” on sparse colour patches often fail on dense product UI, because products almost never run a single cue at full strength.

Applying it

  • For each first screen, write which cue you are betting on: size, light–dark, hue, start-side placement, or a private margin — and name a backup cue.
  • Give the primary action at least two channels, not a type-size bump alone.
  • If a decorative hero or oversized wordmark is not first in the task, deliberately starve its luminance contrast or isolation so it cannot steal the stacked peak.
  • Check: take a greyscale screenshot and a screenshot with sizes equalised. The first-look object on both should still be the task’s first item. If either version flips, the ranking depended on the channel you just removed.

Related

  • Same group: F3.01.2 A difference on one dimension is easily cancelled by another · F3.01.3 Weight is relative and meaningless out of context
  • Nearby: F3.02 Size contrast · F3.09 Position and hierarchy · F2.04 Whitespace
  • Search terms: visual weight · luminance · salience · centre of interest

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F3.01.1