How to Choose the Correct Level of Fidelity for Your Prototype

Users love simple and intuitive products, but the design process required to get there takes considerable thought and judgement. When you’re starting work on a new software product or a new feature, the prototyping stage is a critical step, as it enables you to test product concepts before investing the effort to build them out.

Unfortunately, no project offers the truly unlimited time and budget required for perfect prototyping. As a designer, you’ll face trade-offs beginning with selecting your prototype strategy. Should you start with a high fidelity or a low fidelity prototype? Paper or software? Clickable or static?

To help guide you through this decision-making process, we’ve pulled together the following eight articles from expert industry sources.

When To Prototype, When To Wireframe—How Much Fidelity Can You Afford?

https://usabilitygeek.com/when-to-prototype-when-to-wireframe-fidelity/

“The distinction between wireframe and prototype is almost arbitrary—both are mockups of the proposed application that differ in their fidelity to the final application.”

In this article, Garett Dworman, senior UX consultant with TecEd User Research and Design, covers the pros and cons of wireframes and prototypes, as well as the different factors you should take into consideration when deciding which to go with. As the article notes, elements such as budget, UI interaction complexity and workflow complexity can guide you towards selecting the right level of mockup fidelity.

Want to Improve Your Design Process? Question Your Fidelity

https://www.mindtheproduct.com/2015/03/want-improve-design-process-question-fidelity/

“… because of the nature of the design process, when we use the word ‘fidelity’ to describe how close we’re getting to a final product, we are using it not to compare to what we have seen in a known past, but to something we imagine in an estimated future.”

If you’re motivated to improve your design process, author John Willshire, founder of innovation studio Smithery, suggests moving through levels of fidelity organically based on where you’re at with a particular design and by asking yourself whether you want to show your current prototype to others for feedback or improve it first.

If you’re ready to share, Willshire suggests doing user testing on the design at its current level of fidelity. If you want to improve it first, either change the design at its current fidelity or bump up the fidelity on the current design.

What is a High Fidelity Mockup? Smart UX: High­ Fidelity Wireframes

https://usabilitygeek.com/smart-ux-high%C2%AD-fidelity-wireframes/

“If you and your client have the time and budget, high ­fidelity wireframes are the way to go. They may take more time, and yes, they can cost more for the client, but they do tend to lead to a happier client earlier on, as well as mid-­project.”

In another Usability Geek entry, Jenna Erickson of software design and development agency Codal, argues that if you have the budget and time, then high fidelity prototypes can lead to better outcomes for client interactions. Yet, she also acknowledges that there are several good reasons for starting with a low fidelity prototype, including client impatience, confusion around the final product and the risk of stifling creativity during the evaluation process.

5 Tips For Using Wireframe Tools In Software Development

http://trendintech.com/2019/03/01/5-tips-for-using-wireframe-tools-in-software-development/

“Good communication can literally make or break an entire project. Many wireframe interfaces also include collaboration tools, so you may want to consider using one of these for easy communication within the group.”

In this article, Natalie Brown, TrendinTech contributor, suggests that designers keep their prototypes as simple as possible in order to focus on the specific functionality being evaluated. She notes that using sketches and annotations throughout the design process can help explain what you have in mind, though communication is still important. After all, it is the designer’s professional opinion and experience that can help make the right design a success.

The Essential Role of Wireframes and Flow Diagrams in Mobile Design

https://www.clickz.com/the-essential-role-of-wireframes-and-flow-diagrams-in-mobile-design/100254/

“Wireframes and flow diagrams help everyone, including stakeholders and project teams, visualize what the website (or app) will look and feel like on a mobile device and how the user will use it.”

Andy Favell, Clickz contributing writer, focuses on mobile design in this article, explaining how to think about the differences in storyboards, hand-drawn wireframes, flow diagrams and site maps, digital wireframes, high fidelity wireframes and interactive prototypes. Each of these types of designs have a place in the designer’s toolkit, and since designers will often use several approaches in one product design, it’s worth becoming familiar with all of them.

Testing Low Fidelity vs. High Fidelity Mockups

https://www.uxmatters.com/mt/archives/2018/06/testing-low-fidelity-versus-high-fidelity-mockups.php

“A very important benefit of testing low fidelity prototypes is that users, designers, and developers are less likely to fall in love with a design or become committed to a design too early because of all the effort they have put into creating it and are more likely to iterate and create a better, significantly different design solution.”

This article by Janet M. Six, Product Manager at Tom Sawyer Software, surveys a panel of design experts, who conclude that much of the process of testing low fidelity and high fidelity prototypes is similar; in both cases, you need to have a good plan and process in place. The panel acknowledges that low fidelity testing will give you feedback earlier in the process, which will enable you to iterate on new designs more quickly. However, the group also suggests that 80% of projects can probably skip the low fidelity stage.

UX Prototypes: High Fidelity vs. Low Fidelity

https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/

“A user interface prototype is a hypothesis — a candidate design solution that you consider for a specific design problem. The most straightforward way to test this hypothesis is to watch users work with it.”

This article from Kara Pernice of the Nielsen Norman Group focuses on the pros and cons of high and low fidelity prototypes, as well as whether designers should use interactive clickable prototypes or static prototypes.

To decide on whether to use an interactive prototype, the group recommends considering how much effort it will require to create a response for each user action. If necessary, static prototypes can simulate user actions by responding to the intended user action through technology, paper or a person who is physically sitting with them in the room.

Testing Low Fidelity and High Fidelity Prototypes

https://blog.uxtweak.com/user-testing-importance-in-design-process/ 

“There is not only one time to implement user testing– the sooner the better; the more the merrier! As soon as you have low-fidelity wireframes or prototypes, you can begin user testing.”

Testing low-fidelity prototypes is perfect for evaluating basic functionality, navigation, and user flows. At this stage you can start conducting guided sessions with users such as moderated usability tests to evaluate the general usability of your future product. The insights collected during this stage of testing will help you fine-tune the layout, usability and user flows of your prototype before jumping into designing for high fidelity.

High-fidelity prototypes provide a realistic representation of your visual design and functionality of your product. Therefore, by testing those you’re able to simulate real user interactions and pinpoint issues before handing the prototype off to the development. The optimal way of testing high-fidelity prototypes is by leveraging one of remote user testing tools available online, such as UXtweak. Such tools will provide advanced analytics on studies’ and tasks’ success rates, allowing you to have a high confidence in your design or propose changes based on user data.

Should You Choose a High Fidelity or Low Fidelity Prototype?

As the articles above demonstrate, there‘s a lot to consider when it comes to prototype fidelity, such as the complexity of the user interactions, whether animations and interactions are important, who the target consumer will be, how much time you have to iterate, and whether or not you’ll have personal access to test users.

Use the guidance here, as well as your own experience, to ensure that your design process is as thorough as possible before moving on to the coding.