Part Three: The details · Screens

64 Space Shows What Belongs Together

Lines and boxes are the obvious way to separate things. Each one is more to look at, and distance can do the grouping with nothing added.

When a screen feels jumbled, the first tool people reach for is the border. Put a box around the address. Draw a line under each row. Give the sidebar a background. Each addition is meant to tidy, and each is one more thing on the screen. A page of boxes inside boxes looks organized and takes real effort to read.

There is a way of grouping that needs no ink. Things that sit close together are seen as one group. Things that sit apart are seen as separate. This happens before reading starts, which is why a well-spaced page seems clear at a glance and a badly spaced one feels wrong for reasons people cannot name.

The commonest mistake is even spacing. On a form, each label sits exactly halfway between the field above and its own field below. The eye cannot tell which field the label belongs to, so the person has to read to find out.

The space between groups must be clearly larger than the space within them. A label sits tight against its own field. The gap before the next label is several times that. Do this and most of the lines can go, because the space is already doing their work.

Space cannot do everything. A dense table may need a faint rule between rows, and a panel that floats over the page needs an edge. Where a boundary is needed, a slightly different background or a soft shadow is usually lighter than a border.

Therefore:

Put related things close together and unrelated things farther apart, and make the gap between groups plainly bigger than the gaps inside them. Add a line or a box only where space alone has failed.

In practice. Take a form or a settings page and delete every border and divider. Then fix the grouping with spacing alone. Put back only the lines you still need.

Goes with. Spacing and emphasis together make the hierarchy, so use this with LOUD, QUIET, SILENT (63). The gaps should come from a short list of sizes: A FEW CHOICES, MADE ONCE (66). Well-grouped screens are BUILT FOR SCANNING (73).