Design of Look and Feel of Websites

Size: px

Start display at page:

Download "Design of Look and Feel of Websites"

Bruno Ford
5 years ago
Views:

Based in part on the success of his first book, Don't Make Me Think, he has become a highly sought-

1 Design of Look and Feel of Websites Steve Krug Steve Krug is a usability consultant who has more than 20 years of experience as a user advocate for companies like Apple, Netscape, AOL, Lexus, and others. Based in part on the success of his first book, Don't Make Me Think, he has become a highly sought- afer speaker on usability design. His company: Advanced Common Sense sm 1

2 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

3 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" without expending any effort thinking about it. 3

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

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. 5

6 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! 6

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. 7

8 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. 8

9 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 the thing they're looking for. There are usually large parts of the web page that they don't even look at. Closer to a "billboard going by at 60 mph!" 9

10 How we really use the Web 10

11 How we really use the Web 11

12 How we really use the Web Fact of Life #1: We don't read web pages. We scan them. Fact of Life #2: We don't make optimal choices. We satisfice. - We make the first, reasonable choice. 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. 12

13 Billboard Design 101 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. 13

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

15 Billboard Design 101 Flawed visual hierarchy example: 15

16 Billboard Design 101 Use standard web conventions: 16

17 Billboard Design

18 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. 18

19 Steve Krug's 3rd 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 XYY Products. Inside you will find wonderful products that will fill your every need. BLAH BLAH..." 19

20 Steve Krug's 3rd 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

Web Design and Databases WD: Class 3: Usability. Dr Helen Hastie Dept of Computer Science Heriot-Watt University

Web Design and Databases WD: Class 3: Usability Dr Helen Hastie Dept of Computer Science Heriot-Watt University Last time Pre-production Navigation Layout Writing Homework Find 3 websites with clear themes/metaphors