Homepage Usability By Nielsen & Tahir

Communicating the Site's Purpose        Show the logo Include a tag line Emphasize your site’s value Emphasize high priority tasks Designate one home page Use “website” appropriately Differentiate the home page design

Communicating Information About Your Company       Group corporate info in one area Include an “About Us” link For press coverage, include a “Press Room” link Present a unified face Include a “Contact Us” link Explain your “feedback” mechanism

Communicating Information About Your Company (cont.)    Don’t include internal company info Include a “Privacy Policy” link Explain how the website makes money

Content Writing        Use customer-focused language Avoid redundant content Don’t use clever phrases and lingo Use consistent style Don’t use superfluous labels Avoid single-item categories and lists Use non-breaking spaces when necessary

Content Writing (cont.)      Use imperative language for tasks Define abbreviations and acronyms Avoid exclamation marks Use uppercase letters sparingly Avoid inappropriate use of space and punctuation

Revealing Content Through Examples     Use examples to reveal content For each example, use a pinpoint link Provide a link to a broader category Clearly distinguish these links

Archives and Accessing Past Content  Make it easy to access anything that has been recently featured on the homepage

Links       Differentiate links and make them scannable Don’t use “Click Here” as a link Don’t use generic “More…” as a link Use visited and unvisited link colors Don’t use “Links” to label links Identify non-web page links

Navigation     Locate the primary navigation area in a highly noticeable place Group similar items together Don’t provide multiple navigation areas for the same type of links Don’t include an active link to the home page

Navigation (cont.)    Don’t use made-up words for navigation categories If you have a shopping cart, include a link to it Use icons for navigation sparingly

Search       Provide an input box Make the input box wide enough Use a “Search” button to the right of the box Provide a link to an advanced search Search the entire site by default Don’t offer a “Search the Web” feature

Tools and Task Shortcuts    Offer direct access to high-priority tasks Don’t include unrelated tools Don’t reproduce browser functionality

Graphics and Animation        Use graphics to show content Label unclear graphics and photos Edit photos and diagrams appropriately Avoid watermark graphics Don’t use gratuitous animation Never animate critical elements Let users choose to see animated intro

Graphic Design       Limit font styles and text formatting Use high-contrast text and background Avoid horizontal scrolling at 800x600 Critical elements should be “above the fold” Use a liquid layout Use logos judiciously

UI Widgets    Never use dropdown menus, selection lists, text boxes, etc. for parts of the screen that you don’t want people to click Avoid using multiple text entry boxes on the homepage Use drop-down menus sparingly

Window Titles      Begin with information-carrying word Don’t include the top-level domain name, e.g., “.com” Don’t include “homepage” Include a short description, maybe the tag line Limit titles to 7 or 8 words

URLs     Company web address should be www.company.com

Use foreign country’s top-level domain name if appropriate Try to register alternate spellings of site name Redirect alternate spellings to one site

News and Press Releases     Headlines should be short, but descriptive Write short summaries Link headlines to the full news story Generally, don’t include the date and time of the article in the summary

Popup Windows and Staging Pages    Take users to the “real” homepage  Splash screens must die Avoid popup windows Don’t use geographical routing pages unless your site is in multiple languages

Advertising     Keep ads for other companies on the periphery of the page Keep them small and discreet Outside the standard banner area, label ads as such Distinguish between ad and content style

Welcomes  Don’t literally welcome users to your site  Consider using a tag line

Technical Problems and Emergencies   Inform users of problems Have an emergency plan for critical content

Credits   Don’t waste space on the homepage for credits Exercise restraint in displaying awards won by your website

Page Reload and Refresh   Don’t automatically refresh the homepage When doing a refresh, update only the content that has changed

Customization   If you provide for customization, don’t use generic choices before the user has selected any Don’t permit customization of basic User Interface design, e.g., color scheme

Gathering Customer Data   Explain the benefits of registration Explain the frequency of newsletters or e-mail before registration

Fostering Community   If you have chat or discussion features, don’t show generic links to them – describe them Don’t offer a “Guestbook”

Dates and Times      Show dates and times for time-sensitive info only, e.g., stock quotes Show users the time that content was last updated Include the time zone Use standard abbreviations, e.g., p.m.

Spell out the month or use month abbreviations – not 01/02/03

Stock Quotes and Displaying Numbers     Give the percentage of change, not just the points gained or lost Spell out abbreviations Use a thousands separator for numbers with 5 or more digits, e.g., 53,000 Align decimal points when showing columns of numbers

Homepage Design Statistics For the 50 homepages in the book

Download Time  With regular analog modem, average download time was 26 seconds    Recommended: 10 seconds 28% - 10 seconds or less 26% - 30 seconds or more

Basic Page Layout     Page width  Median – 770 pixels Liquid versus frozen layout  Liquid – 18% Page length  Median – 1018 pixels (two full screens) Frames  only 4% used frames

Fundamental Page Design Elements    Logo placement  Upper left – 84% Logo size  5,485 pixels (74 pixels square) Search   14% did not have a search feature Of those that had it, 81% used a box

Fundamental Page Design Elements (cont.)    Search placement  Upper right 35%  Upper left 30% Search label   Search Go 42% 40% Width of search box  Median – 110 pixels, or 18 characters

Navigation   Navigation scheme      Left-hand rail Tabs Links across top Categories in middle Pull-down menus 30% 30% 18% 12% 10% Footer navigation  80% had links across bottom of page

Navigation (cont.)   Site Map  48% had site maps Splash pages  6% had splash pages

Frequent Features     Sign In  52% permitted users to sign in About Us  84% had a link for more company info Contact Info  90% had more contact info available Privacy Policy  86% had a link to a privacy policy

Frequent Features (cont.)   Job Openings  74% had a link to job info Help  54% had a help feature

Graphics and Multimedia     Pictures  Median number per homepage – 3 ALT Text  42% used ALT text Music  3% played music upon entry Animation  30% included some animation

Advertising   External Advertising   46% had ads for other companies Median number of ads – 3 Internal Advertising   84% promoted their own products or services Median number of ads – 4.5

Typography  Body Text and Background Colors      72% used black text (8% blue, 8% gray) 84% used white background 4% use white text on black background Median font size – 12 point 96% used a sans serif font

Typography (cont.)  Link Formatting    80% used underlined links 60% used blue links (12% black) 74% changed the color of visited links  54% used purple for visited links   16% light blue 11% gray