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