Wiki source for NotesOnKrugChaps1to5DRS

Show raw source

=====Notes on Krug, Chapters 1 through 5=====

====Chapter 1====
First law of usability = don't make the user think

Web page should be:
- self-evident
- obvious
- self-explanatory

When creating a site, get rid of the question marks
- where should user start?
- why did the creator call it that?
- can the user click on that?
- where is the navigation?
- why did they put something where it is?
- are those two links the same?

There is a continuum between "obvious to everyone" and "totally obscure" and there are always tradeoffs involved. Tradeoffs should usually be skewed further toward "obvious" than we think when naming things on a site.

A user shouldn't have to wonder whether a link or button is clickable or not. Every question mark adds to the user's cognitive workload and distracts them from their current task. These distractions can add up.
- people don't like puzzling over how to do things
- creates sense that site builders don't care enough to make things obvious
- can erode confidence in the site and the organization behind it

The most important thing is to understand the basic principle of eliminating question marks
- notice all the things that make you think
- recognize and avoid them in things that you build

Self-explanatory: takes a little thought to get it
- used for original or groundbreaking things, or complicated things
- use elements (appearance, names, and small amounts of text) to create a sense of near-effortless understanding

"If you can't make something self-evident, you at least need to make it self-explanatory" - Krug, chapter 1, page 18

Why is all of this important?
- self-evidence makes everything seem better, feels effortless
- most people are going to spend less time looking at pages than creators imagine, so creators must make pages self-evident or self-explanatory in order to be effective

====Chapter 2====
There is a difference:
- how we think people use web sites
- how people actually use web sites

How we think people use web sites
- pore over each page
- read all text
- figure out organization
- weigh options before clicking links
- "great literature"

How people actually use web sites
- glance at each new page
- scan some of the text
- click on the first link that catches their interest or resembles what they're looking for
- they don't look at large parts of the page
- "billboard going by at 60 miles an hour"

Three facts about real-world Web use:
- Fact 1: we don't read pages, we scan them
- Fact 2: we don't make optimal choices, we satisfice
- Fact 3: we don't figure out how things work, we muddle through

Fact 1
- users scan or skim pages for words or phrases that catch their eye
- exceptions include news stories, reports, or product descriptions; alternate between reading and scanning
- reasons to scan = users are usually on a mission to get something done quickly, find the relevant bits that match our interests or the task at hand, and we're taught how to scan as a basic skill with reading
- focus on task, matching interests, and trigger words hardwired into us (examples are "free", "sale", "sex", and our own names)

Fact 2
- satisficing = we choose the first reasonable option, not the best overall option
- users are in a hurry, optimizing takes time
- not much penalty for clicking wrong on a site
- weighing options may not improve chances
- guessing can be fun, adds in pleasant possibility of running into something surprising and good
- not applicable to all users; depends on frame of mind, time constraints, and their confidence in the site

Fact 3
- few people take time to read technology instructions, instead they forge ahead and muddle through with plausible ideas about what they're doing and why it works
- users tend to use consumer Web products in ways that are nothing like what the designers intended, users can get things done that way
- muddling through is not just limited to beginners
- doesn't matter whether users fully understand how things work, just that it works, lack of user caring, unimportant
- stick with what works, tend not to look for a better way unless users stumble across one
- making sure users "get it" is a big deal because while muddling through works sometimes, it is inefficient and error-prone
- "getting it" = better chance of finding what users are looking for, understand full range of what site has to offer, better chance of steering users to parts of site creators want them to see, make users feel smart and in control when using site, bring users back to site

"If your audience is going to act like you're designing billboards, then design great billboards" - Krug, chapter 2, page 27

====Chapter 3====
Important things creators can do to make sure users see and understand as much as possible
- take advantage of conventions
- create effective visual hierarchies
- break up pages into clearly defined areas
- make it obvious what's clickable
- eliminate distractions
- format content to support scanning

Conventions = widely used or standardized design patterns
- users expect to know where things are located on a page, how things work, and how things look
- evolved for different kinds of sites to solve the same set of problems
- make life easier because users don't have to constantly figure out what things are and how they work as users move from site to site
- designers are often reluctant to take advantage of conventions; reinvent the wheel, easy to underestimate how much value conventions provide, must be sure that replacement is self-explanatory so there's no learning curve or adds so much value that it's worth the small learning curve it demands
- "Innovate when you //know// you have a better idea, but take advantage of conventions when you don't" - Krug, chapter 3, page 32
- rule of thumb = be as creative and innovative as you want, just make sure it's still usable
- consistency is good but not always necessary, clarity trumps consistency

Visual hierarchies
- make sure all the visual cues accurately portray the relationships between the things on the page (what is most important, what is similar, which things are part of other things, etc.)
- three traits: the most important things are the most prominent (larger, bolder, distinctive colors, more white space, set near the top). things related logically are related visually (group together under a heading, share a visual style, putting them in clearly defined area), and "nesting" visually to show what's part of what (putting section names over titles)
- pre-processes a page for users, organizing and prioritizing content so users can grasp it almost instantly
- happens so fast that users don't realize it until the visual cues, or lack of them, force users to think

Breaking up pages into clearly defined areas
- allows users to decide quickly which areas to focus on and what areas can be safely ignored
- users decide this very quickly

Make it obvious what's clickable
- users look for visual cues to what is clickable (shape, location, and formatting)
- has waxed and waned as a problem since the Web's beginning, resurfacing as an issue in mobile design
- easiest to stick with one color for all clickable text, make sure shape and location define them as clickable

Eliminate distractions
- shouting = when everything on the page is clamoring for user attention (invites to buy, exclamation points, bright colors, animations, etc.), the result of a failure to decide what elements are the most important and create a visual hierarchy to guide users to them
- disorganization = things are strewn everywhere, the result of the designer not understanding the importance of using grids to align elements on a page
- clutter = pages with too much stuff, the result of low signal-to-noise ratio (lots of noise, not much information, noise obscures useful stuff), assume everything is visual noise and get rid of anything not making a contribution to the page

Format text to support scanning
- use plenty of headings, use more than you'd think and put more time into writing them, make an obvious visual distinction between varying levels of heading, don't let headings float
- keep paragraphs short, avoid "wall of words", single-sentence paragraphs are fine, online reading is not the same as textual reading, get into the habit of breaking long paragraphs in two
- use bulleted lists, anything that can be a bulleted list probably should be, there should be a small amount of additional space between listed items for optimal readability
- highlight key terms, format important key words and phrases in bold when they first appear in text, don't highlight too much or effect will be lost

====Chapter 4====
Second law of usability = doesn't matter how many times you click as long as each click is a mindless and unambiguous choice

- "number of clicks to get anywhere" is useful, most sites have a three-click to five-click rule to get to any page in a site
- number not important, amount of thought and uncertainty in each click is, how "hard" the click is
- "each click should be painless and give [the user] continued confidence that they're on the right track" - Krug, chapter 4, page 43
- users follow "scent of information", links that clearly and unambiguously identify target links that get them closer to what they want
- rule of thumb = three mindless clicks equal one click that requires thought

Difficult choices
- happens all the time, especially in forms
-when it cannot be avoided, designer must go out of their way to give as much guidance as the user needs, no more
- guidance works best when it's brief (smallest amount of info that will help user), timely (placed so user will encounter it exactly when needed), and unavoidable (ensure user will notice it)
- make these choices mindless to make a site easy to use

====Chapter 5====
Third law of usability = get rid of half the words on a page, then get rid of half of what's left
- first part is realistic
- second part encourages ruthlessness about it

Omit needless words
- E.B. White's seventeenth rule in //The Elements of Style//
- presence of lots of words taking up space suggest they need to be read, can be daunting to users
- reduces the noise level of the page
- makes useful content more prominent
- makes pages shorter so users can see more at a glance without scrolling

Happy talk = introductory text, has a tiny voice saying "blah blah blah" in the back of users' heads
- conveys no useful information
- focuses on saying how great something is rather than explaining what makes it great
- found on Home pages, from pages of the sections of a site where links are found
- can and should eliminate this in web pages as much as possible

- no one is going to read them until repeated "muddling through" attempts have failed
- if instructions are wordy, chances of users finding useful info are low
- make everything self-explanatory or as close to it as possible
- if instructions are necessary, cut to bare minimum
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki