1. No search function
Guilty party: NBA
A usability study 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 with regularly updated content.
NBA's website is truly enormous. Indeed, Google has listed almost 100,000 pages from this website alone. With a website this large and with such regularly updated content, it's truly remarkable that a search function isn't provided to enhance its usability.2. Massive download time
Guilty party: ESPN
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). 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.
3. Non-scanable text
Guilty party: Boeing
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. When we scan web pages certain items stand out:
- Headings
- Link text
- Bold text
- Bulleted lists
Unfortunately, Boeing didn't seem to think about the usability of their online news items and press releases when they wrote them. They do use short paragraphs, which is good for web usability, but they haven't used any of the items from the above list.
4. Unclear link text
Guilty party: Real Player
One of the most frequently asked questions we ask ourselves on any website is, "Where can I go?" As such, for optimal website usability it has to be instantly obvious what's a link and what isn't. I've labeled eleven different areas on a screenshot from the RealPlayer website below. Which ones 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 and lowering your site's usability, you can follow three basic rules:
- Don't make non-link text a different colour - instead bolden or enlarge it to make it stand out
- Graphic-based links should be adjacent to text-based-links or have text embedded in them
- A graphic referring to and adjacent to a text-based link should be a link too
5. Poor 404 error page
Guilty party: Monster
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 usability 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 no one's to blame for them being there
- 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. 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
In addition to web users wanting to know where they can go (see ‘4. Unclear link text’ above), they also need to know where they've already been. Websites usually show them 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 and reduce usability, sponsored listing links are purple, the colour normally associated with visited links!
7. Frames used
Guilty party: Ocado
Ocado is the online branch of Waitrose, a nationwide UK supermarket. It's a relatively new website which makes it surprising that it uses such an old-school technique as frames. Frames have the following usability problems associated with them:
- Pages can be unprintable
- Pages can't be bookmarked nor their URL e-mailed
- 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
The main- and sub-navigation links in the Ford website are never disabled, even when they're pointing to the current page. Clicking on a link that takes them back to the same page can cause the following usability problems for site visitors:
- 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
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 website, capturing 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 between the text appearing and the last image to download and render. So, I have to wait 13 more seconds after I've already waited for the page to even appear. And I have to wait, because nearly all the useful information is contained in the images! Good usability? I think not!
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 and therefore legible when the page initially appears. 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
Never go against design conventions! As the Internet has evolved we're become used to certain conventions. The organisation logo is in the top-left corner 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 usability effects 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 website. 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
So all-in-all, it looks like even the big players' websites are suffering from major web usability problems. Surprising really considering they undoubtedly have very large budgets assigned to developing their websites. If only they'd allocate some of that budget towards usability testing...
This article was written by Trenton Moss, founder of Webcredible. He's extremely good at web accessibility training and knows an awful lot about the Disability Discrimination Act.