Low Fidelity vs High Fidelity Prototypes
What they are and which one to choose for your project
There’s this thing in the modern approach to digital product design. We want everything to be done quickly but at the same time, we want it to be well-thought-out. Not to mention tested. And there’s no better way to do it than with help of good ol’ prototypes.
I like to think of prototypes as design team’s best friends. Through visual representation, they lay out the idea behind a product or a service and guide us through intricacies of the client’s idea. They not only help us understand the project but actually feel it.
So what exactly is a prototype? And how is it different from a wireframe?
We can safely say that wireframe and prototype are generally almost the same things. Set aside the semantics behind them, practically they are both mockups of the proposed design which differs in their fidelity from the final design. The biggest difference is, however, interactivity.
In wireframes, you show a particular layout. In a prototype, you also show the interaction. What happens if we click this button? Where does this link lead to? If your series of wireframes can answer these questions by themselves, voilà, you’ve unintentionally created a prototype.
The purpose of a wireframe is to demonstrate the look and feel of the final product well enough to test its logic and flow alone rather than the aesthetics. This, in turn, saves a huge amount of time. And time is money — no one wants to spend hours on a pixel-perfect render of a half-baked idea.
Fidelity of prototypes
The term “fidelity” accounts for the number of details in a prototype. The closer a prototype resembles the final design, in terms of its appearance and functionality, the higher its level. Generally, prototypes fall into one of two categories: low fidelity or high fidelity. Some teams distinguish medium fidelity although I do not find it crucial to be covered in this article since it might make us lose sight of the big picture.
Good prototypes help:
- create better scope estimates
- estimate development timeframes
- efficiently plan sprints
- quickly add or remove features on the go
Low-fi prototypes
A low-fi prototype is a computer-based visual representation of a digital product with little resemblance to the final design. It can take on a lot of different forms, from simple black&white sketches to colorful layout drafts.
But wait, if it’s colorful, doesn’t it automatically become a high-fidelity wireframe?
Yes and no. It depends on the comprehensiveness of the prototype in terms of details and functionality. What is a high-fidelity in one project, might be a low-fidelity prototype in another. Namely, anything that demonstrates any interactivity can be called a low-fi prototype. And the closer it gets to the final look, the higher “fidelity” level it gets. So actually a low-fi prototype can be:
- a series of pen and pencil sketches interconnected with hot-maps
- a hyperlinked digital wireframes
- digital drawings created in any web-app wireframing tool
When designing a low-fi prototype, we ignore font types and colors or rigid grid systems as long as they are not completely necessary as they tend to get in the way of actually solving a design problem. In low-fidelity prototypes, our most important mission is to visually represent an understandable setting in which a certain problem can be solved. It can be completing a specific task or just a guide to how a user can navigate between sites.
How long does it take to develop a low-fidelity prototype? As always, it depends on the complexity of the idea. But I think it’s safe to say that an average low-fi takes from 7to 14 days.
Sketches as low-fi prototypes
More often than not, we start our low-fi prototypes from sketching. Once we get the idea, we’re super enthusiastic to jump into Sketch app or Axure RP to lay out a monochrome wireframe and start connecting screens.
Whenever our design team takes on a project, our designers ask our clients questions. Sometimes a lot, sometimes just a few, depending on the previously received brief. But one of the questions always asked is:
Do you have any existing sketches or wireframes?
It’s not that we want to judge your drawings or ridicule your choice of fonts made in MS Paint (this isn’t funny, really). We ask for sketches because we know all too well that it is the best way to kickstart the project. Just one look at your thoughts rendered on a piece of paper or any image you’ve created speaks volumes to the design team.
High-fidelity prototypes
As it has been previously laid out, a high-fidelity prototype is of closer resemblance to the final product. It is usually much more detailed and most importantly, answers more questions.
A high fidelity prototype answers the following:
- How to navigate the site?
- What does each button do?
- How many screens are there in total?
- What end-points will be used and where?
Depending on your company culture, the actual coding can happen even before designing a single line in Sketch or Photoshop. Especially, if the specs for back-end devs are thoroughly prepared. However, front-end developers will be thankful to designers who present them high-fidelity prototype which is a solid base to start with.
Knowing the number of screens, the types of transitions between each and one of them, help estimate what resources will be needed, and when. It also helps better plan the project sprints. It’s a go-to directory for the entire project team. It simply makes things faster. High-fidelity prototypes eliminate the guesswork for both developers and the clients. A well-rounded high-fidelity prototype can even sometimes be mistaken with the actual “final design” — it depends on a particular designers attention (or sometimes mania) to details in the early stage of a project. It’s important to remember that high-fidelity prototype should be “just enough” for a hand-off. There’s no point in blocking the entire team just because “you just want to get this icon perfect”.
If you look at the image above, you might get tricked it’s a final, developed app but in fact, it is a meticulously crafted super-high fidelity which in the process turned into the “final”. Our designer later designed the animation and transitions for that whoah feeling. What you see above, represents only a portion of the entire product that’s in the making. Enough to get you hooked, right?
And how long does a high-fidelity prototype take? Well, here’s where it’s becoming tricky. Again, it depends. Because usually, a high-fidelity prototype is an evolved low-fidelity. Depending on how much time the low-fi took, it takes from 2 to 3 weeks. This gives a total of minimum 4 weeks to develop a high-fidelity prototype, given that you’re providing feedback to the design team every day. And given that you’re not designing a 50 pages monster website.
What to choose for my project?
It all narrows down to the usual time vs money vs quality but it’s possible to distinguish some general cases that can work for a lot of projects. Most probably, you’ll start with a low-fi prototype that after a round of feedback turns into a high-fidelity prototype that, unless stopped, will be iterated to a point where the difference between your prototype and the “final” design disappears.
Use low-fi when:
- you want to quickly learn the scale of your project
- you want to test a new feature in an existing app
- you want to test the idea first before you start development
- you keep the idea within the product team
Use high-fi prototypes when:
- you want to start development before you decide on the “final” design
- you have a low-fi that is tested and acceptable
- you want to take your low-fi prototype to the next level
- you want to pitch the idea to a non-technical audience
But even before you decide to go for a low-fi or high-fi prototype, keep in mind that the industry is rapidly changing. The prototyping application market is booming. There are dozens commercial web apps like InVision or Marvelapp that allow regular users and graphic designers to quickly bring life into their static designs. Even Adobe joined the race by introducing Adobe XD, currently aggressively marketed on Behance — which is also owned by them.
Most often “final” is just the last iteration of high-fidelity.
Recently even more powerful yet harder to harness apps emerged, like Framer which lets design elements and animate them with javascript. All done inside one application. If used properly, it blurs the lines between a prototype and the real thing. It becomes the real thing. With this rate of change yesterday’s high-fi prototype may become tomorrow’s low-fi prototype.
Summary
Over the last year alone, we’ve designed over 20 prototypes for our clients at 7ninjas. Their complexity varies from simple sketches on a piece of paper to fully interactive clickable renders with multiple states. They take from 2 days to 4 weeks in development but are always worth the time. They’ve become a standard in the industry. They’re a standard at 7ninjas.
SIDE NOTE: Internet is flooded with thorough and professional research on the subject of prototypes — and I highly recommend lecture of any Nielsen-Nielsen Group article about the subject as they’re clearly the leaders in UX Research. In this article, we will take a down-to-earth approach to prototyping digital products from a product designer’s perspective.
https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/
All images used in this article are owned by 7ninjas.com
