The fidelity of prototypes

November 29, 2018
 
by
 
David Crossland
,
 
UX Consultant
 
, in
 
UX Design
Architect desk with tools

What is a prototype?

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.

What is prototype fidelity?

When using prototypes in user testing, there are different levels of fidelity. The fidelity can vary by

  • Content
  • Interactivity
  • Visual design

Low fidelity

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:

  • Inexpensive - The time required to produce a low fidelity prototype is considerably less than a web based / high fidelity prototype.
  • Fast - You can produce an initial prototype in 5-10 minutes. This allows teams to check ideas before investing further time.
  • Collaborative - Stimulates working as a team, since you don’t need have knowledge in a package such as Axure or In-vision. Almost anyone can get involved at this stage.

Disadvantages include:

  • Unclear functionality - low fidelity can appear unclear to a user how they need to progress. Sometimes manual explanation is required which can skew results
  • Limited interactivity
  • Content and aesthetics affect how users perceive a site or software

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

Clickable wireframes

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

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:

  • Test specific design ideas - High fidelity prototypes mean you can test graphical elements including specific interactions. This can include animated transitions and things like overlays.
  • Clients and Stakeholders - This type of prototype is great for demonstrations to stakeholders and end clients. It shows them how a product is supposed to work. It also will get people excited compared to a paper draft / sketch.
  • User feedback - High fidelity prototypes often look like real products to users. This means that during testing, participants will be more likely to behave naturally. One of the difficulties with clickable wireframes is it looks like a blueprint of a product.

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.

A word about Axure

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.

Conclusion

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 Crossland

UX Consultant

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.

Get in touch

To find out more about how our UX services can help your business, contact Alex now.

Contact us