UI Prototyping - which level of fidelity should you go for?

Prototyping is an essential part of a design process, it allows us to view the big picture of a design and reiterate our ideas rapidly, finding issues and fixing them before expensive development begins.  However, upon researching UI prototyping, you quickly discover a multitude of different tools and methodologies available, along with strong opinions on what level of fidelity is the most effective for your prototype. Some designers swear by low-fidelity paper prototypes for every project, arguing that anything above this level is a waste of investment and test users lose the big picture. Other designers opt for high-fidelity prototypes every time, arguing that with the rapid nature of the latest tools available, why bother with a version of the design so visually removed from the end product? 

We believe it's not as black and white as that. Don’t prescribe yourself to one tool or methodology; you should assess the needs of your project and choose the level of fidelity accordingly. In this short guide, we introduce a range of the core prototyping methods, analysing their pros & cons and hopefully helping you decide which prototyping method to use and which level of fidelity to opt for.


Paper prototypes

What are they?

Paper prototypes are as simple as their name would suggest. Each key screen of the product is quickly sketched onto paper using a thick pen, with accordions and other interactive sections added using flaps of paper and sellotape if required. The key screens are then laid out in order, allowing the viewer to visualise the user flow, quickly highlighting errors and opportunities to improve the design.

What’s so good about them?

They can really punch above their weight - the key advantage is they require little investment to create and can uncover large flaws in a design's early stages. 

Due to their rapid nature, ideas can be quickly thrown away and reiterated. Therefore, the process lends itself well to group sessions, as many different opinions can be heard and reflected in the design in a short space of time. Their fun, throwaway nature always seems to provide a creativity boost in a way other methods don’t. Why not try using them to gather the opinions of everyone in the office? They are great for bringing together developers, designers, office/account managers - you name it.

Paper prototypes are most effective for testing the top level flow of a product, so avoid using them to test the subtle intricacies of a design. 

When should I use them?

• When testing high-level structure, user flow and information architecture
• When you need to test early in the project
• When deciding whether to take an idea forward
• When working as a group

When should I avoid them?

• When testing in the later stages of a project (unless you are working on a feature for an existing product)
• When you are testing complex interactivity, rather than the big picture of a product
• When testing for visual design tweaks to improve the product's user experience 
• When the prototype must be sent for review as a deliverable


Lo-fidelity on screen prototypes

What are they?

A clickable wireframe of the product created using a wireframing tool such as Axure, Balsamiq or OmniGraffle. If you are unfamiliar with wireframes, they are the bare bones of a site, showing only the outlines of how the site could look with no visual design applied. Links are added to each navigation element of the wireframe, allowing users to navigate between each key screen of the interface. On-screen lo-fi prototypes are a step up in terms of fidelity, but still feature no visual design layer (colours, logos etc). 

What’s so good about them?

On-screen prototypes are useful when you need to look deeper into the design, discovering the key obstacles users encounter but still without the distraction of colours or any visual design layer.

Using real pixels and real hardware that genuine users would use e.g. mouse and keyboard adds an extra layer of realism to the prototype. This yields more accurate user testing results and provides a more realistic sense of the user journey than paper prototypes. 

Similar to paper-prototypes, they are quick to create and allow rapid re-iteration of ideas, however, they lack the throwaway nature that makes paper-prototypes so effective in group collaboration. On-screen prototypes can often be more client-friendly, as they can be exported and shared as a tidy deliverable.

When should I use them?

• When testing how the product works, rather than how it looks
• When you need to give a better sense of what the final product will look like, but still need breathing space for quick changes
• When you have a fairly solid idea of the user flow and are ready to move on to the interface design.
• When studying the more intricate interactions users must complete to achieve their goals
• When low-level on-page functionality needs to be tested (tools such as Axure can be used to create UI elements such as dropdowns)

When should I avoid them?

• When you haven’t ironed out some of early-stage problems and assumptions with the design e.g. complex user flow
• When you want to generate ideas as a group
• When you need to generate ideas really quickly
• When testing for subtle visual tweaks to improve your designs user experience 

High fidelity visual prototypes

What are they?

In this method, the full visual design is completed in Photoshop, Sketch, Figma, Adobe XD or any similar UI tool. The design is then converted into a clickable prototype by adding “hotlinks” to each navigation element. Some tools such as Sketch and Adobe XD have this functionality built in, but if not, the design can be imported into a specific prototyping tool such as InVision.

What’s so good about them?

The user is interacting with a highly polished version of the product which includes the full visual design layer. As this provides as close an experience as possible to interacting with a live product, when they're used effectively and at the right part of a design process, they yield incredibly useful user testing results.

It may be tempting to jump straight into high fidelity prototyping, especially with the rapid nature of tools such as Sketch and XD, but be wary. Although testing on a prototype close to the final product gives certain benefits, such as discovering how visual elements (i.e. colour) affect the user experience, the higher level of detail can distract from more fundamental assessments, such as the structure of the interface. It’s easy to get bogged down on the intricacies of the visual design rather than looking at the overall user journey. You may find yourself in a situation where you are hearing feedback along the lines of “I don’t like that link colour”, rather than “is that the best position for that link to be in?”.

When should I use them?

• When a high level of realism is required to get results
• When you have already tested or reviewed a lower fidelity prototype and are ready to see how the visual design layer will affect the overall user experience
• When the design is in a late stage and subtle visual tweaks will improve the user experience e.g. button colours

When should I avoid them?

• As a first prototyping option for complex product
• When prior research hasn’t been completed
• When trying to test the big picture
• When working on a low budget

Summary

We hope reading this will help you choose the correct prototyping method for your project - as we suggested at the start of the post, one size really does not fit all! To quickly summarise, here are some general rules of thumb to help guide your decisions: 

• If you are working on the fundamental flow and generating ideas as a group, paper prototypes provide an easy throw away tool for churning through several ideas

• When you require a degree of realism closer to users interacting with the end product but still wish to assess the big picture with minimal investment, low fidelity should be your weapon of choice

 

• When you have reached a point where you are happy with the flow and are ready to test the visual design for improvements, go for high fidelity prototypes