03 June, 2008

Top Ten Guidelines for Homepage Usability

Make the Site's Purpose Clear: Explain Who You Are and What You Do


1. Include a One-Sentence Tagline

Start the page with a tagline that summarizes what the site or company does, especially if you're new or less than famous. Even well-known companies presumably hope to attract new customers and should tell first-time visitors about the site's purpose. It is especially important to have a good tagline if your company's general marketing slogan is bland and fails to tell users what they'll gain from visiting the site.


2. Write a Window Title with Good Visibility in Search Engines and Bookmark Lists

Begin the TITLE tag with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."


3. Group all Corporate Information in One Distinct Area

Finding out about the company is rarely a user's first task, but sometimes people do need details about who you are. Good corporate information is especially important if the site hopes to support recruiting, investor relations, or PR, but it can also serve to increase a new or lesser-known company's credibility. An "About " section is the best way to link users to more in-depth information than can be presented on the homepage. (See also my report with 50 guidelines for the design of "about us" areas of corporate websites.)


Help Users Find What They Need


4. Emphasize the Site's Top High-Priority Tasks

Your homepage should offer users a clear starting point for the main one to four tasks they'll undertake when visiting your site.


5. Include a Search Input Box

Search is an important part of any big website. When users want to search, they typically scan the homepage looking for "the little box where I can type," so your search should be a box. Make your search box at least 25 characters wide, so it can accommodate multiple words without obscuring parts of the user's query.
(Update: Based on more recent findings, my recommendation is now to make the search box 27 characters wide. This and other new guidelines are covered in my tutorial on Fundamental Guidelines for Web Usability at the Usability Week 2008 conference in New York, San Francisco, London, and Melbourne.)


Reveal Site Content


6. Show Examples of Real Site Content

Don't just describe what lies beneath the homepage. Specifics beat abstractions, and you have good stuff. Show some of your best or most recent content.


7. Begin Link Names with the Most Important Keyword

Users scan down the page, trying to find the area that will serve their current goal. Links are the action items on a homepage, and when you start each link with a relevant word, you make it easier for scanning eyes to differentiate it from other links on the page. A common violation of this guideline is to start all links with the company name, which adds little value and impairs users' ability to quickly find what they need.


8. Offer Easy Access to Recent Homepage Features

Users will often remember articles, products, or promotions that were featured prominently on the homepage, but they won't know how to find them once you move the features inside the site. To help users locate key items, keep a short list of recent features on the homepage, and supplement it with a link to a permanent archive of all other homepage features.


Use Visual Design to Enhance, not Define, Interaction Design


9. Don't Over-Format Critical Content, Such as Navigation Areas

You might think that important homepage items require elaborate illustrations, boxes, and colors. However, users often dismiss graphics as ads, and focus on the parts of the homepage that look more likely to be useful.


10. Use Meaningful Graphics

Don't just decorate the page with stock art. Images are powerful communicators when they show items of interest to users, but will backfire if they seem frivolous or irrelevant. For example, it's almost always best to show photos of real people actually connected to the topic, rather than pictures of models.