homepage usability by nielsen & tahir. communicating the site's purpose show the logo...
TRANSCRIPT
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