Web Design (Sundays): Navigation Part 1

Navigation Part I. It’s so important and should probably be one of – if not the – most important features in a website. Navigation has two parts: the front end and the intrinsic (or built-in) end.

The front end is what the consumers see. In other words, it’s what we see. We call up a site and we see the buttons/links/images that will lead us around the site.

A very quick and very brief look at the creation of website navigation.

A very quick and very brief look at the creation of website navigation.

The front end is what the consumers see. In other words, it’s what we see. We call up a site and we see the buttons/links/images that will lead us around the site.

I’m calling the back-end of website navigation intrinsic because it’s easiest to think of being built-in to the site. If the concept of the website doesn’t focus on ease of use for us, you can bet no one is hanging around long to figure out how to get around the site.

Navigation needs to be a focal point in a site from the get-go. When the developers are drawing up the site, the first step is to brainstorm what pages and content there will be. The next step is how it is all connected either by using charts, webs, maps – you name it. Then the front-end navigation needs to fulfill these back-end plans.

It’s a tall order certainly. But there are some basic things to think about if you’re creating a webpage or things to take in next time you’re web surfing.

  1. Navigation needs to be clear. No excuses.

A person should never (not for a moment!) wonder how to get around. Yes, creative features can be a part of the navigation, but it better be easy to understand for those of us less internet- or tech-savvy.

A great example of navigation that fits in with the page but easily allows people to see what they want.

A great example of navigation that fits in with the page but easily allows people to see what they want. (http://mediaforcegroup.co.uk/)

2.  It should connect us to EVERYTHING.

One of the best bits of information I picked up in school about building sites is this: a user does not always land on your home page. Therefore if your navigation doesn’t connect every single page in an efficient manner, you can kiss those web surfers goodbye. The most irritating thing is to try to sift through a website’s pages in order to find what you’re looking for. Just remember, every page should be as connected as your homepage would be.

Studio Output's webpage has a neat menu system - in other words, you click on a link and more options appear right below with numbers representing amount of content in each category. Neat menu set up but still easy to use and clear.

Studio Output’s webpage has a great menu system – in other words, you click on a link and more options appear right below with numbers representing amount of content in each category. Neat menu set up but still easy to use and clear. (http://studio-output.com/)

3. A reader should not notice the navigation.

No, of course they need to see it. But they don’t “see” it. Successful navigation should barely register with the user. It’s like driving a car. We’re pushing the pedals and scanning the road, but we don’t always think about it. Navigation is the same way. It should never divert the attention from the page’s content. It’s sad that something so important is barely registered. But that means it’s successful!

In order for a reader to have the experience you want, you don’t want them to focus on where they were and where they’re going next. It should be intrinsic.

Final Note: Now if these considerations have been acknowledged, considered and successfully built into the site, it’s time for fun. Part 2 of navigation will show a few examples of successful, unique navigation that’s entertaining but still allows people to do what they want on the site.

To go further, check out Charlotte‘s post on Onextra Pixel describing 10 principles of navigation design and why quality navigation is so critical.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s