The Difference Between Low and High Fidelity Prototypes
So you just finished your user stories. Now, you’re starting to mull over your application’s user experience and visual design. Your natural inclination may be to hire a designer and start creating the interface straight away, and you can absolutely do that. But…you’ll get much better results if you follow one more step beforehand: creating a series of prototypes.
What is a prototype?
A prototype is a sketch of the interface of your application. It reflects the functionality you intend to build. The term ‘prototype’ derives from the Greek word protos (first) and typos (form), meaning ‘primitive form’. Prototypes, which have been around since the beginning of humanity, have helped engineers better understand their products at the early stages.
The main functions of prototypes are to help you determine — before using up any of your precious time or money — whether your interface reflects what you want to build, and whether users will find your product useful and usable.
A prototype can be both static and interactive, a functional prototype. Or it can be a sketch on paper, or a set of digital screens wired between each other, or even a working prototype with close-to-real application behavior.
I use the word ‘prototype’ interchangeably with the word ‘mockup’ since, personally, I don’t see a big difference between the two.
Why does prototyping matter?
You can treat every software that you’re about to build like a startup. And the goal of a startup is to test assumptions and validate ideas. Too often, we spend months building a product before we get a chance to see if someone is actually willing to pay for it, or if we’re going to run into issues with user experience.
That’s why prototyping works. It allows you to mitigate the risk of false assumptions and quickly adjust your mockups to meet the needs and expectations of users. Changes in a prototype can be made within hours or days, whereas changes in the product takes weeks — months, even — to be implemented.
Lo-fidelity prototypes
The first and simplest level of prototyping is the lo-fi paper prototype. Lo-fi, or low fidelity, means that there’s a lack of details — just an abstract visual representation of your visual design and content. Using just a pen and paper, you can sketch a set of main screens for your app in a couple of minutes. These prototypes are invaluable in the early stages because they allow you to communicate and refine ideas quickly, collaborate on them, and make changes in seconds.
Lo-fi prototypes don’t have to be created on paper. You can create digital mockups using a low level of detail with the tools you already have. Say, a presentation app like PowerPoint or Keynotes, or a simple drawing app like Paint. These digital prototypes are called wireframes. Don’t get too carried away with them, though; remember that lo-fi prototypes are just a communication tool. You shouldn’t invest a lot of time in them.
Though they’re quick and easy to grasp, lo-fi prototypes don’t, unfortunately, give you perfect feedback. Because there’s a lack of details in these prototypes, it’s not always clear whether the design and content will work or not. For example, you might illustrate a text description as a box in a prototype, but in a real application, it might be super hard to read due to font size. So, use lo-fi prototypes only as an intermediate step.
High-fidelity prototypes
Hi-fi or high-fidelity prototypes typically resemble the real application. They’re often interactive, allowing users and stakeholders to navigate the prototype by clicking and tapping various UI elements. They also incorporate animation and transitions, close to the ones that will be implemented when the application is built.
They’re always in digital form, these hi-fi prototypes. And unlike lo-fi, these contain all the details that the real application will have. They also include content that the application will have, in order to give you a sense of real user experience.
Of course, because hi-fi prototypes are so detailed, they take much more time to make. That means that producing a lot of hi-fi prototypes can be not only time-consuming but also costly. But in contrast to the lo-fi prototypes, these aren’t just a communication tool — they’re a great way to perform user testing and get feedback. With these, users won’t need a lot of imagination to understand how the real app will work.
Which prototypes to use
Begin with paper sketches. Once you refine your ideas about what screens your app should have and how the user will move from screen to screen completing their tasks, you can create a more sophisticated wireframe, which you can use to brainstorm ideas with your team, friends, and family.
After you’re confident with your wireframes, you can move on to the next stage of creating a static hi-fi design for your application. It’ll take some time to get this right because these designs should have a perfect combination of trendy colors, fonts, and layouts, unlike their lo-fi counterparts.
When the designs are ready, it’s time to make the hi-fi prototypes interactive. Finally, you’ll be able to use this prototype to show people your application. If the prototype is implemented well-enough, people will fully understand what your app does and will be able to tell you if it works for them or not.
If you want to deeply understand your product and put in as little work as possible to do that, create prototypes. Choosing the right prototype will help you get early feedback, maximizing your chance for success and mitigating the risk of making critical user interface mistakes.
