Skip to content
UX Atlas
Plate FND·040 · UI foundationGrid D1 · Rev. 2026-08-14

Columns

How many vertical divisions the content occupies, which affects scanning as much as it affects fit.

UI foundationCraft conventionFoundational

Definition

Columns divide content horizontally. On screens, multiple text columns are usually a mistake because the reader must scroll to reach the bottom of the first column and then scroll back up.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Where multiple columns work and where they do not
  3. 3When a second column helps, and when it costs
  4. 4In practice
  5. 5Local chart
  6. 6Sources
  7. 7Continue from here

Reach for this when

  • Laying out forms.
  • Deciding how to present lists of short items.
  • Designing comparison views.

Common mistakes

  • Multi-column prose on a scrolling page.
  • Two-column forms.
  • Columns that produce an ambiguous reading order.
  • Adding a second column to reduce page height, which trades a scroll for a comprehension cost.

Where multiple columns work and where they do not

  • Continuous prose: one column. Multi-column text on a scrolling page forces awkward vertical navigation.
  • Short independent items such as a link list or a set of tags: multiple columns work well, since each item is read separately.
  • Comparison content: columns are correct, because comparison is exactly what they support.
  • Forms: one column completes fastest. Side-by-side fields are acceptable only for genuinely paired values such as city and postcode.
  • Print stylesheets: multi-column can be appropriate, since pages do not scroll.

When a second column helps, and when it costs

ContentColumnsWhy
A form being completedOneTwo columns produce ambiguous reading order and slower completion
A long articleOne, constrained measureMulti-column text requires scrolling up to continue
A comparison of optionsSeveralComparison is the whole task
A settings pageOne, with groupingScanning down a single axis is faster than searching a field
A dashboardSeveralIndependent items viewed in parallel
A list with detailTwo panesBrowse and inspect are genuinely different tasks

In practice

  1. i.

    Single-column checkout

    Ecommerce

    Moving from a two-column to a single-column checkout consistently improves completion, because the vertical path is unambiguous and the form reads as one sequence.

  2. ii.

    The two-column form that slowed everything

    Reading order

    Fields arranged in two columns made the tab order and the visual order disagree, and left people unsure whether they had filled everything. A single column was longer on screen and faster to complete.

Local chart

FND·040 · Region II · Grid D1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

ComparisonPAT·006 · APPLIED THROUGHOne Long Form or Several Short StepsCASE·009 · PRACTICAL EXAMPLEForm UX ChecklistCHK·001 · CHECK YOUR WORKGridTERM·068 · SHORT DEFINITIONGutterTERM·069 · SHORT DEFINITIONAlignmentFND·003 · RELATED CONCEPTContainersFND·041 · RELATED CONCEPTGridsFND·039 · RELATED CONCEPTReadabilityFND·036 · RELATED CONCEPTResponsive LayoutFND·043 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

    Checkout usability research

    Baymard Institute

    Long-running research programme on ecommerce checkout form design.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Practical example

A worked decision where this was the deciding factor.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.