![[Home]](http://www.bayleshanks.com/cartoonbayle.png)
recommends web application design handbook: best practices for web-based software for web app design
the most important rule for making a web site easy to use: "don't make me think"
the second most important rule: minimize # of words
user "should be able to "get it" -- what it is and how to use it -- without expending any effort thinking about it"
how self-evident? site should be sufficiently self-evident that someone "with no interest in the subject of your site and who barely knows how to use the back button" "could look at your site's Home page and say, 'Oh, it's a ____.""
this property is distributive. the user should be able to look at any part of any page and see what it is for without thinking.
examples of what the user should not have to think when looking at various parts of the page or the page as a whole:
more examples of things that make us think:
note that the thought required for the user to resolve these questions takes less than a second (e.g. if the user is not sure if something is clickable, they can point at it and see if the cursor changes). these things should still be avoided when possible.
p.s. don't make a design checklist with these things; instead, just understand the basic principal of "eliminating question marks" (over the heads of the user, if imagined as cartoon icons overlayed on the web page, looking at various parts of it). "... you'll begin to notice all the things that make __you__ think while you're using the web, and eventually you'll learn to recognize and avoid them in the pages you're building"
"Why are things always in the last place youlook for them? Because you stop looking when you find them" -- children's riddle
"when we're creating sites, we act as though people are going to pore over each page, reading ... figuring out how we've organized things, and weighing their options before deciding which link to click. What they actually do... is __glance__ at each new page, scan __some__ of the text, and click on the first link that catches their interest of vaguely resembles the thing they're looking for. we're thinking... "product brochure" ... while the user's reality is much closer to 'billboard going by at 60 miles an hour'". there are exceptions, but in general it's closer to this than most of us imagine.
"what we see when we look at a Web page depends on what we have in mind, but it's usually just a fraction of what's on the page... we tend to focus on words and phrases that seem to match (a) the task at hand (b) our current or ongoing personal interests, ... (c) the trigger words that are hardwired into our nervous system, like 'Free', 'Sale', and 'Sex', and our own name."
"one of the things that becomes obvious as soon as you do any usability testing... is the extent to which people use things all the time without understanding how they work, or with completely wrong-headed ideas about how they work...very few people take the time to read instructions...muddling through is not limited to beginners. Even technically savvy users often have surprising gaps in their understanding of how things work"
Why? "It's not important to us" (lack of caring, not lack of intelligence) and "If we find something that works, we stick to it". "Web designers often have a particularly hard time understanding -- or even believing -- that people might ((not care to understand how things work)), since they themselves are usually keenly interested in how things work."
What to do? "If your audience is going to act like you're designing billboards, then design great billboards"
"
"the __appearance__ of the things on the page -- aoo of the visual cues -- clearly and accurately portray the __relationships__ between the things on the page"
e.g. in newspapers, the picture that goes with a certain story are spanned by the same headline; the most important stories have larger headlines, wider columns, and a more prominent position
we parse visual hierarchies quickly and preconsciously. "...when a page doesn't have a clear visual hierarchy -- if everything looks equally important, for instance -- we're reduced to the much slower process of scanning the page for revealing words and phrases, and then trying to form our own sense of what's important and how things are organized."
"parsing a page with a visual hierarchy that's even slightly flawed -- where a heading spans things that aren't part of it, for instance -- is like reading a carelessly constructed sentence ('Bill put the cat on the table for a minute because it was a little wobbly')"
"at some point in our youth, without ever being taught, we all learned to read a newspaper. Not the words, but the conventions."
e.g. headlines, photo cations, photo credits
"...all newspapers ((use)) the same conventions (with slight variations), so knowing the conventions made it easy to read __any__ newspaper"
"every publishing medium develops conventions and continues to refine them and develop new ones over time" (e.g. the "small semitransparent logos ... in the corner of ((tv screens)) to tell you which network you're watching" didn't appear until TV had been around for about 50 years
web conventions are "very useful" -- "as a rule, conventions only become conventions if they work" "well-applied conventions make it easier for users to go from site to site without expending a lot of effort figuring out how things work" "there's a reassuring sense of familiarity, for instance, in seeing a list of links to the sections of a site on a colored background down the left side of the page"
designers are often reluctant to take advantage of web conventions (because they want to do something new and different, because sometimes that's what they've been hired to do, and also because it helps them make their name)
"if you're not going to use an existing Web convention, you need to be sure that what you're replacing it with either (a) is so clear and self-explanatory that there's no learning curve -- so it's as good as a convention, or (b) adds so much value that it's worth a small learning curve. If you're going to innovate, you have to understand the value of what you're replacing, and many designers tend to understimate just how much value conventions provide.
my recommendation: innovate when you __know__ you have a better idea (and everyone you show it to says, 'Wow!'), but take advantage of conventions when you don't.
"ideally, users should be able to... ((glance around and point)) at the different areas of the page and say, "things i can do on this site!" "links to today's top stories!" "products this company sells!" "things they're eager to sell me!" "navigation to get to the rest of the site!"
"several ... eye-tracking studies of Web page scanning suggest that users decide very quickly which parts of the page are likely to have useful information and then almost never look at the other parts -- almost as though they weren't there"
e.g. on a web page in which the whole page is colorful, making some text colored isn't a good indicator of clickability.
(minor point: if you use a little triangle near the link like an arrow to mark the link as a link, make sure the arrow points towards the link)
busy noise (loud) : e.g. invitations, exclamation points, bright colors
background noise (quiet): black lines between menu items (they should be gray)
"some people have no problem with busy pages and background noise, but many do"
"it doesn't matter how many times i have to click, as long as each click is a mindless, unambiguous choice" -- krug's second law of usability
usability professions give recommendations about "how many times you can expect users to click to get what they want without getting too frustrated". some specify a maximum number of clicks to get anywhere in the site (usually 3-5). "but i've come to think that what really counts is ... the amount of thought required, and the amount of uncertainty about whether i'm making the right choice"
"the rule of thumb might be... three mindless, unambiguous clicks equal one click that requires thought" exception: "if i'm going to have to drill down the same parts of a site repeatedly, ... or if pages are going to take a long time to load"
e.g. "if i go to Symantec's Virus Updates page because i want to update my copy of Norton Antivirus, i'm faced with two choices i have to make before i can continue", language and product. the pulldown for product gives choices including "NAV for Windown 95/98". "Now, I'm sure that it's perfectly clear to everyone who works at Symantec that NAV and 'Norton AntiVirus?