Web Usability SE3830 Jay Urbain, Ph.D. Credits: Steve Krug, Dont - - PowerPoint PPT Presentation

Web Usability

SE3830 Jay Urbain, Ph.D.

Credits:

• Steve Krug, Don’t Make Me Think
• Jacob Nielson, Designing Web Usability
• Louis Rosenfeld, Information Architecture for the World Wide

Web: Designing Large Scale Web Sites

1

2

3

Some Perspective - Warning!

• Warning: when rules go wrong!
• Studies by usability expert Rolf Mollichshow show that:

– no two sets of experts come up with the same results (when evaluating interfaces). – Most experts come up with too many problems.

4

Web Usability Guidelines - 1

1. Don’t make me think! 2. How we really use the Web 3. Billboard design 4. Eliminate mindless choices 5. Writing for the Web 6. Navigating the web 7. Avoiding non-essential issues 8. Accessibility, Usability as common courtesy 9. Usability testing

5

Human Brains

Human brains - the hardware we have to work with:

• One decision at a time

– Spotlight effect – Attention is a limited commodity

• Finite storage capacity

– short term memory struggles to store more than ~+/- 7 thing. – Stroop effect:

6

Facts about Human
Perception & Cognition!

• We perceive what we expect
• Our vision is optimized to see structure
• We seek and use visual structure to match patterns
• Reading is unnatural
• Our color vision is limited
• Our peripheral vision is poor

7

Facts about Human
Perception & Cognition!

• Our attention is limited
• Our memory is imperfect
• Limits on attention shape our thought & action
• Recognition is easy; recall is hard
• Learning from experience & performing learned

actions are easy

• Problem-solving & calculation are hard
• Many factors affect learning
• We have real-time requirements!

8

Habits

• Habits are tasks that require no attention
• Recognition versus recall
• Habits skip cognitive processing

9

Making Me Think

• Interruptions burden our short term memory
• Switching between tasks takes effort
• Unexpected things happen making it hard to form

habits

• Computers expect us to remember!

10

Don’t Make Me Think

Don’t make me think – the most important principle in Web usability.

• When you look at a Web page, it should be self-
• evident. Obvious. Self-explanatory.

– I should be able to “get it” – what the Web page is about and how to use it without expending effort thinking about it. – When designing a site, your job is to get rid of the “question marks” - the questions that people ask themselves when trying to use a site.

11

Things that make us think

Many things on a Web page can make us stop and think unnecessarily:

• Cute and clever names (marketing department!) rather

than descriptive names.

– E.g., Jobs, Employment Opportunities, Job-O-Rama, Opportunities for solutions providers

• Links and buttons that aren’t obviously clickable.
• Every “question mark” adds to our cognitive workload,

distracting our attention from the task at hand.

• In general, people don’t like to puzzle over how to do

things.

12

Things that make us think

Things a visitor of a site should not spend their time on:

• Where am I?
• Where should I begin?
• Where did they put ___?
• What are the most important things on this page?
• Why did they call it that?

13

You can’t make everything self-evident

• Your goal is to make each page self-evident, so that just

by looking at it, the average user will know what it is and how to use it.

• Unfortunately, you can’t make everything self-evident.
• Sometimes when you are doing something original or

complicated, you have to settle for self-explanatory.

• A self-explanatory page, it takes a little thought to get it –

but only a little. Example:

– Appearance of things in a self-explanatory page along with well- chosen names, logical page layout, and small amounts of carefully crafted text to minimize the cognitive load of the user.

14

You can’t make everything self-evident

• Making pages self-evident makes them seem better.
• Unimportant things should feel effortless.
• Puzzling over things that don’t matter to us tends to sap
• ur energy and enthusiasm – and time.
• People are going to spend far less time looking at the

pages we design than we’d like to think.

• If web pages are going to be effective, they have to work

most of their magic at a glance. (Think squint test!).

15

How we really use the Web

• Significant difference between how we think people use the web (and

how we design for the web), and how people use the web.

• What users actually do most of the time is glance at each new page,

scan some text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for.

• There are usually large parts of the page that they don’t even look at.
• We are thinking “great literature” – the user’s reality is much closer to

going by a billboard at 60 MPH.

16

Scanning, satisficing, and muddling through.

17

1) We don’t read pages. We scan them.

• People spend very little time

reading most Web pages (Nielsen, 1997 www.useit.com).

• Instead, we scan them, looking

for words, phrases, or images that catch our eye.

18

19

How we read web pages

20

Why we scan…

• We’re usually in a hurry
• We know we don’t need to read everything
• We’re good at it
• We like going fast – speed is good!

21

2) We don’t make optimal choices. We satisfice.

• We tend to assume that users will scan the page,

consider all of the available options, and chose the best

• ne.
• In reality, most of the time we don’t choose the best
• ption – we choose the first reasonable option – a

strategy known as satisficing*

• Satsificing is a cross between satisfying and sufficing.

*Economist Herbert Simon, Models of Man: Social and Rational, 1957)

22

Satisficing

• Gary Klein spent many years studying naturalistic

decision making:

– How people like firefighters, pilots, chess masters, and nuclear power plant operators make high-stakes decisions in real settings with time pressure, vague goals, limited information, and changing conditions.

• They assumed a rational decision making model –

evaluate and select the best of all possible options.

• As it turned out, fire commanders did not compare any
• ptions!

– They took the first reasonable plan that came to mind and did a quick mental test for problems. – If they didn’t find any, they had their plan of action. Klein, “Sources of Power: How People Make Decisions.”

23

• “A good plan violently executed now is better than a

perfect plan executed next week.”

General George S. Patton

24

Why don’t Web users look for the best choice?

• We’re usually in a hurry
• There’s not much of a penalty for guessing wrong
• Weighing options may not improve our chances
• Guessing is more fun – serendipity

25

3) We don’t figure out how things work. We muddle through.

• Web usability testing shows that people use things all

the time without understanding how they work – or with completely wrong-headed ideas about how they work.

• Faced with any sort of technology, very few people take

the time to read instructions.

• Instead we forge ahead and muddle through, making up
• ur own vaguely plausible stories about what we’re

doing and why it works.

– E.g., Yahoo was surprised to learn how many people type URL’s into search boxes. So Google implemented it!

26

What to do?

• If your audience is going to act like you’re designing

billboards, then design great billboards!

27

Designing Pages for Scanning, Not Reading

Billboard Design

• Create a clear visual hierarchy on each page
• Take advantage of conventions
• Break pages up into clearly defined areas
• Make it obvious what’s clickable
• Minimize noise.

28

Create a clear visual hierarchy

• The more important something is

the more prominent it is.

• Things that are related logically

are also related visually.

• Things are “nested” visually to

show what’s part of what.

29

Conventions are your friends

• Take advantage of what people all ready know.
• If you need to stray from a convention, you should be

able to justify it.

• Why?

– They’re very useful – conventions typically become conventions because they work. – Designers are often reluctant to take advantage of them.

30

Break up pages into clearly defined areas

• Allows users to decide quickly which areas of the page

to focus on and which areas they can safely ignore.

31

Make it obvious what’s clickable

• Since a large part of what people are doing on the Web

is looking for the next thing to click, it’s important to make it obvious what’s clickable and what’s not.

32

Keep the noise down to a dull roar

• Enemy of easy-to-grasp pages is visual noise.

– Busyness – Background noise

• Remember Graphical Design principle of

Simplicity – less is more!

33

User’s make mindless choices

• Users don’t mind a lot of clicks as long as each click is

painless and they have continued confidence that they’re

• n the right track – following the scent of information.
• Up to a point, this is more important than the number of

clicks.

34

Omit needless words

• E.B. White The Elements of Style: Omit needless words.

– Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

• Reduces the noise level of the page
• Makes the useful content more prominent
• Makes the pages shorter allowing users to see more of

each page at a glance without scrolling.

35

Omit needless words

• Guidelines:

– Write your draft, revise by removing at least half the words. – Happy talk must die – Instructions must die – Bullshit must die

36

37

38

Web Usability Guidelines - 2

1. Don’t make me think! 2. How we really use the Web 3. Billboard design 4. Eliminate mindless choices 5. Writing for the Web 6. Navigating the web 7. Avoiding non-essential issues 8. Accessibility, Usability as common courtesy 9. Usability testing

39

Designing Pages for Scanning, Not Reading

Billboard Design

• Create a clear visual hierarchy on each page
• Take advantage of conventions
• Break pages up into clearly defined areas
• Make it obvious what’s clickable
• Minimize noise.

40

Designing Navigation

Fact: People won’t use your Web site if they can’t find their way around it.

• Navigation Basics:
• 1. You’re usually trying to find something.
• 2. You decide whether to ask first or browse first.
• If you choose to browse you make your way through a

hierarchy using signs to guide you.

• If you can’t find what you’re looking for, you may switch

tactics.

• 3. Eventually, if you can’t find what you’re looking for,

you leave.

41

Web Navigation

• Some people tend to be search dominant users, i.e.,

they search/ask for help.

• Others tend to try to find their way around, i.e., the

navigation browsers.

• Either type of user may or may not switch tactics if they

become frustrated.

42

Real World vs. Web Browsing

• Looking for things on a Web site is similar to looking for

things in the real world.

• Can feel like moving around a physical space.

– Example: cruising, browsing, and surfing.

• But the Web is missing many of the cues we rely on in

the physical world.

43

The Lightness of Web Browsing

• No sense of scale

– How big is your site? – What portion of the site are we looking at?

• No sense of direction

– No left or right in web space?

• No sense of location

– In physical space, as we move around we accumulate knowledge about the space. – Develop sense of where things are located.

44

Lightness of Web Browsing - 2

• In physical world we can relate location to things.
• In the Web world we have to remember where

something is in a conceptual hierarchy and retrace our steps. – One of the reasons bookmarks are important. – Why the Back button accounts for somewhere between 30 and 40% of all clicks! – Why the concept of Home pages is so important – they are comparatively fixed places.

45

Purposes of Navigation

• Navigation is not a feature of the web site, it is the Web

site.

• Explicit purposes of navigation –

– getting from one place to another – figuring out where you are

• Overlooked purposes of navigation –

– Gives us something to hold on to – Tells us what’s here (with visible hierarchy) – Tells us how to use the site – Gives us confidence in the people who build it

46

Web navigation conventions

47

Persistent Navigation

48

Site ID – Like company name on the building

49

Sections

• Sections are primary navigation links to the main

sections of the site: the top level of the site's hierarchy.

50

Utilities

• Utilities are links to important elements of the site that

are not part of the content hierarchy.

51

Search

• Given the power of search and the number of people

who prefer search over browsing, every page should have either a search box or a link to a search page.

• Be careful using default search criteria.

52

Secondary, Tertiary, etc

• One of the biggest problems in Web design is failing to

give the lower-level navigation the same attention as the top.

53

Page Names

• Every page needs a name
• The name needs to be in the right place
• The name needs to be prominent
• The name needs to match what I clicked

54

You are here

• You should always know where you are within the site.

55

Breadcrumbs

• Breadcrumbs show where you are within the site.

56

Tabs

• Tabs:

– Self-evident – Hard to miss – Slick – Suggest a physical space –

• ne of the few metaphors

that work in navigation

57

Tabs

58

Basic site test

• 1. What site is this (Site ID)?
• 2. What page am I on (Page name)?
• 3. What are the major sections of the site (Sections)?
• 4. What are my options at this level (local navigation)?
• 5. Where am I (you are here)?
• 6. How can I search?

59

Example

60

Site 1

61

Site 2

62

Site 3

63

Additional Notes

• Accessibility
• Usability as a common courtesy

64

Usability Testing

• Keep things simple – so you do enough of it.
• Focus groups are not usability tests.
• In a focus group, a small group of people (~4-8) sit

around and react to ideas and designs that are shown to them: – good for quickly getting a sampling of users’ opinions.

• In a usability test, one user at a time is shown

something and asked to either: – Figure out what it is – Try to use it to do a typical task

• Note to self: Eat your own dog food!

65

Usability Testing Facts

• 1. If you want a great site, you’ve got to test.

– After working on a site for a few weeks, you can’t see it freshly anymore. – Everyone does not think the way you do.

• 2. Testing one user is 100% better than testing none.
• 3. Testing one user early in the project is better than

testing 50 near the end.

• 4. Most people think testing needs to be a big deal.

– But if you make it into a big deal, you will not do it early enough and often enough.

66

Usability Testing Facts - 2

• 5. The importance of recruiting representative users is
• verrated.

– It’s important, but not as important as testing early and often.

• 6. The point of testing is not to prove or disprove

something, it’s to inform your judgment.

• 7. Testing is an iterative process
• 8. Nothing beats a live audience reaction

– The best comics and musicians test their material repeatedly on small studio audiences before the big show.

67

Basic Usability Testing

Basic Usability Testing

• 1. If you want to know whether your software, or your Web

site, or your mobile app, or your remote control is easy enough to use, watch some people while they try to use it!

• 2. Note where they run into trouble
• 3. Fix it.
• 4. Test it again.

68

Discount Usability Testing

Traditional Testing Discount Testing Number of users/test 8 or more 3 or 4 Recruiting effort Select to match target audience Grab some people who use the Web Where to test Usability lab – one-way mirror, observation room, espresso machine Any office or conference room Who does the testing Experience usability professional Reasonably patient person Advance planning Scheduled weeks in advance Now Preparation Draft, review, revise Decide what you’re going to show What/when do you test? Test when the site is complete, unless you have huge budget Run small tests continually Cost $5000 or more ~$300 ($50 stipend, camcorder use) What happens next? 20-page written report Document results, debrief

• ver lunch

69

Prior to user test & initial design

Note:

• Perform heuristic and model (e.g. keystroke) usability

evaluation.

• Also apply to similar sites.

70

Constructing a usability test

• Introduction
• Background questions
• Reactions to home page
• Testing a task
• Review

Note: Best to script this so you are consistent across users.

71

Usability test - Introduction

• Introduction

– Cleary and succinctly define the purpose of:

• The usability test.
• The Web site or specific task under evaluation.

– Explain what type of data is collected and for what purpose. – Get consent and non-disclosure agreement if necessary.

72

Usability test - Background

• Background questions

– Profession, relevant experience, how they currently perform this task/application. – Demographics – Disabilities

73

Usability test - Homepage

• Reactions to Homepage

– Keep browser hidden until you are ready to begin – need to preserve first impression – Sample questions:

• Ask the user to look at the page and tell you what they think it

is, what strikes them about it, and what they think you would click on first.

• Have the user move through the page systematically – in the
• rder they select.
• Ask them what things they could do with your application.
• Finally, ask how they would start to perform each specific

task to be tested.

• Record the results – best to have someone other than the

person asking the questions.

74

Usability test – Task Testing

• Testing a Task

– Ask the user to perform a specific task. – Evaluate task page(s), similar to the homepage – first impressions. – Do they know where there are? – Do they know how to go back? – Do they know how to recover from an error? – Do they know where to go next? – Do they know there location? Where in the tasks sequence? – Do they know when they have completed the task.

75

Usability test – Review Results

After each round of tests -

• Review the results right away
• Triage – review the problems people saw and decide

which ones need to be fixed

• Use common sense

76

Usability test – Typical Problems

Typical problems-

• Users unclear on the concept – they just don’t get it
• The words they are looking for are not there

– Categories are not the one’s they’re use to – Categories are there but you are not using the names they expect

• Next step unclear
• There’s too much going on.
• Etc.

77

Usability test – Triage Guidelines

• Avoid kayak problems were user’s temporarily go astray
• Resist impulse to add things
• Take “new feature” requests with a grain of salt
• Grab low hanging fruit – looking for big cheap wins
• Don’t throw the baby out with the bath water.

78

“. . . And please let Mom, Dad, Rex, Ginger, Tucker, me and all the rest of the family see color.”

Note: US Bank Check Deposit Case Study.

Summary

79