Fabulous products take time to build, and a design process is crucial for laying its foundation. To be very frank, wireframing is one of those mysterious steps in a design phase and can be quite enticing to skip. In one of my previous organizations, our design team was working on redesigning an e-commerce website. In one of the daily standup meetings, the customer accentuated on skipping the wireframe stage and suggested we start off with the visual design phase. Speaking in broader terms - this meant, the team needed to work on what the site was actually going to look like, or in other words, the final design. This kind of thinking made us introspect that the customer would not understand the significance of wireframes, and jumping directly into the visual design phase would get us a step closer to the launch. But the customer’s way of thinking was inapt and we, as the vendor, were accountable for educating him that keeping time for the wireframing stage before jumping hastily into Photoshop could spare everyone nuisances down the road.
Choosing between Low Fidelity or High Fidelity
Concerning the fidelities, both these wireframe categories are significant in their own terms. In one of my projects in my previous organization, we had very little time and the demo was scheduled to happen in a few days. The project stakeholders wanted us to create a flash animation of the entire process of the application. Due to time constraints, the stakeholders wanted the overall flow of the process to be designed as soon as possible. Therefore, after getting the client’s approval, the Interaction Designer created a low fidelity wireframe (a paper prototype) and got that signed off from all the stakeholders. The Visual Designer took that wireframe and created an animation in flash, which was well received by everyone.
Figure 1: Low Fidelity Wireframe
Use low fidelity wireframes to get all the engineering concepts nailed at the very beginning of the User-Centered Design (UCD) phase, for example: the major structures, navigation schemes, and content. This can quickly help to demonstrate the application behavior and flow. By the time you iterate your wireframes, the development team should have enough material on their plates so that they can validate all your assumptions, including the text on a development build (pre-delivery). Low fidelity wireframes should be iterative and evolving in nature so that the design can be improved. Simple sketches, whiteboard diagrams, pencil sketches on paper or from Evolus to Balsamic to PowerPoint - anything can help you create low fidelity wireframes.
The advantages of creating low fidelity wireframes are:
- Easy to change and fast development type: Low fidelity wireframes are easy to change as there is no design elements involved in them. These wireframes focus on basic page design and flow of tasks.
- Designers are willing to take feedback/comments/suggestions: Low fidelity wireframes are widely used in the early stages of development where nothing has been finalized. The designers are more than willing to take criticism because they are less attached to the designs as there are no design elements involved in them. It is easier to update when nothing has been finalized.
High Fidelity Wireframes
Figure 2: High Fidelity Wireframe
High fidelity wireframes should be created only when the client asks for the same or when the team is not in sync with the concept or the flow of the application after going through the sketches (storyboard) or low fidelity wireframes. These wireframes have more design elements and help the technical team or the client to have a better understanding on the user expectation and anticipation. Ostensibly, these kinds of wireframes should enable the user or technical team to get closer to the design concept, but most importantly; these kinds of wireframes should not become a design initiative. Typically, these wireframes are less flexible, so you should know what tool to use based on your level of confidence in using it. Some of the popular tools that can be used to create high fidelity wireframes are: Omnigraffle, Interface Libraries 3, Keynote, etc.
The advantages of creating high fidelity wireframes are:
- Takes less time to develop: As it is quite evident from the name, people think that high fidelity wireframes take too much time to create. You can use interface libraries in popular tools such as Omnigraffle and Keynote to create high fidelity wireframes quickly. In these tools, you've got a drag and drop facility and all the arrows in your quiver to create a fabulous wireframe for the desktop or mobile web. As a result, the final outcome is a wireframe with all the details covered, and most importantly, the time taken is the same or even less when you compare it with the time taken to prepare a low fidelity wireframe.
- Matches the mental model of the client: Wireframes are the stepping stones to the final design. As a matter of fact, even the best of brains would find it hard to preempt how the real design would look even after mulling over low fidelity wireframes for a long time. In contrast, high fidelity wireframes are much closer to the real design, which makes the client less imaginative and more contented. These wireframes display how the navigation, buttons, and layouts are coming together.
- Good communicators of the design elements: High fidelity wireframes have great affordance. Clients have no problem in distinguishing text boxes and command buttons. But, if you talk about low fidelity wireframes, you need to explain clearly what each interface element is and how they would function.
- Effective medium for winning-over clients: High fidelity wireframes are more exciting and have an attractive look and feel. These characteristics are perfect for clients to get a feel of the final product. This gives them the impression that you put a lot of care and effort into your work. On the other hand, low fidelity wireframes fail to do the same.
The fidelity of the wireframe is dependent upon where you are in the lifecycle of the product as well as what is the level of maturity of your product’s design. For new concepts, low fidelity wireframes work perfectly. But eventually, clients want to see the interaction in order to be convinced, and this is where the high fidelity wireframe fits the bill perfectly.
You can start on a paper; develop in Visio and then wrap up with Axure or any tool you’re confident about. Lastly, I would say: the fidelity of a wireframe depends on project requirements, the development stage where we are currently in, and the buy-in from the customer as to what his expectations actually are pertaining to the fidelity of a wireframe for a particular stage.