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

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

3. 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 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 accessability does 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 MAY 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 ORGANIZATION NAME AND/OR LOGO IN A RESONABLE SIZE AND NOTICEABLE LOCATION
INCLUDE A TAG LINE THAT EXPLICITLY SUMMARIZE WHAT THE SITE OR ORGANIZATION DOES

9. 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 ORGANIZATION (primary address, phone number and )
IF YOUR SITE GATHERS ANY CUSTOMER INFORMATION, INCLUDE A “Privacy Policy” LINK ON THE HOME PAGE

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

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

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

13. GRAPHICS AND ANIMATION
ANIMATION RARELY HAS A PLACE ON THE HOMEPAGE BECAUSE IT DISTRACTS FROM OTHER ELEMENTS (sliding galleries do not belong to this category)
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!

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

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

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

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

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

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

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

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

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

23. 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
GRAPHICS/ ILLUSTRATIONS
Somewhere between 5-15% of the space on the homepage.

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

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

26. USABILITY Case studies

27. How to analyse a webpage in terms of meaning production
According to Djonov & Knox (2014: 174), semantically, every homepage serves three important functions :
to show visitors the website’s main parts together with any popular or timely information, regardless of where in the website this information may be >representational metafunction;
to establish the identity and mission of the website and the institution/s it represents > orientational metafunction;
to reveal how the site is structured and what options for navigation it offers > organizational metafunction.

28. U N I V E R S T Y H O M P A G

29. Your ‘face’ to the world

30. Spatial organization of a webpage Djonov & Knox (2014)
The spatial organisation of webpages (the layout) is an important resource for ‘packaging’ meaning:
different content may be placed in different ‘zones’ on the page
a range of visual devices can be used to distribute content on the page and to classify information.

31. Spatial organization of a webpage Djonov & Knox (2014)
Banner zone (or brand area): it is the first screenshot users see when visiting a website.
Generally, visuals (still or moving images) are the resources used to design a banner zone

32. Banner zone

33. Spatial organization of a webpage Djonov & Knox (2014)
Content zone: content zones on homepages usually provide some kind of introduction to information that appears elsewhere on a website and is considered important by its authors.
They usually classify this information through headings and subheadings, and/or various visual devices. Through different webpage design devices, the content zone thus construes a taxonomy of information.

34. Banner zone
Content zone

35. Spatial organization of a webpage Djonov & Knox (2014)
Navigation zone/s (or interactivity area): Navigation zones typically have a dual purpose of providing navigation links and classifying the content of the website. Navigation zones typically appear on all pages of a website in the same, or a similar, format and location.

36. Navigation zone
Banner zone
Content zone

37. Navigation zone
Banner zone
Content zone

38. Questions to be asked when analysing the 3 metafunctions at work in a webpage (Djonov & Knox 2014)
Representational
Orientational
Organizational
What content is included on or excluded from the page?
How is the content presented to the reader (e.g. as rational, factual, or sensational)?
How is the page composed to make each screen, and the entire page a meaningful ‘whole’ ?(e.g. framing that refers to the visual devices used to connect or separate ‘packages’ of content on a webpage.)
How is content on the page classified?
N.B. Classification is not a ‘neutral’ or ‘natural’ activity. Classification of content on webpages may reflect the structure of the institution, the values of the authors, and/or the purposes of the website.
What kind of relationship is construed between the reader, the content, and the author, thanks to the use of different semiotic resources (e.g. formality/ informality, authoritative /not authoritative – cf. the aesthetic value in Adami’s workshop)?
To what extent does the homepage reveal the organisation of the website as a whole? (e.g. salience – what webpage elements stand out the most; and information value - where webpage elements are posited)
What logico-semantic relations (e.g. exemplification, temporal sequence, causality , similarity, contrast) reveal the organisation of content of the website as a whole?
How does the webpage align users attitudinally towards the website and its content (e.g. Binding/not binding navigation, userfriendliness , freedom of interactivity, affiliation (Bonding)?
What navigation choices does the organisation of the website offer and privilege? Does it support
user orientation?
LSR refer to the cohesive (or not) relations among resources and interactive devices; e.g. are fonts dealing with the same content and or classes consistent (degree of similarity)? Are images and captions coherent? Are navigation zones repeated in every page at the same place, with the same structure, fonts, colours?