What is UX prototyping and why should you test early?

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.

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 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.

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.

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.

Prototype testing with UserZoom

As discussed above, prototype testing has a host of benefits for companies, including the ability to decrease costs, time to release, and negative impacts on brand perception. With benefits like these, executives are happy to invest in prototyping tools, of which there are many great options.

When it comes to testing prototypes with users, however, not all prototype testing tools are created equal. Here are the key benefits of testing your prototypes with UserZoom’s user testing platform for usability testing and UX research:

Our platform is compatible with many of the major prototyping tools

Chances are your organization is using one or more of these prototype tools for desktop and mobile. If you are, UserZoom can be used to test your prototypes in no time.

UserZoom makes it easy to test your prototypes

When you create a prototype in the above tools and click share, you can generate a URL that can be used by participants to access that version of the prototype. Once a prototype is accessible via a browser that’s all that’s required to get a study up and running in UserZoom.

Simply put the URL that the prototyping tool gave you in your study and start gathering user feedback immediately!

Capture videos and analytics

Other testing tools only allow you to capture videos, and while videos are powerful and important, they’re not the only important piece of data needed to make data-driven decisions. With UserZoom you get the same videos of user sessions but you also get the analytics portion – behavior tracking, clickstream, heatmaps and more.

Get the What, the Why and the How to fully understand how your prototype is performing and where to focus your efforts for the next iteration.

Do different kinds of studies

Depending on where in the design phase your prototype is you will want to perform different kinds of studies. With UserZoom you have access to several kinds of study types that allow you to:

• Measure First Impressions – Measure and understand users’ first impressions of your prototype with Click Testing and Screenshot Timeout Testing.
• Get Your Navigation Right – Get your information architecture right early on with Tree Testing and Card Sorting studies.
• Improve Usability Early On – Our in-the-wild, task-based testing helps you improve conversion and understand why users do what they do on your prototype.
• Validate and Improve Design Decisions – Quantify your prototype’s experience to validate (or improve) your design decisions. Measure your prototype’s ease of use or if users would recommend it to others.