Indentation becomes harder to tell apart as a tree gets deeper
Aliases: tree indent · hierarchy cue decay · nested offset
What it is
A tree uses a horizontal offset to mean parent and child: the child sits further right. Indent depth discriminability is whether that offset still reads as “one level deeper.” A few pixels of step are enough near the root. As depth grows, neighbouring left edges close in and leftover width runs out, and the third and fourth levels start to look like the same level. The tree is still counting levels; the eye is reading a flat list.
Why it happens
Hierarchy is perceived from the difference between adjacent left edges, not from absolute x. Each extra level spends width. If the step stays a fixed number of pixels, its contrast weakens inside a narrowing content band; if the step grows with depth, labels hit the trailing edge and the node can no longer be named. Nodes that share a left edge are read as siblings; if that edge jitters — icons of mixed width, expand arrows that come and go — siblings split and strangers fuse. Connector lines can add a path of “who owns whom,” but dense lines become texture and stop being paths. Depth therefore costs twice: horizontal resolution is taxed level by level, and the edge that distinguished levels goes dull.
Studying it
Present the same nodes at 3, 5, and 8 levels and ask “are these two the same level” and “which node is the parent.” Independent variables: pixels per level, presence of connectors, whether the expander occupies width. Dependent variables: same-level accuracy, wrong-parent counts, truncation of deep labels. Accuracy should drop steeply after a depth, not fade linearly — that is the collapse of discriminability. A rating of “looks hierarchical” is not a substitute for pointing.
Where it stops holding
A two- or three-level nav tree barely meets this ceiling. A wide desktop sidebar can feed a deeper tree; a narrow drawer is full at three. Screen readers do not take indentation as hierarchy; they take level properties. Visual indent failure and assistive-tech failure are different events. Once deep nodes are moved into a breadcrumb path or a child view, indentation no longer carries depth and this constraint is handed to another structure.
Applying it
- Keep the tree’s effective depth inside the range where indent can still be pointed at; do not express further depth by indenting more.
- Align sibling left edges. Keep expander slots stable so arrows appearing and disappearing do not jitter the edge.
- When more depth is required, push into a child view or a path rather than shaving a few more pixels off each level.
- How to check: pick two mid-depth nodes at random and ask whether they are siblings and who the parent is. When answers turn into guesses, depth has outrun indent.