Exploring the basics of creating and testing UX prototypes, and understanding the value of iterative design.
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:
For now, we’ll focus on that all-important prototype stage.
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 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.
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:
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.
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:
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!
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.
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:
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.
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!
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.
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: