What is fidelity of a prototype?

“Fidelity” refers to how closely a prototype matches the final product or solution. You can choose from a lot of different options and levels of accuracy, depending on the stage of the process and the goal of the prototype.

Visual (Sketched vs Styled)

Layout and design are the most noticeable aspects of a prototype’s fidelity. If a prototype is produced with a high level of visual fidelity from the beginning, users will tend to focus on visual rather than functional details, which would distract from the main goal of the early stages of prototyping.

Static prototypes with two different fidelity levels — sketched (low-fidelity) and styled (high-fidelity) Source

Functional (Static vs Interactive)

Will the prototype explain how the solution will work (static) or does it look fully functional (interactive)? Both versions present advantages: static prototypes are simpler and quicker to implement, while interactive ones can be used later for usability testing and user training.

Content (Lorem ipsum vs real content)

In the early stages of prototyping, standard “lorem ipsum” content can be useful to avoid distracting the user so they can focus on providing functional feedback instead of commenting on changes in the text. However, as the prototyping process continues, evaluate the need to replace dummy text by real content so users can get a feel of how it affects the overall design.

What all fidelity levels exist?

• Low-Fi: Low-Fi methods like pencil-and-paper sketches produce static prototypes with low visual and content fidelity that allow for quick and easy changes. This forces the user to focus on functionality and on how they will use the system instead of what it looks like.
• Med-Fi: Computer-based tools like Visio and OmniGraffle produce what we can call medium fidelity prototypes in the form of wireframes and workflows. This level of fidelity is used to demonstrate a system’s behavior, to determine if user needs are met and to evaluate the user experience.
• Hi-Fi: High-fidelity prototypes can be so realistic that they are often mistaken for the real product; they are also much more time-consuming to produce. Tools like InVision, Sketch Prototyping, Figma, Adobe XD, Framer etc. allow non-technical users to create their own high-fidelity prototypes. Although these cannot be converted into usable code, they can later be very useful for usability testing or user training purposes.

How do you select which fidelity level to prototype on?

Most of the time, designs are best evaluated by starting with a rough sketch, then moving on to higher fidelity levels depending on the system’s complexity and requirements.

Sometimes, your choice might be guided by client requirements or area of focus. For example, if you want to evaluate the visual impact of an interface change, you might want to go with a styled design instead of a rough sketch. Or if your solution is message focused, you may decide to use real content instead of standard “lorem ipsum” placeholder text.