{"slug":"minimize-distance","meta":{"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."}]},"body":"## Why distance is a cost\n\nConnecting two pieces of information costs either a **glance** or a **memory**.\nA glance is nearly free. A memory — read this, hold it, scroll, read that,\ncompare — is expensive, error-prone, and gets worse as the day goes on.\n\nProximity is the cheapest tool in interface design because it converts memory\nwork into glance work, and it costs nothing but layout.\n\n## The four places it is usually lost\n\n**Labels and their fields.** A label that sits far from its input, or is\nambiguous between two inputs, makes people guess. Placeholder-only labels are\nthe extreme case: the label vanishes exactly when you need it, while typing.\n\n**Records and their actions.** A row's buttons at the far right of a wide table\nmean a horizontal journey per action, and a real chance of acting on the wrong\nrow. Either bring the action closer or make the row's identity travel with it.\n\n**Totals and their rows.** A sum belongs adjacent to what it sums. Separated,\nnobody can check it, so nobody trusts it.\n\n**Feedback and the thing it is about.** This is the most damaging one. A save\nconfirmation that appears at the top of a page while the button is at the\nbottom is, functionally, no confirmation at all — the user never sees it and\nasks whether it worked. Put feedback where the eye already is, or pin it\nsomewhere consistent enough to become a habit.\n\n## Density is part of this\n\nFor a long list, a **condensed table beats roomy cards**, and it is not a matter\nof taste. Whitespace between records is distance between records, and distance\nis exactly what makes comparison expensive. Roomy cards are correct for a *few*\nhigh-importance items, where there is nothing to compare.\n\nThe rule generalises: **spend whitespace to separate things that are genuinely\ndifferent, and remove it between things that must be compared.** Uniform padding\neverywhere is a decision not to have made this decision.\n\n## Structure beats colour for showing relatedness\n\nWhen you need to show that two things belong together, reach for **position,\nindentation and containment** before colour. \"Their message versus our message\"\nis a role, and roles are structural. Colour is a limited budget reserved for\nexceptions — a thing that needs a human. Spend it on relatedness and you have\nnothing left for urgency.\n\n## The test\n\nPick the two things a person most needs to connect on this screen. Measure the\ndistance between them, in pixels or in scroll. If the answer is \"you have to\nscroll\", the layout has already decided that connection is not important — check\nwhether you agree.\n"}