F3.02.3three-level hierarchydesignresearch

Hierarchies of three levels or fewer are the most stable

Aliases: big-middle-small · three size buckets · categorical size

What it is

Ask people to sort the type on one screen into “big / middle / small” and the piles agree: display title, body, timestamps and legal. Ask for five grades — display, subtitle, module name, body, caption — and the same people swap subtitle with module name, or fold caption into body. Size hierarchy is most stable at three levels or fewer. That is not a taste claim. It is how many buckets people spontaneously use when they classify a UI by size. Extra “levels” on the spec sheet are usually folded back into those three.

Why it happens

Absolute judgement of a continuous magnitude supports few stable categories; size is typically recoded as thick / medium / thin rather than seven ticks on a mental ruler. Past three rungs, adjacent grades lack independent everyday labels (“this is a fourth-level heading” is not a lived category), so comparison becomes pairwise: “this is slightly larger than that.” Pairwise comparison can sort. It cannot do the locating job of “I know which grade this is the moment I enter the page.” A five-rung type table can be true of the document outline and still collapse under a scan. Stable here means: no legend, no memorised token names, still separable on the spot.

Studying it

Free-sort: give a screenshot, ask people to group type blocks that “look the same size,” and do not supply rung names. Record the modal number of groups, agreement, and which elements travel together across observers. Absolute identification is the other task: learn five names, then name a single line in isolation, and watch where accuracy falls. If free-sorts sit at three groups while five-name identification is only accurate in pairwise presentation, the extra grades are compared, not categorised.

Where it stops holding

Users of dense professional tools (trading boards, code editors) can acquire more usable grades through training; three is not a biological cap. The extra categories are product-internal and do not travel. Illustration and posters can force giant / large / mid / small / micro with extreme physical range; ordinary app first screens rarely have that range. Three-level stability is about size categories. Colour or position may encode another layer — that is a different channel. Do not report “we actually have five levels, two of them in colour” as five size levels.

Applying it

  • Give each first screen three size roles: one entry line, one readable body, one ignorable metadata column. Fold module names, labels and button copy into those buckets instead of opening new rungs.
  • Document outlines may keep H1–H6. Visually merge H3 and below into body or module name so outline depth does not buy a pixel rung.
  • When a request arrives to “add another small heading,” ask which bucket it joins. If it joins none, accept that a scan will not treat it as a new category.
  • Check: cut the target page into type-block cards, strip position, and have five people group by size without seeing the spec. If stable groups exceed three, test whether size really opened a new category or whether someone cheated with colour. If the stable count is three, demote extra names on the type table to production aliases and stop advertising them as visual levels.

Related

  • Same group: F3.02.1 A size difference must clear the discrimination threshold before it makes a level · F3.02.2 More levels compress the step between them
  • Nearby: F4.01.1 A limited set of type sizes keeps consistency · F3.08.3 Hierarchy failure shows up as not knowing where to look first · F3.07.1 Visual hierarchy must match content priority
  • Search terms: three-level hierarchy · categorical perception · type scale · absolute judgement

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F3.02.3