Author – Steve Krug

How to get people to do stuff – Susan Weinschenk
Influence – Robert Cialdini
The User Experience Team of One – Leah Buley
It’s Our Research – Tomer Sharon
Rocket Surgery Made Easy – Steve Krug
Forms that Work: Designing Web Forms for Usability – Caroline Jarrett
Letting Go of the Words – Ginny Redish
The Design of Everyday Things – Don Norman
Sources of Power: How People Make Decisions – Gary Klein

Don’t make me think

“Don’t make me think.”
is the overriding principle; the ultimate tiebreaker when deciding whether a design works or it doesn’t.

It means that as far as is humanly possible, 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 and how to use it; without expending any effort thinking about it.

Users shouldn’t spend their time thinking about:

• Where am I?
• Where should I begin?
• Where they put ___?
• What the most important things on this page?
• Why did they call it that?
• Is that an ad or part of the site?

Making every page or screen self-evident is like having good lighting in a store: it just makes everything seem better.

How we really use the web

Facts of life:

1. We don’t read pages. We scan them.
2. We don’t make optimal choices. We satisfice.
3. We don’t figure out how things work. We muddle through.

We tend to focus on words and phrases that seem to match a) the task at hand or b) our current or ongoing personal interests c) the trigger words that are hardwired into our nervous systems, like “free”, “sale”, and “sex”, and our own name.

Most of the time we don’t choose the best option; we choose the first reasonable option.

If your audience is going to act like you’re designing billboards, then design great billboards.

Billboard design 101

If you’re not going to use an existing Web convention make it so that a) it is so clear and self-explanatory that there’s no learning curve, so it’s as good as the convention, or b) adds so much value that it’s worth a small learning curve.

Innovate when you know you have a better idea, but take advantage of conventions when you don’t.

The rule of thumb is that you can and should be as creative and innovative as you want, and add as much aesthetic appeal as you can, as long as you make sure it’s still usable.

Consistency is always a good thing to strive for within your site or app.

If you can make something significantly clearer by making it slightly inconsistent, choose in favor of clarity.

Create effective visual hierarchies

• The more important something is, the more prominent it is.
• Things that are related logically are related visually.
• Things are “nested” visually to show what’s part of what.

Make it obvious what’s clickable.

In general, you’ll be fine if you just stick to one color for all text links, or make sure that their shape and location identify them as clickable. Just don’t make silly mistakes like using the same color for links and non-clickable headings.

The most important things you can do to make your pages scan-friendly:

• Use plenty of headings.
  In general, you’ll want to use more headings than you’d think and put more time into writing them.

If you’re using more than one level of heading, make sure there’s an obvious, impossible to miss visual distinction between them.

Don’t make your headings float. Make sure they’re closer to the section they introduce than to the section they follow. This makes a huge difference.

• Keep paragraphs short.
• Use bulleted lists.
  Almost anything that can be a bulleted list probably should be.

For optimal readability, there should be small amount of additional space between the items in the list.

• Highlight key items.

Animal, vegetable, mineral?

What really counts is not the number of clicks it takes me to get to what I want, but rather how hard each click 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 something like “three mindless, unambiguous clicks equal one click that requires thought.”

Omit needless words

“Get rid of half the words on each page, then get rid of half of what’s left.”

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no necessary parts.

Happy talk must die
The introductory text that’s supposed to welcome us to the site and tell us how great it is or to tell us what we’re about to see.

Instructions must die
Your objective should always be to eliminate instructions entirely by making everything self-explanatory, or as close to it as possible.

Street signs and breadcrumbs

People won’t use your Website if they can’t find their way around it.

Use persistent navigation(global navigation), the set of navigation elements that appear on every page of a site.

Have you ever read a map that did not include a “you are here” icon? Always add some element that showcases the user “you are here” in your site: aka breadcrumbs.

The Big Bang Theory of web design

All the things the Home page has to accommodate for:

• Site identity and mission
• Site hierarchy
• Search
• Teases
• Content promos
• Feature promos
• Timely content
• Deals
• Shortcuts
• Registration
• Show me what I’m looking for
• …and what I’m not looking for
• Show me where to start
• Establish credibility and trust

Nothing beats a good tagline
A tagline is a pithy phrase that characterizes the whole enterprise, summing up what it is and what makes it great.

When choose a tagline:

• Good taglines are clear and informative and explain exactly what your site or your organization does.
• Good taglines are just long enough, but not too long. 6~8 words seem to be long enough to convey a full thought.
• Good taglines convey differentiation and a clear benefit.
• Bad taglines sound generic.
• Good taglines are personable, lively, and sometimes clever.

The farmer and the cowman should be friends

All web users are unique, and all web use is basically idiosyncratic

Does this pull-down, with these items and this wording in this context on this page create a
good experience for most people who are likely to use this site?

Guide for the perplexed

A collection of things that you should always do or never do:

• Don’t use small, low-contrast type. You can use large, low-contrast type, or small (well, smallish) high-contrast type. But never use small, low-contrast type. (And try to stay away from the other two, too.) Unless you’re designing your own design portfolio site, and you really, truly don’t care whether anybody can read the text or not.
• Don’t put labels inside form fields. Yes, it can be very tempting, especially on cramped mobile screens. But don’t do it unless all of these are true: The form is exceptionally simple, the labels disappear when you start typing and reappear if you empty the field, the labels can never be confused with answers, and there’s no possibility that you’ll end up submitting the labels along with what you type. And you’ve made sure they’re completely accessible.
• Preserve the distinction between visited and unvisited text links. By default, Web browsers display links to pages that you’ve already opened in a different color so you can see which options you’ve already tried. This turns out to be very useful information, especially since it’s tracked by URL, not by the wording of the link. So if you clicked on Book a trip, when you see Book a flight later, you know that it would take you to the same page. You can choose any colors you want, as long as they’re noticeably different.
• Don’t float headings between paragraphs. Headings should be closer to the text that follows them than the text that precedes them.