Designing a Readable Distorted Subway Map

Open with the 1933 London Underground map and a satellite view of the same city. Ask which one a stranger could use to plan a journey across the network.

• Harry Beck's Tube map bears little resemblance to London's real geography
• Yet it has guided millions of riders for nearly a century
• Driving question: what design principles make distorted maps more readable?

Before unpacking the rules, ask the learner to pick the single design principle they think matters most for making a distorted transit map readable.

• Forces an explicit hypothesis before the evidence scene
• Options explore common intuitions: realism, simplicity, color, angles

Let the learner drag a slider to bend a small subway segment from its true geographic shape (curved, irregular spacing) toward a schematic shape (straight, 45/90 degree, evenly spaced). They observe how junction order, direction, and station count stay constant while geometry changes.

• Connection order is preserved through every distortion level
• Direction (N/S/E/W and interchange sequence) is preserved
• Real distances and curves are the first things discarded

Show the four canonical rules of successful transit map distortion as a labeled diagram: (1) angles restricted to 0/45/90°, (2) stations evenly spaced, (3) lines color-coded and not allowed to cross unnecessarily, (4) the river and key landmarks reduced to faint context.

• Angle restriction reduces visual parsing load
• Uniform spacing removes misleading distance cues
• Color coding lets the eye separate overlapping routes
• Background context is downgraded to a secondary layer

Connect each rule to a perceptual or cognitive reason: limited angles reduce the number of visual primitives the brain must parse, uniform spacing prevents distance misjudgment, color separation leverages preattentive processing, and layering separates signal from noise.

• Fewer geometric primitives = lower visual working-memory load
• Equal spacing prevents the 'closer stations are nearer' misread
• Color is processed preattentively, faster than shape or label
• Hierarchy of layers separates network structure from geography

Give the learner a small, messy suburban rail network (curves, rivers, real distances, two overlapping lines) and ask them to apply the four rules to produce a Beck-style schematic. The widget highlights which rules are violated in their draft.

• Transfer the principles to a novel network
• Practice trading realism for legibility
• Get feedback on which rule each violation breaks

Show the limits: walking distances from a station exit, bus stop placement at exact corners, and tourist orientation to landmarks are all cases where schematic distortion misleads. Good design keeps a 'you are here' street map as a companion.

• Distortion hides last-mile distances and exit positions
• Landmarks lose their anchoring value when displaced
• Modern systems pair the schematic with a geographic inset

Resolve the driving question: a distorted subway map is easier to read when it preserves topology (which station connects to which, in what order) while discarding geography (real distances, curves, angles). Four design principles operationalize this: angle restriction, uniform spacing, color-coded routing, and layered context.

• Topology preserved; geography sacrificed
• Four rules: 0/45/90° angles, even spacing, color separation, layered context
• Beck's 1933 framework is still the standard a century later