How Detailed Should Your Wireframes Be?
As our industry continues to evolve and our company along with it, we have noticed that we spend a lot of time creating high fidelity wireframes and fine-tuning them in great detail, regardless of the project. This saves us time on design and ultimately balances out the hours spent on the project, but it is not always the most efficient method.
High fidelity wireframes work well when the user experience (UX) is simple and we have a firm grasp of the content. But when the user experience is complex and the content is still vague (as it would be when creating an advanced web application, for say, a startup company), then detailed wireframes become an inefficient way to define the user experience.
What we've come to understand that the amount of detail that goes into your wireframes should depend entirely upon how complex the experience is and how clearly the content has been defined.
When we create highly detailed wireframes, we tend to spend less time on design. When we create wireframes that more loosely define the UX, we spend more time on design. What we've come to understand that the amount of detail that goes into your wireframes should depend entirely upon how complex the experience is and how clearly the content has been defined. Let's examine what these of the different types of wireframes look like:
Example 1 - Low Fidelity
This technique defines extremely loose layout and content where there are no text or labels defined, providing a basic understanding of the UX. It is best for outlining unknown content in a complex system, but results in multiple rounds of wireframe revisions and more time spent on visual design.
Example 2 - Medium Fidelity
This technique offers a more clarity by defining content, providing a better understanding of the UX. This is best for outlining loosely defined content in an advanced system and results in fewer rounds of wireframe revisions and less time spent on visual design.
Example 3 - High Fidelity
The hi-fi technique presents a completely refined layout and content structure with most or all text and labels defined, providing a total understanding of the UX. This technique is best for outlining clearly defined content in an simple system and results in minimal wireframe revisions and the least amount of time spent on visual design.
Let's take a moment to recall the purpose of wireframes.
We create wireframes to focus ourselves (the designers) and the client on the user experience rather than the visual aesthetic. Wireframes can be created quickly because there is no need to focus on color, type, or imagery, which saves time. Perhaps most importantly, they allow the clients feedback to focus on layout, structure, and hierarchy, rather than the visual elements (which, lets face it, we all get distracted by sometimes).
Lo-Fi wireframes result in many revisions, but will encourage the client to focus on where the content is going to go. Hi-Fi wireframes run the risk of distracting the client from the layout and stucture in favor of real data in the wireframe. Nonetheless, each serve a purpose. At Dumbwaiter, we favor the middle ground of producing medium fidelity wireframes that offer the client and our designers the best of both worlds.
Choosing what type of wireframes to create does not have to be limited at the page level.
Certainly there are other hybrid solutions that can be derived from these 3 examples. Many clients will have parts of their content defined, but not others. In this case, a hybrid solution would be appropriate, outlining low fidelity in some areas and high fidelity in others. Choosing what type of wireframes to create does not have to be limited at the page level. So before you begin your next UX project, learn about your client to determine the complexity of the experience and how clearly the content has been defined. Then move forward with a decision on how much detail your wireframes will need. We have found this to be tremendously helpful as we strive to optimize our process to deliver our clients the best results possible and eliminate any inefficiencies in our process.