Your website navigation

I came across this article talking about what's important in your website's navigation,

I love the concept of the article as well, they invite you to open your current website in a browser next to the article so you can judge for yourself whether you are frustrating your users or not.

They address some basic thoughts a user thinks when they click on a link.

1) Where am I?

Does your site tell the visitor where they are?

I have to say that this part is a bit difficult to do in the "programming of the site"

Here's a quick tip on how it can be accomplished in an efficient way.

When developiing your navigation create the nav, using a list style and in that list style add an item labeled current, within current put all the css, that makes the button look the way you'd l;ike, then in the list style on the current page add this class to that item; i. e.,

  <div id="navigation">   <ul>    <li><a href="index.asp">Home</a></li>    <li class="current"><a href="moving.asp">Moving</a></li>    <li ><a href="storage.asp">Storage</a></li>    <li ><a href="locations.asp">Locations</a></li>    <li ><a href="buyBoxes.asp">Buy Boxes</a></li>    <li ><a href="aboutUs.asp">About Us</a></li>    <li ><a href="moving101.asp">Moving 101</a></li>    <li ><a href="customerCare.asp">Customer Care</a></li>   </ul>  </div>

The next important thing to consider is:

Where have I been?

Adding a "breadcrumb" to your site's navigation will help your visitor orientation.

An example php code that helps this work is:

<?php $baseurl="http://www.nopun.com/";  $path_parts = pathinfo($_SERVER['PHP_SELF']);  $parts = $path_parts["dirname"];  $pieces = explode("/", $parts);  echo "<a class='three' href=\"$baseurl\">NPI</a>";  for ($i = 1; $i < count($pieces); $i++)         {         $fixedpieces = ereg_replace("_"," ",$pieces[$i]);         $label = ucwords($fixedpieces);   if ($label == "Searchengine") { $label = "Search Engine"; }         $baseurl = "$baseurl/$pieces[$i]";         echo "<a class='three' href=\"$baseurl\">$label</a>";         } ?>
 
Next is a tool tip or descriptive text to let a visitor know where they would go if they click on a particular link.
 
The article suggests adding a short descriptive sentence or text underneath the main links title, I personally feel this would clutter the design a bit, but their other sugesstion of a tool tip is a great one, you keep the integrity of your site design, while adding a cool feature that is fun to play with.


A perfect example of this type of tool tip can be found at (hover over the servers)
http://www.mediatemple.net/


I have found that I need to add a better nav to the nopun website and will take these features into consideration in a future upgrade, But I can't help but think a "mega menu" could be a cool navigation as well.
 
http://noel4nopun.blogspot.com/2009/08/mega-menus.html
 
Here's the original article. So you can be inspired too, let me know what you think.
 
http://buildinternet.com/2009/09/principles-of-effective-web-navigation
 
Comment