Many designers wonder whether to choose high- or low-fidelity prototyping. Both types have their own pros and cons, but there is definitely no "bad" or "good" fidelity, as some might think at first glance. Hi-fi and lo-fi are just used for different purposes and are chosen based on your end goal, time and budget. Furthermore, they are rather complements than substitutes, and it is often advisable to use both high and low fidelity prototyping depending on the stage of your project.
First, let's make it all clear step by step. In the following sections we'll discuss importance of prototyping and define fidelity. After that we'll explain the difference between high and low fidelity and give clear examples what type is more applicable in which case.
What is Prototyping?
As you probably already know, prototyping is one of the most crucial elements of a design process. Yet, we'd like to emphasise once again — it's really important and can make your life much easier at the later stages of the app development process!
Basically, a prototype is a simple experimental model. In other words, an early mock-up of your future end product. You've created a design, but how do you know that it's worth investing in an application with this design?
To answer this question, you need to create a prototype of what you've designed. This prototype can then be used to gather feedback from users through user tests. For example, you can get recommendations on a more convenient placement of interface elements. Furthermore, you can avoid major usability flaws resulting in $$$ losses.
So whenever we're asked to briefly explain the importance of prototyping, we say that it helps you to:
- Focus on only important elements of your design
- Reduce risks: define all functional gaps at the early stage, iterate at a lower cost
- Make your end product usable for a longer period of time
Fidelity
In the world of design, fidelity reflects how detailed and functional a prototype is. Your prototype can differ based on the level of detail and realism, thus having different fidelity. It can also be applied to various aspects of the prototype- aesthetics, content or functionality. In addition, fidelity ranges from low to high, meaning from a rough mockup to a prototype representing an almost finished product.
In principle, there are three levels of fidelity — low, medium and high. Designers mostly refer to two of them, low fidelity (lo-fi) and high fidelity (hi-fi). Now that we arrived at the main point of interest of this article, let's discuss each of these two levels in greater detail.
Low-Fidelity Prototyping
Lo-fi prototyping is cheap and easy to implement. If you want to quickly test functionality of your design, then you can definitely go for this type. It's for you to test the concept of your future digital product at the time when it's way too early to decide on fonts, sizes and colours. Therefore, if you need to check how visually appealing your design is, lo-fi won't give you many insights.
Normally, designing at low-fidelity only requires a pen and several sheets of paper or an online design tool. So, nothing complicated - just sketching your mock-ups. Here you can read more about the best practices of low-fidelity prototyping and tips on how to use them.
A lo-fi prototype displays basic static design elements of web app pages. The more specific your model gets and the more elements you add to your prototype so that it looks close to how it would look in real life, the more the level of fidelity increases. This way, low and high fidelity are not two distinct categories of prototyping. They represent the same concept but in a different range.
Pros of low-fidelity prototyping:
- Cheap and fast
- Focus on design and flow
- Can be easily iterated
- Easy to present a big picture of your idea to the stakeholders
- Requires little technical skills: allows more people in the team to be involved in the process
Cons of low-fidelity prototyping:
- Very limited interactivity
- Can be unrealistic
- Can provide insufficient feedback during user tests
When should I go for a low-fidelity prototype?
You can prototype at lo-fi when you are at the early stage of the project, have time constraints, need flexibility or your team asks you for a non-detailed overview of the end product. For example, if your task is only to make stakeholders familiar with the architecture of your future app and the user flow between screens. In this case, why would you bother to develop a sophisticated and detailed prototype?
High-fidelity Prototyping
.gif)
As you might have guessed by now, a high-fidelity prototype is the closest version of a prototype to the final product in terms of details and functionality. By containing clickable menus, buttons and widgets, such a prototype tackles both UI and UX - visual and functional aspects. Unlike lo-fi prototypes, hi-fi ones are perfectly suitable for interactive usability tests.
So, we hope it's clear that lo-fi and hi-fi prototypes do not compete against each other. They are both steps in the design process. Typically, you just upgrade your low-fidelity prototype by adding extra details to the already existing screen flows. What kind of details? — Everything that will bring the feeling of the finished product, such as fonts, colours, gradients, shadows, images, links, animations and functionality.
Once you've created a great-looking design, it would be nice to test it in such a way so that the users can actually click on the buttons, open images and links, etc. It would be a shame to present them with pretty but static images.
For example, the weave.ly plugin can turn your designs into functional interactive prototypes. You don't need to write a single piece of code, the plugin will do everything for you. By simply tagging specific layers of your design with functionality, you'll end up with a progressive web app. You can later test it on real users and collect data analytics on their interaction with your prototype.
Pros of high-fidelity prototyping
- Effective in collecting true human performance data
- Realistic feedback from test participants, as they interact with a basically "live" app
- Possibility to make necessary changes to the prototype instantaneously
- Improved collaboration with developers
- Insights on critical functionalities: substantial risk reduction and more balanced decision-making
Cons of high-fidelity prototyping
- More costly in terms of time and resources
- Requires higher level of skills (but not if you use weave.ly ;))
- Psychological factor: participants may not dare to criticise enough or point out on the flaws of the design as it looks like a finished product
When should I go for a high-fidelity prototype?
Use high-fidelity prototypes if you want to test your design with real users to outline all possible flaws of the UI as well as the effect of transitions and animations on the user behaviour. You might need to create hi-fi to present your design for the final approval from stakeholders or to decide on the final design yourself.
It makes sense to create a hi-fi prototype if you already have a well-tested and accepted lo-fi prototype. Also, imagine you want to pitch your idea to people clueless in tech and UI/UX. High-fidelity prototype will help you make your design appealing and understandable to such an audience.
So, high or low?
We would say..both!
If you know that you're definitely going to prototype hi-fi at the later stage of your design process, then it is quite logical that you'll first test your design at lo-fi before proceeding to a higher fidelity. At the same time, if testing visual appearance or functionality of the product is not on your agenda, low-fidelity prototyping will suffice.
Most often designers do need high-fidelity prototyping though, as it's the only way to test real user interaction with the prototypes. If your end goal is delivering a truly user-friendly application as a final product, we highly recommend you to go for hi-fi prototyping. It can save you a substantial amount of money on UI and more, along with your and your team's precious time.
