---
title: Minimize distance
slug: minimize-distance
kind: principle
summary: 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.
problem: >-
  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.
principles: [minimize-distance]
status: stable
visibility: public
related:
  - title: UX Principles Guide for Building Web Software
    url: /wiki/ux-principles-for-web-software
    summary: The customer-facing version, with demos of label proximity and feedback placement.
  - title: Dense Operational Table
    url: /patterns/dense-operational-table
    summary: The clearest application — a table is an alignment machine that puts comparable values adjacent.
---

## 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.