homepage usability - Lettere e Filosofia

advertisement

HOMEPAGE USABILITY

JAKOB NIELSEN & MARIE TAHIR

2002 http://www.nngroup.com/

USABILITY

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?

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

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.

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/

USABILITY

Case studies

• https://www.usa.gov/

Download