People build prototypes to test hypotheses.
A hypothesis is usually based on assumptions which come from research and/or the discovery phase of a project. Assumptions can also come from previous rounds of user testing, either on an existing site or a previous prototype. The best way to test a hypothesis is to watch users work with it.
Prototypes are often confused with sketches, wireframes and mockups. These aren’t prototypes - for it to be a prototype there must be a level of interactivity and simulation for it to work. This is why static assets are not prototypes.
Prototypes can range from a basic hand drawn sketch to fully immersive ‘real web page’ quality.
When using prototypes in user testing, there are different levels of fidelity. The fidelity can vary by
Low fidelity prototypes are great for converting high-level design concepts and/ or ideas for testing. The important thing to remember is these prototypes are to check assumptions and functionality. They aren't designed to test how something looks.
The advantages to low fidelity prototypes:
To create a quick and budget friendly low fidelity prototype, you need nothing more than a pencil and paper or cards to sketch a ‘slideshow’ onto.. This would allow a user to progress through the prototype by turning the page to the next section.
Paper prototypes are one of the best ways to show your ideas to other members of the design team before you commit to building something more complex for user testing.
A clickable wireframe is a wireframe with add interactivity. This results in a low fidelity prototype which is clearly a step above pen and paper but still relatively cheap to produce. The advantage here is that existing design deliverables can be used. Plus, the interactive element means that you don't need someone there to actually interpret the users actions.
You can use tools like Balsamiq or Axure to add interactivity to a wireframe or, on a more basic level, you could even use Powerpoint or Keynote.
High fidelity prototypes can be created in several different programmes. We prefer Axure. By investing some time and / or working with a designer you can create detailed prototypes which look and feel like the real thing, complete with a colour palette and branding. Yes, something like this can take time to create but high fidelity will always provide better, more accurate results during user testing.
The advantages of high fidelity prototypes:
The main disadvantage is speed / cost - There is no getting away from the fact that you would need to invest more time in producing a higher fidelity prototype.
Axure is a fantastic tool for producing high fidelity prototypes. It has a relaxed learning curve where you can add basic web content before going on to implement more advanced features. A handy feature is you do not need to know HTML, it does all that for you. The downside to this is that the html it produces isn’t the most robust for developers. But then again, Axure is not a developer tool.
There are also some great plugins available which allow you to import designs from programs like Sketch. These reduce the time needed to convert designs into a working prototype.
You should now have a clear understanding of the types of prototype used in UX design and their benefits in different situations. Testing with high fidelity wireframes is always going to give participants the most accurate representation of what it is they’re testing but when budget and / or time is tight, we recommend producing a clickable wireframe. This is a great middle ground between something very basic and the all singing all dancing high fidelity option. The main point is that you should be using them during your testing process.
If you’re still unsure but know that you need to run some user testing on your own product or service, we can help! We create and design prototypes all the time so feel free to get in touch.
David recently joined our team after spending 10 years in operations roles with a variety of blue chip companies. He's already successfully participated in user research and prototyping projects for Solverboard and The Picture House.