Jakob Nielsen's Alertbox, December 22, 2003:

Top Ten Web Design Mistakes of 2003

Summary:
Sites are getting better at using minimalist design, maintaining archives, and offering comprehensive services. However, these advances entail their own usability problems, as several prominent mistakes from 2003 show.

Here's my list of ten ways that websites have been particularly annoying recently.

1. Unclear Statement of Purpose

Many companies, particularly in the high tech industry, use vague or generic language to describe their purpose. Obscuring this basic fact makes it much harder for users to interpret a website's information and services.

A strong mental model can grow from small seeds, as each additional design element adds to the user's existing understanding of a site. However, many sites create blurry mental models in users' minds because they fail to offer the one hard fact that users need to place other facts in their proper context.

2. New URLs for Archived Content

Archives add substantial value to a site with very little extra effort. Although more and more sites are archiving old content, most sites still fail to maintain good archives. Some sites treat archives as a separate site area, assigning pages new URLs when they move them from the main area into the archive.

Changing the URL when archiving content causes linkrot. It also makes other sites reluctant to link to you. Although sites might consider linking to a current article, if they've been burned by linkrot in the past, they'll often pass you by because they don't want to bother with having to update their own pages when you move yours.

3. Undated Content

Without dates on articles, press releases, and other content, users have no idea whether the information is current or obsolete. It's great to keep content in archives. The Alertbox, for example, gets 80% of its readership for old columns, which readers continue to find useful. But some facts and recommendations are strongly date-dependent, such as when I recommend using a certain version of a software package for another two years. Obviously, I mean two years from the day the article was written; if readers can't see the date, they won't know how to follow the recommendation.

A user confronted a similar error in our recent test of how investors and business journalists use the investor relations areas of corporate websites. The user found a news item through a site's search engine and used the item to evaluate the company's current business prospects. Fine, except that the item was a few years old. The search engine had listed a misleading date for the article -- probably the data that the file was moved or had a typo fixed.

The search engine on my own site has the same problem: it relies on the operating system's file-modification date rather than the date the content was written. As a result, I've shut off the date feature in the search result listings. Such dates can be very useful, but they do more damage than good if users can't trust them. Of course, the ideal solution is to get a content management system that feeds the authoring date to the search engine. Any big site with an IT staff should do so.

4. Small Thumbnail Images of Big, Detailed Photos

It's great that websites are now using smaller pictures. Avoiding the bloated designs of the past decreases download time and increases information richness. It's also good when sites link small pictures to bigger pictures, so users have the option of seeing the image in more detail.

The main problem here is that websites typically produce small images by simply scaling down bigger images. If an original photo has a lot of intricate detail, the thumbnail is often incomprehensible.

Thumbnail from the White House website     Thumbnail from CNN's homepage

The left photo is from the whitehouse.gov site. It shows the U.S. President, the Secretary of the Interior, and the Director of the National Park Service walking in the Santa Monica mountains. If I hadn't told you that, you wouldn't have known by looking at the thumbnail: It's just a photo of three people. You can't even really tell that they're in a park, let alone which one.

The right photo is from cnn.com, which usually does a great job with small images on the homepage. This photo illustrated a story about flooding; in this case, you can clearly see what's going on, even though the image is only 65 x 49 pixels.

When using photos on the Web:

5. Overly detailed ALT Text

Many sites have begun paying attention to users with disabilities and are following accessibility guidelines, such as including ALT texts for images.

Unfortunately, some sites don't realize that ALT text is a user interface element, not a statement of political correctness. ALT text should help blind users (and others who can't see images) navigate and operate the site. The text should describe the image's meaning for the interaction and what users need to know about the image to use the site most effectively. There is no need to describe irrelevant visual details.

For example, I came across a site that used the following ALT text for its logo: "Link to home page using the IDEAS logo: two swooshes surround ideas and a sun is rising in the background." It might be reasonable to have a textual description of the logo design somewhere on the site for blind users who are curious about how it looks, but there is no reason for every user's screen reader to announce the number of swooshes in the logo on every single page view.

It takes a screen reader a long time to read out nineteen words, and the excessive description makes it harder for users to pick out the salient information: that the graphic is a link to the homepage.

Short is good when writing for the Web; it's even better when writing for screen readers.

6. No "What-If" Support

Comparing and choosing between alternatives is the basis for most critical Web tasks, yet most websites don't support users who want to consider alternatives.

What if I want to travel out Sunday instead of Saturday? How would that affect the price of my airline ticket? On most travel sites, the only way to answer this question is to start again from the first screen and plan an entirely new trip, losing all the work required to build your first itinerary.

What if I want a color copier instead of a monochrome one, but I'm satisfied with all the other attributes of the monochrome copier I'm currently viewing? Can I navigate by attribute and change only one parameter? Usually not.

Some websites do let users pick out a few products and view a comparison table, but such tables typically have low usability and don't highlight the most important differences between products.

7. Long Lists that Can't Be Winnowed by Attributes

It used to be that Web sites offered one or two things. Now it's common to find sites with thousands or millions of items. Wonderful, but that means that item listings are often very long and hard to use.

One of the main usability guidelines for category pages is to let users winnow items according to attributes of interest. To "winnow" a list basically means to filter out elements that don't meet specified criteria, leaving a shorter list that's easier to manage and understand.

Useful winnowing requires four things.

8. Products Sorted Only by Brand

Sites that offer many items ought to provide winnowing and sorting, which is a highly useful way to deal with lists and is fortunately fairly common. Unfortunately, many sites only let users sort items by brand. So you can find, say, all Armani products, but not all red sweaters. To support sorting by attributes of interest to users, the obvious first question is "What attributes do users value?" The answers will differ by product category, but user research can help you discover them, as can a good sales person.

9. Overly Restrictive Form Entry

Put the burden on the computer, not the human: let users enter data in the format they prefer. Two common ways of unfairly restricting users:

Restrictive data entry also causes internationalization problems, because the one, sacred format that the computer will accept often ends up excluding customers from other countries.

10. Pages That Link to Themselves

This point was discussed in detail as item #10 on my list of ten most violated homepage guidelines, but it's important for all pages, not just homepages.

Web Usability: Two Steps Forward, One Step Back

Many of this year's top design mistakes actually indicate a happy phenomenon: we are making progress in Web usability. Now that sites are doing certain things correctly, we get hit by second-order phenomena that only cause problems because users have progressed past the first-order issues.

For example, the question of good or bad ALT text only arises for sites that care enough about accessibility to have any ALT text. Other top mistakes this year derive from sites that target fast downloads by reducing image size, that maintain good archives, or that have a broad product selection. All are positive design directions, but attention to details is required to achieve optimum usability impact.

Earlier Top-Ten Lists

Most of the following top-ten lists are still highly relevant for today's websites. Even as we get new mistakes, the old ones don't go away, though (happily) they do become less common.

Prioritizing Mistakes for 2004

At this point, I've literally published more than a thousand Web usability guidelines. Assuming that not all sites can do everything, which guidelines are most important? This question is the topic of a new research project in which we'll test Web users' behavior in broad terms to see which usability issues hurt and help users the most. We'll be presenting the results at my Web Usability 2004 seminars in the U.S., Europe, and Australia in April and May.


> Other Alertbox columns (complete list)
> Subscribe to newsletter that will notify you of new Alertboxes