03 June, 2008

The Ten Most Violated Homepage Design Guidelines

1. Emphasize what your site offers that's of value to users and how your services differ from those of key competitors

Compliance rate: 27%
Guideline number in Homepage Usability book: 3

This is one of the most important issues in homepage design, so it's particularly sad that it's the least followed of all the guidelines. Websites are incredibly bad at explicitly stating what they offer users. Instead, they hide their offerings in generic marketese that makes very little impression on prospective customers.

Remember: when users have needs, they typically query search engines and allocate only a few seconds to scan each of the sites that the search engine drags up.

2. Use a liquid layout that lets users adjust the homepage size

Compliance rate: 28%
Guideline number in Homepage Usability book: 67

Fighting frozen layouts seems a lost battle, but it's worth repeating: different users have different monitor sizes. People with big monitors want to be able to resize their browsers to view multiple windows simultaneously. You can't assume that everyone's window width is 800 pixels: it's too much for some users and too little for others.

3. Use color to distinguish visited and unvisited links

Compliance rate: 33%
Guideline number in Homepage Usability book: 37

Knowing where you've been is one of the three basic features that all navigation designs should support. (The other two are "Where am I?" and "Where can I go?")

It's sad that only a third of corporate homepages tell users at a glance which site areas they've already seen. Navigational confusion results when designers disable one of the few useful features of a standard Web browser: having visited and unvisited links appear in different colors. Our testing has shown that violating this guideline is particularly harmful for elderly users.

> More on changing link colors

4. Use graphics to show real content, not just to decorate your homepage

Compliance rate: 35%
Guideline number in Homepage Usability book: 56

For example, use photos of people who have an obvious connection to the content as opposed to using models or generic stock photos. People are naturally drawn to pictures; gratuitous graphics can distract users from critical content.

Stock photography sellers are doing a brisk business, but users don't believe that your product will make them happy just because there's a smiling lady on your homepage. Better to show your actual product.

5. Include a tag line that explicitly summarizes what the site or company does

Compliance rate: 36%
Guideline number in Homepage Usability book: 2

Our recent study of how people use "about us" information on websites did find that most users could eventually dig up information about a company's purpose. But why do most sites make prospects work so hard?

In keeping with most advertising slogans, content-free tag lines abound. Once you've paid millions to get a useless slogan developed, it's probably hard to accept that it won't work for your website.

I suggest a compromise: put the useless slogan in a graphic banner next to your logo, where it will be ignored. Then add a true tag line in plain-text format in the content area where people will actually see it.

6. Make it easy to access anything recently featured on your homepage

Compliance rate: 37%
Guideline number in Homepage Usability book: 33

For the Alertbox, 80% of the readership happens after a column has passed from the homepage into the archives. In general, users remember when they've seen something interesting on a homepage. However, unless that homepage lists recent features and offers links to them in the archive, users will never be able to find what they're looking for on subsequent visits.

7. Include a short site description in the window title

Compliance rate: 39%
Guideline number in Homepage Usability book: 75

This is mainly important for search engine visibility, but why not take advantage of this superior -- and cheap -- form of Internet marketing?

8. Don't use a heading to label the search area; instead use a "Search" button to the right of the box

Compliance rate: 40%
Guideline number in Homepage Usability book: 49

This is a small point, but there's no reason to label the search box if there's a "Search" button right next to it. Interaction design's less is more principle tells us that extra elements in a dialogue distract users from the salient points and reduce their ability to understand an interface.

9. With stock quotes, give the percentage of change, not just the points gained or lost

Compliance rate: 40%
Guideline number in Homepage Usability book: 110

This guideline only applies to sites that provide stock quotes, either in the investor relations information or elsewhere. With stock quotes, the general principle is to help users understand the relative magnitude of a change, and thus its true importance. (A similar guideline applies to presenting other statistics that change over time.)

A stock increase of $0.75 means very different things if the starting price was $8 (a booming 9% leap) versus $60 (a modest 1% gain).

10. Don't include an active link to the homepage on the homepage

Compliance rate: 41%
Guideline number in Homepage Usability book: 43

This is a special case of a guideline that applies to all website or intranet pages: never have a link that points to the current page. (A button to refresh stock quotes or other changing information is a different matter, and should be presented as a command button rather than a navigation link since it doesn't lead to a new location.) Active links to current pages cause three problems:

• If they click it, a link leading to the current page is an utter waste of users' time.
• Worse, such links cause users to doubt whether they're really at the location they think they're at.
• Worst of all, if users do follow these no-op links they'll be confused as to their new location, particularly if the page is scrolled back to the top.

Homepage links on the homepage typically result from using a universal navigation bar that includes "home" as an option. Fine. But when users are on a page that's featured in the navbar, you should turn off that option's link and highlight it in such as way that indicates that it's the current location.