Product evidence
The best-aligned of 16 tested layouts was searched twice as fast as the worst — and the eye goes where salience points it. Every screen gets exactly one winner.
The research, distilled
Across 16 screen-layout variants tested on 75 participants, the well-aligned, well-grouped layouts were visually searched up to twice as fast as the misaligned ones — a result later replicated in both left-to-right and right-to-left reading directions. The actionable part: shared edges and purposeful grouping are measured; which grid system you use to get there is taste, and we grade it as taste.
Parush, Nadir & Shtub (1998), Int. J. Human-Computer Interaction; RTL replication 2005Computational salience — size, contrast, color weight against the surroundings — reliably predicts where eyes land first, one of the most validated results in visual attention research. A screen where a promo banner, a badge, and two loud buttons all shout at once isn't neutral: it actively spends the user's first fixation on the wrong thing. Demote everything that competes with the one action the screen exists for.
Itti & Koch (2000) and the saliency-model eye-tracking literatureAcross repeated experiments, consistent interfaces — same term, same placement, same interaction for the same concept — were completed faster and with fewer errors, with the penalty for inconsistency landing hardest on novices and users under load. A one-page pattern sheet that gets enforced captures most of the benefit; a 40-page design system nobody opens captures none of it.
Ozok & Salvendy (2000), Ergonomics; consistency experiments spanning ~100 subjectsNearly every version of this stat cites the same 2004 paper, and the paper does not contain the figure. The real whitespace research finds gains in comprehension and comfort that are modest and task-dependent, sometimes at a small speed cost. Whitespace still earns its place — as the tool that makes grouping and alignment legible (the parts that are measured). The percentage is folklore.
Our source-check of the citation chain (Lin, 2004) — the figure appears nowhere in itThe anchor study
Parush, Nadir and Shtub built 16 screen-layout variants of the same content, varying how well elements were aligned and grouped, and tested them on 75 participants. The well-aligned, well-grouped layouts were visually searched up to twice as fast as the misaligned ones. A 2005 replication found the same effect in right-to-left reading directions, so it is not a quirk of how one script reads. The measured part is shared edges and purposeful grouping — which grid system you use to get there is taste, and we grade it as taste.
Well-aligned layouts were searched up to twice as fast as misaligned ones.
alignment effect · 16 layouts, 75 participants · up to 2x, replicated LTR & RTLvisual search speed, best- vs worst-aligned of 16 tested layouts
Concepts in action
Runly, a fictional running app, asking you to upgrade. Same content, same information — the only change is hierarchy. Hit Squint on each version: the After still tells you what to do while blurred. That's the whole test.
Training plans, live pace zones, and race predictions.
Apply it to your app
This prompt runs the salience-and-alignment audit above on your actual screens — mapping first, changing second, and labeling the one rule that's convention rather than experiment.
You are a senior product engineer applying layout and attention research to my app's screens. Grounding: well-aligned, well-grouped layouts are visually searched up to 2x faster (Parush et al. 1998, 75 participants, 16 layouts; replicated across reading directions), visual salience — size, contrast, color weight against surroundings — reliably steers first fixations (Itti & Koch and the saliency literature), and consistent naming/placement measurably cuts time and errors, hardest for novices (Ozok & Salvendy 2000). One honesty note: "exactly one dominant CTA per screen" is our convention built on the salience evidence, not itself a published experiment — treat it as the default, not a law. BEFORE YOU CHANGE ANYTHING, map my app and wait: 1. List my main screens (routes/components) and, for each, what you believe the primary action is. I'll correct you — that correction is the spec. 2. Inventory every element with top-tier salience per screen: large type, saturated fills, gradients, badges, animation. 3. Note the alignment containers in use (grids, stacks) and where rows break off them. THEN audit and show me the plan before coding: - Per screen: does the primary action have strictly higher salience than everything else? List each competitor and the demotion (smaller, outlined, grayscale, moved). - Per screen: which elements sit off the shared alignment edges, and which groupings are accidental (unrelated things boxed together, related things separated)? - Consistency pass: the same action named or placed differently across screens; primary-button style variants. Propose one term, one style, one position each. - Whitespace: use it to make grouping legible — do not chase any percentage target; the "20% comprehension" stat is a citation myth. - The squint test is the acceptance criterion: blurred, each screen must still show exactly one obvious next action. THEN implement with my existing design tokens, smallest diff possible. Show me the diff before applying. Close with a per-screen table: primary action, its salience rank before/after, and what got demoted.
From Build With Kris
Subscribe to catch the teardown when it drops — the 2x alignment result, the salience evidence, and the squint test on real apps.