Homepage Usability By Nielsen & Tahir. Communicating the Site's Purpose Show the logo Include a tag...
-
Upload
milton-webster -
Category
Documents
-
view
219 -
download
2
Transcript of Homepage Usability By Nielsen & Tahir. Communicating the Site's Purpose Show the logo Include a tag...
![Page 1: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/1.jpg)
Homepage Usability
By Nielsen & Tahir
![Page 2: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/4.jpg)
Communicating Information About Your Company (cont.) Don’t include internal company
info Include a “Privacy Policy” link Explain how the website makes
money
![Page 5: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/6.jpg)
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
![Page 7: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/8.jpg)
Archives and Accessing Past Content Make it easy to access anything
that has been recently featured on the homepage
![Page 9: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/13.jpg)
Tools and Task Shortcuts Offer direct access to high-priority
tasks Don’t include unrelated tools Don’t reproduce browser
functionality
![Page 14: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/14.jpg)
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
![Page 15: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/15.jpg)
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
![Page 16: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/17.jpg)
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
![Page 18: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/18.jpg)
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
![Page 19: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/19.jpg)
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
![Page 20: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/20.jpg)
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
![Page 21: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/22.jpg)
Welcomes Don’t literally welcome users to
your site Consider using a tag line
![Page 23: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/23.jpg)
Technical Problems and Emergencies Inform users of problems Have an emergency plan for
critical content
![Page 24: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/24.jpg)
Credits Don’t waste space on the
homepage for credits Exercise restraint in displaying
awards won by your website
![Page 25: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/25.jpg)
Page Reload and Refresh Don’t automatically refresh the
homepage When doing a refresh, update only
the content that has changed
![Page 26: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/26.jpg)
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
![Page 27: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/27.jpg)
Gathering Customer Data Explain the benefits of registration Explain the frequency of
newsletters or e-mail before registration
![Page 28: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/28.jpg)
Fostering Community If you have chat or discussion
features, don’t show generic links to them – describe them
Don’t offer a “Guestbook”
![Page 29: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/29.jpg)
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
![Page 30: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/30.jpg)
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
![Page 31: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/31.jpg)
Homepage Design Statistics
For the 50 homepages in the book
![Page 32: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/32.jpg)
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
![Page 33: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/33.jpg)
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
![Page 34: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/34.jpg)
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
![Page 35: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/35.jpg)
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
![Page 36: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/36.jpg)
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
![Page 37: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/37.jpg)
Navigation (cont.) Site Map
48% had site maps Splash pages
6% had splash pages
![Page 38: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/38.jpg)
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
![Page 39: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/39.jpg)
Frequent Features (cont.) Job Openings
74% had a link to job info Help
54% had a help feature
![Page 40: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/40.jpg)
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
![Page 41: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/41.jpg)
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
![Page 42: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/42.jpg)
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
![Page 43: 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.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649eb75503460f94bc08f7/html5/thumbnails/43.jpg)
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