Web Design Best Practices (part 3): Navigation

I'm not a graphic designer, but that doesn't mean I don't know where to find nacho chips at the supermarket.

Before you start thinking I've lost my marbles by putting these two seemingly incongruous elements together in a sentence, let me explain myself. Navigating through a website is a lot like making your way through a supermarket. Supermarkets and websites share many characteristics which we can consider through the concept of "affordances", or "action possibilities which are readily perceivable by an actor" (definition from Wikipedia).

At a supermarket, these expectations are broadly related to 1)store layout, 2)product placement, and 3) cross-promotion. On a website, these expectations are related to 1) homepage layout, 2) product placement, and 3) cross-promotions. Similar, no?

At the supermarket, you arrive at the entrance, get your shopping cart, and make your way through the sliding doors. You know with your eyes closed that the first food you're likely to see are fruits and vegetables, then bread, then meat. (Supermarkets, at least the big ones, also tend to promote "green" products at the entrance now too - for public relations purposes).

On a website, you have come to expect that the website homepage will give you a thorough, if high-level, overview of everything that's in the site, starting with the "reason" for the company's presence, the products or services the company offers, and the company's actions (through news, events, and public relations).

Second of all, without knowing why, you have a pretty good sense of where you'll find, let's say, nacho chips. Even if you've never been to the specific supermarket before, you are pretty confident that nacho chips will be found a few rows to the left of the vegetables, probably in the aisle adjacent to dairy products. Your knowledge of the placement of a product supermarket is pretty astonishing, isn't it? It's because of intuition based on past experience, habits, and the practicality of gathering this product as part of experience of fulfilling tasks in a more or less linear way associated with your household economy. In other words, nacho chips are a treat, but while you are picking up required items such as butter or milk, they sure are nice to have.

Similarly on a website, you have a pretty good sense where you might find the "search" box: on the top right of the screen. Websites often use this space on the screen for search because it is habitual, and practical, to place a site-wide tool in a highly visible location without limiting space for core business.

The third element of navigation has to do with cross-promotion. You know that you are likely to find salsa at eye-level beside the nacho chips. While logically salsa shares more qualities with tomato sauce or barbecue sauce, its application is directly related to nacho chips (and subsequently related to watching a football match on TV). What if supermarkets also placed avocados, garlic and lemons beside the chips? Would people eat more guacamole?

Similarly on websites, when you're on, say, a product page, you are likely to find information about product support, a sign-up for a product newsletter, and options to contact a sales-person.

How do you take this information on intuition, placement and affordances and turn it into a better user experience? Some of the answer comes down to following best practices, seeing what your competition is doing, studying websites you admire or dislike, and working with a user experience specialist to put best practice into practice. And some of the answer comes from learning about affordances. Frankly there is no better way than to sit beside a real-world user of your website and watch closely to see what they find, how they move through the site, and whether they do what you want them to do.

You may also benefit from a fact-finding trip to the supermarket, and then put your metaphorical avocados at metaphorical eye-level, beside the metaphorical nacho chips.