JAKOB NIELSEN & MARIE TAHIR
2002 http://www.nngroup.com/

http://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?

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 ARE
 WHAT YOUR COMPANY/INSTITUTION
DOES
 WHAT 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

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

• 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

• 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 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

• 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 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

• 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

• 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.
LIQUID Vs FROZEN
LAYOUT
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
SEARCH
PLACEMENT
Provide search. Have it on the homepage. Make it a box.
Upper part of the page, preferably in right or left corner.
***
***
SEARCH BOX
COLOUR
SEARCH BUTTON
White
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
FOOTER
NAVIGATION LINKS
SITEMAP LINK
One of the four main types: lefthand rail, tabs, links across the top, or categories in the middle.
Use for links such as copyright and contact info.
“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-ofthecompany>”.
**
CONTACT
INFORMATION
PRIVACY POLICY
NAME OF PRIVACY
LINK
Provide a link to contact info and call it “Contact Us”.
Include one if the site collects data from users and link to it from the homepage.
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
ANIMATION
GRAPHICS/
ILLUSTRATIONS
No.
***
No.
**
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).
**
Black.
BODY TEXT
COLOUR
BODY TEXT SIZE 12 points.
**
*
BODY TEXT SIZE
FROZEN
BODY TEXT
TYPEFACE
No. Always use relative sizes that make it possible for users to make the text larger or smaller as desired.
San-serif (Verdana, Arial).
***
*

HOMEPAGE DESIGN CONVENTIONS
HOMEPAGE ISSUES RECOMMENDED DESIGN STRENGTH
OF RECOM.
BACKGROUND
COLOUR
White. **
LINK COLOUR,
UNVISITED LINKS
LINK COLOUR,
VISITED LINKS
Blue.
Purple, light blue, red.
LINK UNDERLINING Yes, except in lists in navigation bars
**
*
**

• http://www.governo.it/
Case studies
• https://www.usa.gov/