Archive for the ‘usability’ Category

Usability for Handheld Devices and Web Sites

Monday, March 14th, 2011

By Shanshan Ma

As companies progressively introduce more advanced technology in their consumer electronics products, handheld devices—including smartphones, digital cameras, mp3 players, eReaders, and GPS (Global Positioning Systems)—are taking up more and more of people’s time in their everyday lives. Are users interacting with handheld devices in the same way they interact with Web sites? What kinds of challenges are users facing when using such a wide range of handheld devices on a day-to-day basis? What should usability professionals take into consideration when studying usability for these different platforms?

One Hand or Two hands?

The first big question to ask is, do users need one hand or two hands to operate a device? Interacting with Web sites normally requires the use of two hands when typing on a standard keyboard and one hand when using a mouse or other pointing device. With the vast diversity of handheld devices, users often need to make a decision whether to use a particular device with both hands or only one hand. Such a decision is sometimes contextually constrained. For example, people driving a vehicle have only one hand free when operating a GPS device. Sometimes this decision is culturally constrained. For example, smartphone users in Japan are accustomed to using smartphones with one hand, because they’re often using their other hand to hold onto a handrail on a running train. Whether a device is intended for one-hand or two-hand use can greatly impact how the device is designed and, therefore, affect how people perceive its usability. Usability professionals should take this factor into consideration when planning test tasks and creating test scenarios.

A Standard Keyboard or Different Button Sets?

When interacting with Web sites, a standard QWERTY keyboard provides a consistent working environment with which users are familiar. However, when interacting with handheld devices, users may need to operate a particular devide either by using hard controls such as buttons or manipulating controls directly on a touch screen. Handheld devices come in many different shapes, with many different types of controls. For example, the Sony Reader and Amazon Kindle 2 have very different button sets. The Sony Reader features 10 number buttons, a five-way control, a home button, a back button, a read button, and a zoom button. The Kindle 2 has a QWERTY keyboard, previous and next page buttons, a five-way control, a menu button, a home button, and a back button. Although these companies designed both devices to provide a better reading experience for users, their designers certainly have different ideas of how users interact with a digital reading device. Five-way controls make it easy to navigate up, down, left, and right. A QWERTY keypad makes it easier to type.

Lack of standardization adds to the frustration users might experience when interacting with such devices. Because of this lack of standardization, usability professionals must think of usability for handheld devices systematically instead of just focusing on single buttons. Questions such as Do users understand how to use this button? might be informative. However, it could be more beneficial to ask whether a device’s whole button set facilitates the tasks users most frequently carry out with the device and whether users can successfully find their way around or get lost in the set of buttons.

What’s a Device’s Context of Use?

Users don’t use handheld devices within a vacuum. They’re driving a car and using a GPS. Or they’re riding a train and text messaging a friend. Or they’re on a trip and using a camera to capture the view. Or maybe they’re  riding a bus and reading a book on a Kindle. Everything happening around a user coalesces to create an important part of the user’s experience with the device. The context, or the environment, in which people use handheld devices varies considerably and matters greatly in evaluating the usability of those devices.

When users interact with a digital camera, they are usually trying to catch a good shot—perhaps a fleeting moment—and have very little time to operate the camera. How well designers can optimize the design of the camera, ensuring users can easily push the right buttons without making mistakes, is a very important aspect of camera usability. When users are operating a GPS, driving is usually the highest priority task. The limited amount of attention users can give to a GPS requires that the buttons in its user interface be big enough to use easily within the context of driving. This is also why voice commands are now integral parts of navigation system user interfaces.

Methods for Studying Handheld-Device Usability

With these thoughts in mind, it’s clear that usability testing in a lab might not be optimal for studying handheld-device usability. When there is a designated lab testing environment participants must go to, they enter a testing mode from the moment they step into the lab. They start thinking about the testing facility, what’s going to happen in it, and what kinds of things they might experience during the test. I have heard participants make comments like “This is new…” or “I’ve never done this before…” when entering the lab. As soon as they step out of the lab, they again become their normal selves—and perhaps start to use their handheld devices in a completely different way from what they just told us they usually do.

Even if participants are completely at ease during testing and the user researcher created a perfect test scenario, lab testing just cannot afford the type of richness a real-life setting can offer. The cultural and environmental elements of real life are absent. It’s impossible to reproduce all of the ephemeral happenings of real life that affect the way people use handheld devices in their natural environments in a lab environment.

Ideally, it would be great if a researcher could be an invisible shadow, following users around without intruding on their reality. For instance, when a user is struggling to use a new GPS system while driving, the researcher could be sitting next to him and observe every problem the user experiences. There are a couple of methods that let user researchers and usability professionals get closer to users without intruding.

In-home or at-work visits are often superior to usability testing in a lab. When researchers go to places with which users are very familiar, this allows the users to be more conformable while demonstrating their typical daily usage of a device. A conversation between a user and a researcher that occurs in a comfortable, normal environment might help users to remember certain stories about using a device that prove to be very valuable and offer opportunities for great insights.

Short-term longitudinal studies can also be very beneficial for studying handheld-device usability. Longer periods of observation let users experience the device in a more relaxed and natural way, allowing more random accidents and issues to arise. Diary studies can also be effective if users are sufficiently motivated to keep track of what happens during the course of each day throughout the longitudinal study. However, the retrospective nature of diary studies might not work for all users. Some people find it difficult to sit down at the end of a day and think about what happened during the day. An on-device diary might be a good alternative. A diary on the actual device could prompt users to enter short logs whenever there is a need.

In Summary

Users confront different usability challenges on handheld devices than when interacting with a Web site. As usability professionals, we need to consider whether a device is intended for one-hand or two-hand use. When observing users interact with handheld devices, it is more beneficial to think about a device’s usability systematically instead of focusing on the use of single buttons. Since context plays such an important role in the use of handheld devices, in-home or at-work studies, short-term longitudinal studies, and diary studies are more suitable than conducting traditional usability testing in labs.

Posted in mobile-usability, usability, usability-roundup usability-news usability-hot-topics | No Comments »

Wireframing with the Client in Mind

Thursday, October 14th, 2010

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.

homepage

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).

gsdfgsdfg

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"

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.

adfas

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 4: Notes calling attention to certain elements of the wireframe.

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.

asdf

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.

client light bulb

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.

good work

Thanks. You too.

Posted in human-computer-interaction, selling-usability, usability, usability-roundup usability-news usability-hot-topics | No Comments »

7 Keys to an Optimal Online Mortgage Application User Experience

Wednesday, August 25th, 2010

8/25/2010

By Brendan Jonesrebandt

With online interactions continually on the rise, fewer and fewer activities require you to leave your home. An activity that has begun to move online is applying for a mortgage, which can now be done from the comfort of your favorite chair. No more waiting in line at a brick and mortar bank, the application process is just a few keystrokes away. However, there are still some obstacles blocking the way for online mortgage applications to be the norm. For example, some banks do not even offer an online application, such as Chase, but only tools to help you prepare to come into their bank to start an application. These tools are still essential components of the application experience, but the break between what can be done online and the need to come into a physical bank is jarring. In addition, there are security concerns and user experience issues. We’re going to look into the user experience issues by analyzing seven keys that work together to create a good experience with an online mortgage application: Clear Language, Obvious Calls to Action, Educational Materials, Calculators, Mortgage Rates, Consistent Navigation, and Progress Indicators using examples from four banks: Zions Bank, Wells Fargo, Citibank, and Chase.

1. Clear Language

Clear language, language that is understandable to a new user, is essential for driving traffic to the correct pages. Chase recently updated their mortgage starting page to provide clearer links to the user (Figure 1). The links on the page are presented in clear, concise statements. The links are broken up into two clear categories, purchasing a home and refinancing, with relevant, secondary links listed below. Each link has an unambiguous purpose.


Figure 1. Chase Mortgage Landing Page

Figure 1. Chase Mortgage Landing Page

2. Obvious Calls to Action

Users need to know where to go, or in this case, how to start their application. This is where the obvious calls to action come into play. Zions Bank uses bright orange buttons, which have a high contrast and are in multiple locations, to start their application process (Figure 2). By providing these clear calls to action, the user will be able to continue on to the application with little difficulty. The main focus of their mortgage page is the application. They even stress how you can apply for the mortgage “from your living room.”

Figure 2. Zions Bank Mortgage Starting Page

Figure 2. Zions Bank Mortgage Starting Page

3. Educational Materials

Buying a house is one of the biggest purchases an individual will ever make, so it is imperative to have enough information available to the user about the process. Wells Fargo presents an abundance of educational links broken up into five different categories: Achieve Your Goals, How Wells Fargo Can Help You, Tools & Calculators, Manage Your Mortgage, and Related Solutions (Figure 3). Each of these categories has four different links to additional information in that category. Clearer language would make the categorization and links more useful, such as changing Achieve Your Goals to First Steps to Buying a Home, but Wells Fargo does a good job providing many articles that a potential home buyer may find useful for their current situation.

Figure 3: Wells Fargo Educational Materials

Figure 3. Wells Fargo Educational Materials

4. Calculators

In order to calculate monthly mortgage payments, whether it makes sense to keep renting or to buy, or how much a 15 year mortgage would save over a 30 year mortgage, users rely on online calculators. Zions Bank provides a very useful calculator (Figure 4). The calculator can easily be changed to meet the user’s question. In addition, the graph updates in real time so the user can see how their input affects the outcome very quickly. There is also a more detailed report available if the user would like a summarized statement of the parameters and the mortgage information broken down into monthly statements.

Figure 4. Zions Bank Mortgage Calculator

Figure 4. Zions Bank Mortgage Calculator

5. Mortgage Rates

The current mortgage rates available is a crucial piece of information that the user needs to find in order to decide if they will be able to purchase a home, or how expensive a home they can purchase. Citibank presents these rates as a table that extends from the “See Today’s Mortgage Rates” button (Figure 5). In order for the table to be informative, the user must also be given information on what the different terms mean. The question marks activate with a mouseover, displaying a sentence or two description of the term. Combining these rates with the mortgage calculators gives the user a good general estimate of whether they should even continue with the application process.

Figure 5. Citibank's Current Rates

Figure 5. Citibank's Current Rates

6. Consistent Navigation

Between best practices, learned conventions, and usability heuristics, users have come to expect that the navigation, especially for filling out a form, should be consistent and straightforward. Citibank does a good job keeping their navigation buttons consistent throughout the online mortgage application. The buttons always have the same function and appear in the same location. In addition, the buttons are spatially mapped to their function, with Previous being on the left side to go back, and Submit on the right side to go forward (Figure 6). There are also arrows paired with these words which are associated with the direction of moving through the application. Cancel is differentiated from the two directional navigation buttons in color, size, and placement. Users would be unlikely to accidentally click cancel in its current location.

Figure 6. Citibank's Online Mortgage Application Navigation Buttons

Figure 6. Citibank's Online Mortgage Application Navigation Buttons

7. Progress Indicator

When filling out a form, especially one as detailed and time consuming as an online mortgage, users have a much better experience if they know what to expect and where they are in the process. Providing information to the user on their progress and the different steps involved is invaluable for users when deciding whether they have time to fill out the application now, or whether they would rather go into a bank to fill it out. Wells Fargo provides a more informative progress indicator than others, but still falls short (Figure 7).Their process is shown to consist of four main categories with several steps per each category. This information is provided at the top of each page and is clearly visible. They check off the step once you have completed it, highlight the category and step you are on, and keep it to one page per step. They do not inform the user of how many steps fall under each category though until after the user has begun the first step in that category. There is also no description of each step or category, and they do not give an estimate as to how long the process will take.

Figure 7. Wells Fargo's Progress Indicator

Figure 7. Wells Fargo's Progress Indicator

Summary

To have a good user experience, these seven components must work in conjunction with each other. The mortgage rates must be visible so that the user knows what to enter in the calculator. The language should be clear so that the user can find the informational material they are looking for with obvious calls to action so they know where to go. The navigation must remain consistent on the forms, which also must show a progress indicator. By ensuring that all seven of these components are included in the online mortgage application process, the user will be able to apply for a mortgage online effectively, efficiently, and have a good experience with the process. This will be one step closer to moving the mortgage application process to a primarily online service.

Posted in usability | No Comments »

What is the difference between a wireframe and design? – The House Analogy

Friday, June 4th, 2010

Building a house properly is similar to building a website with a user centered design process in mind. I get a lot of questions of “What is the difference between a wireframe and design?” I think explaining it in terms of building a house makes a lot of sense.

House vs Website

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!

Tags: , , , ,
Posted in human-computer-interaction, usability | 3 Comments »

Open or Closed?

Monday, September 21st, 2009

BOL Beach Clean Up

The BOL team participated in a successful beach clean up at Ocean Beach on Saturday, September 19. (yay!)

After our hard work, the team decided to find a place to relax. Once we found a spot, we opened the doors and walked in, only to be greeted by one of the staff, “We’re closed! The light’s not on!”

Not having a clue what the staff member was saying, he came to the door and double-checked the light he was referring to:

Open or Closed?

Apparently the “OPEN” sign doesn’t mean that the restaurant is open. The people at this restaurant must believe that it’s a learned convention that the restaurant is only open when the light that borders the sign is lit. TeamU disapproves!

Tags: ,
Posted in usability | No Comments »

Common Usability Problems

Thursday, March 12th, 2009

The Usability team has a featured article in the March Issue of BusinessOnLine’s Newsletter, OPTIMIZED. Here’s an excerpt:

“The usability team here at BusinessOnLine recently took some time to reflect on our projects from the past year in preparation for our upcoming whitepaper, Top 10 Usability Problems of 2008. Many of the websites we encountered were redesigns, and even though they looked good aesthetically, the underlying usability problems plaguing these sites and hindering their success are problems we’ve seen year after year.”

Read the Article: My Site Looks Great…But it Still Doesn’t Work!

Posted in usability | No Comments »

Navigating Oprah.com

Friday, August 22nd, 2008

While doing some research for a project, I happened across the Oprah.com website. I stared at the site for a while, trying to figure out what all the sections on the homepage were about, but ended up being a little confused and overwhelmed. I tried to think why this site was so hard to use, and came to the conclusion that Oprah.com was breaking a few crucial learned conventions for the web.


The first thing I noticed was a lack of a primary navigation (that and that Oprah’s name appears on the page 100 times). Other than serving as a navigational tool, having a primary navigation area helps users gain a sense of comfort with a site. Without it, the site felt overwhelming to me, like I didn’t know where to go or where I was going to end up on the site. All sites should have orienting tools- tools which help users ground themselves in the nebulous virtual space.

The Oprah.com site actually does have a primary navigation, but it’s hidden at the top-left corner of the screen under a little plus sign. Very unconventional, and likely to be missed by the site’s users.


When the primary navigation is expanded, it’s more of like a sitemap rather than navigation. There are too many options for users to sort through, although the second column looks like a good candidate for the site’s primary navigation. Too few choices and users think you don’t have what they want. Too many choices and users do some of the following:

  1. Have “analysis paralysis” – they have too many options so they end up not making one.
  2. Their decision quality suffers – they “satisfice” and make the simplest choice, not necessarily the best.

Personally, I think that the primary navigation Oprah.com is using is an easy way out for the IA and designers who couldn’t decide on what to use as their primary navigation links. It’s better to have higher level categories for the primary navigation than to hide it altogether because then, you are setting expectations correctly.

A solution for this? Run a card-sorting exercise and some user interviews to figure out what your users are looking for specifically, and what’s more important to them. That will help determine what the primary navigation on the site should be.

Out of curiosity, I took a look at some of the other day time talk show hosts’ websites, like Rachael Ray, Martha Stewart, Tyra, and Ellen. All the other sites look like they’ve done a good job at identifying what their audience is looking for and provided those categories as the primary navigation. If Martha Stewart and Rachael Ray can create a primary navigation, why can’t Oprah?

Update

Looks like the all-seeing and all-knowing powers of Oprah somehow telepathically read my mind. As I wrote this blog post, it looks like the Oprah site has been completely redesigned, addressing this primary navigation issue. The site looks a lot better, but there are still some pretty basic usability issues (non-clickable headings to start), but I’ll save those things for another day… unless she beats me to it again!

Posted in navigation, poor-usability, usability | No Comments »

The Benefits of Usability and SEO

Friday, October 27th, 2006

Why You Should Care About Both

As a web site owner, there are many investments that should be made in order to ensure your web site is both attractive to search engines and easy for users to navigate. Making the web site attractive to search engines involves a process commonly called Search Engine Optimization (SEO). In this process, there are numerous ways to enhance your site with respect to on-page factors (title, meta data, on-page linking structure), off-page factors (who is linking to you and where those links are coming from, directory submissions), and site wide factors (duplicate content, intra-linking of site). When SEO is implemented correctly, it should make your site rank higher on search engines, thus driving more traffic to your site. More traffic means more conversions, and more conversions means beating out your competitors for the same user market as well as the obvious, more ROI.

The First Benefit of Usability: More Potential for ROI

Now that you’ve got the users onto your site, you must convert them from faceless visitors to a lead, or better yet, a sale. But before your users convert, they must be able to find what they are looking for on your web site. This is a critical concept. Most businesses will invest primarily in the graphical design elements of a web site or new functionality, which isn’t necessarily a bad investment (you still want users to have a pleasurable visual experience). However, the truth is that it doesn’t matter how good your content is, nor how pretty your web site looks, or even how cool the new Flash functionality works. If users can’t find it, it doesn’t exist. If they can’t find it, they cannot convert.

When $25 billion in potential profit is lost every year due to web site usability issues (Zona Research, 2001), it seems practical to recommend that usability be a central component in every process of building or redesigning a web site.

What Exactly is Usability?

Usability is focused upon three simple concepts (among many others):

1. Discoverable - Can users find what they are looking for?

  • If so, how fast?

  • How efficiently? And can they do it again, but quicker the second time around?

2. Satisfaction- Are they satisfied?

  • Does your web site follow conventions that users have grown to expect?

  • Did they accomplish the goal they set out to satisfy?

3. Usefulness – How useful is the site?

  • Does it serve its purpose?

  • Will users want to revisit to obtain their objectives?

If your site is built with a customer centric focus versus a business centric focus, you will satisfy all of the above mentioned principles.

The Second Benefit of Usability: Reduced Training and Support Costs, Increased Productivity

If employed correctly, the usability process can reduce telephone and email support as well as user training. One case that comes to mind is that of a login feature which resides on an arbitrary page on your web site. The user then has to dig through many links, often with no success in finding what they’re searching for. Frustrated, they call up a sales representative. After waiting 10 minutes on the phone while listening to drab elevator music, the user’s frustration only increases. After jumping through what seems like a million hoops, the user is finally greeted by the account rep, who then has to guide the user through the sinuous forest of links until finally reaching the destination where the user can log in successfully. Sure, this exchange can be completed within 1 or 2 minutes of the rep’s time, but that time can be better utilized closing deals than supporting customers. In addition, these few minutes do not include the time it took to train the rep on the operating functions of the company’s site. If a web site (or any other product) is easy to use, it will require less training.

Another scenario that comes to mind is all too typical within any organization. Imagine that your company’s site has an intranet (which it probably does) that employees utilize to help them understand the policies and procedures associated with their work. Imagine how much productivity would be wasted if employees are busy trying to hunt down information due to a poorly planned information architecture. If the site was laid out with usability principles in mind, the employee would be able to find the information needed immediately and be able to do their work instead of wasting their time searching for information in order to perform their work tasks, or worse, disrupting a co-worker’s or manager’s valuable time to ask for that information.

The Third Benefit of Usability: Stronger Brand

Another reason to invest in usability is the increased positive brand image. Your brand extends the marketing materials disseminated to your end users; it is also the experience the user has with the people, products, and services of your company. Your web site is a facet of this engaged user experience. If the user has a negative experience with your web site, 58% will not return to the web site (Forrester Research). Moreover, any marketing materials (email campaigns, newsletters, brochures) later disseminated to the user will also be associated with the negative experience and will ultimately be rejected as spam. Not to mention the negative ‘word of mouth’ viral marketing that will be generated from just one negative experience.

Usability and SEO Go Hand In Hand

Now that both the positive and negative implications of Usability and SEO have been explored, you may be wondering: How and when should these two potential investments be implemented? As with all plans, timing and execution are essential components of any good campaign. Luckily, usability and SEO should be implemented in tandem with one another.

For example, let’s say you invest only in SEO. If you get more traffic to your site but your site is still a mess, it doesn’t matter how many visitors come to your site because your conversion rate will still be low. Now, let’s say you invest only in usability. Well, now you have a functional site, but not enough traffic is being driven to your site in order to convert users. Thus, the best way to improve your site is to invest in both these elements simultaneously. When done correctly, improving your site will ultimately improve your bottom line.

Take Aways

1. Usability benefits not only the users but the business- increased ROI, reduced training costs, stronger brand among many others.

2. To obtain the maximum results for your investment, an SEO and SEM strategy should be integrated with your Usability strategy.

Posted in brand, roi, seo, usability, usability-101, usability-benefits | No Comments »