Prototyping 101: The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each

Two people working at a desk.

Adobe Stock / ijeab

by Nick Babich

posted on 11-29-2017

In today’s industry of rapidly-growing products, user experience (UX) design has become increasingly important. It’s clear that design-led companies outperform their competitors. Prototyping plays a vital role in the process of creating successful UX, but for many product teams, prototyping is still one of the most confusing parts of the UX design process. No wonder it’s unclear — a prototype can be almost anything, from a series of paper sketches representing the different screens or states of an app to a fully-functional, pixel-perfect app.

In this article, I’ll provide answers to the following questions related to prototyping:

What a prototype is, and what it isn’t

We often hear the term “prototype” in a lot of different contexts. Because of this, there might confusion regarding its meaning.

In its basic form, a prototype is an expression of design intent. Prototyping allows designers to present their designs and see them in action. In the context of digital products, a prototype is a simulation of the final interaction between the user and the interface. Depending on what a product team needs a prototype to do, it can simulate an entire app or just a single interaction.

A laptop and cell phone.

A prototype is a simulation of how a finished product will work. It allows product teams to test the usability and feasibility of their designs.

A lot of people confuse prototypes with sketches, wireframes, and mockups. These assets are not prototypes. The idea of simulation (read, “interactivity”) is essential for prototypes. That’s why static assets — such as sketches, wireframes, and mockups — can’t be considered prototypes.

Why we need prototypes

The primary goal of building a prototype is to test designs (and product ideas) before creating real products. Your product’s success is directly related to whether you test it or not. Without any doubt, your design will be tested when the product becomes available on the market and people begin using it. If this is the first-ever testing, there’s a high likelihood of negative feedback from users. Therefore, it’s always better to collect feedback during the low-risk research phase, and before public release.

The following are two cases that require a prototype:

What is fidelity?

Prototypes don’t necessarily look like final products — they can have different fidelity. The fidelity of a prototype refers to how it conveys the look-and-feel of the final product (basically, its level of detail and realism).

Fidelity can vary in the areas of:

There are many types of prototypes, ranging anywhere between these two extremes:

Product teams choose a prototype’s fidelity based on the goals of prototyping, completeness of design, and available resources.

Low-fidelity prototyping

Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. The first and most important role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product.

Here are the basic characteristics of low-fidelity prototyping:

Pros

Cons

Paper prototyping and clickable wireframes are two popular low-fidelity prototyping techniques. Both techniques are focused on providing the fastest-possible way to iterate design ideas until both the project team and the stakeholders are happy with the basics.

Paper prototyping

Paper prototyping allows you to prototype a digital product interface without using digital software. The technique is based on creating hand drawings of different screens that represent user interfaces of a product. While this is a relatively simple technique, it can be useful when a product team needs to explore different ideas and refine designs quickly. This is especially true in the early stages of design when the team is trying different approaches.

A task list on paper.

Simple screens are drawn on paper. A common practice for testing these prototypes is to have one person play ‘computer,’ switching the sketches around according to user choices. Image source: UX Playground

The benefits of using this technique include:

User interface prototyped.

User interfaces can be quickly prototyped and tested. Image source: Vimeo

Stack of paper prototypes.

Paper prototypes can assist in documentation. Notes and revisions will support designers and developers when they will create an actual product. Image source: inesnorman

If you want to use paper prototyping for usability testing it’s important to consider the natural limitations of this technique:

Considering the advantages and disadvantages, it’s recommended to use paper prototyping during the early stages of design only, when a project is still abstract or in the process of forming. The further the team gets into the design process, the more significant the gap between paper prototypes and the final product will be.

Clickable wireframes

A wireframe is a visual representation of a product page that the designer can use to arrange page elements. Wireframes can be used as a foundation for lo-fi prototypes. Clickable wireframes are the simplest form of interactive prototype — created by linking static wireframes together.

Just like paper prototypes, clickable wireframes often don’t look like the finished product, but they do have one significant advantage over paper prototypes — they don’t require a separate person to work as a facilitator during the testing session.

The benefits of using this technique include:

Low-fidelity prototypes can be created using tools for presentation (such as PowerPoint or Keynote):

A basic prototype.

By linking together different pages, you can create a very basic prototype in software like PowerPoint and Keynote.

They can also be created using tools made specifically for prototyping. Using such tools has one crucial advantage: you can move from a low-fidelity to a high-fidelity prototype without switching the prototyping tool.

Low-fidelity prototype made in Adobe XD.

An example of a low-fidelity prototype made in Adobe XD.

High-fidelity prototyping

High-fidelity (hi-fi) prototypes appear and function as similar as possible to the actual product that will ship. Teams usually create high-fidelity prototypes when they have a solid understanding of what they are going to build and they need to either test it with real users or get final-design approval from stakeholders.

The basic characteristics of high-fidelity prototyping include:

Pros

Cons

A digital prototype created using a special tool

Digital prototypes are the most common form of hi-fi prototyping. Nowadays, the variety of specialized software allows designers to create visually rich, powerful prototypes full of interactive effects and complex animations.

High-fidelity prototype made in Adobe XD.

A high-fidelity interactive prototype created in Adobe XD and mirrored on an iPhone.

The benefits of using this technique include:

Coded prototypes

A hi-fi, coded prototype is a solution that is pretty close to the ready-to-release version of a product. An example of such prototype would be a rich interactive sandbox that allows test participants to explore a product’s different features. This type of prototyping is recommended for designers who are confident in their coding skills.

The benefits of using this technique include:

Conclusion

If delivering a good user experience is the goal of your project —and it should be — then prototyping must be a part of your UX design process. It’s crucial to choose the most effective method of prototyping — minimizing work and maximizing learning — based on your product’s need. The end result will be overall improved design that is based on prototype testing.

Topics: Creativity, Design

Products: Creative Cloud