by anthony on 07/21/11 at 2:24 pm
Wireframes come in different fidelities. On one hand, you have low-fidelity wireframes that don’t resemble the final product as much, but still capture the user interface layout and controls. On the other hand, you have high-fidelity wireframes that look closer to the final product because they display the user interface in greater detail.
Most designers are used to wireframing in low-fidelity, but a growing number of designers are starting to wireframe in high-fidelity. That raises the question of what advantages high-fidelity wireframes have over low-fidelity wireframes, and which fidelity is right for your project?
I recently had a chat with Amir Khella from Keynotopia (interface libraries for prototyping in Keynote, PowerPoint and OpenOffice) about what makes high-fidelity wireframes compelling to designers, and when they should be used. Here are the key benefits to high-fidelity wireframing that we found.
1. You Can Wireframe in High-Fidelity Just as Fast as Low-Fidelity
The common belief is that high-fidelity wireframing takes too much time to create. It can, but it doesn’t have to if you’re using an interface library.
Keynotopia iPhone library
An interface library is a comprehensive library of interface controls that you can use with your favorite wireframing program (e.g. Omnigraffle, Keynote). This means all you have to do is drag-and-drop them on your design canvas. Overall, this could end up taking as little time as drawing wireframes. It’s fast, efficient and the result is a wireframe with greater detail in the same amount of time or less.
2. High-Fidelity Wireframes Require Less Client Imagination
People use products, not wireframes. When someone looks at a low-fidelity wireframe, they have to imagine what the product will look like when it’s done. This active imagination may end up taking part of their attention away from the task they’re trying to do.
With high-fidelity wireframes, clients can better see how their layout, navigation, buttons and form elements are coming together because they’re not primitive elements. High-fidelity wireframes also make clients feel like you’ve done more work on the project.
3. High-Fidelity Wireframes Communicate Both Form and Function Better
Most low-fidelity wireframes communicate function well, but communicate form poorly. This is especially the case for mobile applications that have standard interface components with a consistent look and feel. A high-fidelity wireframe of a mobile application will communicate the user interface form and function better because the wireframe better resembles the standard interface components that users are familiar with.
On a high-fidelity wireframe, there’s also no question to clients about what’s a button or text field because the gradient detail on the elements tell them that. Low-fidelity wireframes don’t give the gradient detail that clients need to tell what each interface element is and how they function. Both form and function are key to the user experience. Reducing the form of your user interface too much could impact how clients view your wireframes.
4. High-Fidelity Wireframes are More Effective for Persuading Stakeholders
Imagine you’re about to pitch a new client on your service, or an investor on your new product . Would you show them a high-fidelity or low-fidelity wireframe of the application? Whichever fidelity you choose could make or break your pitch.
High-fidelity wireframes are more impressive to clients because they can better see what the final product will feel like, and get a feel for the quality of your work. This gives them the impression that you put a lot of care and effort into your work. A low-fidelity wireframe doesn’t do the same.
Tools for High-Fidelity Wireframing
There are many differences between low-fidelity and high-fidelity wireframes. The biggest one is that the latter represents the final product better. And there are real and clear benefits to that.
Are you a low-fi or high-fi wireframer? Why do you prefer one over the other?
- Wireframe Fidelity – Does it matter?
- Using Fidelity and Form in Wireframes
- Website Wireframes: Making your whole world better