What is fidelity?

Design fidelity refers to the level of detail and functionality in a wireframe (not sure what a wireframe is? Read our quick description in our post here). There are three levels of fidelity: low-fidelity, medium-fidelity and high-fidelity, and some are better suited to some projects than others.

Let’s have a look at each in more detail.

What levels of fidelity are there?

Low-Fidelity
Designing at low-fidelity is straightforward and requires the least amount of time, not to mention everyone can easily get involved in this process. Pre-Covid all you would have needed is a fine liner or biro pen, some post-it notes, and loads of paper. However, creating low-fidelity wireframing to fit around remote working has shifted us from working with pen and paper to turning to more collaborative applications such as Miro and Invision freehand. A great starting point for creating low-fidelity wireframes is to focus on getting all of the requirements and user needs reflected in the wireframes first. Overall, low-fidelity is great for getting initial feedback quickly through user testing, for you to then go back and refine your thinking. This lays down the foundation for moving your wireframes into mid-high fidelity.

Medium-Fidelity
Mid-fidelity wireframes are perfect for when your ideas have been cut down and refined, and you want to start creating a more accurate representation of the product you are designing. These are digitally created and allow you to implement your ideas in a formatted version that allows you to accurately represent the product’s structure and content. Mid-fidelity wireframes should be kept clean and clear with little to no styling, and limited functionality. Overall, designing in mid-fidelity should help you to decide which elements work within your decided layout/structure, and pinpoint which elements could potentially cause the user frustration.

High-Fidelity
This level of fidelity is usually very close to the final product. High-fidelity wireframes are constructed based on design assets and components that have been tested, developed and refined multiple times. It is important that by this point you have collected enough usability data to help you determine what works and what needs to be adjusted or removed. A high-fidelity wireframe will also likely have a company’s brand applied i.e. colours, fonts etc.

In a nutshell, the lower the fidelity, the further away the wireframe is from the final product, and the higher the fidelity, the closer it is. It’s worth mentioning that design fidelity is not just limited to digital products, you may also hear people talking about the fidelity of a physical product, too. 

What types of fidelity are there?

There are many factors to consider when deciding which level of fidelity to design at, but one of the first considerations is the type of fidelity. Let’s look at some of the different types below.

Visual
Visual fidelity focuses on how closely your wireframe represents the final product. Applying some visual styling in early-to-mid fidelity wireframes allows you to test how your aesthetics impact the user experience, brand recognition, and usability. Based on user feedback this will most likely be reiterated a few times within the process.

Behavioural
Behavioural fidelity is how closely the prototype reflects the functionality necessary for the final product. Product behaviour is, more often than not, dependent on software. Using wireframes and user stories can help you input the desired functionality into prototypes when there is no software present. This is easily achieved without code, by using solutions such as Protopie, which allows you to test this type of fidelity. Overall, if you have the luxury of working alongside a software development team, it would be great to get them involved in the process of incorporating behavioural fidelity.

Content 
Content fidelity deals with how accurately the content included in the prototype matches the final product. In an ideal scenario, you would have all of the content you need first to work with. However, more often than not, placeholders are used for content when designing wireframes for prototypes. It’s important to bear in mind that the user needs to know where a placeholder button will lead them during testing. So, it is best practice to use as much rough content and visual assets in the prototype as you would like to use in the final product. This ultimately helps with testing and creating the best solution.

Contextual
Contextual fidelity measures how closely a prototype reflects the actual product in use. For instance, if you are designing an IOS mobile app, you wouldn’t create the prototype for a desktop computer; you need to set the context. Applications such as Invision are useful for user testing on your desired device as it sets the scene for the product and gives the user a real sense of how the product can be physically used.

I think it’s an interesting point to make that each of the types of fidelity will likely be at different stages at any one time. For example, the behavioural fidelity will likely be quite low at the beginning while the visual may be in higher fidelity. As the process goes on, we gradually increase each of the types of fidelity.

A general rule when it comes to fidelity

Fidelity might sound like a minefield, but there are some general rules we designers follow. For example, when starting out on a project it is typically best to focus on low-to-mid fidelity first. Why? Because it allows us to iterate the designs, whilst carrying out task-based testing, reviewing data and making usability observations. Refining at low-mid fidelity saves us time and money in the long run, by ironing out the creases and preventing the product from launching with unnecessary/undesirable features and functionality. By limiting the level of detail and design aesthetics, we also help the client focus on what is essential in the wireframes and prototype, and not get distracted by colours, fonts, and images.

I hope this article has given you some insight into what we’re talking about when we talk about fidelity as well as the different levels and types we might be referring to. If you’d like to talk to us about how we design websites, apps, wireframes, prototypes or anything else, just get in touch. We’d love to hear from you.