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:

“Show me the price!” Online shoppers browse through e-commerce site and look for the numbers. How you show your price might not be the most important factor that drive your online sales, but it certainly has impact on customers’ purchase decision making process. We reviewed multiple e-commerce sites and found ten most often used ways of showing price. In the following sections, we’ll go through them one by one.

1. Ebay: Plain

The price is shown as is. No decorating, no sugarcoating.

2. Zappos: Bold and Loud

The price is shown with a much bigger font size and a brighter color to allow customers see it easily.

3. Amazon: How Much You Save

The original price is crossed out and the current price is shown with a different color and font size to catch customers’ attention. The exact amount and percentage that customers can save is calculated and presented.

4. Apple: From

“From” is used when there are different prices as customers choose different customization, such as color or size. The lowest price is shown to customers with “From”.

5. Twelve south: From To

The price changes as customers choose different customization. Instead of showing the lowest price with a “from”, the complete range of price from the lowest to the highest is shown.

6. Bestbuy: Our Price

Adding “our” to price creates a personal touch: We are the only one who offers this price.

7. Overstock: Today’s price

Adding “today” to the price encourages customers to take action right away: this price is only available today.

8. Jcrew: Subtle

Jcrew’s price is somewhat hidden in the product description. There is no emphasis on the price in anyway. How the price is presented fits the company image.

9. Hollister: Now and Was

Current price is shown together with the old price. It allows customers to see the price difference.

10. Cellarthief.com: Other prices

The page lists regular retail price, lowest online price with shipping, and the price that Cellarthief is offering. It allows customers to see all possible options. However, too many price options might confuse customers, and leave them wondering: which price is the one you are offering?

Summary

We reviewed various e-commerce sites and discovered 10 different ways of showing price: plain, bold and loud, how much you save, from, from to, our price, today’s price, subtle, now and was, other prices. Each way of showing price has its own strength and weakness. Depends on what kind of message that you want to send to your customers, you may find the way that works for you best.

Bookmark to:

1) Demonstrate ROI for Usability and social media to improve the customer experience. There are many resources and papers that demonstrate ROI for usability:

ROI 1 – Business Benefits of Usability

ROI 2 – How Ebay Measured ROI

ROI 3 – Usability Case Studies

ROI 4 – 24 Page White Paper Full of Case Studies

ROI 5 – How the American Council on Exercise Improved Their Conversions 43%

ROI 6 – Jakob Nielsen’s Alertbox Article on Usability ROI

Here are resources and papers that demonstrate soft ROI for social media:

ROI 1 – Barry Tallis’s Presentation: How Nike, CNN, and Bank of America Measured Their Social Media Success

ROI 2 – General Motors’ ROI on Blogging Case Study

ROI 3 – Dell’s Regeneration Graffiti Facebook Campaign

ROI 4 – Sony’s Facebook Widget Vampire Campaign

One of the reasons you won’t see an abundance of papers explicating the ROI of social media is because it is still very new. If you imagine how long it takes to fully roll out a website (from 6 months to 2 years), putting together a social media plan and executing on it takes about the same amount of time. On top of that, you have to accurately track the success of your website or social media plan. In order to do this, you have to wait another year to get accurate tracking data. All in all, this process takes anywhere between 1.5 years to 3 years. Those who have demonstrated success so far are the early adopters of social media, allowing them to create informative white papers like the ones I’ve linked above.

2) Send your execs and members from other departments (ie. engineers, designers, and web team, etc.) to an educational conference. This method accomplishes two things:

First, it allows your engineers to get on the same page as you are regarding the vision of the website. This way, those internally are also defenders of the initiative thereby making it harder for an executive to refuse when so many are on board with a certain plan.

Second, they are hearing it from someone other than yourself. When someone hears the same information from industry experts, it lends more credibility to your position, takes away animosity from yourself, and lastly allows them to ask the questions directly to a credible source.

3) Hire an outside consultant to conduct a usability / social media analysis. The reasons for this are very similar to that of sending your execs and other departments to conferences. However, it might be more effective since it takes less traveling and less time commitment.

It’s easier to get a CEO to sit in on a 2 – 3 hour presentation at their office than getting them to drive or fly to a conference. Also, a diagnostic / analysis will be catered to your company’s specific needs versus a general presentation that might or might not apply specifically to your situation. And lastly, in some cases, it might be more cost effective. For example, our company charges anywhere between $10k to $20k for a usability diagnostic. Most conferences cost about $1,500 for registration plus another $1,000 or so for flight, hotel, and meals. Therefore, if you want to send about 5 people, it will cost $12,500 for the full conference. Of course there are exceptions to this rule such as the OMS Tour in which the conference is local and very inexpensive for 5 people to attend.

So, these are all the techniques that I have come up with. Do you have any other techniques to justify a business case for increasing the customer experience? If so, please share it!

Bookmark to: