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.

Bookmark to:

1)      Your design is like the interior decoration of the house. Your wireframe is the structure of your house. A wireframe is essentially a blueprint of your website. Imagine an architect waking up one day and says “let’s build a house for you!” without any blueprints or strategic planning? Wireframes are not only the blueprints of your website, they provide strategic direction for many elements such as interior design as well as future direction or layout of your house.

2)      Your furniture is like the content of your website. Depending on how many pieces of furniture you have, the architect will design the layout of the website based on the content inventory. The way you lay out a website differs when there are 500 products versus 5 products that must be put in one page.

3)      Requirements gathering with real users are crucial in every website build. Imagine building a house and after it’s constructed and polished, the family moves in. Two weeks later, you receive a call from the family informing you that you made a beautiful 3-story home without any elevators. One of the primary family members is in a wheelchair and you failed to interview the family to understand their needs. This would be the equivalent to building your website without talking to your users. To find out AFTER you’ve rebuilt the website that your users actually needed something very crucial that you did not think of is not the position you want to be in.  Not only will you have frustrated users, it could have a significant impact on your bottom line.  This is why user feedback during  the discovery & elaboration phase is essential.

4)      Correctly categorizing your navigation is similar to putting the right furniture in the right rooms. You would probably never put a toilet in the middle of your kitchen so why put content that might not be suited for a particular category?

5)       Lastly, painting your house is similar to the branding for your website. Choosing the right colors will bring out the right brand you would like to present to your audience. Make sure you use the paint for your house wisely!

Bookmark to:

The day began just like any other as a cancer patient was receiving his normal radiotherapy treatment from the Therac-25 machine. The machine had two distinct modes, “e” for electron and “x” for X-ray. Despite the obvious problems which could arise from having both an electron beam and a high powered X-ray beam programmed into the same machine, the operator assumed she could use the machine without encountering any problems. She began to input the prescription data, and due to her previous experience, she was able to input this information very quickly.

After double checking her inputs, the operator (a trained radiology technician) noticed that the mode was in X-ray instead of electron. Realizing the problem that this created, she hit the “cursor up” command in an attempt to correct the mistake. Then, after pressing the “return” key several times, the treatment was administered to the patient. Yet the technician was completely unaware that her actions had triggered a bug in the software.

During the course of the treatment, an error classified as “Malfunction 54” occurred, informing the technician that an underdose had been administered.

Following standard operating procedures, the technician hit “P” to proceed with the treatment. However, upon doing so, a second dose of treatment was administered to the patient, who immediately realized that something was wrong and began screaming. The operator, who was isolated in another room separate from the patient, heard nothing. There were audio and video monitors in the room which allowed the patient to interact with the operator, but that day, none of the equipment was working.

Five months later, the patient was dead. His death was directly attributed to the radioactive overdoses he received during his “treatment.”

So, this story is both sad and interesting, but what does it have to do with usability?

Usability deals with the ease of use (intuitiveness) of designs. More specifically, good design encompasses numerous factors, many of which were overlooked or ignored by the programmers of the Therac-25 system. Below is a list of what constitutes “good” design.

• Superior designs allow for the exploitation of human behavior. As cognitive beings, humans are natural pattern matchers and button pushers. If prior research or usability testing had been performed on this machine, test results would’ve revealed the rate at which an experienced user could input parameters. Yet after the recall of the Therac-25 machine, its makers discovered that the notorious “Malfunction 54” error would occur when keys were pressed successively under an 8 second time frame. An experienced user, I would imagine, would have the skill necessary to input such parameters at a rate that would fall below this time frame.
• Efficient designs ensure the clarity of the system through immediate visual clues. In the case at hand, there was no connection between the patient’s room and the operator’s room. Although audio and monitoring equipment existed, there was no backup system allowing for redundancy.
• Operative design provides informative descriptions of errors which occur in the system, allowing the user to gain not only an understanding of the malfunction, but a possible solution to correct it. “Malfunction 54″ is neither descriptive nor correct. Rather, the system should have specified that an underdose had been given, allowing the technician to identify the problem and improvise a solution. Had this occurred, the patient’s life could have been saved.
• Effective design creates a clear differentiation between two completely distinct modes of operation. An “e” and “x” design doesn’t provide any substantial visual feedback to the operator, as the letters are not physically displaceable. A better alternative would have been to create two different looking beam heads for the machine, allowing the operator to discern when they were using the wrong beam on a patient.

Take Aways

Mission critical system errors like those of the Therac-25 system illustrate the consequences of both bad design and the lack of user testing. In this case, the cost of poor usability was quite unfortunate; it literally became a matter of life and death. In fact, two other patients died from the same machine. Thus, in the end, we are left with some pressing questions: What is the cost of poor usability? How much is it really worth to you and your business?

Bookmark to: