Wireframes and prototypes.

Key terms

UX (user experience)

Everything about a person’s experience with a company and its products, not only the screens (Don Norman and Jakob Nielsen’s definition, quoted in part 1).

UI (user interface)

The screens, controls, and content people use to interact with a product. An important part of UX, not all of it.

Wireframe

A simple drawing of a screen’s layout, content, and hierarchy, with little or no visual design.

Prototype

A version of a design that people can try before it’s built, from paper screens to clickable mock-ups.

Fidelity

How closely a prototype matches the final product, in interactivity, visuals, and content.

Usability test

A session where you watch a representative user try realistic tasks with a design, to see where they struggle.

Thinking aloud

Asking test participants to say their thoughts out loud while they use the design.

The idea

Code is expensive to change. Paper isn’t. Kara Pernice of Nielsen Norman Group (NN/g) puts it plainly: “Ripping up code is very expensive. Ripping up a prototype is not, especially if it’s just a piece of paper.”

As a product manager, you usually won’t design the final screens. Designers do. But you’ll sketch ideas to explain them, decide what to test, sit in on tests, and decide what changes. This lesson shows you how, with the made-up furniture store’s doorway-size check.

The lesson, in seven parts

1. 1UX design and UI design: not the same thing.

   In 1998, Don Norman and Jakob Nielsen defined user experience as “all aspects of the end-user’s interaction with the company, its services, and its products.” All aspects. Not just the screens.

   They separate it from the user interface with an example. A movie-review site can have a perfect search screen, but if its database only covers major-studio films, the experience is poor for someone looking for a small independent one. The same goes for the made-up furniture store. The doorway check can be beautifully clear, and the experience still fails if the delivery crew can’t get the sofa up the stairs.

   	UX design	UI design
   Main question	Does the whole experience meet the customer’s need, start to finish?	Are the screens and controls clear and easy to use?
   Covers	The whole journey, including what happens off screen	Layout, words, buttons, forms, color, type
   At the made-up store	Measure, choose, buy, receive, and the sofa fits	The doorway-check form, and how the result is shown

   Based on Don Norman and Jakob Nielsen, “The Definition of User Experience (UX)”, NN/g.

   On many teams, one product designer does both.

2. 2What a wireframe is, and what it’s for.

   A wireframe is the skeleton of a screen. In NN/g’s words, “Wireframes visualize a user path or flow, as well as page layouts, information hierarchy, and even interactions.” They can be quick sketches or detailed drawings.

   What a wireframe leaves out is the point. No colors, no fonts, no real photos. Images are boxes with an X through them. Text is a few lines. That keeps everyone talking about structure, not about whether the button should be green. A good wireframe answers four questions:

   • What’s on this screen?
   • What matters most? (It’s bigger, or higher up.)
   • What can the person do here?
   • Where does each action lead?

   That last question usually needs more than one screen. NN/g’s Page Laubheimer describes wireflows: wireframes of each screen, joined by arrows that show how a task moves from one to the next. For the doorway check, that’s the sofa page, then the result.

3. 3Sketch a wireframe in four steps.

   You don’t need to draw well. NN/g’s Kelley Gordon says “Messy is completely fine and expected,” and suggests thick pens, a time limit, and a small space, so you can’t fuss over details. Her four steps, applied to the sofa page:

   • Pick the screen size: a phone, if that’s where most shoppers are, or a browser window.
   • Add navigation and search. Rough boxes are enough.
   • Draw the biggest parts: the sofa image (a box with an X), the name, the price, a few lines of description.
   • Fill in the details: two fields for doorway width and height, a “Check fit” button, and the “Add to cart” button. Label the main action.

   Then sketch the next screen, the result: “Fits”, “Tight”, or “Won’t fit”, each with what to do next. Draw an arrow between them, and you have a simple wireflow. A useful habit: sketch three quite different versions in ten minutes, rather than one careful one. Your first idea is often not your best, and you won’t know until you see the others.

4. 4Choose how polished the prototype should be.

   Pernice calls a prototype “a hypothesis”: a candidate design you test by watching people use it. Its fidelity is how closely it matches the final product, and it varies in three ways: interactivity (does clicking work?), visuals (does it look real?), and content (is the real text and imagery there?). A prototype can be high in one and low in another, like a clickable wireframe.

   Fidelity	Good for	Watch out for
   Low: paper, sketches, plain wireframes	Testing early, with little time spent preparing; changing the design between sessions; people feel freer to criticize it; nobody thinks it’s finished	A teammate has to play “the computer”, swapping screens by hand (more on this next); users may be unsure what’s supposed to work
   High: clickable, realistic visuals, real content	Testing detailed interactions, page hierarchy, and legibility; people behave more like they would with the real thing	It takes longer to make; designers get attached; leaders may want to ship it as is

   From Kara Pernice, “UX Prototypes: Low Fidelity vs. High Fidelity”, NN/g. On polished prototypes, she warns it’s easy for an executive to say “this looks good, let’s make it go live now.”

   So match the fidelity to the question. Do shoppers understand what the doorway check is for? Paper will tell you. Can they type measurements easily on a phone? You’ll need something clickable, on a phone. Tools range from pen and sticky notes to design apps with clickable prototypes, to slides linked together, to AI tools that turn a description into screens. Use whatever answers your question fastest.

5. 5Make a paper prototype.

   Jakob Nielsen wrote in 2003: “With a paper prototype, you can user test early design ideas at an extremely low cost.” His view was that teams skip it because it feels too simple to be useful, not because it’s slow or costly. Here’s how to make one for the doorway check:

   • Draw each screen on its own card: the sofa page, the fit result in all three versions, and an error for a missing measurement.
   • Draw small changing parts, like a pop-up or a filled-in field, on separate slips you can lay on top.
   • Ask a teammate to play “the computer”. When the user taps something, they swap in the next card.
   • Agree on a signal, like folded hands, that means the computer is done and the user can carry on. Or show a card that says “Working” while they look for the next screen.
   • Do a practice run, so the computer can find each card quickly.

   If the user taps something you didn’t prepare, Pernice suggests saying “That isn’t working,” then asking: “What were you expecting to happen when you clicked that?” Their answer tells you what they expected the design to do, which is exactly what you came to learn.

6. 6Test it with about five people.

   How many people do you need? In 2000, Jakob Nielsen argued: “The best results come from testing no more than 5 users and running as many small tests as you can afford.” His model, built with Tom Landauer, suggests five users find about 85% of a design’s usability problems. Each extra user mostly shows you things you’ve already seen. So rather than one big test with fifteen people, he recommends three rounds of five, fixing problems between rounds.

   Know the limits before you quote it. In the same article, Nielsen says it only holds for similar users. With two very different groups (say, people buying for their own home and interior designers buying for clients), test three or four from each. Five users is for finding problems, not for measuring: for numbers like success rates, NN/g now recommends about 40 people. To run each session, Nielsen’s think-aloud method needs three things:

   • Recruit representative users: people who actually shop for sofas online.
   • Give them representative tasks, written as realistic goals.
   • In his words, “Shut up and let the users do the talking.” Ask them to say what they’re thinking as they go.

7. 7Write good tasks, and ask good questions.

   Before each session, say it’s a rough draft, some parts won’t work, and you’re testing the design, not them. As Pernice notes, a rough prototype makes that easier to believe. Then, the way you ask changes what you learn. NN/g’s Marieke McCloskey says tasks should be realistic, ask people to act rather than describe, and give no clues about where to click. Compare these for the doorway check:

   Ask

   • Task: “You’re thinking of buying this sofa for your apartment. Find out whether it will get through your front door.”
   • “What were you expecting to happen?”
   • “What was easy or difficult about that?”
   • “What would you do next, if this were real?”
   • “Tell me what you’re thinking right now.”

   Avoid

   • Task: “Use the Check fit button to enter your doorway size.” (It gives away the answer.)
   • “Tell me how you’d check the size.” (They’ll describe, not do.)
   • “Why did you have trouble with the form?” (It assumes the problem.)
   • “Did you like it?” (Liking it doesn’t tell you whether they could use it.)
   • Helping when they get stuck. Wait, and watch.

   Amy Schade of NN/g calls questions like “Why did you have trouble with the form?” leading: they hint at the answer you expect. After the sessions, list every problem you saw, count how many of the five people hit it, fix the most common and most serious ones, and test again.

With AI: AI has made prototypes much faster to produce. You can describe a screen and get a clickable version in minutes, or turn a sketch into working code. That’s useful, and it brings back an old trap: a polished prototype too early, before anyone has checked the idea. Speed doesn’t replace watching five real people try it. Use the time AI saves to test more rounds.

WHAT WE'RE TESTING:
THE QUESTION WE NEED ANSWERED:
FIDELITY (paper, clickable, high) and why:

WHO (5 people like our real customers; 3 or 4 per group if groups differ):

TASKS (realistic, ask them to act, no clues):
  1.
  2.
  3.

NEUTRAL FOLLOW-UPS:
  What were you expecting to happen?
  What was easy or difficult about that?
  What would you do next?

DURING THE SESSION:
  Say it's a rough draft and some parts won't work. Don't explain how to use it.
  Ask them to think aloud. Then stay quiet.
  If something isn't ready: "That isn't working. What were you expecting?"

AFTER:
  Problem | How many of 5 hit it | How serious | Fix

NEXT ROUND DATE:

Ask AI about this lesson

All lessons