“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.

Prototype Fidelity: It’s More than High and Low

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.

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. Let’s dig in.

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. Designers are normally tasked with producing the earliest prototypes, though.

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?

I’ll spend the rest of the article describing the dimensions and citing examples.

Graphing Fidelity

Instead of continuing to say “low” and “high,” let’s visualize fidelity on a spectrum. Far left is minimal — unlike the real thing. Far right is maximal — 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 start with a napkin sketch.

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

We 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 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 decide. 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 hear respected peers say they’re working on a “low fidelity” prototype. Or, perhaps someone’s boss demanded a “high fidelity” one be tested with customers ASAP. Both 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.

Prototypes 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 accidents to the next generation of product designers. Lucky designers don’t prosper for long!

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.

“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 told not to — 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 unintentional, causes teams to flounder. Designers may become too attached to early concepts. Intentional 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 it combines with a low visual fidelity component library. Those tools along with dozens of new ones each month all 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 weeks. You’d end up with a solid drawing mechanic that met a lot of users’ needs. That particular prototype required super-close collaboration between designer and developer since it required tuning drawing, smoothing, and snapping algorithms.

My all-time favorite example of smart interaction fidelity comes from Jeff Hawkins — 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 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 explain prototype depth by example because of its subtlety.

Imagine this time we’re prototyping a voice assistant (e.g., Siri, Alexa).

Breadth controls the kinds of things we could ask the assistant — 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 we 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 process:

  • Stop referring to “low fidelity” vs. “high fidelity” in a generic way. Refer to the primary dimension(s) 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 question(s).
  • 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?