Jumping across rows in a grid is expensive

What it is

Moving left and right inside a row costs the column difference. Reaching a cell in another row means walking vertically to that row, then aligning horizontally: two legs added together. A grid looks like a plane and walks like one axis then the other. Row crossing is systematically dearer than in-row movement—not because that card is far in pixels, but because it is off the current axis.

Why it happens

A four-way pad has no diagonal. From row 1 column 1 to row 4 column 5 is at least three Downs and four Rights, seven steps, with no “one diagonal press.” People often finish a row before noticing the target sits on the next one, then pay the wasted horizontal steps on top. Two posters that look adjacent but live at opposite ends of two rows are close on screen and a full row-width plus one row apart on the graph.

Wrap policy multiplies the bill. If another Right at the end of a row drops into the start of the next, the user thinks they are looping in-row and actually changed rows; aligning to the target column then walks the whole misalignment. If rows do not stack on columns—staggered rows, an inserted “more” slot, unequal lengths—Down does not land on “the card directly below,” but on the geometrically nearest other card, which then needs a horizontal correction.

Wider grids make the horizontal component of a row change larger. On a six-column wall, fixing a wrong row can cost more than the vertical move itself. That is why a “dense” content wall feels sticky: density is column count, and column count is a tax paid on every row change.

Studying it

From a fixed start, compare reaching a target in the same row with reaching a target N rows away. Predict path length from Manhattan distance, then record the axis order people actually use (horizontal-first versus vertical-first) and extra steps caused by wrapping.

Independent variables: column count, row count, equal versus unequal row lengths, wrap-at-end-of-row, whether Up/Down align on columns. Dependent variables: keypresses above Manhattan optimum, axis switches, correction steps after a wrong row.

If the experimenter highlights the target, people plan a diagonal-like vertical-then-horizontal path. In real browsing the target does not glow in advance; people scan by row, and part of the row-crossing cost is the time to notice they are on the wrong row. Do not charge every extra step to layout—some of it is search strategy.

Where it stops holding

A single-row rail (one strip of posters, Up/Down to other rails) turns row crossing into “change rail”: one vertical step plus in-rail horizontal, not the full row–column sum of a regular grid. Radial or circular menus are not rows; the term does not apply. Two-column settings pages make row crossing cheap; depth is the cost. Keys that skip a whole row (channel, page) cut the horizontal tax if people know the key exists.

Applying it

• Keep items used in the same task in the same row or a short column. Do not let “related functions” look like one block while living many rows apart in the focus graph.
• Align rows on columns. Do not stagger the next row by half a cell so that Down lands on a surprise card.
• Give wide grids a per-row entry: a focusable row title that, with one Down, changes row and lands on that row’s default column, instead of cutting in from the last column of the row above.
• Verify by walking, step-count only, between two visually close cards that sit on different rows. If actual steps stay more than twice an in-row control, cut columns or add a row-level entry before adding animation.

Related

• Within the group: K5.02.1 Each move is one cell, so distance is keypress count · K5.02.3 Frequent items should sit near the default focus
• Adjacent: K5.01 Focus-based navigation · F2.06 Proximity grouping · K5.06 Difficulty of text entry
• Search terms: grid traversal · row crossing · D-pad path length