Edit Summary

You are not logged in. That's ok - you can edit a summary anonymously - but we'd like to encourage you to sign up or log in so that you get credit for your work.

Markdown formatting tips (advanced)

# your text	→	Your Text
## your text	→	Your Text
### your text	→	Your Text
_your text_	→	your text
your text	→	your text
your text	→	your text
`my code`	→	`my code`
* Bulleted list * Second item	→	• Bulleted list • Second item
1. Numbered list 1. Second item	→	1. Numbered list 2. Second item
[link name](URL)	→	link name
***	→	Horizontal ruler
<http://url> <email@add.com>	→	Auto-linked
![Alt text](URL)	→	Image

Summary

**Note:** This isn't really a business book, but it's one of my favorites, and I think most businesses are on the web these days!

# Key Points

"Don't make me think" refers to the idea that when a web site makes you stop and think about what you're doing, it's making your life harder, and perhaps isn't designed as well as it could be.

# Summary

## Don't make me think.

Things that make you think add to your brain's workload.  It might not be much, but these things add up, so every bit of clarity that can be added is welcome.  Nobody likes feeling like they're not sure what to do.

Not everything can always be self-evident.  If not, settle for self-explanatory.

## How people use the web

Most people don't read an entire web page, but simply scan it for the first thing that looks good, which they then proceed to click.  People don't attempt a thorough understanding of a web site, but prefer to *satisfice* - making do with what seems like pretty good choices.

Therefore:

## Design pages for scanning, not reading

* Create a clear visual hierarchy.
* Nest text to show what belongs to what.
* Conventions are useful.  Stick to them unless you have a really good reason, because they help people to avoid thinking.
* Clearly define portions of a page.
* It should be very clear what is clickable.
* Try and avoid "noise".

## Mindless choices are good

In the sense that people don't mind clicking more, if they are confident that they're clicking on the right thing, and the choice was easy.

## Writing for the web

Keep it brief.

Get rid of half the words, then get rid of half of what's left.

Instructions are often useless - it's far, far better to make things self-evident.

## Navigation

Design for both browsers, who click around to find what they want, and searchers, who go immediately for the search box.

Some problems with browsing, as compared to the more 'human' experience of a store, are the lack of a sense of scale, no sense of direction from one place to the next, and no sense of where we are, exactly.

Navigation exists to guide us, to give us something to grasp, tell us where we are, tells us how to use the site, and if it works well, increases our confidence with the site.

"Persistant navigation" appears on every page, and usually refers to:

* Site ID
* Sections
* Home link
* Search link or box
* Extra utilities

The home page, however, may be an exception to this rule, as well as pages that exist solely to provide a form to be filled out.

Sections can also be called the "primary navigation" and are links to the main sections of the site.

Utilities are useful things that should be readily available, yet are not part of the hierarchy.  They shouldn't be as prominent as the sections.

### Page names

* Every page should have a name, and it should be in the right place: framing the page's content.
* The name should be prominent, as well as matching what you click to get there!

Breadcrumbs are a useful technique, but shouldn't be used in place of high quality navigation.  The navigation should show at least the top two levels without having to resort to breadcrumbs.

Tabs are a great means of doing navigation because they're very obvious, impossible to miss, and look good, to boot.

"The trunk test": if you've been blindfolded and locked in a car trunk, you should be able to answer these questions about a site immediately when your blindfold is removed:

* What site is it?
* What page am I on?
* What major sections does this site have?
* Where can I go from here?
* Where am I in relation to the rest of the site?
* Where can I go to search?

## Home page

The home page is tough, because everyone tries to pull it in a different direction.  It must accomplish/contain the following:

* Site identity and mission.
* Hierarchy - give an idea of what the site contains.
* Search box.
* Teasers for content.
* Current content.
* Promotional offers.
* Shortcuts for the most frequently viewed data.
* Registration/login.

It should also show you how to get what you want from the site, tempt you with things you didn't know you were looking for, show you how to get started, and also give a good impression.

A home page is also the place where you *need* to spell out the big picture.  Remember not to write too much, and include these elements:

* tagline - next to the site id, sums up the whole site.
* welcome blurb - a *terse* description of the site.

Be sure to test the home page with other people who are not 'blind' to the site because they've been looking at it as much as you have.

A good tagline is clear and informative, normally between 5-10 words, and also convey what's different about your site, rather than vague, generic text.

## Web design arguments are often a waste of time

Avoid useless debate between team members.  Rather than debate what "most people like", look at what works for your site, and **test it**.

## Simple, cheap usability testing

Testing doesn't have to be perfect, because any testing is far better than no testing.  The earlier testing occurs, the better.  Testing is an ongoing process - keep doing it as your site evolves.  Cheaper tests are better, because they are more likely to happen at all, and happen more often.

* You only need a few people, 3 or 4.
* Almost anyone will do, you don't need to carefully select people.
* You don't need much planning to do tests - just decide what you're going to show and do.
* Costs will probably be under $400, with a small ($50-$100) stipend for your users' time.
* Debrief immediately after the test and put the knowledge gained to use.

Basic testing requires an empty room with a desk, computer, a few chairs and to show what the user is doing to others, a camcorder, long video cable and tripod.  The video setup is used not to videotape the session, but simply to broadcast it into another room where interested parties (anyone who is interested - developers, designers and management are all welcome) can observe the session and discuss it freely.  A more advanced setup might utilize a video recorder aimed at the user's face in addition to one following the screen.  Another possibility is a screen recording system that records exactly what's happening on the computer's screen.

Tests should consist of several parts:

* See if they understand what the site is about, why it is valuable, how it works, and so forth.
* Ask the user to perform some tasks on the site, and see how well they are able to accomplish these.

Once you're done, review the results immediately - try and determine what the problems were, and how to go about fixing them.  Ignore problems where the user had a little problem but then found the right way.  Being unclear on the overall concept, not finding the works they seek, and being overwhelmed by too much information are common problems. If you fix something, make sure it doesn't break other aspects of the site.

## Usability - comment courtesy

Depending on their mood in any given moment, most people have a "reservoir of goodwill".  Each problem they encounter on a web site drains it (and when things work well, maybe it gets added to).  When they hit their limit, they're likely to leave your site unless they absolutely must use it.

"Don'ts"

* Don't hide information users want.
* Don't require the user to adhere to the site's dictats (phone numbers should be ok with our without dashes, dots or whatever).
* Don't ask me for information you do not need.
* Don't be phony.
* Don't get in the way of using the site with fancy features.
* Don't make an amateurish looking site.

"Do's"

* Make the things people want easy to do, and obvious.
* Tell people what they want to know.
* Don't make people jump through any more hoops than they absolutely must.
* Put some effort into it - users will see it and appreciate it.
* Know, and show, answers to common questions.
* Add extra touches, like printer friendly pages.
* Make it easy to back up and try again in case of user errors.
* Apologize, if the site simply doesn't do something a user wants.

## Accessibility

By "[accessibility](http://en.wikipedia.org/wiki/Web_accessibility)", we mean making it so that, for example, a visually impaired person using a screen reader will be able to navigate and utilize your site.  You should make your site accessible, because of "how extraordinarly better it makes some people's lives".  One very simple test is to view the site with a greatly increased font size, and see if it still looks ok.

Getting accessibility right is difficult, but there are five things you can do immediately:

* Fix the usability problems that confuse *everyone*.
* Read this article: <http://redish.net/content/papers/interactions.html>
* Read one of the following books:
  * [Building Accessible Websites](http://www.amazon.com/Building-Accessible-Websites-CD-ROM-Clark/dp/073571150X/) by Joe Clark.
  * [Constructing Accessible Websites](http://www.amazon.com/Constructing-Accessible-Web-Sites-Thatcher/dp/1590591488/) by Jim Thatcher.
  * [Maximum Accessibility: Making Your Web Site More Usable for Everyone](http://www.amazon.com/Maximum-Accessibility-Making-Usable-Everyone/dp/0201774224/) by John Slatin and Sharron Rush.
* Use CSS
* Low hanging fruit:
  * Add alt text to all images.
  * Make sure forms work with screen readers.
  * "Skip to Main Content" link at the beginning of each page.
  * Ensure that it's possible to navigate by keyboard alone.
  * Be careful with javascript.
  * Use client-side image maps.

# Links

Steve Krug's web site: <http://www.sensible.com/>

Recommended reading: <http://sensible.com/recreading.html>

Edit Summary

Edit: Don't Make Me Think: A Common Sense Approach to Web Usability (2nd Edition)

The Rules

Markdown formatting tips (advanced)

Your Text

Your Text

Your Text