F7.05.1Direction as hierarchydesignresearch

Direction encodes entering and leaving a hierarchy

Aliases: enter–exit direction · hierarchical axis · push pop

What it is

Which side a page arrives from says “deeper or shallower than the last level,” not “which button I grew out of.” One direction for going a level in, the opposite for leaving that level, and hierarchy is written onto a spatial axis. If the same direction both opens detail and closes it, the axis has nowhere to write deep versus shallow. This is hierarchical grammar, not object identity, and not a full map of which surface type lives on which side of the product.

Why it happens

A navigation stack is last-in first-out in time; the screen is two-dimensional. Mapping the stack onto one spatial axis (often a push along the reading direction) lets people simulate depth with a body sense of direction: forward is push, back is pop. Direction becomes an external representation of hierarchy.

Without that axis every page replaces in place and depth lives only in remembered titles. Memory is unreliable after about three levels, and return asks “am I going up or entering another level?” Direction turns the question into a perceptible displacement token, like the opening and closing of brackets.

Studying it

Give the same three-level path two transition schemes — forward and exit sharing a direction versus exit reversing — and measure the hierarchy people draw afterward, whether return hits the right level, and estimates of “which level am I on.” Independent variables: whether direction aligns with the stack, horizontal versus vertical axis. Dependent variables: correctness of the drawn stack, erroneous returns, depth estimates.

Reading direction is a covariate: users of right-to-left scripts may default “forward = from the right” the other way. Group by language; do not treat one axis as universal.

Where it stops holding

  • A modal overlay is not another stack level; giving it a push direction tells the story of a deeper page. Modals are closer to rising in place or arriving on a vertical axis, provided the product is consistent.
  • In a tablet split view, “detail” may only replace the neighbouring pane with no new stack depth; a push direction then forges a level.
  • When reduced motion removes travel, the directional grammar vanishes and title plus back-button semantics have to carry depth.

Applying it

  • Pick one axis for true stack navigation: forward on the positive side, exit on the reverse. Do not lend that axis to surfaces that are not stack levels.
  • Opening detail and closing detail must appear as a pair on opposite ends of the axis, not as two slides from the same edge.
  • Check: after a three-level navigation, ask people to draw the stack. Mixed directions scramble the level count; paired directions let people mark in versus out even without reading titles.

Related

  • Same group: F7.05.2 Inconsistent direction breaks the spatial model · F7.05.3 Return should reverse the forward direction
  • Nearby: F7.07 Motion expressing spatial relations · G4.01 Back stack and back semantics
  • Search terms: hierarchical direction · push pop · spatial model

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F7.05.1