A Framework for Prototype Fidelity

Published in

Walmart Global Tech Blog

6 min readJun 26, 2019

When preparing a prototype for research, or any evaluation, we often can’t make everything work like it would in the final product. When pondering the right way to shape our design artifact, there are many questions that might run through our minds:

What pieces are critical to figuring out if our design is the right solution?
What functional pieces will allow other stakeholders to best understand the proposed experience?
What are the right tools to use?

And, of course, you will often have to make trade-offs based on time and other factors.

“I use InVision because that’s what I have time for.”

The answers to the many questions will vary depending on:

Where you are in the process.
The skill mix of the people on the project.
What questions about the experience remained unanswered.

An approach to answer these questions is to segment fidelity into different types. Higher fidelity is when a higher number of pieces that would be present in the final product are in your prototype.

The types I’ll breakdown here are:

Visual
Interaction
Data — or — Content
Experience — or — End-to-End

As you might realize, the segmentation here is not neat and tidy; the types are intertwined.

These areas of fidelity affect the user’s cognition. Cognition is diverse, complex, and hard to measure. Therefore, there are no silver-bullet answers here; design takes creativity.

*Megaloceros* with line of dots is a painting of the Giant Deer from Lascaux. The age is estimated at around 17,000 years. Imagine this being one of the oldest known UIs. *Source: commons.wikimedia.org*

Visual Fidelity

The oldest and perhaps the most privileged of all the fidelities is visual fidelity. Its immediate and visceral nature make it effective at demonstrating many ideas succinctly and effectively.

Be warned, the aesthetic–usability effect gives perceived beauty a positive halo effect to the perceived usability. This, for instance, makes truly evaluating the usability of a beautiful design mock-up with high visual fidelity — but otherwise low fidelity — difficult to judge. Especially in evaluative end-user research.

Tip: Avoid comparing a beautiful mock-up that has high visual fidelity — but otherwise low fidelity — to an uglier existing experience and then asking which someone likes better.

A long list of design tools across specializations handle visual fidelity well, so let’s move on.

Interaction Fidelity

The types of interactive digital interfaces are growing. People are more often talking to computers. Our reality is blending with the digital via augmented reality, mixed reality, cameras, and integration with our photo gallery. There is an increasing myriad of display sizes: TVs, smartphones, desktops, laptops, smart displays.

These experiences are running on several platforms that each have their own constraints. And users have many ways to communicate with the devices.

Which modes of communication do your design tools support?

And devices also have many ways to communicate back. Our devices create events and notifications, give both instant and delayed feedback, and change many different states in regard to visuals, interactions, and content. And UIs can provide transitions from one state to another.

Common questions might include:

Does your design tool allow for an interactive mobile keyboard?
Is having a live camera necessary?

Tip: Ask yourself, “Does this design tool support the communication methods the user would want here?” If not, consider a different tool.

Expectations

People have expectations about how all of these interactions are going to work. The naturalness of the association between a stimulus and its response is referred to as stimulus–response compatibility.

Design Patterns & Components

Following design patterns and using established UI components is a great way to know you are matching expectations. Using recognizable patterns often allows us to communicate how interactions will work with just visuals.

But what happens when:

You are in less-known territory.
You are dealing with less ubiquitous patterns.
You have a new pattern.

Tip: If you don’t have well-defined patterns then higher interaction fidelity could generate needed insights.

Performance

When building a highly interactive prototype, one should be mindful of performance. This creeps into our consideration especially when we are building coded prototypes. Or exploring richly animated interactions. You can’t ignore performance in your usability studies because bad performance can negatively impact your evaluation sessions. You often don’t need to have a prototype completely optimized for performance. After all we are trying to get a sense of the usability earlier, not develop the the actual experience; there’s a balance.

Data — or — Content Fidelity

Having the right data can significantly enhance evaluation of design concepts.

Design tools are generally lacking here. Some design tools are realizing the power data, especially around variables, and this is a major boost for this area of fidelity. However, many design problems can extend beyond variables and into dynamic data.

For instance:

A user’s real favorites list.
Differing languages.
The ability to search for things that are of real interest.
Detailed aspects that are important to the user’s decisions.

Tip: If data fidelity feels important, consider using a coded prototype.

Machine Learning

The rise of machine learning could make data fidelity a more important part of the design process. Marrying data science to the user-centered design process will become more of a requirement in the design process of the future.

Security

Data is where we need to be cognizant of security. Data, especially user data, needs to be handled securely. Hosting your data-rich prototypes securely is crucial. This can take time upfront to setup. The return on your investment will be worth it.

Experience — or — End-to-End Fidelity

Perhaps more so then the other types, experience fidelity is supported and overlaps with other types of fidelity. But it is important to break out into its own section because its an aspect of a prototype that is not wholly covered by the other areas.

Primarily it plays into the question, How much of the flow should our prototype include? Do we show from initiation to mission complete?

Do you need to set up a server to send actual text messages or can you put a mock-up or image at the beginning of what is otherwise a higher-fidelity prototype? There’s no rule that you can’t have a mixed-fidelity prototype. Just be mindful. You can set the stage with low fidelity and move into high fidelity where it’s needed.

This last set of questions is more about the evaluation. How will your prototype be shared:

Can it be shared via the web?
Does your prototyping tool export to an app that needs to be installed?
Will it need be embedded in a user-evaluation tool?

Tip: How much are you risking? Investing? If the answer is “a lot”, then you should be using a prototype that has high fidelity in multiple areas.

What Else?

This types-of-fidelity framework can be useful beyond deciding what to build for your user research and proof-of-concepts.

Design tools have varying capabilities in regard to adding these different kinds of fidelity to your prototypes. When evaluating design tools, this framework should help you better analyze their capabilities.

This framework has also been really helpful in explaining what a design technologist does. Design technologists, sometimes called UX engineers, often build coded prototypes and design tools. Often, coded prototypes can be built in the same medium the user will experience them in. When prototyping in code, designers have no technical limitations to the level of desired fidelity. The speed at which the idea can be built in code is the primary limitation.

Wrapping it up

The answer to what level of fidelity to build is rarely crystal clear. Hopefully, this framework can serve as a guide. And help you navigate the ambiguity of how much fidelity you should have when designing, exploring, and experimenting.

About the Authors

Anthony Topper

Tony has been building digital experiences for over 20 years. He started his career at a newspaper as the webmaster, aka full-stack developer and designer. Over the years he has touched nearly every aspect of producing digital experiences, from front-end to back-end, sysadmin and database design to user-experience research and visual design. He’s now leading a team of design technologists, aka prototypers, at Walmart.