The basic principle of web design is that the user shouldn’t have to think. It means that as far as is humanly possible, when I look at a Web page it should be self-evident, obvious, self-explanatory.

Hence, the site visitor should never have to ask himself:

  • 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?

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

How we really use the web?

We don’t read pages; we scan them. We scan because (i) we are usually in a hurry, (ii) we know we don’t need to read everything, and (iii) we’re good at it – we’ve been scanning newspapers all our lives.

We don’t make optimal choices; we satisfice. That means that we don’t choose the best option – we choose the first reasonable option. Why do we do this? Because (i) we’re usually in a hurry; (ii) there’s not much penalty for guessing wrong; (iii) weighing options may not improve our chances, and (iv) guessing is more fun.

We don’t figure out how things work; we muddle through. Why do we do this? Because (i) it’s not important to us to figure out how things work, and (ii) if we find something that works, we stick to it.

Designing pages for scanning, not reading

The five principles are:

  • Create a clear visual hierarchy on each page. Three principles to that: (i) more important items are larger/bolder/distinctive color, (ii) things that are related logically are related visually, and (iii) things are “nested” visually to show what’s part of what.
  • Take advantage of conventions.
  • Break pages up into clearly defined areas.
  • Make it obvious what’s clickable.
  • Minimize noise.
  • Users like mindless choices

The “number of clicks to get anywhere” doesn’t matter. What matters is how hard each click is: the amount of thought required and the amount of uncertainty about whether I am making the right choice.

  • Omit needless words
  • Remove half of the words.
  • Remove ‘happy talk’: introductory text that’s supposed to welcome us to the site or site section etc. If you’re not sure whether something is happy talk, here’s a sure-fire test: if you listen very closely while you are reading it, you can actually hear a tiny voice in the back of your head saying, “Blah blah blah blah blah…”
  • Remove instructions. No-one reads instructions – at least not until after repeated attempts at “muddling through” have failed.

Designing navigation

Use web navigation conventions. Breaking conventions will frustrate the user.

Have persistent navigation – a set of navigation elements that appear on every page. Persistent navigation should include these five elements:

  1. The Site ID (logo) – top left
  2. A way home
  3. A way to search (top right)
  4. Sections
  5. Utilities (shopping cart, site map, help etc)

The only exception is the homepage (sometimes it doesn’t need the persistent navigation because it isn’t like other pages), and certain forms pages (e.g. when I’m paying for my purchases on an e-commerce site you don’t want me doing anything except finish filling in the forms).

Every page should have a page name. The page name needs to be in the right place: framing the content that is unique to this page. It needs to be prominent (it should say, “this is the heading for the entire page”). Importantly, the name needs to match what I clicked. If I click on a link that says “Hot mashed potatoes” then the site should take me to a page named “Hot mashed potatoes”.

Display a “You are here” indicator. i.e. highlight my current location in whatever navigation bars, lists or menus appear on the page.

 

Display Breadcrumbs. Put them at the top of the site, and use > between levels. For example:

  • You are here: Home > Hobbies > Book Collecting > Welcome
  • Use tiny type (to make it clear the breadcrumbs are just an accessory). Use the words “You are here” to make it clear they are breadcrumbs. Boldface the last item.
  • Use tabs. The reasons are:
  • They’re self-evident. Everyone “gets” them.
  • They’re hard to miss and hard to mistake for anything but navigation.
  • They’re slick.
  • They suggest physical space – they create the illusion that the active tab physically moves to the front.
  • Try colour-coding your tabs. And when the user enters the site, show a tab selected.

Designing the home page

The most important task for the homepage is conveying the big picture. As quickly as possible the homepage needs to answer these four questions:

  1. What is this?
  2. What do they have here?
  3. What can I do here?
  4. Why should I be here – and not somewhere else?
  5. Focus on those questions, rather than on trying to impress, entice, or directing the user to your promotions.
  6. The top five excuses for not spelling out the big picture on the homepage are:
  7. We don’t need to. It’s obvious.
  8. After people have seen the explanation they will find it annoying.
  9. Anyone who really needs our site will know what it is.
  10. That’s what our advertising is for.
  11. We’ll just add a “First time visitor?” link.

 

How to get the message across:

  1. Have a tagline (next to the Site ID). It’s a succinct description of the whole site. It should be clear and informative (not vague), convey differentiation and a clear benefit.
  2. The welcome blurb: a terse description of the site, displayed prominently. Use as much space as necessary for it.

A fifth important question the homepage needs to answer is “Where do I start?”

If you want a great site, you need to usability test

You only need to test with three or four users. The first three users are very likely to encounter nearly all of the most significant problems. Testing only three users helps ensure that you will do another round of testing soon.

It doesn’t matter who you pick to test. Anyone will do.

Test often, at each phase of web development.

 

Goodwill

Things that decrease goodwill:

  1. Hiding information that I want (customer support phone number, shipping rates, prices).
  2. Punishing me for not doing things your way (e.g. spaces in my credit card number).
  3. Asking me for information you don’t really need.
  4. Faux sincerity (“Your call is important to us”).
  5. Putting sizzle in my way (long flash intro).
  6. Amateurish looking site.

Things that increase goodwill:

  1. Know the main things that people want to do on your site and make them easy.
  2. Tell me what I want to know.
  3. Save me steps whenever you can.
  4. Put effort into it.
  5. Know what questions I’m likely to have, and answer them.
  6. Provide me with creature comforts, such as printer-friendly pages.
  7. Make it easy to recover from errors.
  8. When in doubt, apologise.

Accessibility and CSS

The low-hanging fruits are:

  1. Add appropriate alt text to every image.
  2. Make your forms work with screen readers (use the HTML ‘label’ element to associate the fields with their prompts)
  3. Create a ‘skip to main content’ link at the beginning of every page.
  4. Make all content accessible by keyboard.
  5. Don’t use JavaScript without a good reason.

Reference 

https://blog.binary.com/dont-make-me-think-book-summary/ 

 

Book 

http://topuxd.com/wp-content/uploads/2016/07/dont-make-me-think-a-common-sense-approach-to-web-usability-2nd-ed-2005.pdf