Do you use wireframes in your interface design projects? If so, you may have found yourself debating just how detailed your wireframes should be. In this article I shall explore the concept of wireframe fidelity and how wireframing affects the usability of a user interface in software and/or website design. Deciding which level of fidelity in your wireframes would be most advantageous to you and your project can be pivotal in ensuring success. UX experts are still debating the distinctions of wireframe fidelity and whether high or low fidelity is the way to go. In the following paragraphs I will go through the differences in wireframe fidelity and the benefits they carry.
Why use Wireframe Prototypes?
When designing websites or software applications paying attention to a great interface design is key, since the graphical user interface is the part of your software that users see first and use to interact with it. In order to achieve a great interface design, the use of wireframes during the design phase has become a valued method. A wireframe (sometimes referred to as website wireframe, software wireframe or application wireframe) is a visual representation of the projected content and structure of a graphical user interface and is an essential step on the way to a great interface design. It is easily understood by all stakeholders and can serve as communication aid. Much like an architect’s blueprint plans wireframes are an invaluable tool when creating software or websites with a solid foundation. In the same vein, they should be used long before the first bricks (or programming code in this case) are set.
Further Considerations of Using Wireframes.
Wireframes allow a project’s stakeholders to have a vision of what to strive for and are particularly useful in the collaborative process as they ensure that team members can easily understand a software concept and can keep track of a project’s workflow. Popular use cases for wireframes include improving usability through early user tests, involving non-technical key stakeholders early on in the development process, or communicating with developers and designers for planning purposes. The level of detail in a wireframe prototype is referred to as wireframe fidelity and can be in either of two main guises: low fidelity or high fidelity. (Some even distinguish three types, including medium fidelity wireframes.) Knowing which fidelity to employ is of crucial importance as the investment in creating them in terms of time, cost and expertise required varies tremendously.
What are Low Fidelity Wireframes?
Low fidelity wireframes are wireframes that focus on the essentials of a user interface: layout, structure, Information Architecture – and not graphic design! Low fidelity wireframes evolved onto computer screens from rapid paper prototyping wireframes which emerged in the mid 1980s to become a popular Blue Chip company tool by the mid 1990s. Rapid paper prototyping involved the creation of rough sketches (often drawn by hand) of graphical user interfaces as prototypes of software applications to visualize and test usability long before the coding process began.
Example of a low-fidelity wireframe
What is an example of using Low Fidelity Wireframes?
A real life example of successful paper prototyping stems from the mid-90s when e-commerce was beginning to take off and Priceline.com was introducing a service that allowed consumers to submit a bid for a plane ticket along with a credit card. How could they convince users to trust their credit-card details to an as-yet-unknown website? Paper prototyping showed the team that their initial design would have been a failure, allowing them to correct the problems before launching the site. They also discovered that users didn’t need some of the hard-to-implement features they had included. Paper is a readily available resource, but not easy to change or adapt. Hence, nowadays, digital solutions like “digital paper prototyping” with specialized wireframing software are often used in iterative processes as they tend to be more efficient.
What are the benefits of using Low Fidelity Wireframes?
Low fidelity wireframes have many benefits. By eschewing many cosmetic factors they are relatively inexpensive and quick to create or alter. This allows for collaboration as suggestions and refinements can quickly be added to a number of variations very cheaply. Furthermore, low fidelity wireframes are useful in gathering great feedback because their rather rough appearance makes it clear to viewers that they are talking about a draft that is easy to change, rather than an almost finished product, thus inviting honest and unrestrained feedback. In addition, the lower level of detail allows you to focus on fundamental usability issues of your product. When using low fidelity wireframes for usability tests, testers can also give you qualitative feedback that really focuses on usability rather than being distracted by, say, the color of the fonts used. Yet, some critics caution that the level of abstraction may be difficult for inexperienced users. Once usability has been tested and polished, beautiful designs may be added onto a solid foundation that maximizes user experience.
Here you can find an interesting article on sketched wireframes.
What are High Fidelity Wireframes?
High fidelity wireframes (often referred to simply as high-fidelity prototypes) are very close in design to the true representation of the final user interface design. As such, they tend to include slick and polished design features and even go as far as simulating in much detail an application’s workflow or even logic. Despite pixel-perfect good looks a high fidelity wireframe remains but a prototype, however crisp it may look and feel. Due to their high level of detail, high fidelity wireframes tend to be more costly to create and usually take much more time to compose. They may also require more experience, sometimes even technical expertise, and can hinder the feedback process as testers or clients may be distracted by design features rather than focusing on usability. In addition, test users as well as clients may be more hesitant to critique a design done by a professional, which looks like it would require a significant amount of time to change. Fears that such changes may result in higher project costs are not uncommon and may skew feedback, which makes it very important to explain the purpose and method used in creating high fidelity wireframes before soliciting feedback. Advocates of high-fidelity wireframes find that aside from running usability tests, they enable quicker understanding of decision makers.
An examle of a high-fidelity wireframe.
What are the benefits of High Fidelity Wireframes?
On the positive side, high fidelity wireframes share many of the same advantages with low fidelity wireframes in general but have their own benefits in particular. High fidelity wireframes are usually used in addition to low fidelity wireframes, and after the latter have been used to resolve the most impactful and fundamental usability or interface design problems of an application. Being eye-catching and less costly to create than full-fledged applications, high fidelity wireframes can be used to impress clients who have to sign off on a concept quickly. Since they tend to require less programming knowledge than coded prototypes, high fidelity wireframe prototypes can be composed by users with limited programming knowledge. As they are closer in design to the final product, clients can quickly understand the final look and feel of an application without extensive verbal explanations. The high level of detail reduces the amount of abstraction required by non-technical stakeholders, which – depending on personal experience – may be important in some scenarios. In terms of your development team, high fidelity wireframes allow you to collectively bring an interface to life. This helps in keeping a project’s budget manageable which in turn further satisfies clients. Whether or not high fidelity wireframes are necessary or beneficial depends on the particular project at hand and your goal in using them. One should think about the costs and the benefits of creating detailed high fidelity wireframes beforehand. Sometimes, it turns out that it is faster to go from low fidelity wireframes to programmed code directly.
Which type of Wireframe should one use?
As can be seen from the short portrait above, each type of wireframe has its own advantages. It is often not an “either or“ decision which type of wireframe to use. Instead, both types are useful for different purposes and can be used consecutively in a project. It really depends on the goal or use case at hand and the budget of a project. Yet, if you have to choose one type, the low-fidelity wireframe tends to offer a better cost-benefit ratio as it is quick to create and sufficient to resolve the most urgent usability issues in user interface design which may be the most decisive factor affecting the success of your software. Or you could try “real wireframes” – low-fidelity wireframes augmented with some graphic design elements that help a user who is not familiar with the project understand the wireframe more quickly despite its abstractions.
What fidelity do you prefer in your prototypes?
More on when to use low vs. high fidelity:
http://www.uxmatters.com/mt/archives/2007/03/wireframing-with-patterns.php
http://www.boxesandarrows.com/view/what_an_ia_should_know_about_prototypes_for_user_testing
A nice slide show on wireframes:
http://www.slideshare.net/piksels/wireframes-and-interaction-design-documents-presentation
I prefer low fidelity wireframes, because even high fidelity wireframes are a poor substitute compared to “real” layouts from a specialized graphic designer. A wireframe that is close to a elaborate design proposal will likely lead to futile discussions with the client about the graphical aspects when the topic should rather be structure and ui principles.
I used to work in low fidelity wireframes but I feel that if a website or application already has a robust style guide that can be broken down into assets , e.g. assets for buttons font styles etc, then these assets can be used to create the wirefarme just as quickly as using sketchy style assets commonly used in low fidelity prototypes. So long as people revieiwng the high fidelity prototype are aware that it is a prototpe they are looking at and is easy to change and little cost, then you end u with a prototype of a high enough fidelity to enable good user feedback from any usability tests that may be conducted with end users who do not need to appreciate the abstraction of low fidelity prototypes.