useit.com Alertbox May 1999 New Top-10

Jakob Nielsen's Alertbox, October 3, 1999:

• the original top-ten mistakes of Web design
• the top-ten new mistakes of Web design
• the top-ten mistakes of Web project management

Of course, articles that list 30 mistakes can be seen as constructive criticism and a prescription for 30 things to do in a Web project: design to avoid each of the mistakes!

Here's a list of ten additional design elements that will increase the usability of virtually all sites:

1. Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page).
2. Provide search if the site has more than 100 pages.
3. Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing.
4. Structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance: for example, use grouping and subheadings to break a long list into several smaller units.
5. Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them.
6. Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need. This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot.
7. Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.
8. Use link titles to provide users with a preview of where each link will take them, before they have clicked on it.
9. Ensure that all important pages are accessible for users with disabilities, especially blind users.
10. Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site. Remember Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works.

Finally, always test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing.

See Also: Complete list of other Alertbox columns

useit.com Alertbox May 1999 New Top-10

Jakob Nielsen's Alertbox, May 2, 1999:

Even discounting the possibility that some people have read the article more than once, a readership of 400,000 means that the "top ten mistakes" have been read by less than 10% of the people responsible for the world's five million websites. So most of these mistakes are still being made and I still recommend that new Web designers read my old article.

Are the Mistakes Still Wrong?

Mistake	Current Analysis	Score
1. Frames	Frames are no longer the disaster they were in 1995 and early 1996 due to some advances in browser technology: Netscape fixed the Back button with version 3, and since virtually nobody uses version 1 and 2 any more, this means that users can now navigate through frames with fewer problems. Version 4 reduced the problems printing frames (though users still often get a different printout than they expected), and Internet Explorer 5 has finally regained the ability to bookmark pages despite the use of frames. Frames still prevent users from emailing a recommended URL to other users and they also make the page more clumsy to interact with.	Medium
2. Bleeding-edge technology	If anything, users have less patience for bleeding-edge technology these days as the Web gets dominated by later adopters and the upgrade speeds for new browsers and plug-ins slow down. Users who encounter as much as a single JavaScript error usually leave a site immediately. It's just not worth the time to figure out how to make something work when there are 5 million other sites to go to.	Very Severe
3. Scrolling text and looping animations	It is as hard as ever to read scrolling text, but aggressive use of distracting animation now causes even more problems than in 1996: users have started equating such designs with advertising which they routinely ignore. These days, it is extremely important for any content and navigation elements to look very different than prevailing advertising designs since users tune out anything that they don't think will be relevant to their task.	Very Severe
4. Complex URLs	Users pay less attention to URLs these days than they did in the early days of the Web. Since most sites now have navigation support, users are also relying less on the URL to tell them about their location on the site. But long URLs still cause problems when users email page recommendations to each other.	Severe
5. Orphan pages	Less likely to make users stuck since most people have learned the trick to get to the home page of a site by "hacking" the end off the URL. Still a disaster for novice users; still annoying for experienced users.	Medium
6. Scrolling navigation pages	90% of users used not to scroll navigation pages but simply pick from the visible options. This has changed since most Web users now know that pages scroll and that important links sometimes are not visible "above the fold." Even so, the visible options still dominate and users sometimes overlook alternatives lower down the page. This is particularly bad if the visible part of the page seems to clearly communicate a certain purpose or a certain best approach: users may then happily conclude that they know what to do and not bother spending time on the rest of the page.	Smaller Problem
7. Lack of navigation support	Rarely seen, but a problem when it occurs. People are now getting used to certain canonical navigation elements such as a site logo in the upper left corner (linked to the home page) or a clear indication of what part of the site the current page belongs to (linked to the main page for that section). So if these elements are missing, users feel lost.	Severe
8. Non-standard link colors	Continues to be a problem since users rely on the link colors to understand what parts of the site they have visited. I often see users bounce repeatedly among a small set of pages, not knowing that they are going back to the same page again and again. (Also, because non-standard link colors are unpleasantly frequent, users are now getting confused by any underlining of text that is not a link.)	Severe
9. Outdated information	Worse now since so many other sites on the Web are continuously updated. Also, with the growth in e-commerce, trust is getting increasingly important, and outdated content is a sure way to lose credibility. (Note that archival information and information about old products are plusses and very different from outdated information.)	Very Severe
10. Slow download times	Contrary to many Internet pundits' pronouncements, the bandwidth problem has not been solved during the last three years; nor will it be solved during the next three years. Not until 2003 will high-end users have sufficient bandwidth for acceptable Web response times. Low-end users have to wait until about 2008.	Very Severe

I conclude that:

• All ten mistakes from 1996 are still mistakes in 1999
• Nine of the ten mistakes still cause significant usability problems and should be avoided in modern websites
• Scrolling navigation pages cause fewer usability problems these days and can be allowed if caution is taken in their design (any time you have overly long navigation pages, I would take it as a warning signal and as a requirement for usability testing)

See Also: List of other Alertbox columns

useit.com Alertbox May 1999 New Top-10

Jakob Nielsen's Alertbox, May 30, 1999:

But unfortunately new Web technology and new applications for the Web have introduced an entirely new class of mistakes. Here are the ten worst.

1. Breaking or Slowing Down the Back Button

Except, of course, for those sites that break Back by committing one of these design sins:

• opening a new browser window (see mistake #2)
• using an immediate redirect: every time the user clicks Back, the browser returns to a page that bounces the user forward to the undesired location
• prevents caching such that the Back navigation requires a fresh trip to the server; all hypertext navigation should be sub-second and this goes double for backtracking

2. Opening New Browser Windows

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

3. Non-Standard Use of GUI Widgets

The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Interaction consistency is an additional reason it's wrong to open new browser windows: the standard result of clicking a link is that the destination page replaces the origination page in the same browser window. Anything else is a violation of the users' expectations and makes them feel insecure in their mastery of the Web.

Currently, the worst consistency violations on the Web are found in the use of GUI widgets such as radio buttons and checkboxes. The appropriate behavior of these design elements is defined in the Windows UI standard, the Macintosh UI standard, and the Java UI standard. Which of these standards to follow depends on the platform used by the majority of your users (good bet: Windows), but it hardly matters for the most basic widgets since all the standards have close-to-identical rules.

For example, the rules for radio buttons state that they are used to select one among a set of options but that the choice of options does not take effect until the user has confirmed the choice by clicking an OK button. Unfortunately, I have seen many websites where radio buttons are used as action buttons that have an immediate result when clicked. Such wanton deviations from accepted interface standards make the Web harder to use.

4. Lack of Biographies

Yet many sites still don't use columnists and avoid by-lines on their articles. Even sites with by-lines often forget the link to the author's biography and a way for the user to find other articles by the same author.

It is particularly bad when a by-line is made into a mailto: link instead of a link to the author's biography. Two reasons:

• it is much more common for a reader to want to know more about an author (including finding the writer's other articles) than it is for the reader to want to contact the author - sure, contact info is often a good part of the biography, but it should not be the primary or only piece of data about the author
• it breaks the conventions of the Web when clicking on blue underlined text spawns an email message instead of activating a hypertext link to a new page; such inconsistency reduces usability by making the Web less predictable

5. Lack of Archives

Archives are also necessary as the only way to eliminate linkrot and thus encourage other sites to link to you.

6. Moving Pages to New URLs

7. Headlines That Make No Sense Out of Context

Headlines are often removed from the context of the full page and used in tables of content (e.g., home pages or category pages) and in search engine results. In either case the writing needs to be very plain and meet two goals:

• tell users what's at the other end of the link with no guesswork required
• protect users from following the link if they would not be interested in the destination page (so no teasers - they may work once or twice to drive up traffic, but in the long run they will make users abandon the site and reduce its credibility)

8. Jumping at the Latest Internet Buzzword

Push, community, chat, free email, 3D sitemaps, auctions - you know the drill.

But there is no magic bullet. Most Internet buzzwords have some substance and might bring small benefits to those few websites that can use them appropriately. Most of the time, most websites will be hurt by implementing the latest buzzword. The opportunity cost is high from focusing attention on a fad instead of spending the time, money, and management bandwidth on improving basic customer service and usability.

There will be a new buzzword next month. Count on it. But don't jump at it just because Jupiter writes a report about it.

9. Slow Server Response Times

Bloated graphic design was the original offender in the response time area. Some sites still have too many graphics or too big graphics; or they use applets where plain or Dynamic HTML would have done the trick. So I am not giving up my crusade to minimize download times.

The growth in web-based applications, e-commerce, and personalization often means that each page view must be computed on the fly. As a result, the experienced delay in loading the page is determined not simply by the download delay (bad as it is) but also by the server performance. Sometimes building a page also involves connections to back-end mainframes or database servers, slowing down the process even further.

Users don't care why response times are slow. All they know is that the site doesn't offer good service: slow response times often translate directly into a reduced level of trust and they always cause a loss of traffic as users take their business elsewhere. So invest in a fast server and get a performance expert to review your system architecture and code quality to optimize response times.

10. Anything That Looks Like Advertising

Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

• banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
• animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
• pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph). I don't want to ban pop-ups completely since they can sometimes be a productive part of an interface, but I advise making sure that there is an alternative way of using the site for users who never see the pop-ups.

See reader comments on this Alertbox, including several additional design mistakes that annoy people.

See Also: List of other Alertbox columns

useit.com Alertbox June 1997: Mistakes of Web management

Jakob Nielsen's Alertbox for June 15, 1997:

• Web management
• interaction design (navigation support, homepage layout, templates, search, etc.)
• content design (the actual writing on the pages, as well as the design of any other media types used to communicate content as opposed to site interaction)

Content will be the topic of many other columns; here I address some classic mistakes in managing the design of a website.

1. Not Knowing Why

Granted, these days, you need a website simply to be considered a professionally run organization (not being on the Web is like not having a fax machine: people think you are a fly-by-night). Thus, it is OK to make a "business-card site" with a small amount of corporate image building, directions to your various facilities, and the annual report and other investor information. However, doing so is not the most effective use of the Web, and a site along these lines should only be built as a result of an explicit decision not to invest in active use of the Web for business.

Most companies should start their web design project by finding out ways in which they can provide true customer value on their site. Give users benefits from spending time on your site, allow them to do business with you, and their money will follow.

2. Designing for Your Own VPs

3. Letting the Site Structure Mirror Your Orgchart

The site structure should be determined by the tasks users want to perform on your site, even if that means having a single page for information from two very different departments. It is often necessary to distribute information from a single department across two or more parts of the site, and many subsites will have to be managed in collaboration between multiple departments.

A classic sign of a mismanaged website is when the homepage has a button for each of the Senior Vice Presidents in the company. Remember, you don't design for your VPs, so it will be quite common that you can't tell them what "their" button is on the homepage.

4. Outsourcing to Multiple Agencies

Users get very annoyed when they move between pages on a site and find drastically varying designs at every turn. Consistency is the key to usable interaction design: when all interface elements look and function the same, users feel more confident using the site because they can transfer their learning from one subsite to the next rather than having to learn everything over again for each new page.

The best way to ensure consistency is to have a single department that is responsible for the design of the entire site. If this cannot be done, at least have a central group that oversees all design work and that is chartered to enforce a single styleguide. Even if the central group does not actually design any pages themselves, considerable consistency can be achieved if the various departments can turn to a single source of design advice. Even better: have the central design group maintain the templates and deliver updated and revised graphics as needed.

5. Forgetting to Budget for Maintenance

The Web currently changes so rapidly that a major redesign is needed at least once per year simply to avoid a completely outdated look and to accommodate changing user expectations. Additional maintenance is needed throughout the year to bring fresh content online, reorganize and revise old pages, and avoid linkrot.

If you have established a design styleguide and a set of page templates in order to avoid the inconsistencies mentioned under Mistake 4, you also have to budget for maintenance of these design resources. If the styleguide and templates do not evolve with changing needs, you will rapidly see design entropy set in and the site will fall apart. The most common example is the need for new stock graphics, new headerbars, new navigation buttons, or new icons. If you don't have an art director on standby for this type of requests, then the page developer who needed the new graphic will outsource it and the site's look-and-feel will start to diverge.

6. Treating the Web as a Secondary Medium

The only way to get great Web content is to have your staff develop the content for the Web first. Then, if you still have a need for printed collateral, transfer the text and images to a desktop publishing application and massage it into a form that is suited for print. Of course, your print materials will suffer from this procedure, so if you want great Web content and great brochures, you will have to have two teams develop two sets of content.

Content creators have been trained to develop linear content for traditional media: they have spent their entire careers doing so. They have to consciously push themselves to work differently than their natural approach to content, so unless you force your content developers to produce their material specifically for the Web, you will end up with substandard Web content

7. Wasting Linking Opportunities

If you are running a campaign with a certain theme, have it include a URL to a page that follows up on that theme. The payoff page should not be a copy of the ad (the customer presumably already read the ad before going to the Web), though a link to an online version of the ad might be appropriate to help users who go to the page without having seen the ad. Instead, use each medium for what it's good at. For example, a game company could use TV commercials to make people think that a game looks good and use the Web to allow them to play a simplified version of the game.

8. Treating Internet and Intranet Sites the Same

9. Confusing Market Research and Usability Engineering

Users are not designers: no matter how many focus groups you run, they cannot tell you how to design your navigation. Focus groups are great for getting information about users' current concerns and areas where they would like help, but they will rarely teach you how to reinvent the fundamental way you do business. Listening carefully to customers will often reveal frustrations that can turn into opportunities for improvement, but once you have an idea for an improvement, you must create a prototype design and try it out with users in a usability test to see whether it really works for them.

There are endless stories of customers who say in focus groups that they would love a certain feature, but who never use it once it is launched because it is too cumbersome, too expensive, or doesn't really meet their needs in real use. The point is that market research forms the starting point but has to be supplemented with usability engineering if you want a design that works when people try to use it.

You may commission a traditional market research firm to question thousands of customers to measure whether they like your website more or less than your competition. Once you know that your site scores, say, 5.6 and your worst competitor scores 5.9, you may know that you need to improve, but you will not know how to improve. Specific insights into the detailed design of your site and the parts that must change because they are confusing, slow users down, or do not match the way users want to work can be derived from watching four or five users as they actually use your site to perform real tasks. A day or two in the usability lab and you will have a long list of changes that will improve your design.

It is less common to find sites that only do user testing and never conduct any market research, but that would be a mistake too.

10. Underestimating the Strategic Impact of the Web

Ask your CTO and head of marketing what strategic thoughts they have relating to terms like "disintermediation", "virtual project teams", and "microtransactions." If they don't have any thoughts, they had better start thinking now - before it's too late. The Web enables completely new ways of doing business such as true globalization (for example, "work-around-the-clock", where projects are passed on to teams as the globe turns). If you don't grasp these new business opportunities you will be toast in a few years.

The two classic errors in predicting the future of a technology shift are to over-estimate its short-term impact and under-estimate its long-term impact. The Web has been hyped to such an extent that people overestimate what it can do the next year or two: most websites are not going to turn a profit any time soon. But please don't underestimate what will happen once we reach the goal of everyone, everywhere; connected. The impact of networks grows by at least the square of the number of connections, and the true value of the Web will be only be seen after extensive business process reengineering.

See also: List of other Alertbox columns