special issues iii: websites surfing the web task hiroshi
TRANSCRIPT
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