11/17/2010
By Brendan Jonesrebandt
In User Centered Design (UCD) we always put the user first and foremost. But what about the client? Our deliverables have to resonate with the client in addition to providing a good user experience. Wireframing with the client in mind not only makes the process smoother, but will often make the entire interaction much more fruitful.
Brief Introduction to Wireframes
First off, what is a wireframe (see Figure 1)? Wireframes, applied directly to web design, are visual guides used to plan the layout and structure of a webpage with regard to its interface. What exactly does that mean? We use wireframes to plan how the page will look and function. Keeping in mind gestalt principles, usability heuristics, and best practices/learned conventions will help facilitate the creation of an aesthetically pleasing website that is easy-and dare we say-a pleasure to use.
Figure 1: Example of a wireframe.
Using a UCD methodology is a key ingredient and a strong impetus behind wireframing rather than just rushing off into creation/development. These lower fidelity prototypes are easy to edit, revise, and overhaul if needed, rather than a full blown webpage. This ease of editing provides a medium which can be used to showcase ideas with the elegance required, without the time required of fully developing a page. Many clients rely on these visual presentations to get a better feel for what the website will look like upon completion and how the user will flow through the site.
Education is the Foundation
An important step in the wireframing process is setting a client’s expectation about the purpose of a wireframe. Making sure that the client is on the same page will greatly enhance the interaction during this section of the process. Wireframes are great tools which can really highlight important questions and get conversations moving about the web design. If expectations are not set correctly, clients may be confused or feel overwhelmed. Remember that they may have never been through this process and many of them want to learn about it (see Figure 2).
Figure 2: Informing the client about common wireframing practices such as using Latin filler text and boxes that say "image" or "screenshot" is crucial. These items are place holders, not actual content.
A key concept, to get across early and often, is the wireframes illustrate the layout, not the content or the design. This may sound like a contradiction, but understanding this tricky idea is imperative to understanding the purpose of wireframes. We can compare this process to the creation of a car. During the wireframing process the number of seats, the side the steering wheel will be on, and where the warning about the airbag will go are decided. In the next step they determine the material to be used for the seats, the exact dimensions of the steering wheel, and how the airbag warning is worded. For a website, knowing that there is a video and creating a layout that includes a video placeholder are parts of wireframing. Writing the two sentence description of the video, choosing the colors for the background around the video, and deciding on the most appropriate font for the site are content and design decisions. The content and design, while integrated into the wireframe are the next steps in the project.
Typically wireframes are created in shades of gray, with colors used to emphasize items for the design team, such as blue for hyperlinks. The content is often Latin filler text or English description placeholders. By utilizing a gray color scheme and Latin text, clients are less likely to focus on issues such as color or incorrect wording and look more at the structure and purpose of the page. When clients know what to expect from the wireframes, they are much more likely to provide feedback on the layout and placement of objects rather than focusing on little details such as the wording of the text or appropriateness of the colors which will be handled in the next phase.
Now that we have laid the foundation by defining a wireframe and educating clients about them, we can discuss the real topic of interest: how to wireframe with the client in mind. Five things to keep in mind:
1. Examine the layout for any “holes”.
2. Utilize the best practices, web standards, and usability heuristics.
3. Annotate key changes, functionality, and anything else that might need further clarification.
4. Make sure the client is aware of who the users are.
5. Determine what is needed for the client.
1. Examine the layout for any “holes”
A “hole” in the layout is empty space (see Figure 3). Clients usually want a clean website with a minimal amount of items fighting for the user’s attention, but when there is empty space it is a natural reaction to want to put something there. By removing all “holes” from a wireframe there is nothing that “needs” to be filled.
Figure 3: Removing "holes."
2. Utilize the Best Practices, Web Standards, and Usability Heuristics
The client hires a User Experience Expert to make wireframes since the Expert will bring their knowledge of the best practices, web standards, and usability heuristics into the project (see Figure 4). The client is counting on the expert to guide them in the right direction. Showing examples and utilizing statistics can be very powerful tools to illustrate points and to further position yourself as a credible resource.
Figure 4: Expert utilizing knowledge to make a top level navigation usable, 7 tabs instead of 14.
3. Annotate key changes, functionality, and anything else that might need further clarification.
Oftentimes when wireframing, there is just simply not enough information about the page. The contents of the page may not be clear, it might not have been explained how the client wants a certain section to work, or all that there is to work with is the title of the page, which means it could contain anything from A to Z. The difficulties associated with any of these situations can be mitigated by creating notes (see Figure 5). Notes can be used to highlight areas that you have questions about, call attention to areas where you used the clients feedback to revise, serve as a series of talking points when presenting the wireframes, indicate why a particular decision was made, or a plethora of other uses. If anything seems confusing, or if you can anticipate where a client may have a question, be proactive and make a note about that section or feature. Another great feature about the notes is their availability to answer client questions when you are not there. If the client needs to show the wireframe to someone else, the notes are still on each page to help them explain how certain features work or to remind them of the questions they need to ask. Many clients wont have very much feedback the first time they see a wireframe and like to dig into it on their own. The notes provided often help the client work through the wireframe and come back with insightful and helpful questions and answers.
Figure 5: Notes calling attention to certain elements of the wireframe.
4. Make sure the client is aware of who the users are.
Since the process is centered around the user, making sure the client understands who the user is will help with the understanding of why certain things are included or laid out in a specific format. Many times products get into trouble with the mantra “I understand it so of course the user will.” Ensuring that a similar situation doesn’t occur with a website often requires taking that step back and looking at the product from an outside perspective, which is often difficult, especially if you built/designed it. Using examples and data on how users interact, particularly with the internet, will help the client become aware of the differences between them and the user.
Figure 6. The client is not the same as the user.
5. Determine what is needed for the client.
One of the most difficult tasks in the wireframing process is coming up with a solution to perform a certain task, provide specific information, or include particular functionality. Sometimes the Clients don’t really know what they need. They might have a vague idea or saw another site that does something they want, but putting it all together into something they need is a fine art. Many times clients will use other websites as examples of what they want their site to look and/or function like. This may or may not be helpful though depending on how well the example site’s features or functionality is compatible with a great user experience and the needs of the client.
Pulling clients into the wireframing process can often help solve problems and allow the client to see how their input directly affects the wireframes, which can be very rewarding. If the client wants a clean homepage, but 20 items on it, have them prioritize them. This will really get them thinking about what is important and might cut down on their list. If nothing else you have a prioritized list and have more information to work with. Utilizing clients, who often want to be really involved in the process anyways, to help solve issues or provide answers will make for a better experience all around.
Figure 7: The client may have an idea of what they want, but working with them to arrive at a solution with what they need is the true challenge.
Summary
Cutting down on the number and complexity of revisions and making the client happy not only makes for a better experience on both ends but also helps the project stay on or under budget. Building the foundation is just as important as the rest of the project, if not more so. Explaining what a wireframe is and how it fits into the design process is a key step to ensure that everyone is on the same page and all expectations are realistic. In addition, keeping the five points in mind just discussed will mitigate confusion and the need for revisions further down the road.
Thanks. You too.
