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 date 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.
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:
- Include fewer people and objects, in less complicated settings than you would for photos intended for print
- Emphasize close-up shots with clean backgrounds
- Use relevance-enhanced image reduction when preparing small photos from big ones. Don't just resize; first crop the image to focus on a salient and simple element
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.
- The site must support winnowing in the first place, and most don't.
- The winnowing attributes must make sense to users rather than being highly technical or company-internal (say, using part numbers, even though they may be offered for search if customers know exactly what they want).
- Criteria should differentiate products of interest from those the user wants to ignore. Examples:
- Show only products that can be delivered by Christmas Eve.
- Show only shoes that are available in size 10 extra-wide.
- Finally, of course, the user interface that controls the winnowing process must be simple so that users can focus their attention on attributes and listings, not on the mechanics of operating the site.
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:
- Picky, overly specific forms. Splitting what users see as a single piece of information into multiple fields means that users must waste time moving the cursor around. A typical example is when forms ask users for their first and last names as two items, rather than simply letting users enter their full name in a single field, which is much faster to type. Another example is:
- Human formatting prohibited. Any text entry field that requires users to type information in a specific way rather than allow the natural variations that humans prefer can be irritating. Many sites, for example, force users to enter credit card numbers as 1234567890123456, rather than letting them put spaces between groups of four digits, which significantly reduces the risk of errors. Similarly, some sites won't let users enter a phone number with parentheses around the area code, even though many people are used to such parentheses. Our testing has shown that senior citizens are particularly harmed when a website's format is different than a format they've grown accustomed to over many years of use.
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.
Revising Mistakes for 2004
My newest findings about the applicability of past usability guidelines in 2004 will be presented in my keynote at the User Experience 2004 conference in Las Vegas and Amsterdam.
> Other Alertbox columns (complete list)
> Subscribe to newsletter that will notify you of new Alertboxes