Minimize distance | LlamaPress Pattern Catalog
LlamaPress
Pattern Catalog
Principle

Minimize distance

The eye has to travel to connect related things. The further apart two related items sit — vertically or horizontally — the more work a person does to tie them together.

Related information gets separated by layout decisions that looked fine on their own — a label here and its input there, a total at the bottom of a page whose rows are at the top, a confirmation message where nobody is looking.

Why distance is a cost

Connecting two pieces of information costs either a glance or a memory. A glance is nearly free. A memory — read this, hold it, scroll, read that, compare — is expensive, error-prone, and gets worse as the day goes on.

Proximity is the cheapest tool in interface design because it converts memory work into glance work, and it costs nothing but layout.

The four places it is usually lost

Labels and their fields. A label that sits far from its input, or is ambiguous between two inputs, makes people guess. Placeholder-only labels are the extreme case: the label vanishes exactly when you need it, while typing.

Records and their actions. A row's buttons at the far right of a wide table mean a horizontal journey per action, and a real chance of acting on the wrong row. Either bring the action closer or make the row's identity travel with it.

Totals and their rows. A sum belongs adjacent to what it sums. Separated, nobody can check it, so nobody trusts it.

Feedback and the thing it is about. This is the most damaging one. A save confirmation that appears at the top of a page while the button is at the bottom is, functionally, no confirmation at all — the user never sees it and asks whether it worked. Put feedback where the eye already is, or pin it somewhere consistent enough to become a habit.

Density is part of this

For a long list, a condensed table beats roomy cards, and it is not a matter of taste. Whitespace between records is distance between records, and distance is exactly what makes comparison expensive. Roomy cards are correct for a few high-importance items, where there is nothing to compare.

The rule generalises: spend whitespace to separate things that are genuinely different, and remove it between things that must be compared. Uniform padding everywhere is a decision not to have made this decision.

Structure beats colour for showing relatedness

When you need to show that two things belong together, reach for position, indentation and containment before colour. "Their message versus our message" is a role, and roles are structural. Colour is a limited budget reserved for exceptions — a thing that needs a human. Spend it on relatedness and you have nothing left for urgency.

The test

Pick the two things a person most needs to connect on this screen. Measure the distance between them, in pixels or in scroll. If the answer is "you have to scroll", the layout has already decided that connection is not important — check whether you agree.

Related

Wiki guide
UX Principles Guide for Building Web Software
The customer-facing version, with demos of label proximity and feedback placement.
Pattern
Dense Operational Table
The clearest application — a table is an alignment machine that puts comparable values adjacent.