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 our 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 one. • In reality, most of the time we don’t choose the best option – 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 options! – 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. 23 Klein, “Sources of Power: How People Make Decisions.”

• “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 our 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 on the right track – following the scent of information . • Up to a point, this is more important than the number of clicks. 34