HOMEPAGE USABILITY

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

2. 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?

3. USABILITYhttp://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!

4. THE ROLE OF THE HOMEPAGE • MAGAZINE COVER • YOUR FACE TO THE WORLD • ARTWORK • COMPANY RECEPTIONIST • BOOK TABLE OF CONTENTS • NEWSPAPER FRONT PAGE • BROCHURE

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

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

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

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

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

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

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

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

13. 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)

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

15. 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!

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

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

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

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

20. HOMEPAGE DESIGN CONVENTIONS AND BY THIS TIME, USERS HAVE ACCUMULATED A GENERIC MENTAL MODEL OF THE WAY HOMEPAGES ARE SUPPOSED TO WORK.

21. HOMEPAGE DESIGN CONVENTIONS *** ESSENTIAL RECOMMENDATION ** STRONG RECOMMENDATION * DEFAULT RECOMMENDATION THIS STAR RATING INDICATES HOW CRITICAL THE FOLLOWING GUIDELINE IS TO A SATISFACTORY USER EXPERIENCE.

22. HOMEPAGE DESIGN CONVENTIONS

23. HOMEPAGE DESIGN CONVENTIONS

24. HOMEPAGE DESIGN CONVENTIONS

25. HOMEPAGE DESIGN CONVENTIONS

26. HOMEPAGE DESIGN CONVENTIONS

27. HOMEPAGE DESIGN CONVENTIONS

28. HOMEPAGE DESIGN CONVENTIONS

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