homepage usability jakob nielsen & marie tahir 2002
TRANSCRIPT
HOMEPAGE USABILITY
JAKOB NIELSEN & MARIE TAHIR
2002
http://www.nngroup.com/
USABILITYhttp://www.usabilitynet.org
• What is usability?– Usability means making products and systems easier to use,
and matching them more closely to user needs and requirements.
• Usability is about:– Effectiveness - can users complete tasks, achieve goals with the
product, i.e. do what they want to do?– Efficiency - how much effort do users require to do this? (Often
measured in time)– Satisfaction – what do users think about the products ease of
use?
USABILITY http://www.usabilitynet.org
• Effectiveness, Efficiency and Satisfaction are affected by:– The users - who is using the product? e.g. are they highly
trained and experienced users, or novices?– Their goals - what are the users trying to do with the product -
does it support what they want to do with it?– The usage situation (or 'context of use') - where and how is the
product being used?
• Usability should not be confused with ‘accessability', however, as this is purely concerned with the functions and features of the product and has no bearing on whether users are able to use them or not. Increased accessabilitydoes not mean improved usability!
THE ROLE OF THE HOMEPAGE
MAGAZINE COVER
YOUR FACE TO THE WORLD
ARTWORK
COMPANY RECEPTIONIST
BOOK TABLE OF CONTENTS
NEWSPAPER FRONT PAGE
BROCHURE
THE ROLE OF THE HOMEPAGE
• THE HOMEPAGE HAS MULTIPLE GOALS BECAUSE THE USERS ALSO HAVE MULTIPLE GOALS
Vs
• INEXPERIENCED USERS OFTEN FEEL OVERWHELMED BY HOMEPAGES THAT DON’T CLEARLY HELP THEM UNDERSTAND THEIR OPTIONS
THE ROLE OF THE HOMEPAGE
THE CHALLENGE IS TO DESIGN A HOMEPAGE THAT ALLOWS ACCESS TO ALL IMPORTANT FEATURES
FOCUS AND CLARITY ARE KEY, AS IS AN UNDERSTANDING OF USER’S GOALS.
COMMUNICATING THE SITE’S PURPOSE
• THE HOMEPAGE COMMUNICATE IN ONE SHORT GLANCE:
WHERE USERS AREWHAT YOUR COMPANY/INSTITUTION
DOESWHAT USERS CAN DO AT YOUR SITE
COMMUNICATING THE SITE’S PURPOSE
• USERS MUST RECOGNIZE THE HOMEPAGE IMMEDIATELY:
SHOW THE COMPANY NAME AND/OR LOGO IN A
RESONABLE SIZE AND NOTICEABLE LOCATION
INCLUDE A TAG LINE THAT EXPLICITLY SUMMARIZE WHAT
THE SITE OR COMPANY DOES
COMMUNICATING THE SITE’S PURPOSE
EMPHASIZE WHAT YOUR SITE DOES THAT IS VALUABLE FROM THE USER’S POINT OF VIEW
EMPHASIZE THE HIGHEST PRIORITY TASKS SO THAT USERS HAVE A CLEAR STARTING POINT ON THE HOMEPAGE
COMMUNICATING INFORMATION ABOUT YOUR COMPANY
INCLUDE A HOMEPAGE LINK TO AN “About Us”
SECTION
INCLUDE “Contact Us” LINK ON THE HOMEPAGE THAT
GOES TO A PAGE WITH ALL CONTACT INFORMATION
FOR YOUR COMPANY (primary address, phone number
and email)
IF YOUR SITE GATHERS ANY CUSTOMER
INFORMATION, INCLUDE A “Privacy Policy” LINK ON
THE HOME PAGE
NAVIGATION
THE NAVIGATION AREA SHOULD ALSO REVEAL THE MOST IMPORTANT CONTENT OF THE SITE
• LOCATE THE PRIMARY NAVIGATION AREA IN A HIGHLY NOTICEABLE PLACE (ADIACENT TO THE MAIN BODY OF THE PAGE)
• GROUP ITEMS IN THE NAVIGATION AREA SO THAT SIMILAR ITEMS ARE NEXT TO EACH OTHER
NAVIGATION
• DON’T PROVIDE MULTIPLE NAVIGATION AREAS FOR THE SAME TYPES OF LINKS
• DON’T INCLUDE AN ACTIVE LINK TO THE HOMEPAGE ON THE HOMEPAGE
• DON’T USE MADE-UP WORDS FOR CATEGORY NAVIGATION CHOICES
SEARCH
• USERS SHOULD BE ABLE TO FIND “SEARCH” COMMAND EASILY AND USE IT EFFORTLESSLY
• MAKE IT VISIBLE, WIDE AND KEEP IT SIMPLE
• DON’T LABEL THE SEARCH AREA WITH A HEADING (use “SEARCH” button to the right of the box)
GRAPHICS AND ANIMATION
GRAPHICS CAN GREATLY ENHANCE A HOMEPAGE, BUT CAN WEIGH DOWN THE DESIGN IN VISUAL CLUTTER
IT IS IMPORTANT TO USE THEM CAREFULLY AND EDIT THEM FOR THE WEB
GRAPHICS AND ANIMATION
• ANIMATION RARELY HAS A PLACE ON THE HOMEPAGE BECAUSE IT DISTRACTS FROM OTHER ELEMENTS
• NEVER ANIMATE CRITICAL ELEMENTS OF THE PAGE, SUCH AS THE LOGO, THE TAG LINE, OR MAIN HEADING
• LET USERS CHOOSE WHETHER THEY WANT TO SEE AN ANIMATED INTRO TO YOUR SITE – DON’T MAKE IT THE DEFAULT!
GRAPHIC DESIGN
GRAPHIC DESIGN IS NOT THE STARTING POINT FOR THE HOMEPAGE DESIGN, BUT THE FINAL STEP:
• LIMIT FONT STYLES AND OTHER TEXT FORMATTING
• USE HIGH-CONTRAST TEXT AND BACKGROUND COLOURS
• AVOID HORIZONTAL SCROLLING
GRAPHIC DESIGN
• THE MOST CRITICAL PAGE ELEMENTS SHOULD BE VISIBLE IN THE FIRST SCREEN OF CONTENT, WITHOUT SCROLLING
• USE A LIQUID LAYOUT SO THE HOME PAGE SIZE ADJUSTS TO DIFFERENT SCREEN RESOLUTION
ADVERTISING
• KEEP ADS FOR OUTSIDE COMPANIES ON THE PERIPHERY OF THE PAGE
• KEEP EXTERNAL ADS AS SMALL AND DISCREET AS POSSIBLE RELATIVE TO YOUR CORE HOMEPAGE CONTENT
HOMEPAGE DESIGN CONVENTIONS
BY THE TIME A USER ARRIVES AT YOUR HOMEPAGE FOR THE FIRST TIME, THAT USER WILL ALREADY BE CARRYING A LARGE LOAD OF MENTAL BAGGAGE.
HOMEPAGE DESIGN CONVENTIONS
AND BY THIS TIME, USERS
HAVE ACCUMULATED A GENERIC
MENTAL MODEL OF THE WAY
HOMEPAGES ARE SUPPOSED TO
WORK.
HOMEPAGE DESIGN CONVENTIONS
*** ESSENTIAL RECOMMENDATION
** STRONG RECOMMENDATION
* DEFAULT RECOMMENDATION
THIS STAR RATING INDICATES HOW CRITICAL THE FOLLOWING GUIDELINE IS TO A SATISFACTORY USER EXPERIENCE.
HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH OF RECOM.
DOWNLOAD TIME At most 10 sec. at the prevalent connection speed for your customers.
***
PAGE WIDTH Optimized for 770 pixels, but with a liquid layout that works at anything from 620 to 1024 pixels.
**
LIQUID Vs FROZEN LAYOUT
Liquid. **PAGE LENGTH 1 or 2 full screens. No more
than 3. **LOGO PLACEMENT Upper left. ***
HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH OF RECOM.
LOGO SIZE 80x68 pixels. **SEARCH Provide search. Have it on the
homepage. Make it a box. ***SEARCH PLACEMENT
Upper part of the page, preferably in right or left corner. ***
SEARCH BOX COLOUR
White ***SEARCH BUTTON Call it “Search” (“Go” also
acceptable). **
HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH OF RECOM.
WIDTH OF SEARCH BOX
At least 25 characters, but 30 characters is better. **
TYPE OF SEARCH Simple search. (Advanced or scoped search relegated to secondary pages).
**
NAVIGATION One of the four main types: left-hand rail, tabs, links across the top, or categories in the middle.
**
FOOTER NAVIGATION LINKS
Use for links such as copyright and contact info. *
SITEMAP LINK “Site Map” if you have one. **
HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH OF RECOM.
ABOUT THE COMPANY
Always include this feature. ***ABOUT LINK Call the link “About <name-of-
the-company>”. **CONTACT INFORMATION
Provide a link to contact info and call it “Contact Us”. **
PRIVACY POLICY Include one if the site collects data from users and link to it from the homepage.
***
NAME OF PRIVACY LINK
Call it “Privacy Policy”. **
HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH OF RECOM.
HELP Don’t offer it unless the site’s complexity makes help unavoidable.
*
HELP PLACEMENT Upper right. **AUTO-PLAYING MUSIC
No. ***ANIMATION No. **GRAPHICS/ ILLUSTRATIONS
Somewhere between 5-15% of the space on the homepage. *
HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH OF RECOM.
ADVERTISING At most, 3 ads (whether external or internal). **
BODY TEXT COLOUR
Black. **BODY TEXT SIZE 12 points. *BODY TEXT SIZE FROZEN
No. Always use relative sizes that make it possible for users to make the text larger or smaller as desired.
***
BODY TEXT TYPEFACE
San-serif (Verdana, Arial). *
HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH OF RECOM.
BACKGROUND COLOUR
White. **LINK COLOUR, UNVISITED LINKS
Blue. **LINK COLOUR, VISITED LINKS
Purple, light blue, red. *LINK UNDERLINING Yes, except in lists in
navigation bars **
USABILITYCase studies
• http://www.governo.it/
• https://www.usa.gov/