Usability is in the details

Although usability practitioners love to show examples of big usability issues with websites and applications, the vast majority of usability issues are typically in the details.  By forcing your application users or website visitors to be constantly bothered with more detailed usability issues, you eventually wear down their patience and force them to decide whether to continue being annoyed, or to try a different application or website.

So, you may be asking, “what’s a big usability issue versus a minor or more detailed usability issue?”

Here’s my definition of a minor usability issue:

Craig says:

“A minor usability issue is an issue that is small enough to not cause task failure by itself, but is significant enough to cause additional cognitive load, errors, or an increase in time-on-task.”

Examples of usability issues in the details

As a demonstration of usability being in the details, I’ve identified a few examples of several minor, yet user-annoying usability issues that can wear down the patience of your users.  Each of these minor issues in and of itself is not a big enough deal to make a person throw up their hands and storm away from your application or site.  But added together, like the straws on a camel’s back, they can and do cause that effect.

The good news: detailed usability issues are typically easier to fix

The good news is; for the vast majority of detailed usability issues, a simple fix is usually all it takes to remove the problem and improve the usability for your users.

Tip: Find your minor usability issues, they’re easier to fix and can reward you with increased performance

After reading this article, have a look at your own applications or websites and identify where there are minor usability issues.  Or better yet, observe someone who has little to no experience with your site or application use it.  My bet is you’ll probably uncover several minor, yet annoying usability issues just by watching them go through the process.   I think you’ll find finding and fixing minor usability issues is the easiest way to improve the usability of your site or application, without resorting to major re-designs.

The details: Several common usability issues

Usability issue #1 – Horizontal and vertical scrolling of important content

Forcing people to scroll both vertically and horizontally in your website or application is a usability issue because it requires more cognitive load (remembering what was read) and motor effort (moving scrollbars) than by simple presenting data with no scroll, or a vertical scroll only.

Trend micro antivirus is in the business of analyzing and recommending actions based on potential computer security risks for their customers.  I’m assuming that typically their customers have little to no security knowledge, so the advice (content) Trend micro antivirus provides is very critical for user success.

It’s therefore a minor yet annoying usability detail that Trend micro antivirus displays a pop-up window whenever it detects the need to provide guidance, using horizontal and vertical scroll bars to display this all-important guidance within the pop-up.

In addition, another minor usability detail is the pop-up is not resizable, thus the customer is unable to modify the size of the display to better read the guidance.

Trend micro antivirus displays important security guidance in a horizontally and vertically scrolling pop-up window that is non-resizable.

Usability issue #2 – Non-alphabetical drop down menus

For most drop-down menus, a common best-practice is to use alphabetically ordered listings of links.  This is especially true for websites or applications in which users either lack expertise with the subject matter or are infrequent users.  The alphabetical ordering of choices helps users scan and find the link they seek.

GoDaddy.com is a domain and hosting company that provides a fairly large assortment of tools for their customers, most of which are accessible via drop-down menus.  For their hosting tools, GoDaddy uses a drop-down menu that is not alphabetically ordered.  Because users must read the entire list of links prior to determining which to select, this forces additional cognitive load, in essence slowing users down.

Although this may seem minor, if a customer is only infrequently using these tools, they must “re-learn” the list with each visit to the drop-down, causing additional friction and slow-downs.  Coupled with many other small yet annoying usability issues, they could be enough to tip the scales and influence the customer to seek another hosting company.

Considering the low price-point for hosting, ANY customer friction is a potential customer-loser for these companies.

GoDaddy’s hosting control center drop-down menus are not alphabetically ordered.

Usability issue #3 – Poor form instructions and label alignment

Forms are the ONLY online tool your potential customers can use to purchase or request your products or services, so poor alignment of form instructions, labels and entry fields are minor yet annoying usability details that should be corrected promptly.

Taleo has a widely-used online application form candidates use to apply for jobs with a company.  The Taleo form is quite long, and is often customized based on a company’s needs.  However, attention to usability details in form design can slip, meaning the form causes increased cognitive load and decreased performance.

In this example, alignment issues with the email form instructions and label are causing additional cognitive load.  The “Please create your password” instruction is right-aligned and thus displayed to the left above the password field.  However, the “Re-type new password” instruction is left-aligned and thus is over the field, and not aligned with the rest of the labels.  In addition, it is missing the red “required” asterisk, which will result in an error if the user submits the form without the re-typed password.  Finally, note that there are no instructions for password length (which in this case is 6 characters minimum) nor for valid versus non-valid characters.

Many form developers today use a separate page for registration information, so that errors with the registration do not cause the rest of the form entry process to fail.

Taleo’s candidate application form demonstrates label alignment issues

Usability issue #4 – Poor alignment of or missing Action buttons

Another usability detail is proper alignment and use of primary (“Submit” or “Go” etc.) and secondary action buttons (“Save & Exit” or “Cancel” etc.).  The point to having people use forms is to actually have them complete and send them, and so details with action buttons are important.

Using Taleo’s application form again as an example, the form is quite long, asking for full candidate information including address, prior jobs, demographic information and more.  Because of the amount of time it may take to complete such a long form, providing the ability for people to save their partially completed form, and return later to finish it could be very important.  However no “Save and exit” or related secondary action form is included (potentially because sign-up has not yet occurred).

In addition, clearly separating action buttons from other entry fields is also important, to reduce confusion as to their purpose.  As demonstrated below the Taleo form has the “Submit” button placed apparently inside the visual space created by the horizontal lines above and below “Certificates/Licenses.”

Some people may be confused, wondering if the “Submit” button submits the entire form, or the “Certificates/Licenses” information only.

Conclusion: Usability is in the details

The four examples demonstrate typical minor yet annoying usability issues, highlighting the importance of paying attention to detail when creating a user experience.  Although these common minor usability issues won’t cause task-failure by themselves, added together the annoyance factor becomes great enough that many users may decide to either not purchase or order the product or service, or to discontinue use of the application or website altogether, meaning lost customers, revenue and a poor Brand reputation.

It’s in each designer’s and developer’s best interest to pay attention to the little details.  That’s because usability is in the details, which helps define the success or failure of the website or application.

Perceived Affordance, Usability and Online Sales:

One of the most important goals of web site usability testing is finding and fixing perceived affordance issues.  You can increase your usability, conversion and thus your web site Return on Investment (ROI) by improving perceived affordance.

What’s perceived affordance?  For web site owners, it’s the art and science of designing objects like ‘buy now’ buttons in such a way that your web site visitors know just by looking at it that they can click on it.

One of the most important functions of web site usability testing is to evaluate the perceived affordance of links and buttons.  By testing and optimizing perceived affordance of critical objects, such as “Add to Cart” or “Buy Now” buttons, web sites can dramatically increase conversion, and thus ROI.

Definition of Perceived Affordance:

According to Don Norman, the Godfather of design and usability and the author of the book “The Design of Everyday Things,” the concept of perceived affordance is defined this way;

“The word “affordance” was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal).

What the designer cares about is whether the user perceives that some action is possible (or in the case of perceived non-affordances, not possible).

In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two need not be the same. In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances. The computer system, with its keyboard, display screen, pointing device (e.g., mouse) and selection buttons (e.g., mouse buttons) affords pointing, touching, looking, and clicking on every pixel of the display screen.”

According to William Gaver, there are three categories of affordance:

• Perceptible
• False
• Hidden

By evaluating the design elements that communicate perceived affordance for various objects in your web site, you can determine which category an object fits, and if wrong, take steps to correct it.

Perceived Affordance is Critical for Your Web Site Success:

When you think about your web site, your ROI in fact lives or dies on your ability to successfully manipulate design to improve perceived affordance.  Your web site is primarily a one-way pipe of information, the majority being visual information (with the potential for some audio).  You provide the visual information, and your web site visitors consume and comprehend it (or at least try to).

Because the primary interaction that takes place on your site is one-way visual, you must be zealous in your attempts to understand and evaluate how well you are communicating perceived affordance.  Testing and optimization of elements that impact perceived affordance should be your number one goal, because it directly impacts your conversion rates, and thus your web site’s ROI.

Actions your web site visitors take such as mouse clicks or typing characters, although very important, are never going to happen unless you provide clear, consistent and effective visual clues about how to take actions.  You do this by continually testing and optimizing the crucial elements of your site that establish and communicate perceived affordance.

Examples of Perceived Affordance in Buttons:

Let’s examine a few examples of perceptible perceived affordance in action.  In order to visually communicate that a button is clickable and will enable the site visitor to take action, it is necessary to use design to visually separate, distinguish and illuminate a function.

As demonstrated above, Amazon.com uses many design elements to generate high perceived affordance of their “Add to Shopping Cart” button, including use of:

• Strongly contrasting yellow button color
• Only use of that yellow color on the page
• Heavy outline border around button
• Round strongly contrasting icon of shopping basket
• Text in button “Add to Shopping Cart”
• Larger font for button text
• Elongated shape, round on left side, squared on right side
• Gradient fill in top of button to visually mimic 3-D shape
• Dark blue background color for surrounding box

Another example is eBay, which creates a high perceived affordance of the “Buy It Now” button.

For eBay, the “Buy It Now” button uses multiple design elements to effectively communicate perceived affordance:

• Strongly contrasting blue button color
• Only use of that blue button color on the page
• Largest sized button on page
• Text in button “Buy It Now”
• Larger font for button text
• Strong contrasting colors, white text on blue background
• Dark gray background color for surrounding box

To provide contrast, let’s examine use of design elements that appear to provide a function, but in fact do not.  This is known as false affordance, and can work against web site visitors.

False Affordance:

A false affordance is an apparent affordance that has no real function.  False affordance is a major contributor to lower web site conversion and lost online sales.  This is because a false affordance breaks the faith a web site visitor has in the web site’s functional abilities, and causes doubt and confusion.

Example of a False Affordance:

In this example, the prominently displayed “Featured Gift” and photo of the toy seem to indicate that more information about the toy might be available by clicking, but where?  Web site visitors who come across the display are left wondering, because no clear action button seems available for this toy.

A common tool many web site designers use is to make the image of the product clickable.  But that is not the case here.

In fact, there is no action available, the image of the toy is not clickable, nor is the heading “Featured Gift.”  There is no way to navigate to the featured toy using the visual designs offered, thus the connection with a “false affordance.”

There are many types of designs that can lead to false affordance, some of the more common being:

• Objects that look like buttons, but are not
• Photos of objects that are not links, especially if place with photos that are links
• Placing a blue outline around an image or link, yet no link is present
• Underlined text that is not a link
• Use of blue in text that is not a link
• Form data entry fields that are not active

For web site owners, false affordances are extremely damaging, and cause many more problems than simply lost clicks to a particular item.

By prominently displaying a false affordance on the home page, a web site causes damages including:

• Lost faith (visitors wonder – “is this clickable, what about this, or this?”)
• Lost focus (visitors spend more time trying to solve a navigation problem than shopping)
• Lost sales (frustrated visitors will often not complete their task)
• Lost trust (many visitors will simply leave the site – never to return)

Finding and fixing false affordances should be a high-priority job of every web site owner, especially those who own eCommerce sites – as false affordances  cost lost visitors, conversion and sales.

Poor Design and Hidden Perceived Affordance:

As with false affordance, poorly designed techniqes can hurt perceived affordance and can cause major performance issues for web site owners as well.  This is referred to as Hidden Affordance.  In the case of poor design, visual clues that a link or function is present are not displayed as visually separate, distinguished and illuminated.

Example of poor perceived affordance:

The example above demonstrates a site that provides web site visitors with a display of products available for purchase.  However, the function associated with “Checkout Now” – in this case a link to an online order form – is poorly displayed because it has minimal visual clues as to it’s function, and thus has low perceived affordance.

Among the perceived affordance problems with the “Checkout Now” button are:

• No button shape around the text
• Yellow text color is not a strong contrast against the white page
• No underline when mouse rolls over text
• Text in button visually close to “Back to results text”
• Missing a background color to call attention to location
• Upper left location not typically associated with ‘continue’ action

Improve Perceived Affordance with Testing:

So how do you improve your web site objects perceived affordance – with testing and re-testing.  There are four primary types of testing that can be used to analyze and optimize perceived affordance.  They are:

1. Expert Usability Review – Also called a “heuristic review.” This review uses expert analysis of interaction devices such as buttons, links and related functions against industry standards and best practices.  The best form of an expert usability review is to receive several, since each expert might focus on unique aspects that grouped together form a better picture of what needs to be improved and why.
2. Usability Testing – Using 1-on-1 moderated testing, a web site owner can quickly find problems with task flows for critical tasks.  These often involve issues with perceived affordance.  Because usability testing only needs about 7 or so participants, and because it uses real web site visitors, and can be done very quickly and for low cost, usability testing is a great way to find issues with perceived affordance.  It is the only method a web site owner can use to determine the “why” of an actual web site visitor’s behavior.
3. A/B Testing – Two different versions of a button, link or related object can be tested on your web site at the same time using a traffic split.  50% of the traffic goes to the version that has the “A” version (the original version of the object usually) and 50% to the new test “B” version.  After enough statistically significant results are captured, a winner can be picked based on interaction rate.  A/B testing is pretty reliable, assuming enough traffic is present.  However, it won’t tell you the “why” of the visitor behavior, and of course it might negatively impact your conversion if the “B” test version is worse than the original version.
4. Multivariate Testing – For sites with large amounts of traffic, multiple versions of objects can all be tested at the same time.  This allows for rapid analysis and iteration of the best possible combination of elements.  The downside to multivariate testing is it needs lots and lots of traffic to establish statistically significant results.  In addition, as with A/B testing the “why” of visitor behavior won’t be know, only which combination of elements performs the best.

Conclusion, Increase Your Usability and Website ROI with Perceived Affordance

Perceived affordance is critical to your web site success, and to your conversion and ROI.  Perceived affordance determines how well your interaction object designs communicate their function and use to your web site visitors.  Poor perceived affordance hurts your web site interaction, conversion and sales and results in lower ROI.  You can increase your ROI by conducting testing and optimization with the interaction objects on your web site.  An excellent way to identify potential issues and optimizations of perceived affordance is with usability testing.  Continual testing and re-testing ensures you are maximizing your potential usability, perceived affordance and thus ROI of your web site.

For more information about maximizing your web site’s perceived affordance and ROI contact me.

Guest Blog – Susan Weinschenk and Top 10 Attributes of a Usable and Persuasive Web Site

It’s my distinct pleasure to post this guest blog for you by Susan Weinschenk, Ph.D., author of the book “Neuro Web Design: What Makes Them Click?”

I’ve been an avid reader of Susan’s blog “What Makes Them Click” and Susan has graciously agreed to post one of her articles here.  I think you’ll enjoy this article, as well as find it very informative.

Susan is the Chief of User Experience Strategy for Human Factors International (HFI). Her clients call her, The Brain Lady, and that is also her Twitter name @thebrainlady.

Enjoy!

The Top 10 Attributes of a Usable and Persuasive Web Site

By Susan Weinschenk, Ph.D.

Susan Weinschenk

Whether you spend a fair amount of time online, or you are responsible for the design or content of a web site or web application, the list below should be of interest to you.

What are the most important attributes of a web site that make it both usable and persuasive? Why do some web sites succeed in making us click while others result in abandonment?

1.The organization of the information at the website (the information architecture) fits the visitor’s mental model –

Is the website organized the way the visitor thinks? For example, if the visitor comes to a website looking up reviews of computer monitors is there a category called monitors? Or is the information on monitors part of the “Peripherals” category. Do the visitors really think of “peripherals” when they come to the site?

Web designers and content managers are often too close to their own information and need to make sure that the categories and organization of the web site match what most visitors have in their heads when they arrive at the site.

Usable and persuasive sites are designed for the visitor’s mental model.

2. Less is More –

Have you ever heard about the “magic number” 7 plus or minus 2?–the idea that people can remember or deal with between 5 to 9 things at time? Well, that’s a myth. Research shows that the real magic number is 3 or maybe 4.

Research shows that people can only deal with about 3-4 items of information at a time. Anything more than that they are not really seeing or paying attention to.  People will tell you they want more choices, but the research on decision-making is clear that too many choices means that we don’t choose at all.

Usable and persuasive sites provide 3 to 4 clear choices at a time.

3. The top third of the page, in the center, is “prime real estate” –

Where information is on the page does matter. The top third is the part of the page that people see first. Contrary to what some people say, the very top left is NOT the place people look first. The web has come to be much more of a TV model (top middle) than a book model (top left in countries that read left to right and top to bottom).

Smart designers pay attention to what is in this top third of the page. They make sure it is attention getting, meaningful, and speaks to the emotional/unconscious part of the brain, not just the logical /conscious part.

Usable and persuasive sites make good and careful use of the prime real estate.

4. Use visual and cognitive distinctions –

There is a lot going on at a typical web site page these days. There are images, and major category navigation bars. There are links to information about the company or individual who owns the site. There might be a place to go for help, a top banner with a shopping cart and a footer with more information. Then there is the main content on the page, and maybe there is advertising.

The list goes on and on.

In order to make sure the visitor knows where to look the site design has to use both visual and cognitive distinction.

Visual distinction means that a certain part of the screen uses different shapes, sizes, colors or fonts to look different.

For example a navigation bar has a green background, and a border around it. It is a rectangle and it is vertical. The top navigation bar on the other hand is horizontal, is on the top right of the page, is a set of links without a background color or a border. It looks visually different than the left navigation bar.

It’s not enough, though to use JUST visual distinction. The different parts of the page must also be cognitively distinct.

Cognitive distinction means that the items that are in different locations belong together with other items in that location, and are distinctly different than the items in other parts of the screen.

For example, the items in the green left navigation bar refer to different products I can buy. The items in the top right navigation bar without color are where I go to make changes to my account, get help, and ask for support.

Usable and persuasive sites use both visual and cognitive distinctions.

5. Engage all 3 brains –

In my book Neuro Web Design: What makes them click? I talk about the idea that we don’t have just one brain, we really have 3:

• The new brain is the logical/conscious brain
• The mid brain governs emotions
• The old brain is interested in scanning the environment and asking, “can I eat it?” “can I have sex with it?” “will it kill me?”

Engaging the old brain means that you are speaking to issues that are important to the basic self, such as food or security/danger or sex. Since most sites aren’t about food or sex, this leaves danger messages such as security, feeling safe, the idea that we are getting something for FREE or some other trigger that grabs the attention of the old brain.

Engaging the mid brain means that you are using photos or pictures or stories that talk to the emotional part of the visitor.

Engaging the new brain means that you have taken care of all the rational/logical reasons why someone would want to continue at your site.

Usable and persuasive sites engage all three brains.

6. Make text easy to scan –

In general, people don’t like to read online. Devices such as the Kindle are an exception, since they don’t use regular LCD screens. Most websites are still being viewed on regular laptops and monitors, and these are still hard use for blocks of text.

With some exceptions (for example, people who have subscribed to the NYTimes Reader software application), people will not read large blocks of text online. In place of these large blocks web sites should be concise, and use headings, bullets, and small paragraphs to break up text.

Usable and persuasive sites make text easy to scan.

7. Use progressive disclosure to show people what they need when they need it –

Lots of people come to a web site. Some know what they want, some are browsing. Some have lots of knowledge about what the site contains and some are new to the topic.

The best tactic therefore is to use “progressive disclosure.”

This means showing a small amount of information and then having the visitor click for more information. Then there is some more information and they can click again for more.

Have you heard that the user should be able to get to what they want in 3 clicks or less? That’s another myth! As long as the clicks make sense people are willing to “follow the scent” to get to their information.

Usable and persuasive sites use progressive disclosure.

8. Use grouping to show what things go together and limit clutter –

With all the information and pictures and videos and ads that are on screens these days it’s easy to forget that a screen can be visually overwhelming, especially to someone who is new to the page. There is a whole science behind designing screens and pages so that they use grouping to reduce clutter.

There can be a lot of material on the page as long as the things that go together are placed together, and that there is a little more space between separate groups than there is within items inside of a group.

Web sites that minimize the number of unique margins by lining up labels and fields and columns well can have lots of information and still not appear cluttered.

Usable and persuasive sites pay attention to the grouping of information and limit clutter.

9. Build in the features and functionality that make the site become a habit –

Research shows that over time people will tend to focus on one or two web sites for a particular task. For example, they will go to one or two websites for news, one or two web sites to shop, one or two web sites for entertainment. So what makes them choose to come back over and over to one or two sites and let the others fall away?

Sites that build in features that encourage use to be habitual are the winners, for example, e-commerce sites that make it easy to re-order (Staples), or offer one-click buying (Amazon). Or sites that aggregate all of your financial information together in one place (Mint) or allow you to not only send a twitter message but also monitor the twitters on particular topics (HootSuite).

There’s a limit here though. It’s not about having lots of features, it’s about having the one or two “can’t live without it” features that make the site become a habit.

Usable and persuasive sites choose and outperform in one or two killer features and functions.

10. Create a buzz in a specific market –

Don’t forget the power of social validation. I have a whole chapter on this in my book on “Neuro Web Design: What makes them click?”

People listen to what other people say, especially if they are uncertain about what to do.

So if there are 5 different sites that you can use to upload your photos, but one of those sites is talked about amongst your twitter group, is written about at the blogs you read, and advertises how many members they have, then that is the site you are most likely to check out and stick with.

Usable and persuasive sites know who they are aiming for, and do the marketing and publicity to make sure that have buzz among a certain cohort.

Conclusion: Top 10 Attributes of a Usable and Persuasive Web Site

So that’s the current top 10 list. Try evaluating your favorite websites against the list and let me know what you think. What sites do you use that match several of the items on the list?

If you liked this article check out Susan’s blog: www.whatmakesthemclick.net for more information about Neuro Web Design.

About the Author:

Susan Weinschenk, Ph.D., is the author of the popular blog “What Makes Them Click? Applying Psychology to Understand How We Think Work and Relate.”

Susan has a Ph.D. in Psychology and 30 years of experience as a usability, user experience, and human factors consultant for Fortune 500 companies. She is the author of several books in the field, and her most recent book, published by New Riders is, “Neuro Web Design: What Makes Them Click?” She is Chief of User Experience Strategy for Human Factors International (HFI). Her clients call her, The Brain Lady, and that is also her Twitter name: @thebrainlady.