By: Trenton Moss

July 26th, 2004

Reader Rating: 9

Web usability is about creating your Website in such a way that your site users can find what they're looking for quickly and efficiently.

In March 2003, Philippe Randour pointed out the Top 7 Usability Blunders Of The Big Players [1] here on SitePoint.

Since then, Web usability practices have become even more commonplace, and knowledge of the many Web usability benefits [2] has become more widespread. The big players must surely have improved since then, right? Let's find out...

1. No Search Function

Guilty party: NBA [3]

A usability study [4] by Jakob Nielson found that more than half of all users are search-dominant and will usually head straight for the search function. This is especially true on large Websites that update their content regularly.

The NBA's Website is truly enormous. Indeed, Google has listed almost 100,000 pages [5] from this Website alone. With a site this large -- and with such regularly updated content -- it's truly remarkable that a search function isn't provided.

2. Massive Download Time

Guilty party: ESPN [6]

The ESPN Website takes a mammoth 72 seconds to fully download and render on a regular 56k dial up modem (used by three in four UK Internet users [7]). The total file size of the homepage is a whopping 304kb and is made up of:

• HTML document - 84kb
• Images - 119kb
• External JavaScript documents - 126kb
• External CSS document - 13kb

Additionally, the ESPN homepage makes 54 HTTP requests, pushing up the download time by almost 11 seconds (each HTTP request increases the download time by 0.2 seconds). You can check the download time for any Web page with the Web Page Analyzer [8].

3. Non-scannable Text

Guilty party: Boeing [9]

We read Web pages in a different manner to the way we read printed matter. We generally don't read pages word-for-word – instead, we scan [10]. When we scan Web pages, certain items stand out:

• Headings
• Link text
• Bold text
• Bulleted lists

Unfortunately, Boeing didn't seem to realise this when they wrote their online news items and press releases. They do use short paragraphs, which are good, but they haven't used any of the items from the above list.

4. Unclear Link Text

Guilty party: Real Player [11]

One of the most frequently asked questions of any Website is, "Where can I go?" As such, it has to be instantly obvious what are links and what aren't. I've labeled eleven different areas on a screenshot from the RealPlayer Website below. Which do you think are links (answers below)?

1, 3, 4, 6, 7 and 11 are links, and 2, 5, 8, 9 and 10 aren't. How many did you get right? To avoid confusing site visitors in this way, you can follow three basic rules:

• Non-link text should be made bold or enlarged so that it stands out -- don't make it a different colour.
• Graphic-based links should be adjacent to text-based-links or have text embedded in them.
• A graphic that refers to, and is adjacent to, a text-based link should be a link itself.

5. Poor 404 Error Page

Guilty party: Monster [12]

404 error pages can occur when users:

• Follow a link to a page that no longer exists or has been moved
• Enter the URL of a page that no longer exists or has been moved
• Type in an incorrect URL

When users receive a 404 error message, they may be unclear as to what's happened and what they should do next. Some good 404 error page guidelines include:

• Don't call it a 404 error –- Web users are unlikely to know what this means.
• Communicate what has gone wrong -- Make sure users understand what's going on and that they haven't made a mistake or misused the site.
• Provide a call to action -- Include a search function and links to the homepage, site map, and most popular pages.

Type in a URL for a page on Monster that you're sure doesn't exist, for example, http://www.monster.com/whereisthe404.html [13]. At least they're considerate enough to provide a back link on the 404 page, in case you forget where the back button is!

6. Visited Links Not Shown

Guilty party: About [14]

As well as wanting to know where they can go (see '4. Unclear link text' above), Web users also need to know where they've already been. Websites usually achieve this by changing the colour of links that have been visited, most commonly from blue to purple.

The About Website is basically a huge directory of information about pretty much everything. It's very likely you're going to be looking at a lot of different pages on this site, so how do they expect us to remember which pages we've already been to? To further confuse users, sponsored listing links are purple, the colour normally associated with visited links!

7. Frames Used

Guilty party: Ocado [15]

Ocado is the online branch of Waitrose, a nationwide UK supermarket. It's a relatively new Website, so it's surprising that it uses such old-school techniques as frames. Frames have the following usability problems associated with them:

• Pages can be unprintable
• Pages can't be bookmarked, nor their URLs emailed
• The back, refresh and history buttons can become disabled
• Visited links across frames don't change colour

8. Links Point to the Current Page

Guilty party: Ford [16]

The main- and sub-navigation links in the Ford Website are never disabled, even when they're pointing to the current page. If site visitors click on a link that takes them back to the same page:

• It wastes their time.
• They may doubt whether they were really at the location they thought they were at.
• They may become confused, particularly if the page is scrolled back to the top.

9. Important information contained in images

Guilty party: AOL [17]

AOL still haven't realised that not everyone is hooked up to broadband. Take a look at their homepage:

As you may have realised by now, text downloads and renders on the screen first, followed by images. There can sometimes be a sizable time gap between the text and the last graphic appearing on-screen, especially for those graphics towards the right and bottom of the screen. Have a look at this screenshot of the AOL site, which captures how it looks when it first appears on the screen:

Overall, there are 13 images on the AOL homepage, with a total file size of 53kb. As such, it takes 13 seconds from the appearance of text to the download and render of the last image. So, I have to wait 13 more seconds after I've already waited for the page even to appear. And I have to wait, because nearly all the useful information is contained in the images!

The small amount of important information marked up through regular HTML, mostly located near the bottom of the screen, is illegible as you have to wait for its navy blue background to display. If AOL really felt this background with its nice gradient was absolutely necessary, they could have assigned the area a background colour of navy blue (in addition to the image). That way, the text would be in front of this background, so it would be legible when the page initially appeared. A few seconds later, the navy blue background image would be downloaded and rendered over the flat background.

10. Unique Scrolling System

Guilty party: BMW [18]

Never go against design conventions! As the Internet has evolved we've become used to certain conventions. The organisation logo appears at the top-left corner of a page and links back to the homepage. When we wish to purchase items, we place them in our shopping cart. And when we scroll, we place our mouse on the scrollbar on the right-hand side of the screen.

Going against design conventions can have dire implications for any Website. Web users generally won't be motivated to learn how to use the unique functions on a Website, as they tend to spend a very small proportion of their time on the Internet on any one site. This is why BMW's site visitors are likely to have difficulty using their crazy navigation menu. Go to the BMW Website and mouse over the 'Go local' section. Do you see those tiny arrows in the top- and bottom-right of the box? You're supposed to use those to scroll through the list.

Conclusion

All-in-all, it looks like the big players' Websites still suffer from major usability problems.

It's surprising, really, considering they undoubtedly have very large budgets assigned to site maintenance and development. If only they'd allocate some of that budget to user testing...

[1] http://www.sitepoint.com/article/blunders-big-players/
[2] http://www.optimalusability.com/quotes.php
[3] http://www.nba.com/
[4] http://www.useit.com/alertbox/9707b.html
[5] http://www.google.co.uk/search?hl=en&ie=UTF-8&oe=UTF-8&q=site:nba.com&btnG=Search&meta=
[6] http://www.espn.com/
[7] http://www.statistics.gov.uk/pdfdir/intc0504.pdf
[8] http://www.websiteoptimization.com/services/analyze/
[9] http://www.boeing.com/news/releases/2004/q2/nr_040429i.html
[10] http://www.useit.com/alertbox/9710a.html
[11] http://www.realplayer.com/
[12] http://www.monster.com/
[13] http://www.monster.com/whereisthe404.html
[14] http://www.about.com/
[15] http://www.ocado.com/
[16] http://www.ford.com/
[17] http://www.aol.com/
[18] http://www.bmw.com/