The 5 Dimensions of Prototype Fidelity

How well does what I’m designing represent the final product?

Kyle Murphy
Jan 10, 2019 · 8 min read
“Hi-fi” (high-fidelity) audio equipment gives listeners the impression they’re sitting near the orchestra. It’s high content fidelity but low visual fidelity. Images courtesy of the author.

The product design process suffers when individuals and teams fail to intentionally apply fidelity to a prototype. Fidelity doesn’t just mean “visual quality.” Designers must lead and product teams must help control five dimensions of every prototype.

“High fidelity” in our industry has become synonymous with “looking real.” We can do better.

What is prototype fidelity?

Ask yourself, “How well does what I’m designing and building represent the actual, final, shipped product?”

You just gauged your prototype’s fidelity.

Every production step before we build the real thing can be considered a prototype. And since prototyping is an intentional act, we must consider fidelity at every step. This is a shared responsibility within a team on every project, though designers are normally tasked with actually producing the earliest prototypes.

Carolyn identified that you can control five independent dimensions of any prototype:

  • Visual: How real does it look?
  • Interaction: How real does it feel?
  • Breadth: To what degree is this the whole or just a part?
  • Depth: At a given level of breadth, to what degree is the user constrained?
  • Content: How real is the stuff and is it contextual to the user?

Graphing fidelity

Instead of continuing to say “low” and “high,” let’s visualize fidelity on a spectrum. On the far left is minimal fidelity — unlike the real thing. On the far right is maximal fidelity — an exact reproduction of the real thing or even the real thing itself. The scale is relative to the final thing we’re building.

Consider the stages of production and construction for a new home. We’ll start with a napkin sketch:

Not much detail. Can’t walk around it. Can’t see any furniture inside. But it still communicates a lot, and it was cheap and fast to make.

Then we’ll work for many months to the final result:

Painted and furnished final construction—don’t forget that add-on garage. After a lot of time and money to build, let’s hope we got the design right!

Neither of these is inherently good or bad. There are costs and tradeoffs with raising or lowering fidelity in any dimension. The path you take as the lead designer to get from the first image to the last is up to you to determine. One week, you’ll ratchet up one dimension. The next week, you’ll ratchet it back down when testing something different.

Why this matters

I often hear respected peers say that they’re working on a “low fidelity” prototype. Or perhaps someone’s boss demanded a “high fidelity” prototype be tested with customers ASAP. Both comments reflect a naive understanding of how to prototype. We’re wasting time and sanity with imprecise language about fidelity. Even worse, we risk falsely validating one thing today and failing to validate a better way tomorrow. Teams are prone to over-engineering a prototype prematurely, leading to wasted effort. In other words, a prototype may be low fidelity except for one crucial dimension that may require quality and fidelity at near-production levels to validate fairly.

As a design industry, we’re not good at consciously controlling all five dimensions yet. When we do, it’s often by accident. And we can’t effectively teach the process of lucky accidents to the next generation of product designers. Lucky designers don’t prosper for long!

We’re wasting time and sanity with imprecise language about fidelity.

The five dimensions of prototype fidelity

Let’s scrutinize each dimension and study some examples:

Visual fidelity

Most people’s understanding ends at the most obvious dimension, with what can be seen visually: “I’ll know it when I see it. I can see what you’ve done there and I like it.”

We judge books by their covers, even when we’re told not to — because we can’t help it. We short-circuit our understanding of overall fidelity by fixating on visual fidelity.

The big, obvious problem involves jumping to high visual fidelity too early in the process. There’s a feeling that when something looks done, it must be done. That implicit message, even conveyed unintentionally, causes teams to flounder. Designers may become too attached to early concepts. Intentionally or not, you give your peers the false impression that everything is decided.

Just because a designer is capable of prototyping fairly quickly at high visual fidelity does not make it the right decision. There are times when designers should intentionally keep visual fidelity low to encourage the kind of communication and feedback they want.

Interaction fidelity

InVision lets anyone stitch screens together to increase interaction fidelity. Balsamiq has screen-linking capabilities that combine with a low-visual-fidelity component library. Those tools, along with dozens of new ones each month, give users a chance to play with the prototypes. They can click, tap, and swipe through screens and get the feel.

Two of Hudl’s founders devised a devilishly simple interaction prototype for our first football play diagramming tool. Guess what it was? Five shapes on a blank canvas upon which users could draw routes with their mouse.

Our designers and developers tuned this prototype’s dials to help the experience of drawing a play “feel right.”

The genius of this prototype came from a skillfully stated key research question: “How can we make this feel faster than drawing a play by hand?”

Why did it work? It allowed the team to quickly and cheaply test hundreds of variations of the drawing parameters with coaches. The simple user tests required coaches to draw very basic routes. Based on the feedback, they dialed in the next version, sometimes live in the same session, and ran a few more tests.

Imagine doing that for a couple of weeks. You’d end up with a solid drawing mechanic that meets a lot of users’ needs. That particular prototype required super-close collaboration between the designer and developer because it required tuning, drawing, smoothing, and snapping algorithms.

My all-time favorite example of smart interaction fidelity comes from Jeff Hawkins, the co-inventor of the Palm Pilot. Check out that stylus:

Breadth fidelity

Let’s say we wanted to redesign Amazon.com. Where would we start? We may want to scope ourselves down a bit. Should we just start by prototyping the home page and checkout pages? What about product pages, search results, filtering, or wish list pages? You get my point — Amazon.com is huge. Choosing where to draw the lines of your prototype’s edges sets up its breadth.

Many tools let you zoom out and see all the connections between screens. This high-breadth-fidelity prototype looks like it’s trying to cover a lot of ground.

Sometimes you’ll want to prototype it all. Sometimes you should avoid most of the product’s surface area because it can’t change anyway. It’s up to you to decide because the entry and exit points to your redesign may matter more than you think.

Depth fidelity

I’ll explain prototype depth by example because of its subtlety.

Imagine that this time, we’re prototyping a voice assistant (e.g., Siri, Alexa). Breadth controls the kinds of things we could ask the assistant about — the weather, movie times, sports scores, and so on. Pretend we limited the breadth of our voice assistant prototype to a single domain: weather. If I can ask about anything at all related to weather and get a response, that’s high depth fidelity — in other words, it’s deep. If I can only inquire about forecasts in major cities, that’s less depth. If I can ask only about my current location’s temperature, that’s even lower.

I like to remind myself about depth by asking if the interactions are shallow. How significant are my constraint handcuffs?

Kramer comically fails to provide adequate depth as prototype Mr. Moviefone in this episode of Seinfeld.

One way to create deep prototypes is with Wizard of Oz prototyping. Read more about the technique here or watch a video here.

Content fidelity

A few years ago, a high school basketball coach talked to me for 10 minutes about how he never watches video of free throws. Why was he telling me this? I’d just shown a screen mock-up where all the images featured players lined up at the free throw line. I had hoped to discuss his reactions to new data filters and playlist tools but he kept getting thrown off by the still image in the video pane.

High school basketball coaches usually fast forward, skip, or edit out insignificant segments of video featuring players standing at the free throw line. This content was in the middle of the screen I was prototyping.

What a great reminder that content is king. The video, the data, and the names of their teams are what customers care about in our tools.

Whose fault was the awkwardness during the test? Mine. I grabbed a random still image of basketball video to serve as the placeholder. I chose poorly. Have you ever confused someone with lorem ipsum when you hoped they would comment on your impeccable use of negative space? Don’t neglect content in your prototypes!

Want another great learning example? A U.K. designer used the ultra-British town “Evesham” as a content label in prototype tests with U.S. users. The name was distracting enough to affect results. Had the label been “Dallas,” would they have avoided the problem?

Keeping content fidelity high may help users fully engage with your prototype. We used semi-real names, faces (including placeholder thumbs), and vitals but didn’t customize them for every test.

Customizing content for each test takes a lot of work depending on your needs. It might be worth it. Or, you can go for Goldilocks-level medium content fidelity: not too high and not too low. That was our initial approach for the first prototype of Recruit.co.

In any case, the lesson is clear. When you’re not cautious about content fidelity, it bites you.

Takeaways

It takes disciplined practice and consideration to get this right. Over the past few years, it’s become clear to me we’re not conscious enough of this problem. Hopefully this post will help us all improve our processes.

  • Stop referring to “low fidelity” versus “high fidelity” in a generic way. Instead, refer to the primary dimensions and why they matter for your prototype. For example, say something like, “We’re shooting for a medium visual fidelity prototype with fairly high breadth to cover the entire uploading workflow. The content fidelity will be low because we’re testing internally to start.”
  • Ask yourself if you are controlling the less obvious dimensions. Will any of them create an unintended distraction or hindrance during your tests?
  • Chart the levels of each dimension to communicate with your squad and other stakeholders. Use my handy PDF!
  • Articulate how your prototype connects to your key research questions.
  • Ask if you’re picking the right fidelity to answer those questions fairly and efficiently. Are you overshooting on a dimension? Are you gold plating your prototype?

Remember the five dimensions and that you control them all. It’s just a question of time and cost:

  • Visual: How real does it look?
  • Interaction: How real does it feel?
  • Breadth: To what degree is this the whole or just a part?
  • Depth: At a given level of breadth, to what degree is the user constrained?
  • Content: How real is the stuff and is it contextual to the user?

What do you think? Where do you see people struggle with prototype fidelity?

Credit: I’m eternally thankful to Carolyn Snyder for first opening my eyes to this concept in her book, Paper Prototyping. She later expanded on the approach in a UIE Virtual Seminar. I’ve tried to build upon her methods to foster smarter prototyping with our design team at Hudl.

Modus

Helping designers thrive.

Kyle Murphy

Written by

I’m a designer turned People Ops VP @Hudl. I love helping people connect their passion to a coherent strategy. Bad golfer. Started http://nebraskaux.com

Modus

Modus

Helping designers thrive. A Medium publication about UX/UI design.

Kyle Murphy

Written by

I’m a designer turned People Ops VP @Hudl. I love helping people connect their passion to a coherent strategy. Bad golfer. Started http://nebraskaux.com

Modus

Modus

Helping designers thrive. A Medium publication about UX/UI design.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store