Ten Tips to Make Your Website Usable

Most of the sites we test have impressive visual design which is clearly. This is the first chance that you get to welcome your customer and convince him or her to spend some time at your site. But as we have pointed out before, the visual design of a site can make only a 15% difference in usability. The big gains in usability are to be had from consistency and from task focus. And it is in these two areas where so many of the sites that we looked at performed poorly.

Client confidentiality prevents us from describing the results from individual websites, but we can summarise what we found across all of the sites. None of the sites failed in every area, but every site failed in more than one. Here are ten action points that the sites should take to improve. How does your own site stack up?

10 Usability Tips

1. Make the value proposition clear on the home page
2. Include engaging content
3. Make links visible
4. Restrict the navigation bar to a small number of links
5. Use consistent and meaningful terminology for navigation items and hypertext links
6. Proof read the content for typographical errors
7. Include white space in the page layout
8. Speak with customers to find out the functionality that's really needed
9. Make sure the site can be accessed by the partially sighted
10. Carry out a usability test

1. Make the value proposition clear on the home page

Some of the sites just assumed you knew their business. This is a classic example of not taking the user's point of view. "We've been selling defragmenting pods for 10 years. I know what we do so surely everybody else does". With millions of sites to choose from, users are not willing to waste time checking that your site has what they want. It's quicker for them to return to a search engine and find one of your competitors. The purpose of the site, and the benefit to users, should be visible on the home page.

2. Include engaging content

Around 40% of the sites we looked at lacked any real content. In some cases clients had simply "repurposed" an existing brochure. Each page in the brochure became a link on the home page. We felt that the only useful content on these sites was the company address (and sometimes a map). Other sites had developed a web brochure in the form of a Flash animation. These rarely added any value to the customer experience: indeed, most of them had a detrimental effect since the page took much longer to load. (Some commentators argue that Flash can never make a site usable).

3. Make links visible

Remarkable though it sounds, over a third of the sites chose to hide their links from users. They achieved this in one of two ways (one site used both methods). First, they used buttons that didn't look like buttons. For example, a site that sold whisky had a button that was simply… a picture of a bottle of whisky. The image had no associated text. This type of design is a usability problem partly because you do not know where the link will take you, but more importantly because most users will never press the button.

Other sites hid their links by failing to underline them. We know that web users read by scanning a page, and underlining hypertext links facilitates this. Ignoring this convention forces the user to read the screen like a paper document and play "hunt the link" (usually in these situations preceded by the phrase "click here"). It also removes contextual cues, since the user cannot distinguish visited links from unvisited ones.

4. Restrict the navigation bar to a small number of links

Many of the sites tried to point to all of their content from every page. This resulted in a cluttered navigation bar that took up a large chunk of real estate. For example, on one site the navigation bar took up nearly 30% of our 800 pixel by 600 pixel window. Since the browser controls take up 20% of the space, this left just under half of the screen for content. Adding too many items also makes it hard for users to predict what they will get if they follow the link. The designer may understand the difference between "Acme Solutions" and "Global Solutions", but it is doubtful that users will.
Note: We have deliberately chosen not to be drawn on the precise value of "a small number" since it will vary from site to site and depend on the user's domain knowledge. But for most sites, we recommend a maximum of 5-7 navigation items. If you increase this number for your own site, we suggest you usability test it first.

5. Use consistent and meaningful terminology for navigation items and hypertext links

The majority of the sites used poor terms for navigation signposts. For example, the whisky site we reviewed had a fascinating page describing how to organise a whisky tasting session. But the link from the home page was titled "The Wheel". This was because the tasting process was based on the concept of a tasting wheel-but this only made sense once you had read the page. Another example comes from our review of a site selling software licence management. Amongst the 14 navigation terms was one titled "Publisher Products" and another titled "Publisher Programs". There just isn't enough information in these links to choose between them. So the user needs to guess-and press the back button if it turns out to be the wrong choice. Just because a customer is willing to spend time finding what they want in your bricks and mortar store, don't think this applies to your website. With a bricks and mortar store, a customer has already paid the price of finding your store, parking and entering. The costs of switching are high. On the web, the costs of switching are negligible: how fast can you click?

6. Proof read the content for typographical errors

One site had just four sentences on its home page, and two of those contained spelling mistakes. Other sites had buggy scripts that generated unhelpful server messages. All of the sites suffered some degree of linkrot, even when pointing to pages within the same site. Typos, broken links and buggy scripts detract from your company's professional image and reduce customer confidence. The customer might reasonably think, "If they can't spell properly, what are the chances they will deliver to the right address?"

7. Include white space in the page layout

Despite the fact that most of the sites had been designed by external web design agencies, this layout problem was still an issue with around 25% of the sites. This was usually because the design agency had produced the "branding" elements-such as the navigation bar and the logo-but had not told the client how to use the underlying layout grid. The client's internal team then populated the pages with material, sometimes compressing information to the point where it looked cluttered and was difficult to scan.

8. Speak with customers to find out the functionality that's really needed

Few of our clients had spoken with customers to find out what they wanted. The majority had simply assumed they knew what customers wanted, or at least assumed that customers would want what was on offer. Sometimes this meant that important functionality was missing, and for others it meant that the right functionality was there but it just didn't go far enough. For example, one site that sold lighting fixtures had functionality that implied the user could design the lighting for a room. In fact, although you could add different types of lighting to a room, the room was predefined and you couldn't adjust important aspects (such as the position or number of windows). Although this gave users a good idea of the names used for different light fittings, no-one could use it to design the lighting for a room.

9. Make sure the site can be accessed by the partially sighted

Only one of the sites could be used by the partially sighted, even though it is very easy to achieve this (for example, by including "Alt" tags for images within the HTML code) and it also makes good commercial sense. Not only do the partially sighted represent a growing percentage of web buyers, but many users with normal vision may want to access your site with devices where they choose not to load images: for example, a WAP phone or a PDA. European legislation will soon require sites to be accessible: under a recent action plan prepared by the European Commission for the European Council, public sector web sites and their content must be designed to be accessible by people with disabilities. Outside Europe, you run the risk of being sued: for example, a complaint of discrimination was brought against the organisers of the Sydney Olympic Games by Bruce Maguire (a blind person) who claimed the official Olympics site was inaccessible to blind people. The Human Rights and Equal Opportunity Commission recently upheld his complaint and have ordered the Organising Committee to change the site or pay compensation. (For a simple way to check your own site for accessibility, use CynthiaSays).

10. Carry out usability testing

Until our work, none of these sites had been usability tested. Some sites were relatively new, but others had been in existence for some time. All of our clients were also under the erroneous impression that usability testing had to wait until the site was almost "live". In fact, usability testing is most beneficial when administered little and often as part of an iterative design cycle.
How to avoid these problems with your site
Perhaps your design agency insists its designs are usable as well as cutting edge. Perhaps it even carries out its own usability testing. In either case, we recommend you make your own measurements of usability, either by building your own resource in-house or by using an external consultancy. This resource then provides independent quality assurance before your site goes live.

For more information about our usability testing services, please contact us.