Section headers make the inner structure of a long list readable

What it is

Once a list runs longer than a screen, category relations among rows are hard to grow from scanning line by line. Section headers insert a kind of row that is not an item, naming what the following stretch belongs to: Today, Unread, a letter, a project. They supply a structure map, not a tappable record. Without them, a hundred rows are a flat river. With them, the river is marked into reaches, and a scan can jump by reach.

Why it happens

Finding in a long list is first “which class,” then comparison inside the class. If the class exists only as a sort key and is never drawn, locating requires inducing from many rows — “these all seem to be last month.” A header makes that induction a visible break, so working memory need not keep the category itself. The header must not look like an item: size, weight, fill, or position should differ from rows, or it will be tapped as a record and the structure cue becomes noise. The grouping dimension must be the one people use to look; grouping by internal id does not help search. Headers also cut landmarks that a letter index or a time scrubber can match. Structure is for scanning, not for the data model: nesting in the model does not mean five levels of header on the list.

Studying it

On the same long list, with and without section headers, run “find this item in that class” and “how is this list organised.” Independent variables: whether headers are visible, whether the grouping dimension matches the task. Dependent variables: locate time, correct description of organisation, taps that treat a header as an item. When dimension and task mismatch (grouped by creator, looking by date), headers get in the way.

Where it stops holding

A short list with one category makes headers empty overhead. A table expresses category in columns; row grouping is a different device — do not treat a table header and a list section header as one thing. Search results are already query hits; forcing the original collection’s categories splits those hits. Screen readers need the header marked as a heading or a group, or the structure exists only for the eye.

Applying it

• Group by the dimension people actually use when looking, and let the header speak that dimension’s value.
• Style header rows away from items, and do not make them tappable as records.
• Keep one level of grouping that helps scanning; do not unroll the data tree into headers.
• How to check: cover the items and look only at headers. If the skeleton of the list cannot be spoken, the headers are not carrying structure.

Related

• Within the group: E4.17.2 A sticky header names the group you are in while you scroll · E4.17.3 Too many, too fine groups raise scanning cost instead of lowering it · E4.17.4 A sticky element must not be mistaken for a tappable row
• Adjacent: E4.02 List items · E4.04 Sticky headers and horizontal scroll
• Search terms: section header · list grouping · collection structure