Prototyping as Thinkingworking at code fidelity

The word “prototype” conceals an assumption that limits what prototyping can be. The assumption is sequential: design first, then prototype, then test. In this account, prototyping is a phase: something you enter after the design is sufficiently advanced. It is how a finished design gets carried into testing.

Donald Schön’s study of expert architects found that from the first mark on the paper, they were having a conversation with the materials. Each mark does something on the page, and that effect is the response: it looks right or wrong, it points to the next move, it exposes a problem that was invisible until it was drawn. The architect reads that and marks again. This back-and-forth, what Schön called “reflection-in-action”, is designing itself.¹ Bill Buxton extends this directly: a sketch is a thinking tool. Used only to communicate, it does its least valuable work.² Prototyping is the conversation itself, at higher fidelity.

Fidelity lets you have the conversation in the medium that matters. There are things you can only discover in motion. A layout can be correct as a static composition and confusing as a temporal sequence. A transition can be logical as a description and disorienting as an experience when timing and trigger are not matched to context. These problems do not show up in a static frame. They show up in the experience of moving through the design.

The fidelity spectrum runs from paper through code. Each level reveals a different class of problem, and conceals others.

• Paper prototyping, Fast structural testing, often with Wizard of Oz simulation to mimic functionality without building it.
  Reveals big structural problems. Cannot reveal anything about temporal sequence or the felt quality of interaction.
• Interaction prototyping, Clickable flows: navigation, task flow, and information hierarchy.
  Reveals layout and hierarchy. Cannot reveal cognitive load under time pressure, or the disorientation of a navigation model that reads correctly on the map but disorients in use.
• Motion prototyping, Timing, easing, and sequence tuned to felt experience.
  Reveals the temporal quality of interaction, whether a transition feels causally connected to the action that produced it.
• Code prototyping, Production-matched, eliminating the translation layer.
  Closes the gap almost entirely, less by learning to code than by working at a level where the question “will this work in the real product?” has been answered by the prototype itself. Reveals surprises that concentrate in interaction timing never physically experienced, spatial relationships that shift under content variability, and edge states that exist in the design file as a note but were never given form.