Effective prototyping and the fidelity spectrum
Lo-fi or hi-fi prototype? Choose wisely, because using the right prototype fidelity saves you time, rework and cash in the long run
When it comes to prototyping, efficiency is key. We create mockups, wireframes and prototypes to learn more about our assumptions and how a piece of software might work before development. Prototypes can vary in fidelity from basic lo-fi sketches to high-resolution, interactive prototypes. There’s lots of variety and sometimes this can get a little confusing.
So, let’s see how we can get the most out of prototyping and choose the right fidelity for our project!
“Design methods are not mutually exclusive. Rather, each method exists on a continuum of fidelity.” — Tyler Tate
But wait! What is UI prototyping?
We assume that if you’re surfing the intertubes looking for advice on hi-fi vs lo-fi prototypes then you’re probably pretty UI/UX design savvy already. But just in case you’re a newbie, let’s break down what app and web prototyping is.
A prototype is a preliminary model of your imagined end product. More evolved products will be based on the lessons learned from this first version. So when designing web and mobile apps, a prototype is a first version of that final UI focusing on form, function, or both. Simple, eh!
Simple and yet… not so simple. Making a prototype can be easy (especially with an interactive prototyping tool like Justinmind), but planning what type of prototype you need and how to organize your workflow can be tough. Just remember the following basic principles:
- Prototype to materialize and validate your design assumptions
- Prototype to open up conversations and tackle design challenges
- Prototype to help the client (or end user) understand your product from the get-go
When done right, prototypes can avoid management mistakes early in the development process and decrease the risk of error at later stages. Moreover, efficient wireframing and prototyping allow developers and designers to collaborate more effectively to present and convey their ideas.
Download Justinmind and make prototypes for free!
Lo-fi vs hi-fi prototypes: what’s the difference?
Now we’ve got that out of the way, let’s get down to business. Lo-fi vs hi-fi prototypes and which one you need to be using in your project.
Sketches and static wireframes are the lowest fidelity in the world of UI/UX. They allow you to ideate and present all features and content in a quick and disposable manner. They’re about getting all of the bad ideas out of the way first, so that the good ideas can follow. With low-fidelity, you’re only looking at the basic design and information architecture — no interaction. So go ahead, draw those fast, crude wireframes and user flows.
A word of warning though — don’t fall in love. As soon as you’ve invested efforts into making your sketches perfect, you’re unlikely to be mentally willing to look for alternatives or throw them away. Low-fidelity prototypes allow you to fail and iterate much faster than with high-tech tools,and should be used for these purposes.
When it comes to early stage prototyping, speed trumps all. Prototypes should be treated as disposable and to apply excessive fidelity too early in the process can be a massive time, money and resource waster. If you start to get bogged down in graphic design or precise animation timing then you run the risk of getting too attached to your prototype. Let’s take a look at the different levels of fidelity to get involved in.
Luckily, Justinmind came up with a way to make your lo-fi prototyping even faster. Check out our sketching UI kit, which allows you to drag and drop UI elements to create rough-yet-intelligible wireframes even faster than you could with pen and paper. Plus you can share them instantly with the rest of your design team, unlike their analog counterparts.
With medium fidelity mockups, you can build up from concept to working design phase more quickly with more flexibility and interaction, and the possibility to iterate easily. This type of fidelity can reduce the risk of designing components that will need lots of rework, or will be binned when developing the actual front-end because it allows for clearer visualization of initial ideas. These detailed wireframes in which users can use limited interactions are more defined than our low-fidelity sketches, but not as refined as high-fidelity prototypes.
With hi-fi prototypes, there’s more time to iterate and refine the user interface design. At this stage, it’s about ensuring that your prototype looks almost like the finished product. T
hese prototypes are easier to submit to non-designer folk because, to the naked eye, these types of prototypes really look like the real deal. For optimal feedback, try to prototype something that looks real enough to be presented to your stakeholders and users as a replica of the real thing.
Choosing right fidelity for the job
When it comes to the prototyping phase, keep things basic. Static prototypes do not do the real design justice, but pixel-perfect deliverables are not always necessary at the early stages of the design process. Don’t worry about creating beautiful deliverable or being ‘digitally immortal’; worry about communicating using the most direct, effective, and quick ways possible.
This means, stick with lo-fi wireframes until you’re sure you’ve got the functionality of your app or web finalized. As Sophie Paxton explains, “prototypes are, by their very nature, disposable” — just good enough. Restricting the scope of each prototype will “enhance your ability to contribute to effective product development” and focus on what is most required at the point of time. Of course, what constitutes as “good enough” totally depends on what you are building and what your stakeholders want to see.
Move on to high fidelity prototypes in the following situations
- when you want to present your product to clients or stakeholders
- when you want to do 100% realistic usability tests
- when you’re ready to send your design to developers
The lo-fi to hi-fi prototyping workflow
So how can you move through the fidelity spectrum and make the most of each step in your prototyping/design process?
- Sketch in Justinmind using our free-to-download sketching UI kit
- Create your own customized UI elements and group them in libraries so that all the team can use them
- Add simple animations and transition effects to take your prototype from low to mid-fidelity
- Simulate prototypes to see animation in action
- Publish/Review/Validate/Iterate/…Lather, rinse, repeat: Always always analyze your results and add fidelity and functionality only to enhance your design. This step should be repeated as needed, increasing the fidelity every time
- When you’re happy with your prototype, share it with the development team with Justinmind’s developer-ffriendly interface. The code guys will have everything they need to get building.
A good prototype should be economical and expressive of the relevant project requirements. A great prototype should be communicative and enable stakeholders to share and give feedback as effortlessly as possible. Essentially, the quicker you can get your ideas out and in front of stakeholders the better.
Lo-fi vs hi-fi prototypes: The takeaway
Sometimes we move on too quickly to the high-resolution, pixel perfect design. But then, reality sets in. Changes crop up and to keep pace with the time and requirements, we may want to break the flow down, which results in a bunch of prototyping efforts bring lost and rendered useless, and sends the design back to square one.
For this reason, it’s always a good idea to try to determine your prototype fidelity needs at the earliest possible stage of the design process. The optimal level of fidelity is the minimum amount of fidelity needed to get the job done. So, our advice is to engage the right fidelity at the right time over the course of a design project.
Justinmind offers you a tool that takes you through the whole prototyping lifecycle — from basic low-fidelity wireframes and mockups to multi-functional, high-fidelity prototypes. Create simple screens, and then build your wireframes up with interaction, animation and mobile gestures in order to simulate a life-like model, on the real device! Join today and see for yourself!