UX Prototyping

What is UX prototyping?

UX prototyping is building a draft version of a product's interface, from paper sketches to clickable screens, so people can try it before engineers build it. The goal is to learn cheaply: whether users understand the layout, find what they need and finish their task. Changing a prototype takes hours, changing shipped code takes sprints.

How prototype fidelity works

Nielsen Norman Group defines fidelity as how closely a prototype matches the look and feel of the final system, and splits it into three dimensions you can set independently:

• Interactivity: from non-working targets with a person playing the computer, to clickable links and menus.
• Visuals: from black-and-white sketches or wireframes to realistic layout, spacing and hierarchy.
• Content: from placeholders and summaries to real text and images.

Low fidelity is quick, easy to change mid-session and invites blunt criticism, so it suits early work. High fidelity suits testing a workflow, a specific component or visual hierarchy, because users react as they would to live software.

A simple example

A team designing a checkout draws five paper screens and asks four people to buy something. Two of them hesitate at the shipping step because the cost only appears at the end. The team moves the cost up, redraws one sheet and tests again the same afternoon. Later they build a clickable version in a design tool to check the final button states and error messages.

How to prototype well

1. Pick the question first: navigation, wording, a form, a full user flow.
2. Choose the lowest fidelity that can answer it.
3. Prototype only the path the test needs, not the whole product.
4. Test with real target users and iterate in small rounds. NN/g's model says a single study with five users surfaces about 85% of usability problems, but they recommend several small rounds rather than one big one, because each redesign can introduce new problems.
5. Check the prototype on a phone-sized screen, in line with mobile-first design, and include keyboard navigation order and accessible forms from the start.

Common mistakes

• Polishing visuals before the structure is validated.
• Testing with colleagues instead of the people who will use the product.
• Treating the prototype as a spec: it shows intent, not edge cases, error states or performance.
• Asking "do you like it?" instead of giving a task and watching.

From prototype to production

A prototype cannot tell you how the real product behaves under load or in a browser you did not test. Once the flow ships, it is worth checking that the flow still works. LoadFocus API and synthetic monitoring includes browser checks and multi-step checks on paid plans, which replay a login or checkout on a schedule. See the guide on improving user experience with synthetic monitoring. For the broader picture of how people experience your product, read what user experience (UX) is.

FAQ

What is the difference between low-fidelity and high-fidelity prototypes?

Fidelity is how closely the prototype matches the final system. Low fidelity means sketches, wireframes and placeholder content with little or no interactivity. High fidelity means realistic visuals, real content and clickable behavior.

When should I use a low-fidelity prototype?

Early, when the structure is still open. It is fast to make, easy to change during a session, and people tend to criticize it more freely because it does not look finished.

How many users do I need to test a prototype?

Nielsen Norman Group's model says five users in one study find about 85% of usability problems. They advise running several small rounds, and testing 3 to 4 users per group if your audience has clearly different groups.

Is a prototype the same as a wireframe?

No. A wireframe is a schematic layout and is one kind of low-fidelity prototype material. A prototype adds interaction, so people can move through screens and attempt a task.

Does prototyping replace testing the finished product?

No. It lowers design risk early. You still need functional, accessibility and performance checks on the real build.