980px

As you walk into a store looking for something you need you will inevitably use the store’s navigation system to aid you in finding your product:

(Krug) Don't Make Me Think, p. 53

Don’t Make Me Think: A Common Sense Approach to Web Usability – p. 53

See Also: Navigating Home Depot 

A typical shopping scenario goes something like this:

  1. Enter the store
  2. Look overhead for the names of departments
  3. Look at the signs to see the names of each aisle
  4. Look at the individual sections of products
  5. Find your product

Web Navigation 101

Just like you look for clues in a department store, you also look for those same clues when using a website:

(Krug) Don't Make Me Think, p. 55

Don’t Make Me Think: A Common Sense Approach to Web Usability – p. 55

  1. You are usually trying to find something
  2. You decide whether to ask first or browse first
  3. If you choose to browse, you make your way through a heirarchy, using signs to guide you
  4. If you can’t find what you are looking for, you leave

The Overlooked Purpose of Navigation

Navigation isn’t just a feature of a website, it is the website.

Navigation’s main role in a website is fairly obvious, it helps us find us what we are looking for. But, navigation also serves other purposes:

Website Navigation Conventions

Putting your navigation in a standard place and using a proven convention will allow the user to locate the navigation more quickly and be able to use it more easily.

(Krug) Don't Make Me Think, p. 61

Don’t Make Me Think: A Common Sense Approach to Web Usability – p. 61

Typical navigation schemes include:

  1. Site ID: this is also link back to the home page
  2. Main Category Section: global navigation
  3. Sub-Category Sections: sub navigation
  4. Page Name: where you are in the site
  5. Footer: extra site information outside the normal hierarchy of pages

You are Here?

One of the ways that navigation can help someone not feel lost within the site is to use the “you are here” indicators.

(Krug) Don't Make Me Think, p. 75

Don’t Make Me Think: A Common Sense Approach to Web Usability – p. 75

These indicators can be as simple as using a page name and/or using the highlight state of your navigation to announce what page the user is on.

Putting it Together

You: Great Mike… again, thanks for all of the screenshots. But, now how do I put all of this stuff together.

Me: How about we take a look at my example and we can talk about how I put all of this stuff together. Sound good?

(Sinkula) Example Navigation & Content Design

Example Navigation & Content Design, by Mike Sinkula

See Also:

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

  1. Lenny Peters says:

    Great jump off point into list item builds..

    http://css.maxdesign.com.au/listamatic/

  2. Matteus Vaga says:

    Great article that that talks about eye-tracking. Especially coparing the similarities of facebook and Google+

    http://allthingsd.com/20110811/eye-tracking-study-shows-users-perceive-google-and-facebook-virtually-identically/

  3. Matteus Vaga says:

    Great article that that talks about eye-tracking. Especially coparing the similarities of facebook and Google+

  4. Tim Garret says:

    Jakob Nielsen’s 2003 article The Ten Most Violated Homepage Design Guidelines mentions that if you do use a home page link, don’t include an active link to the homepage on the homepage.

  5. Lynn Adams says:

    BBC Site Redesign Eloquently Explained…

    http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html

    I started looking at Mike’s examples here, and wandered off one of them to a site/blog that really interested me: an in-depth description of a redesign, how they thought it out and the graphic elements they adopted. I hope you enjoy it.

  6. Trevor says:

    A cool site with very simple navigation. I liked it so much I wanted to share it.

    http://www.doublehappycreative.com/

  7. Trevor says:

    I came across a great page about using color and gradients in logos. These tend to look better on the web than in print (business cards being an example) but they work good on-screen. Check them out at http://abduzeedo.com/great-examples-colorful-gradients-and-3d-effects-logos .

  8. Trevor says:

    Here’s a great article about navigation: a gallery of 50 beautiful and user-friendly menu systems. It’s good inspiration!

    http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

    Trevor

  9. Trevor says:

    I looked for a web site to use as an example for good navigation and I came across http://www.works4sure.nl . I don’t even know what language this site is in but I still understood how everything worked. I think it’s a great example of good navigation and following established patterns for page layout.

  10. Alex Brendon says:

    here’s the tutorial found on active menu items in CSS. I’ve already used it in a site and it works great. It’s really simple and easy to use.

    http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

    maybe you can put it on the blog or show it to the class because I know everyone wants to use it.

Trackbacks:

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php