Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Apple ›› Deconstructing Fidelity

Deconstructing Fidelity

by Ken Soliva
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Deciding where and when to add fidelity is a common UX problem, one that requires us to deconstruct fidelity itself.

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

post authorKen Soliva

Ken Soliva, Ken Soliva is the Director of Interaction Design at Design Concepts, a full-service product design and strategic innovation consultancy located in Madison, Wis., and San Francisco. He leads digital projects from concept to execution, delivering solutions that aim to delight users, balance the realities of a constantly evolving digital landscape, and advance the strategic initiatives of clients. Ken has over 15 years of experience designing software-based products and services for the web, desktop, mobile, and various embedded systems.

Tweet
Share
Post
Share
Email
Print

Related Articles

How UX teams can provide key insights using technology adoption models

Article by Lawton Pybus
What Makes Users Adopt a New Feature or Tool?
  • The article explores the evolution of technology adoption theories, focusing on models like Diffusion of Innovations, TAM, TAM 2 and 3, UTAUT, and HMSAM, providing UX practitioners with tools to understand and enhance user behavior in product development.
Share:What Makes Users Adopt a New Feature or Tool?
6 min read

What do Architecture, Computer Science, Agile, and Design Systems have in common?

Article by Kevin Muldoon
A Pattern Language
  • The article explores Christopher Alexander’s impact on diverse fields, from architecture to software development, introducing the concept of design patterns and their influence on methodologies like Agile and the evolution of Design Systems.
Share:A Pattern Language
7 min read
Article by Eleanor Hecks
8 Key Metrics to Measure and Analyze in UX Research
  • The article outlines eight essential metrics for effective UX research, ranging from time on page to social media saturation
  • The author emphasizes the significance of these metrics in enhancing user experience and boosting brand growth.

Share:8 Key Metrics to Measure and Analyze in UX Research
6 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and