Disorientation and how to avoid it

Posted in

 by Will Bell

29 June, 2005

The Click #13

You’re skiing. It’s snowing hard. The mist is thick. Sound is muffled. You keep going, gingerly hoping for a tree or a marker, anything to give you your bearings. Then you think “Am I actually moving?”

A bad website can be just as disorientating.

A good website, on the other hand, makes it obvious where you are and where you are going - this is an essential part of the website designer’s skill.

FreshDirect is a good example. What do they do right?

1. Conventions are followed
The logo is top left. The background is white. The header stays the same from page to page (with the section highlighted in orange - giving you an immediate sense of location).

2. Clear, consistent titles
Clear titles make it obvious what page the user is on. In the example, both the section title ‘SEAFOOD’ and the subsection title ‘FISH FILLETS’ are prominently displayed.

One gripe. ‘Fish Fillets’ in the subsection navigation doesn’t look selected. Minor inconsistencies like this cause confusion.

3. Seven plus or minus two is the magic number
Human short term memory has a limited capacity: 7 items plus or minus 2. Navigation should have no more than nine items (five can be the limit, if the items are particularly abstract or diverse. (For more, check out this book).

Being a big site, FreshDirect has several main navigation bars (listing by product type, by dietary requirement, etc.), but each has 9 items or fewer.

The way the items are split isn’t perfect (you might argue that wine should be in the products navigation bar) - but it successfully breaks the information down into human sized chunks.

4. All information is not equal
FreshDirect has corporate information and a ‘Special note for AOL users’ at the bottom of the page. Unless your site is a company brochure, people come to the site to get a job done. Admin can be relegated to the footer.

5. It reads from left to right
Jobs that need to be done last (for instance, dealing with the shopping cart) are best placed on the right.

Conclusion
Making sites easily navigable takes hard work. If there’s one principle it’s ‘Don’t make me think’ (for a book on this). The less you make your visitors think, the more they can concentrate on what they came to do.