Top 5 Web Site Usability Mistakes

Although many usability principles might seem like common sense, they are often overlooked in Web site redesign. Among companies large and small, the same usability issues arise over and over again.

Following is a list of the five most common mistakes:

1. not having a call to action for your marketing slideshow or product showcase;
2. not having a search box;
3. not understanding the effect of “banner blindness”;
4. not chunking information into smaller parts; and
5. not using the correct form controls to minimize mistakes.

Take a close look, and make sure your site does not end up committing them.

No Call to Action

Long gone are the days gone of not utilizing Flash on your homepage. With the growing popularity of Web 2.0, social media and rich Internet applications (RIAs), Flash has become more widely adopted and utilized better. However, even though we usability analysts hate Flash as much as the next user, if you must include a Flash banner on your Web site to market your products, then at least have a call to action on the banner.

The worst thing you can do is allocate all that screen real estate but not allow users to take action on information that might interest them. A call to action also helps you track how many users are actually reading or sitting through your product showcase.

No Search Box

More than half of all Web site users are search-driven, according to Smashing Magazine’s 2/18/10 article, “9 Common Usability Mistakes In Web Design,”meaning their first action is to type in a search query rather than read the entire page or navigate the options. This is likely a result of cause and effect from the Four Second Rule, which suggests Web sites that are not designed to show users the most important information within the first four seconds drive users to use the search box or abandon the site completely. It is important to include a search box on every single page of the site.

Research has also shown that 70 percent of users click on the “Go” or “Search” button after entering a search query rather than hitting “Enter” on the keyboard. If the search box has prefilled text such as “Enter Search Terms” within the input box, the text must clear once the user begins entering a query; studies have shown that many times this becomes the most searched term on the site due to error.

Web users expect the search box to appear on the top-right of each page; it is a general rule. For e-commerce specific sites, it is OK to leave the box in the center of the page — but the appropriate visual cues to the search box must be utilized.

‘Banner Blindness’

A phenomenon specific to Web site usability, Banner Blindness occurs when users ignore images that appear to be advertisements. Partially attributed as a learned behavior due to the backlash of overwhelming advertisements on the Web, banner blindness is believed to be caused by the task-oriented mental model of Web users.

One of the main causes of banner blindness embedding text within an image; the background picture causes the text to become difficult to read, and it is often ignored. The optimal solution is to move text out of the image and insert it on the page as plain HTML text. Another solution is to place the text on a solid background color within the image, if necessary.

Information Overload

Chunking information into smaller sections helps facilitate users’ scanning of the page. By breaking down information into meaningful groups, users can easily scan the page without having to read each individual navigational option.

Humans, in general, can visually process around seven items. An example of this would be a phone number, such as 5551212, which is simple to remember. When we’re presented with a 10-digit phone number such as 8585551212, it becomes a little harder to remember. If we break it down into chunks, such as 858-555-1212, then it once again becomes easier to process visually and remember.

This same concept applies to the Web, when organizing links, navigational options, bulleted lists, etc. We want to group items into chunks with a maximum of around seven items.

This is the optimal number that allows the user to scan and compare items on the page with minimal cognitive load.

Lack of Form Control

“Affordance” can be defined as the natural intrinsic qualities of an object that suggest potential interactions. For example, a doorknob has the affordance of being turned because of our prior experience with doorknobs and the way they appear. Every object has an affordance, and if we utilize this attribute of objects implemented on a Web page, we can minimize the possibility of confusion or user error.

Instead of having a form with all text input boxes, for example, we can speed up the form-filling process and reduce errors by using objects that have certain affordances. It is also important to make sure the correct type of form object is used so the form does not have an affordance for something it is not intended to do.