Web design is easy: If you are thinking about how to design a certain page element, all you have to do is to look at the twenty most-visited sites on the Internet and see how they do it.

  • If 80% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.
  • If 50-79% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability.
  • If less than 50% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way. Even so, if there are a few options, each of which are used by at least 20% of big sites, you should limit yourself to choosing one of these reasonably well-known designs unless your alternative design has at least 25% higher measured usability than the best of the choices used by the big sites.

Admittedly, the percentages in this list are my own best estimates. There is currently too little research on consistency theory to know exactly how many sites it takes for a certain design element to reach the level of a convention or a standard. Similarly, we don't know exactly how much it harms users to deviate from the two levels of expectations, though it is absolutely certain that it does hurt.

Therefore, I recommend following the conventions even in those cases where a different design would be better if seen in isolation. The fact is, no website is seen in isolation: users come to your site expecting things to work the same way they are already used to.

Information Architecture and Task Design: No Standards

Of course, the truth is that web design is difficult, because the main issues concern information architecture and task flow, neither of which can be standardized. Both vary greatly from site to site because they relate to the specific nature of the information and the problems the site is trying to support.

Some aspects of information architecture are starting to reach the level of a design convention: most corporate sites have a products category and an about the company category. Furthermore, the about the company area usually contains information for investors and job applicants as well as general information about the company's management and history. Maps and addresses for company facilities may also be found under about the company , but this cannot be considered a true convention because many sites employ a different information architecture with a special area for contact us . Since users will often expect to find an address under about the company , sites that put this information in a different area should include a cross-reference link from about the company to contact us .

(Update 2004: based on research with individual investors and financial analysts, we succeeded in defining a recommended IA for the investor relations area on corporate websites, because investors have the same needs across companies.)

Sample Design Conventions

The mother of bad web design conventions is the decision to make hypertext links blue. Other colors would have been a better choice and would have increased the reading speed of the anchor text by a few percent. It is unfortunate to put the most important text on the page in a color that is known to reduce readability.

If we were designing the Web from scratch, I would recommend using a different link color than blue. Since we are designing sites for the Web as it exists, I retain my recommendation to leave the standard link colors alone:

  • Blue text means "click here" on the Web, so by keeping unvisited links blue, there is no doubt in users' minds as to what they can do. The time they save by knowing what to do on a page is probably much bigger than the time they lose by having the few words in the hypertext anchors be a few milliseconds slower to read.
  • Even more important, knowing the difference between unvisited (blue) and previously visited (purple) links helps users understand the structure of the website and their own navigation history. On sites that change the colors, we often observe users revisiting the same pages again and again because they do not realize that they have already seen those pages. The added confusion, substantial navigation delays, and reduced probability of ever finding the right page are all very severe usability penalties from changing the default link colors.

Navigation Tabs

In the last two years, many sites have started placing a horizontal set of tabs across the top of the screen to indicate the main areas of their information architecture. In principle, this is a bad design and an abuse of the tab metaphor.

Tabs are supposed to be used for rapid switching between alternative views of the same information object. For example, a site may have a standardized information architecture for product descriptions, with an overview page, a detailed specification, enlarged photos, and several other views. It would be very appropriate to use tabs to switch between the alternatives while retaining the main context and illusion of being at a single location on the site.

Once users are deep inside a certain area of the site, tabs lose their meaning if they take users to another area of the site but do not preserve context in any meaningful ways. Such jumps are simply standardized navigation and should use a regular list of alternative links.

I maintain that tabs would be better used for switching between alternative (but related) views than for navigating to unrelated locations. But unfortunately, users will soon lose any understanding they may have had of tabs as a special design element if more and more sites keep abusing tabs.

I still think that less than 50% of sites use tabs in the (erroneous) meaning of navigating to the main sections of the site. Thus, I still think that the correct use of tabs is preferred and I recommend using different techniques to visualize the main areas of the site. But this may be a losing battle and I may have to revise this recommendation in a year or so if more and more sites adopt a misguided use of tabs.

Left-Justified Navigation Rail

The "Yellow Fever" design style was introduced by CNET (in 1996, I believe) and has since spread to so many sites that it has become a fairly strong convention: have a colored stripe down the left side of the page to contain the main navigation links.

I have never been a great fan of this design approach because the colored navigation rail takes up about 20% of the pixels on the screen, even after the user has scrolled to the bottom of the page. Navigation is a secondary concern for users who are on the Web for the content.

Interestingly, CNET itself abandoned the Yellow Fever in 1999 and now uses a design where the navigation links are concentrated on the top of the page, leaving the rest of the screen available for content. I like their new design better.

But there are still so many sites that use a colored navigation rail that I view it as an interaction convention: users know what to do with a colored stripe down the side of the page. It may waste pixels, but it probably helps users.

Two things that are absolutely clear is that the navigation rail has to have some kind of colored background to set it aside from the content and that it has to be on the left side of the page. There are a few usability reasons why it would have been better to have the navigation rail on the right side of the page:

  • Fitts' Law dictates that shorter mouse movements are better: it is always faster to click a target if it is closer to your starting position. Thus, placing the navigation rail next to the scroll bar will usually save users time over placing these two frequently-accessed areas on opposite sides of the window.
  • Users always look at the content first when they encounter a new web page, so it would be better if the content started at the left border of the window (for users in cultures that read left-to-right). After the users are done with the content, their gaze could naturally shift to the right to decide where to go next. In contrast, placing the navigation rail to the left requires users to skip over it before they can start scanning the content area.

If we were starting from scratch, we might improve the usability of a site by 1% or so by having a navigation rail on the right rather than on the left. But deviating from the standard would almost certainly impose a much bigger cost in terms of confusion and reduced ability to navigate smoothly.

Breadcrumb Trail

Many websites are starting to supply a breadcrumb trail across the top of the page to situate the current page relative to its parent nodes and to allow users to jump up several levels in a single click.

Breadcrumbs only work for sites with a hierarchical information architecture, but they do facilitate navigation in such sites. They would help even more if they were available on more sites so that users could get used to relying on them.

There is no standard for how to indicate the progression between the levels of the hierarchy in a breadcrumb trail. My own site has used an arrow for the last four years. Before then I used a colon, as currently used by CNET. Yahoo and ZDNet both use a > sign, and yet other sites use a slash. There is no standard and there is no real reason to believe that any of these symbols is much better than the others.

If a single symbol ever gained enough prominence to be used on more than 50% of the sites, then I would surely recommend using that. Right now, I would say that : > / and arrows are all equally good. But don't start using yet another symbol. For example, the vertical bar | is reserved for alternative choices and should not be used to indicate a progression.

(Update added 2003: I now recommend > as the breadcrumb separator, but it's still not sufficiently widely used to be considered a standard.)

Change to Definitions as of September 2003

From 1999 to 2003, my definition was that a design approach had to be used on at least 90% of sites to be deemed a de-facto standard. I have now relaxed the definition to count designs used on 80% of sites as de-facto standards.

Similarly, the definition of a convention used to be that something was found on at least 60% of sites. I have now changed this definition to include designs found on at least 50% of sites.

The reason for this change of my definition is that something really becomes the expected design when it's the majority, meaning that it's found on at least 50% of sites. For something to be strongly expected (that is, a de-facto standard), it seems that 80% is a better level than 90%.

Update 2004

Read my 2004 article The Need for Web Design Standards for an updated view of these issues.