Uneven column heights scramble reading order
Aliases: masonry scan path · no rows
What it is
A three-column masonry has no row. Is the next glance rightward, or down the same column? Source item 1 may sit halfway down the middle column because a tall portrait ate the left. People who scan like a newspaper miss whatever sits under that portrait; people who scan by column treat source item 2 as item 5.
Uneven heights break how you read it the first time. Whether you can find it again is a different, stability problem.
Why it happens
Horizontal-type cultures expect top-to-bottom, start-edge across, then wrap. Masonry deletes the row, and shortest-column insertion does not make spatial neighbours equal source neighbours. At least two strategies then conflict; mixing them drops items.
A “lead” that is only first in source order can land visually mid-column two, while a tall image at top-left takes the first fixation. Layout has rewritten editorial order and offered no replacement path (numbers, flow marks).
Studying it
Scan paths are the ready paradigm: same pictures, masonry versus a rowed grid; see whether scanning is column-major, row-major, or jumps. Independent variables: column count, height variance, a specially tall image at top-left. Dependent: correlation of first-fixation order with source order, miss rate, accuracy recalling “which one was that.”
Labs often say “look naturally,” and strategies differ by person — that is the product problem, not noise. Do not treat the mean scan path as everyone’s path.
Where it stops holding
If the job is to retrieve one known picture (search, a save), reading order is idle; findability matters. One column has no inter-column raggedness. Playful collages never offered an order. Numbered or timestamped cards can recover order from type, which softens spatial scramble.
Applying it
- If the task includes “read down by relevance or time,” do not masonry; use a rowed grid and handle crop or letterbox as a separate media policy.
- If masonry stays, pin the most important item as a full-bleed or a reserved top-left block; do not feed it to shortest-column insertion.
- How to check: number items 1, 2, 3… in source order on a screenshot and pencil the reading path. A zigzag across columns, or 1 not where first glances go: list skipped numbers. Re-flow the same pictures on a rowed grid and pencil again. The version that skips fewer numbers is the one that still has a reading order.