What is UX prototyping and why should you test at this stage? Exploring the basics of creating and testing prototypes

building a paper prototype

The best user experiences don’t happen by luck. UX designers and researchers follow an iterative process – testing pieces and versions of the product and making improvements along the way, until, in the end, you’ve got a thoughtful and useful product that people love.

Ideally, that UX process involves creating sketches, then wireframes, then prototypes, and then the final product. And, ideally, you conduct testing and gather user feedback between each stage, repeating and revising as necessary.

(In actual practice, time and budget constraints usually impact the amount of testing. But let’s live in an ideal world, just for this article. It’s nice here.)

So, that iterative UX process looks something like this:

  • Sketches: get ideas on paper; collaborate with your team (and, ideally, potential users) to identify product and user requirements
  • Wireframes: create a skeleton of how an interface will look, without inputting real content or design elements; ideally test with users for high-level feedback
  • Prototypes: create an interactive and higher-fidelity (i.e. more realistic) version of wireframes with some visual design; ideally test with users to test user flows
  • Final product: create the fully designed and functional product; test with users to ideally make tweaks and adjustments

For now, we’ll focus on that all-important prototype stage.

What is a prototype?

In common parlance, prototypes often refer to models of physical products or machines. These prototypes are inexpensive versions of a design for engineers to test how the real thing will function.

Many UX projects are digital, but digital prototypes are fundamentally the same as physical ones: inexpensive models for testing ideas.

Walt Disney and Epcot Centre

Walt Disney initially conceived of EPCOT, now a theme park in Walt Disney World in Florida, as an ‘experimental prototype community of tomorrow’ — a place to test out new technologies. (That means tabletop EPCOT models were… prototypes of a prototype?)

For product team members, prototypes facilitate discussion and understanding. UXers can also test prototypes with users to get early feedback before sinking resources into a bad design. Essentially, prototypes help us identify and test what could go wrong, reducing the likelihood of creating faulty designs later.

How do you make a UX prototype?

Like a good little UXer, you’ve done some user interviews, sketched a few different ideas to meet user requirements, and maybe even translated those sketches into wireframes. Before you go all-in on a final design, it’s time to get a UX prototype in the hands of your team and in the hands of users.

There are plenty of options for creating prototypes, but here are three main possibilities:

1) Paper prototypes

What if you’re in a hurry or don’t want to learn a new thing? I hear ya.

Sometimes paper prototypes are all you need. They are low fidelity, but you can still collect valuable feedback on user flows.

To create a paper prototype, sketch or print out images of screens on separate sheets of paper, and then swap out sheets when the user makes a selection on the paper interface. Index cards are great for showing dropdowns or modal windows. No software or coding needed! Just a set of (very organized) sheets of paper.

paper prototype

Image from Amy Mae Roberts

Astrid Paris recently hosted a UXchat on Twitter on the topic of prototypes. One chat participant, Victor Yocco, gave an example of low-fidelity testing:

Participants usually love when testing feels like arts and crafts. Be creative! It gets the discussion flowing, and you can collect a broad view of the things that work (and don’t work) in the interface before actually building anything.

2) UX prototyping tools

If you want to test an onscreen experience, you may want to create click-through prototypes. Click-through prototypes take time to make, but they give you a higher-fidelity representation of the product than a paper version would. Users can interact with the prototype naturally on a computer or mobile device. The level of design detail is up to you.

ux testing mobile prototype

Image from Smashing Mag

There are several prototyping tools available, like InVison, UXPin, ProtoPie, Proto.io, or JustInMind. With these tools, you generally create or import mockups of pages. You connect pages and elements together by defining clickable areas like menus and buttons and specifying what happens when they are clicked – a new page? A different button state? A modal window? A user can then explore the interface with an illusion of functionality.

Here are some more tools mentioned in last week’s #UXchat:

3. Coding Prototypes

Finally, some people create prototypes using code like HTML and CSS, especially if they find prototyping tools to be limited. I have never done this personally, but if you have those skills, use them!

Why should you test products at the prototyping stage?

All of this comes down to a simple idea: prototypes help you reduce risk. Prototypes enable you to test a product experience quickly upfront. It’s important to nail down the user flow early on, whereas testing final content and visual design details can wait until later.

The purpose of testing a prototype is to make sure time and money go into creating the RIGHT product.

And when you test a prototype, making design changes is fast and easy. In the long run, it will save you time, money, and headaches rather than doing all of your UX testing when a product is nearly complete. Or, worse, doing no UX testing at all.

To get the most out of your prototype testing, I suggest reminding participants that the prototype is not the finished product, but more like a blueprint. Encourage them to look past those unpolished aspects that might be missing or incomplete.

I whole-heartedly believe that you should conduct UX testing frequently during the design process, from sketches to the final product. That being said, I also believe that testing at the prototype stage is just as important as testing a final website or app. Feedback from just a handful of users can tell you whether you’re on the right track, or if ideas and user flows need adjusting. All of this before it’s too late.

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

Becca Kennedy

Becca Kennedy is a Human Factors Psychologist and cofounder of Kennason, a UX consulting company in Upstate New York. Say hello on Twitter: @becca_kennedy

Leave a Reply