Fidelity is the degree of exactness to which a model reproduces the real thing. How much fidelity is enough? The greater the fidelity, the more likely it is that someone will understand your design intent. The more real something looks and feels, the more likely it is that you’ll receive actionable feedback to validate your design or inform your next iteration. Theoretically, one could gradually increase the fidelity of a model until it’s indistinguishable from the actual product. However, that’s not a practical approach in most situations.
In the field of UX, the term low fidelity is often applied to site maps, screen flow diagrams, wireframes, and paper prototypes. These models help designers explore and gather feedback about how information within a digital product might be structured and how that product might respond to interactions from users and the system at large. While some aspects of a product’s form may begin to take shape with low-fidelity models, it is not their primary intent.
The term high fidelity is more commonly used in conjunction with UX models that articulate a product’s form or aesthetics. Screen layouts, style guides, and other visual design specification documents fit into this bucket. This suggests that low-fidelity deliverables address the product’s function while high-fidelity deliverables focus on form.
The greater the fidelity, the more likely it is that someone will understand your design intent
However, many of the UX deliverables outlined above can actually be executed at various levels of fidelity. Let’s use wireframes to illustrate the point. Loose, hand-sketched wireframes can quickly but completely capture page-level content hierarchy and navigational elements. Many people would call this low fidelity. By contrast, wireframes with pixel precision and brand-appropriate elements such as color and typography may communicate the visual layout of information. Most people would call these high fidelity. But what if these high-fidelity wireframes lack any definition around what content—text or images—should be included on the page? And what if it’s not clear where a particular page exists inside of the website’s overall structure or how users will navigate to other pages? This doesn’t sound like a model that accurately reproduces the final product, so it can’t be high fidelity, can it?
Fidelity Comes in Different Types
Many people think of aesthetics alone when describing the fidelity of an object. Humans are highly visual creatures, so this isn’t surprising. In Hacking UX,” Austin Govella suggests a better framework for fidelity. Instead of a single spectrum that is often confused with aesthetic precision, let’s consider the following four types of fidelity:
Contextual
Contextual fidelity measures how closely a model simulates the scenario of actual product use. To illustrate, let’s consider two hypothetical products that share some key user interface attributes, such as physical dimensions, resolution, and touch screen technology. Product A is an iPad app used by auto insurance agents to estimate the cost of repairing a vehicle damaged in an accident. Product B is a medical device with an embedded display used by anesthesiologists to quickly prepare patients for an emergency surgical procedure. The settings and circumstances are very different and define the products’ respective contexts. Ignoring these factors would be equivalent to designing in a vacuum.
Throughout the design process, consider whether your models demonstrate an appropriate level of contextual fidelity. Are you presenting an iOS app on a 60-inch television when an iPad would be more realistic? Is the embedded medical device interface presented on posters in a hotel conference room or on paper adhered to a physical device model in a simulated emergency room environment? You won’t always have the opportunity to demonstrate high contextual fidelity, but assessing it can help you better understand the setting and circumstances of product use.
Content
Content fidelity is how accurately the information included in a model matches the final product. Many designers use placeholder content in their early-stage UX deliverables. I’ve done this myself. However, I question whether there is any value in doing so. How will you determine if users comprehend what’s being communicated in a design without representative content? What happens when a user selects that button labeled Lorem ipsum? Do you really need five images on that page or would fewer suffice? A better approach would be to use whatever draft copy and visual assets you can get your hands on. If this sample content doesn’t exist, ask someone to provide it or create it yourself. It can always be changed later.
Behavioral
Behavioral fidelity is how closely a model reproduces the functionality of the final product. Much of a digital product’s behavior is ultimately expressed via software, making it somewhat challenging for designers to articulate how a product might behave. However, it can be partially achieved using tools like screen flows, annotated wireframes, user stories, and clickable prototypes.
If you work with a software development team, this represents a great opportunity to include them in the design process. If you don’t work with a development team, there are many free or cheap tools available to turn your sketches or static images into a limited-functionality prototype. And don’t forget that the form of an interface element can also contribute to a user’s perception of how it will behave. If the user can interact with an element, be sure to communicate its desired sensory characteristics. Using established design patterns, where available, can quickly increase behavioral fidelity and ensure a shared understanding of behavior.
Visual
Visual fidelity measures how closely a model’s form mirrors the final product. When working in low visual fidelity, one might quickly explore potential visual design approaches using tools like mood boards and style tiles. If visual design is someone else’s gig, ask them to apply some degree of visual styling to early prototypes. This will help you test how aesthetics impact usability, brand recognition, and overall user satisfaction. As the need for new information or functionality arises, try to maintain visual consistency at whatever level of fidelity is appropriate.
Whatever you do, don’t wait until the end of a UX project to apply the product’s form. Instead, make a plan to gradually increase visual fidelity as you go and accept that it will evolve with time and iteration, just like every other aspect of the product.
Conclusion
Try using the four types of fidelity on your next UX project. I suspect it will help you assess how much detail is needed and where it’s needed. It may also inform a more methodical approach to increasing fidelity through design iteration that ultimately improves others’ understanding of your design intent.
Illustration by Elizabeth Cavanaugh of Design Concepts
