The Wireframe Wall
Annotated kiosk wireframes
Tomoko had pinned nine wireframe printouts across the long wall of the conference room, each one bristling with handwritten annotations in red and blue ink. Sable stood at the far end, trying to read the sequence left to right like a storyboard.
SCREEN 1 — Home
Four primary action tiles arranged in a 2×2 grid, each 160×120px with 16px spacing. Tile labels: "Buy a Ticket," "Day Pass," "Top Up," "Plan a Trip." Below the grid: a single text link — "More options" — in 14pt, left-aligned. Annotation [T1]: "Focal point is top-left tile — largest text, highest contrast. Eye enters here."
SCREEN 2 — Buy a Ticket
Destination field at top (auto-suggest enabled, 48px height). Below: two fare options displayed as cards with price, duration, and zone range. Selected state: indigo border, checkmark icon. Unselected state: grey border, no icon. Annotation [T2]: "Only two choices visible. Rider doesn't see the full fare table — just the two most likely options based on destination."
SCREEN 3 — Confirm & Pay
Summary card at top: route, fare, payment method. Primary action button — "Pay Now" — 280px wide, 56px tall, centered, high-contrast indigo on white. Secondary link below: "Change details." Annotation [T3]: "One action dominates. The visual hierarchy is absolute — nothing competes with the Pay button."
FLOW NOTE: Total taps from launch to payment: 3. Each screen shows only the information needed for the current decision. No screen exceeds 4 interactive elements. Cognitive load is distributed across steps rather than concentrated on a single screen.
Tomoko's annotations use a shorthand system: [T] marks indicate her own notes, red ink flags usability concerns, blue ink marks approved patterns. The wireframes demonstrate progressive disclosure (revealing information in stages so each step shows only what's needed for the current decision) — the same principle the team discussed in Unit 7.
The arrangement of elements to guide the eye from most important to least important. A clear visual hierarchy tells the viewer what to look at first, what to look at next, and what can be safely ignored — turning a collection of elements into a sequence of attention.
- Size differences create hierarchy — larger elements draw attention before smaller ones
- Contrast differences create hierarchy — high-contrast elements stand out against low-contrast surroundings
- Position creates hierarchy — elements at the top or center of a layout are typically seen first
In the studio: On the kiosk's confirm screen, the "Pay Now" button dominates through size (280×56px) and contrast (indigo on white). Nothing else competes — the visual hierarchy makes the next action unmistakable.
The area of a design that draws the viewer's attention first — the element that the eye lands on before anything else. A strong focal point anchors the viewer in the layout and provides an entry point into the visual hierarchy.
- Focal points are created through contrast, scale, color, isolation, or unusual shape
- Every effective layout has one dominant focal point — multiple competing focal points fragment attention
- The focal point should correspond to the most important action or information on the screen
In the studio: Tomoko's annotation [T1] identifies the top-left tile as the home screen's focal point — it has the largest text and highest contrast. The eye enters there, then flows to the other three tiles, then down to "More options."
The degree of difference between two adjacent elements — in color, size, weight, shape, or texture. Contrast is the primary mechanism for creating visual hierarchy: the greater the difference, the more strongly one element stands out from another.
- Color contrast distinguishes elements through differences in hue, brightness, or saturation
- Size contrast uses scale differences to signal importance — a headline vs. body text
- Weight contrast uses thickness or boldness — heavy text against light text draws the eye to the heavier element
In the studio: The kiosk's selected fare card uses an indigo border and checkmark icon against a grey unselected state. That contrast — color and icon vs. plain grey — is the only cue telling the rider which option is active.