F3.03.2saturation pop-outdesignresearch

High-saturation colour jumps the queue

Aliases: saturated capture · jumping the queue · chroma pop

What it is

A product card gives the primary a low-saturation dark fill and “New” a magenta capsule at full chroma. Gaze replay often lands on the capsule first; the primary comes second or third. Size, position and copy still say “buy first.” Saturation pulled attention out of that queue. This is not colour used to express hierarchy. It is saturation as a capture cue that ignores the rank you set. The jump happens in that frame’s allocation, not in later comprehension: people can still say where the primary is. They just did not look there first.

Why it happens

Against low-saturation neighbours, a high-chroma patch peaks on the hue/saturation map and is flagged as a candidate before attention is directed. That process does not read the information architecture. The capsule may be two characters in a corner; if the saturation gap is large, it still enters round one. A “restrained, dark, not loud” primary sits near the background on that map and waits for the second or third saccade. Jumping needs contrast: three high-chroma patches on the same screen stop being unique, pop-out weakens, and the page becomes noise — emphasis inflation, not a win for this one capsule.

Studying it

Define two areas of interest: the designated primary, and the high-saturation distractor. Compare first-fixation share and saccades-to-primary across three pages: distractor present, absent, and same hue at lower saturation. Independent variables are the distractor’s saturation and area; the dependent is how long the primary is delayed. Hold luminance so the measurement is not brightness pop-out. A five-second test is a cheap stand-in: after the flash, one object may be written down; watch whether the primary’s mention rate falls as saturation of the distractor rises.

Where it stops holding

Genuine emergencies (insufficient funds, destructive confirm) sometimes need the jump. High saturation is then capture on purpose, and a screen may have it once. When the brand colour is itself high chroma, the primary is the legitimate peak and the problem moves to temporary labels that out-saturate it. Colour-vision deficiencies shrink saturation gaps on some hues: magenta pop-out is stronger for some observers and weaker for others, so one gaze recording is not a population. Motion and flicker jump the queue harder than still saturation and must be counted separately.

Applying it

  • Set a saturation budget per screen: nothing besides the primary may match or exceed its chroma. “New,” discount and live tags default to a low-saturation edge or small type, not a filled capsule.
  • If the primary must stay restrained, do not park a high-chroma badge in the same visual field. When they meet, lower the badge. Do not grow the primary another circle.
  • In review, cover every high-chroma patch with translucent black. If the main path is clearer covered, those patches were jumping.
  • Check: two versions of the same card, only the “New” capsule’s saturation changed. Record where five people point in the first three seconds. If the high-chroma version draws reliably more first points to the capsule without raising purchase-task accuracy, the capsule is capture. Ship it below the primary’s saturation.

Related

  • Same group: F3.03.1 Luminance difference ranks hierarchy more reliably than hue difference · F3.03.3 Dark mode requires rebuilding the luminance hierarchy in reverse
  • Nearby: F3.01.2 A difference on one dimension is easily cancelled by another · F5.11 Scarcity of accent colour · F3.08.1 Emphasising everything emphasises nothing
  • Search terms: saturation pop-out · preattentive · visual capture · accent colour

Cards in the same group

Quick Actions

Share

Share this page

ios_share

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