High fidelity image showing Matt Della Rossa on a record cover

Design Fidelity & Prototyping

Throughout design projects the term ‘fidelity’ comes up often, the degree of exactness with which something is reproduced. Most commonly when the term fidelity is used it is to distinguish between ‘low’ and ‘high’ fidelity prototypes.

Matthew Dalla Rosa

01 October 2023

4 minute read

Throughout design projects the term ‘fidelity’ comes up often, the degree of exactness with which something is reproduced. Most commonly when the term fidelity is used it is to distinguish between ‘low’ and ‘high’ fidelity prototypes generally referring to black and white wireframes vs. colour, visual designs.

Such broad brushstrokes often leave us talking past people we work with, designers and clients. Often the required needs, purpose and fidelity required to solve specific problems are not adequately represented by the low/high binary. Fleshing out the concept of ‘fidelity’ when it comes to digital design helps set clearer expectations, ensure designs and prototypes are fit for purpose and improve communication overall.

Five Factors of Design Fidelity

To explore fidelity in greater detail we can break it down into five separate components:

  1. Visual: The visual fidelity refers to the visual design elements that make a design appear closer to a wireframe, work in progress or final design.
  2. Interaction: This can include the detail of interactions within the designs or prototype e.g. animations, are forms and buttons interactive, etc.
  3. Breadth: To what degree is this the whole or just a part of a whole experience.
  4. Depth: At a given level of breadth, to what degree is the user constrained within a set flow, task or section of the design.
  5. Content: How real is the content, contextual choices and copy within the design and/or prototype?

By thinking about fidelity in this way we can be more purposeful in ensuring our designs and prototypes can actually help us solve and uncover the insights we need to progress with the design process. 

How does this influence what we choose to design?

Choosing when to focus on the depth and breadth of a design may be critical to understanding the validity of a new feature and whether it provides value to people. On the other hand, ensuring amendments to a form flow are interactive and look visually on par with the current experience can be critical for making small iterative improvements and changes in user behaviour.

Often when design is discussed there is often an inherent challenge that all wireframes are ‘low fidelity’ and all visual designs are ‘high fidelity’ but instead need to focus on how designs and prototypes are fit for purpose depending on problems we’re attempting to solve.

How does this inform the tools we use to prototype?

Depending on where we are in the design process (concept validation vs. small usability improvements and refinement), time available and problems we’re attempting to answer and the appropriate fidelity needed all inform the choice of tool most suited for the situation.

When creating designs and prototypes I like to group tools into three key categories: 

  1. Paper Prototyping
  2. Basic Prototyping (Figma)
  3. Advanced Prototyping (Axure, Protopie, Dev)

Name

Exploration

Fail Fast

Attachment

Feedback

Fidelity Strengths

Paper Prototyping

Fewer limitations, effort, experience and skills required to create ideas

Quick to create ideas and prep for testing

Less effort is required with the medium making it easier to move on if things aren’t working

Greater honesty due to lower fidelity / Good for concept validation

Breadth

Depth                  
                      


Basic Prototyping 

Greater limitations, effort, experience and skills required to create ideas

More detailed tools to create ideas

More effort is required with the medium making it easier to build attachments to designs

Good for concept validation

Content

Depth

Visual


Advanced Prototyping 

Focus shifts to small interaction changes and usability

Focus shifts to small interaction changes and usability

Making changes becomes more difficult due to complexity and therefore reticence to change things

Good for usability testing and refinement / Sometimes concept validation and usability are tied together e.g. calculators / Form Flows

Depth

Interaction

Visual




I definitely know I’ve been guilty of testing basic prototypes when conducting user testing for form flows when an advanced, interactive prototype would have been better suited to the task. Or not spending enough time on paper exploring ideas before jumping onto Figma. 

Is this an experience shared across the industry?

The 2022 Design Tools Survey by UX Tools, totalling 4,260 respondents, gives us some insight into how common this ‘comfort’ with go-to tools is. Of those surveyed 86 per cent of those survey use basic prototyping tools, 91 per cent of those use Figma specifically. While only 53 per cent use advanced prototyping tools, with Protopie and Axure being on roughly equal footing with those using coded prototypes. Sketching and paper prototyping are completely absent from the survey responses and methodology. What this tells us is that comfort with key tools is common and the greater complexity is possible a blocker to advanced prototyping even when it might be more appropriate to the task at hand.

What can we do moving forward?

Often we get comfortable with the tools we use day in and day out to the point that the choice becomes not a choice at all, but rather the default. We don’t always stop to ask where am I in the design process, what do I need to solve and what do I need to create to get there. By using these frameworks of fidelity and tool categories we can begin to challenge ourselves to use the right tools at the right time.

Keep Reading

Want more? Here are some other blog posts you might be interested in.