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 42% Go 40%

Width of search box Median – 110 pixels, or 18 characters

Navigation Navigation scheme

Left-hand rail 30% Tabs 30% Links across top 18% Categories in middle 12% Pull-down menus 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