I typically focus my top-ten lists on issues that I think are the most important and most in need of attention. This time, I've used a different criterion: I've focused on the known usability principles that designers most frequently violate. Whether big or small, the very prevalence of these usability problems makes them worthy of attention.
The frequency statistics are based on the numerous homepage reviews that my company has performed since I published my book on homepage usability. This data source introduces a bias, because only big companies or government agencies with a substantial usability commitment will invest $12,000 to have an independent expert assess its homepage design. However, we can turn that bug into a feature: if companies with a demonstrated commitment to usability make certain mistakes, they must be particularly slippery pitfalls.
For each of the ten most frequent mistakes, I state the deplorably low percentage of homepages that follow the guideline. I've sorted the list by compliance rate: number one is the guideline that the fewest sites follow (that is, the mistake that's made most often).
I also list the guideline's number as it appears in the full guidelines list, in case you want to read more about it.
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 corporate image information on websites did find that most users could eventually dig up information about a company's purpose (sometimes in the "about us" section). 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. (In other words, with less to consider, people understand more of what's there.)
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.
I'll present my newest usability guidelines in the tutorial on Fundamental Guidelines for Web Usability at the annual Usability Week conference.
We cover the theory that explains why these things are wrong in the seminars on The Human Mind and Usability: How Your Customers Think and Principles of Interface Design.
Share this article: Twitter | LinkedIn | Google+ | Email