UX Prototyping

UX prototyping turns a design question into an experience that people can try. A prototype is not the finished product. It is a deliberately limited model built to test an idea, a task flow, an interaction, or a technical assumption before the team commits to production work.

The central design decision is not which tool to open. It is which uncertainty to reduce. A paper sequence can test whether a person understands the order of a checkout flow. A connected set of digital frames can test navigation and labels. A stateful or code prototype can test validation, responsive behavior, keyboard use, or an interaction driven by device input. More detail costs more time and can make an unfinished idea appear settled. Use only the fidelity needed for the research question.

The prototype as a state graph

An interactive prototype can be modeled as a directed graph. Each screen or meaningful interface condition is a state. A user action is a trigger. The rule applied after that trigger is an action. A connection leads to a destination state, opens an overlay, changes stored data, or returns to an earlier state.

Consider a sign-in flow. The signed-out screen, invalid-password message, loading state, and signed-in home screen are separate states. Selecting Sign in is a trigger. Validation determines whether the prototype shows the error state or advances. The happy path is only one route through this graph. Empty values, invalid values, cancellation, back navigation, and recovery reveal whether the model represents the experience being tested.

Frame-based tools express this graph with hotspots and connections. Richer tools add variables, conditions, reusable components, formulas, or sensor input. Code prototypes use the browser or application runtime. These implementations differ, but the reasoning stays constant: identify states, define transitions, and preserve enough data for the test scenario.

UX Prototyping

The prototype as a state graph

Relevant careers