How websites should be designed – Don’t Make Me think!!

I was recently told that a book by Steve Krug called don’t make me think is the undisputed bible when it comes to web usability. With such a glowing reference I bought the book online for less than €5. When it arrived in the post I realised that it was the first edition of many and scolded myself for not seeing through the low price. However I am not one to be deterred and will read it until some glaring outdated advice forces me to abort!

The book is written in simple language and works off one very basic principle. When some one looks at a webpage it should be self evident, obvious and self explanatory..

The person should be able to “get it” – what it is and how to use it – without expending any effort thinking about it.

The image above, taken directly from the book, shows a site user asking themselves a series of questions when they visit the site.

When you are creating a site is is your job to get rid of these question marks.

Some examples that Krug gives about things that make us think are unobvious names (such as unfamilar technical names or jazzy terms that the marketing department came up with) or links or buttons that aren’t obviously clickable.

Sure these things can usually be figured out in a short period of time but the point is that every question mark adds to our cognitive workload, distracting our attention from the task in hand.

Making things self evident is like having good lighting in a store, it just makes everything seem better. The goal is to make things to seem as effortless as possible so as not to sap any energy or enthusiasm from visitors!

The book goes on to detail the difference between how people actually use the web in comparison to how we often think they use the web.

We often think that people read all the information on a webpage weighing up all their options before decided which link to click on next. This is clearly not the case. At best, most of the time people glance at web pages. The image above, again taken directly from the book shows the comparison really well.

There are 3 facts about real world web use.

1. We don’t read pages. We scan them.

We tend to focus on words and phrases that seem to match either the task at hand or our own personal interests. There are also some trigger words which are hardwired into our brain to stand out like “free” “sale” “sex” and our own name.

2. We don’t make optimal choices. We satisfice.

The term satisfice was first coined by economist Herbert Simon which is a cross between satisfying and sufficing. When designing web pages we tend to think that people will look at all the available options and weight them up before deciding which one to chose. In reality though we don’t chose the best option, we chose the first reasonable option.

3. We don’t figure out how things work. We muddle through them.

The extent to which people use things all the time without understanding how they work. Faced with any sort of technology very few people take time to read the instructions.

So if people are only glancing at your site what things can you do to make sure they see and understand as much of your site as possible? There are 4 important things.

  1. Create a clear and visual hierarchy on each page
  2.  Break pages up into clearly defined areas
  3. Make it obvious whats clickable
  4. Minimize noise
Most of these are pretty self explanatory so I won’t go into to much detail but creating a clear and visual hierarchy has some steps worth mentioning
One of the best ways to make a page easy to grasp in a hurry is to make sure the appearance of the thing son the page clearly portray the relationships between things on the page ; which things are related and which things are part of other things.

Pages with a clear visual hierarchy will have three traits

  1. the more important something is the more prominent it is.
  2. Things that are related logically are also related visually
  3. Things are located visually to show whats part of what.

We encounter visual hierarchies all the time, in news papers or other media, but it happens so quickly that the only time that we become aware of them is when they don’t work. When a page doesn’t have a visual hierarchy  we are reduced to a much slower process of taking into the information as we need to scan the page for revealing words and phrases and then trying to form our own sense of whats important and how things are organised.

Well that’s as far as I have got in the book so far, so there will definitely be at least one blog post to follow after this. I would love to hear any feed back from people who have read  the latest edition!