Homepage Usability

1
Homepage Usability

• By Nielsen Tahir

2
Communicating the Site's Purpose

• Show the logo
• Include a tag line
• Emphasize your sites value
• Emphasize high priority tasks
• Designate one home page
• Use website appropriately
• Differentiate the home page design

3
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

4
Communicating Information About Your Company
(cont.)

• Dont include internal company info
• Include a Privacy Policy link
• Explain how the website makes money

5
Content Writing

• Use customer-focused language
• Avoid redundant content
• Dont use clever phrases and lingo
• Use consistent style
• Dont use superfluous labels
• Avoid single-item categories and lists
• Use non-breaking spaces when necessary

6
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

7
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

8
Archives and Accessing Past Content

• Make it easy to access anything that has been
  recently featured on the homepage

9
Links

• Differentiate links and make them scannable
• Dont use Click Here as a link
• Dont use generic More as a link
• Use visited and unvisited link colors
• Dont use Links to label links
• Identify non-web page links

10
Navigation

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

11
Navigation (cont.)

• Dont use made-up words for navigation categories
• If you have a shopping cart, include a link to it
• Use icons for navigation sparingly

12
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
• Dont offer a Search the Web feature

13
Tools and Task Shortcuts

• Offer direct access to high-priority tasks
• Dont include unrelated tools
• Dont reproduce browser functionality

14
Graphics and Animation

• Use graphics to show content
• Label unclear graphics and photos
• Edit photos and diagrams appropriately
• Avoid watermark graphics
• Dont use gratuitous animation
• Never animate critical elements
• Let users choose to see animated intro

15
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

16
UI Widgets

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

17
Window Titles

• Begin with information-carrying word
• Dont include the top-level domain name, e.g.,
  .com
• Dont include homepage
• Include a short description, maybe the tag line
• Limit titles to 7 or 8 words

18
URLs

• Company web address should be www.company.com
• Use foreign countrys top-level domain name if
  appropriate
• Try to register alternate spellings of site name
• Redirect alternate spellings to one site

19
News and Press Releases

• Headlines should be short, but descriptive
• Write short summaries
• Link headlines to the full news story
• Generally, dont include the date and time of the
  article in the summary

20
Popup Windows and Staging Pages

• Take users to the real homepage
• Splash screens must die
• Avoid popup windows
• Dont use geographical routing pages unless your
  site is in multiple languages

21
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

22
Welcomes

• Dont literally welcome users to your site
• Consider using a tag line

23
Technical Problems and Emergencies

• Inform users of problems
• Have an emergency plan for critical content

24
Credits

• Dont waste space on the homepage for credits
• Exercise restraint in displaying awards won by
  your website

25
Page Reload and Refresh

• Dont automatically refresh the homepage
• When doing a refresh, update only the content
  that has changed

26
Customization

• If you provide for customization, dont use
  generic choices before the user has selected any
• Dont permit customization of basic User
  Interface design, e.g., color scheme

27
Gathering Customer Data

• Explain the benefits of registration
• Explain the frequency of newsletters or e-mail
  before registration

28
Fostering Community

• If you have chat or discussion features, dont
  show generic links to them describe them
• Dont offer a Guestbook

29
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

30
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

31
Homepage Design Statistics

• For the 50 homepages in the book

32
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

33
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

34
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

35
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

36
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

37
Navigation (cont.)

• Site Map
• 48 had site maps
• Splash pages
• 6 had splash pages

38
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

39
Frequent Features (cont.)

• Job Openings
• 74 had a link to job info
• Help
• 54 had a help feature

40
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

41
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

42
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

43
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