How the Look Feel of a Website Affect

How the Look & Feel of a Website Affect Users 1

Steve Krug's Don't Make Me Think • A common sense approach to web usability. • A short, well-written fun book on presentation and user interactions with web pages. • Can be read on a plane trip. • The book is about design and dealing with human nature – not latest web technology. 2

Steve Krug's Don't Make Me Think “What’s the most important thing I should do if I want to make sure my web site is easy to use? ” It is not • “Nothing important should ever be more than two clicks away. ” • “Speak the user’s language. ” • “Be consistent. ” Don’t make me think.

Krug's 1 st Law of Web Usability "Don't make me think!" "When I look at a web page, it should be Self-evident. Obvious. Self-explanatory. " I should be able to "get it" • What it is • How to use it without expending any effort thinking about it. 4

Krug's 1 st Law of Web Usability I want to glance at a web page and know what to do without thinking. 5

Don't make me think! But when I'm looking at a page that makes me think, all the thought balloons over my head have question marks in them. When you're creating a site, your job is to get rid of the question marks.

Things that make me think! Make simple tasks obvious. Don't be cute! Even the label on a button may require thought. Users don't want to puzzle over and search on how to do a simple task. A web page is not a mystery novel! 7

Things that make me think! Another needless source of question marks is links and buttons that aren't obviously clickable. When using web, every question mark adds to our cognitive workload, distracting our attention from the task at hand. 8

Don't make me think! “If you point the cursor at it, it’ll change from an arrow to a pointing hand. What’s the big deal? ” Every question mark adds to our cognitive workload. As a rule, people don’t like to puzzle over how to use things. 9

Don't make me think! 10

Don't make me think! The most important principle of web design is to work toward eliminating question marks. However, you cannot make everything selfevident. Sometimes you need to settle for selfexplanatory. 11

Don't make me think! As a rule, people don't like to puzzle over how to do things. Visitors shouldn't spend their time thinking about: - 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? The fact that the people who built the website didn't care enough to make things obvious – and easy – can erode our confidence in the site and its publishers. To a commercial website the result is lost revenue. 12

How we really use the Web What people do most of the time on the Web is the following: 1. glance at each new page, 2. scan some of the text, and 3. 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 web page that they don't even look at. 9

How we really use the Web 10

How we really use the Web n. Most people are going to spend less time looking at the pages we design than we think. n. If web pages are going to be effective, they have to work most of their magic at a glance. n We’re thinking: “Let’s write some ‘great literature’ (or at least ‘product brochure’)” n. The user’s reality is much closer to: “billboard going by at 60 miles an hour. ” 10

How we really use the Web 16

How we really use the Web Fact of Life #1: We don't read web pages. We scan them. • We’re usually in a hurry • We don’t need to read everything. • We’re good at it. Fact of Life #2: We don't make optimal choices. We satisfice. • We don’t choose the best option – we choose the first reasonable option. • As soon as we find a link that seems like it might lead where we want, we click it. Fact of Life #3: We don't figure out how things work. We muddle through. • If we find something that works, we stick to it. • • Muddling tends to be inefficient and error-prone If they get it: • Better chance they’ll find what they’re looking for. • Understand the full range of what your site has to offer • You have a better chance of steering them where you want them to go • They’ll feel smarter and more in control 17

Billboard Design 101 If your audience is going to act like you’re designing billboards, then design great billboards. Ø Design pages for scanning, not reading! Ø Create a clear visual hierarchy. Ø Use conventions. For example, the conventions of newspapers. Ø Break up pages into clearly defined areas. Ø Make it obvious what is clickable. Ø Keep the noise down to a dull roar. 18

Billboard Design 101 Visual hierarchy. Design conventions. Clearly defined areas. 19

Billboard Design 101 Flawed visual hierarchy example: 20

Billboard Design 101 Use standard web conventions: 21

Billboard Design 101 22

Steve Krug's 2 nd Law of Web Usability "It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice. " This is his response to endless debates on "How many clicks the user should be required to do? " He argues it is not the number of clicks that are important but how hard each click is – the amount of thought required, and the amount of uncertainty about whether I'm making the right choice. 23

Steve Krug's 3 rd Law of Web Usability "Get rid of half the words on each page, then get rid of half of what's left. " "Omit needless words. " E. B. White's seventeenth rule in The Elements of Style. "Happy Talk must die!" Happy talk is the self-congratulatory promotional writing that you find in badly written brochures. "Welcome to XYZ Products. Inside you will find wonderful products that will fill your every need. BLAH. . . " 24

Steve Krug's 3 rd Law of Web Usability "Get rid of half the words on each page, then get rid of half of what's left. " "Instructions must die!" 20