1

HCI Lecture 13

Special Issues III: Websites

Hiroshi Shimodaira Key points:

–  Importance of usability for the WWW –  Application of HCI methods to websites:

•  Design and conceptual models •  Navigation •  Information layout •  Formal modelling approaches •  Principles, guidelines and standards •  Evaluation

2

Introduction

!  Most HCI approaches consider one user interacting with one application on one computer to complete one task

!  The internet is now the dominant activity of computer users !  30 million adults in the UK use the internet every day, spending

an average of 22:15 hours a month online (May, 2010, UKOM)

Human

Task

Computer

Surfing the web

3

Introduction

!  Usability is a critical issue for the WWW –  If your site is difficult to use - people leave –  If it is not clear what is offered - people leave –  If it is hard to read - people leave –  If it is unattractive - people leave –  If it is boring - people leave –  If they get lost - people leave –  If they get frustrated - people leave –  If it doesn’t work the way they are used to – people leave

!  Jakob’s law “users spend most of their time on other websites”

!  Nielsen estimates 135% improvement for 10% budget spent on usability –  Measured in sales, site traffic, productivity, use of features etc.

4

Introduction

!  Many of the usability methods and issues discussed so far apply to website design: –  Design process (and early involvement of users) –  Information layout and perceptual factors –  Application of modelling approaches –  Development of principles, rules and standards –  Evaluation methods

!  But there are many web-specific usability issues: –  Platform independence – have interface flexibility but less control –  Content is as important as usability –  Diverse user population and low average interaction time (minutes) –  Many developers with very different kinds and levels of expertise

(can these be supported towards more usable design?) –  Often have dynamic open-ended development with feedback –  Issues relating to networking: bandwidth, latency, broken links

5

Design process

!  In designing a website, it is useful to do: –  Requirements analysis – n.b. large and varied user base –  Task analysis - predominantly, information retrieval, but increasing

range of web-based applications –  Establish conceptual models – what is the appropriate analogy? –  Interaction modes – principally navigation and dialogue

what is wanted

analysis

design

implement and deploy

prototype

6

Design to meet the user’s conceptual model

“Information architecture”: what is the appropriate structure?

E.g. News sites tend to follow the conventions of the established newspaper genre

Metaphor: websites as media

7

Links as a linear narrative, hierarchical structure or a semantic network

8

Major www site genres characterised by contact time and narrative structure

Different metaphors for different purposes

9

Navigation

!  For any interaction it is important to make clear to the user the Where3What of navigation: –  Where you are –  Where you’re going (or what will happen) –  Where you’ve been (or what has been done) –  What you can do now

!  These are absolutely essential in hyperspace

10

Back button

!  Around 30% of browsing operations are using the back button !  Many people have incorrect mental model

11

Navigation

!  Change colour of followed links [3*] !  Don’t open links in new windows [9*] !  Using breadcrumbs or progress bars !  Link to home or menu !  Usable search [1*]

–  Should be tolerant to minor errors –  Should return in relevant order

!  Informative link titles –  N.B. software for blind will read list of links on page – not helpful if

they all say ‘click here’

*Numbers refer to Nielsen’s Top Ten Mistakes, see reference list

!  Don’t overly tax short-term memory –  Keep number of links in hierarchy to minimum

!  Support episodic memory –  Allow search by history

12

Progress bars

13

Helping users to make an informed decision before they click

WWW Page Design Basics

Informative link titles

14

Information layout

!  Many previously mentioned principles apply (c.f. lectures 1 and 10) –  Colour should be used with care –  Avoid clutter and low resolution –  Motion attracts attention

•  Useful if important, otherwise distracting

www.blogstorm.co.uk/blog/top-10-worst-websites/

15

Information layout

!  Need to include: –  Informative title –  Author/Owner –  Date last modified –  Link to home

!  Web pages are more freestanding (compare to a page in a book which has many surrounding clues)

16

Information layout

!  Need to: –  Highlight keywords

(hypertext links serve as one form of highlighting; typeface variations and color are others)

–  “Front-load” meaning –  Use bulleted lists –  Have one idea per

paragraph –  Use inverted pyramid

style, starting with the conclusion

–  Halve the word count !  However low-literacy

users don’t scan

!  People scan rather than read

F-shaped eye movement patterns http://www.useit.com/alertbox/reading_pattern.html

17

Information layout

!  Effects of improved web writing: http://www.useit.com/alertbox/9710a.html

–  Promotional writing: Nebraska is filled with internationally recognized attractions that draw large crowds of

people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).

–  Concise version: In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park,

Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park.

–  Objective version: Nebraska has several attractions. In 1996, some of the most-visited places were Fort

Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).

18

Information layout

–  Scannable version: Nebraska is filled with internationally recognized attractions that draw large crowds of

people every year, without fail. In 1996, some of the most popular places were: –  Fort Robinson State Park (355,000 visitors) –  Scotts Bluff National Monument (132,166) –  Arbor Lodge State Historical Park & Museum (100,000) –  Carhenge (86,598) –  Stuhr Museum of the Prairie Pioneer (60,002) –  Buffalo Bill Ranch State Historical Park (28,446).

–  Combined – concise, objective and scannable: In 1996, six of the most-visited places in Nebraska were:

–  Fort Robinson State Park –  Scotts Bluff National Monument –  Arbor Lodge State Historical Park & Museum –  Carhenge –  Stuhr Museum of the Prairie Pioneer –  Buffalo Bill Ranch State Historical Park

19

Information layout

!  Effects of improved web writing: –  Measured:

•  Task time: to find answers for specific questions about the content. •  Errors: percentage of incorrect answers •  Memory: items recalled or recognised after using the site. •  Time to recall site structure: sketch site map •  Subjective satisfaction: questionnaire with rating scales for site’s

perceived quality, perceived ease of use, likability and user affect.

!  Substantial improvements from modified text: –  Concise text: 58% –  Scannable layout: 47% –  Objective language: 27% –  Combined version: 124%

!  N.B. revisions will help both low literacy users and normal users

20

Cognitive models for the web

SNIF-ACT (Pirelli & Fu, 2003) !  Declarative memory as semantic

net, e.g. word relations !  Procedural memory as production

rules e.g. see link -> select link !  Conflict resolution between

multiple matching productions using “information scent”

!  Spread activation from perceived nodes j to goal node i:

!  Bi = base level, Sij association strength, Wj bottom-up attention

!  Sij based on word co-occurrence databases and web searches

!  Predicts choice of links and when site will be left

21

Principles, guidelines and standards

E.g. Web Content Accessability Guidelines - see http://www.w3.org/WAI/intro/wcag.php

!  PRINCIPLE: Ensure graceful transformation under conditions of physical,

sensory, and cognitive disabilities, work constraints, and technological barriers

!  GUIDELINE: Provide equivalent alternatives (i.e. that convey essentially the

same function or purpose) as auditory or visual content.

!  STANDARD: Always supply alternate text for images using the ALT tag

22

Evaluation

!  Many previously discussed methods can be used for the web –  E.g. co-operative evaluation, post-use questionnaires

!  Can alternatively adopt methods from media and advertising –  But focus groups can be misleading

!  “AB” testing –  Put up two designs for web page –  Randomise which one user sees (with suitable probability) –  Measure outcome, e.g. number of sales completed –  Advantages: Real world conditions, can test small differences,

assess design tradeoffs, cheap to implement –  Disadvantages: Requires one key performance indicator, not rich

information, may miss long term effects (e.g. customer loyalty)

23

A changing target…?

!  Uses and users of the web are changing rapidly !  Are ‘average’ users now significantly more skilled?

–  Recent investigation (Nielsen) –  People are better at physical operations (pointing, scrolling) –  People are more confident, not afraid it will break –  People are better at using search but still poor at retargeting

the query when results are unsatisfactory –  People often have high skill with a few frequently visited sites –  But overall the changes are not very significant

!  Most basic rules of interaction continue to apply

24

References

Jakob Nielsen, Top Ten Mistakes in Web Design (and other articles from this site: http://www.useit.com/alertbox)

Pirolli, P. & Fu, W-T (2003) SNIF-ACT: A Model of Information Foraging on the World Wide Web Lecture Notes in Computer Science Volume 2702/2003 146

!  See also: Dix et. al. chapter 21 Web Style Guide: http://www.webstyleguide.com