Columns
How many vertical divisions the content occupies, which affects scanning as much as it affects fit.
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 page
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.
In practice
Single-column checkout
EcommerceMoving 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.
Sources
Where a source establishes something narrower than the popular reading of it, the note says so.
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.
Practical example
A worked decision where this was the deciding factor.
- One Long Form or Several Short StepsCase study
Related concept
Connected closely enough to change how you apply this.
- AlignmentUI foundation
- ContainersUI foundation
- GridsUI foundation
- ReadabilityUI foundation
- Responsive LayoutUI foundation