As a UX designer, you’ve grown accustomed to your daily routine: a bit of research here, some interaction design there. And if crafting wireframes on a daily basis has started to take it’s toll on you, try this for a change of pace:
Make some high-fidelity wireframes.
They aren’t the end-all solution for every project, but there are a number of reasons that you should start integrating these detailed wireframes into your UX vocabulary. For those that don’t know, fidelity refers to the detail of the design.
In other words, high-fidelity wireframes are highly detailed. They actually fill in the details that are missing in their low-fidelity predecessors. As such, they typically contain elements that are intended to accurately represent the final product. For example, a high-fidelity wireframe might utilize a logo, real content, and sometimes color.
But do you need your wireframes to be high-fidelity? There are a number of arguments for and against the use of higher fidelity when wireframing, but first we’ll examine one objective truth:
1. High-Fidelity Wireframes do Much More than Low-Fidelity Wireframes
There is no argument here: they do, in fact, do much more than their low-fidelity counterparts. Where low-fidelity wireframes use place holders, these bad boys use real elements. However we’re going to sidestep whether or not this is a good thing for now, and focus on what it is that they do.
- They show a lot more detail.
- They give a better taste of what real UI elements might look like.
- They make it easier to communicate functionality to developers (more on that later).
2. They don’t Replace the Need for Low-Fidelity Wireframes
Having said that they do much more, it is important to note that high-fidelity wireframes will never fully replace low-fidelity wireframes. There are even a number of ways in which these detailed representations can actually stifle progress on a project.
There are two problems here:
- High-fidelity wireframes can be a source of confusion for the client.
- It’s possible that they may stifle a client’s creativity during the review process.
With regard to the former, the client or stakeholder may think that the wireframe is a pixel perfect mockup of the project. And since your high-fidelity wireframes are not likely to look as good as a fully fleshed out visual design, they can scare clients away from working with you.
As for the latter if you are following an iterative design and development process like Agile, iteration is your best friend. So when you present your client with a detailed wireframe, containing sample elements and a color palette, their feedback may not be as useful as if you had presented them with a lower fidelity mockup which acts like a blank canvas of sorts.
3. The Higher the Fidelity, the Better they Communicate Form and Function
Wireframes are not real deliverables – the user will never see them. On the contrary, they are the platforms from which visual designers and developers create real deliverables. So, the primary purpose of wireframing is to ensure that the design and development teams understand the client’s vision.
As such, it is important that the graphic designer receives something which will help them produce an accurate deliverable. High-fidelity wireframes make this much easier. In most cases, the graphic designer would prefer a higher fidelity wireframe, because it ensures that they will not miss anything on their design.
Some people may think that with higher fidelity wireframes it is less work for the graphic designer, but really, the graphic designer can then design for the details.
4. They Give the Client a Good Idea of the Final Design, Earlier on in the SDLC
Before receiving the final design, a high-fidelity wireframe may give the client a pretty good idea of how the platform will look and feel, without getting to the visual design stage, and before going through the entire software development lifecycle (SDLC).
Sometimes, it is difficult for a client to look at a low-fidelity wireframe and actually visualize what the end product will look like. High-fidelity wireframes require less imagination from the client, and thus, make it easier for them to approve or disapprove of features.
5. They Take Longer to Make (When Done Right)
High-fidelity wireframes take longer to make and this can be both good and bad. When you’re trying to persuade stakeholders, or impress a client, presenting them with a high-fidelity wireframe can be just the thing.
On the other hand, because of the time it takes to complete a high-fidelity wireframe, your employer is essentially spending more money because it takes much longer, and more effort to complete it. This isn’t usually a major issue, because clients typically pay the development shop on a per-hour basis.
Conclusion: It’s up to the Client
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.
If your client is impatient, and has a tight budget, low-fidelity may be a better choice for you. In fact, the vast majority of user experience designers use low-fidelity wireframes, unless otherwise requested from the client.
As a UX designer, you ought to weigh the pros and cons before you start your highly detailed wireframes. Ultimately, it depends on the project, and the wishes of your client whether to use high, or low-fidelity wireframes.
More from the Smart UX series
- Smart UX: High-Fidelity Wireframes ← You are currently reading this
- Smart UX: Use Cases
- Smart UX: Designing for the Future
Want to learn more?
If you’re interested in the intersection between UX and UI Design, then consider to take the online course UI Design Patterns for Succesful Software and alternatively Design Thinking: The Beginner’s Guide. If, on the other hand, you want to brush up on the basics of UX and Usability, then consider to take the online course on User Experience (or another design topic). Good luck on your learning journey!
(Lead image: Depositphotos)
