Dr Mark Wright Key points - School of Informatics€¦ · Key points: – Importance of usability...
Transcript of Dr Mark Wright Key points - School of Informatics€¦ · Key points: – Importance of usability...
1
Web Pages Lecture 13
Dr Mark WrightKey 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
Introductionn Most HCI approaches consider one user interacting with one application on
one computer to complete one task
n The internet is now the dominant activity of computer usersn 30 million adults in the UK use the internet every day, spending an average
of 22:15 hours a month online (May, 2010, UKOM)
Task
Human 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– If its slow to load -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
Speed is Crucial for Websites
• Amazon: For every 100ms slower lose 1% of sales
• ShopZilla: – Improved loading from 7s to 2s gave 7-12%
increase in conversions• Yahoo: 400ms delay gave 4-9% drop in sales• Tools - Boomerang (click to load), Google
Analytics• Tips
– Http requests reduction -Sprites– Payload - image compression, external css/js– Caching– Rendering – Apparent Speed: A website that is visible in
1.5s and active in 3s is better than one that is visible and active in 3s
4
4
Introductionn 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
n 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 processn 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 iswanted analysis
design
implementand 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
Link Structure
TextText
T linear narrative, hierarchical structure or a semantic network ext
8
Major www site genres characterised by contact time and narrative structure
Different metaphors for different purposes
9
Navigationn 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
n These are absolutely essential in hyperspace
10
Back button
n Around 30% of browsing operations are using the back button
n Many people have incorrect mental model
11
Navigationn Change colour of followed links [3*]n Don’t open links in new windows [9*]n Using breadcrumbs or progress barsn Link to home or menun Usable search [1*]
– Should be tolerant to minor errors– Should return in relevant order
n Informative link titles – N.B. software for blind will read list of links on page – not helpful if they
all say ‘click here’n Don’t overly tax short-term memory– Keep number of links in hierarchy to minimumn Support episodic memory– Allow search by history
*Numbers refer to Nielsen’s Top Ten Mistakes, see reference list
–
12
Progress bars
13
Helping users to make an informed decision before they click
WWW PageDesign Basics
Informative link titles
14
Principles - Web Pages from Hell
n 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
n Need to include:– Informative title– Author/Owner– Date last modified– Link to home
n Web pages are more freestanding (compare to a page in a book which has many surrounding clues)
16
Information layout
n 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
n However low-literacy users don’t scan
n People scan rather than read
F-shaped eye movement patterns http://www.useit.com/alertbox/reading_pattern.html
17
Information layoutn 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
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
19
Information layoutn 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.n Substantial improvements from modified text:
– Concise text: 58%– Scannable layout: 47%– Objective language: 27%– Combined version: 124%
n N.B. revisions will help both low literacy users and normal users
20
Cognitive models for the webSNIF-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 standardsn PRINCIPLE:
Ensure graceful transformation under conditions of physical, sensory, and cognitive disabilities, work constraints, and technological barriers
n GUIDELINE: Provide equivalent alternatives (i.e. that
convey essentially the same function or purpose) as auditory or visual content.
n STANDARD: Always supply alternate text for images
using the ALT tag
E.g. Web Content Accessability Guidelines - http://www.w3.org/WAI/intro/wcag.php
Mobile Web
• In 2013 there will be more page views from Mobile than PC• Soon Smart phones will out number feature phones
23
Mobile Web
• Smaller Screens• Massive Diversity• Speed of Connection• Touch interaction
24
Mobile Web Adaptions
• Nielsen – Cut Features– Cut Content– Enlarge Interface
Features
• Mobile vs Web site - css• apps• HTML5, Phone Gap
• Mobile First• GPS, Touch, Near Field, pose
sensors 25
22
Evaluationn Many previously discussed methods can be used for the web
– E.g. co-operative evaluation, post-use questionnairesn Can alternatively adopt methods from media and advertising
– But focus groups can be misleadingn “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)
n Analytics - Next Guest Lecture
23
A changing target…?n Uses and users of the web are changing rapidlyn 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
n Most basic rules of interaction continue to apply