While the topic of website navigation should be simple, somehow there are still sites out there that employ muddled, unfriendly design techniques to torture their users. The options for your navigation bar can seem limitless, but there are some basic principles to keep in mind no matter what style you choose to implement.

1. Naming Your Tabs: being clever is not all it’s cracked up to be

I’d like to say that I never tried to be too cute with the naming conventions of my navigation bar, but then I’d be a dirty liar. The usability of a website’s navigation depends highly on the instant recognition of the page names on your navigation bar. The opposite of this is sometimes referred to as “mystery meat” navigation – a scary foray into the unknown. You should plan on providing the user with the word or phrase that most succinctly describes the page to which they’re about to go. Don’t name the navigation tab “the lookout” when you really mean “portfolio”, even if it fits with an overall site theme. I’ve come to realize first hand that the visual theme of a site can handle its own business without the navigation chipping in. It was a nice gesture, navigation, but we’ll take it from here.

 
The only familiar tab in this group is “contact”. The rest, despite their best intentions, are too cryptic.

 
Now, every navigation tab is unmistakable making it much more effective.

2. HTML & CSS Navigation vs. Image-based Navigation

Other than plain text links which are typically used in sub and side navigation, the main website navigation usually consists of either a series of graphics (jpg, gif, or png) or plain HTML text with background images & CSS for styling. The pros and cons for each are relatively straightforward: HTML navigation gives you more readability regarding search engines, thereby making it a better choice from an SEO (Search Engine Optimization) standpoint. In addition, HTML navigation is also much easier to modify, update, and expand when making changes to your site content. On the downside, there may be some design elements you’d like to add such as more advanced typography, thematic elements, or atmospheric effects that cannot be achieved using plain text.


A typical example of plain-text, HTML-based navigation.

Obviously on the graphics side you’ll find the complete opposite. You get endless possibilities in terms of the look and feel, but much less flexibility when changes are involved and less than optimum SEO performance. It all depends on what the clients needs are and whether or not you can pick up the slack in another area of the site. 

3. Maintaining Consistency

This is another aspect of a poorly designed site that baffles me. Every so often I see someone create a navigation bar that differs depending on which page you’re on. Sometimes the navigation tabs change, sometimes the whole menu moves, and I was actually on a site two days ago where the entire navigation bar disappeared once you reached an internal page. This was not a coding mistake, it was a design choice. The only way to reach another page was to either a) hit the back button and make another selection, or b) scroll all the way down to the bottom and make a selection from the slightly different footer navigation. Yuck.

In fact, even if it was a coding mistake, FIX IT! Moving or modifying the navigation during a user’s travels removes the most important landmark and causes damage to the user experience.

4. Side Navigation & Top Navigation

Side navigation vs. top navigation is a matter of opinion as well as application. Many of the websites I design contain the top navigation in one form or another, sometimes with the side navigation acting as the sub menu. I’ve found this to be a pretty solid way to go if the site flow calls for a large amount of subcategories derived from a basic main navigation. However, if I’m sure the number of elements in the menu is going to remain on the small side, I might try to integrate the sub menu into the main menu somewhere at the familiar top, thereby foregoing any use of side navigation. Again, the use of either depends greatly on both the site architecture and the ambitions of the design itself. Of course, as you can see (designmeltdown.com – atypical nav), there are many more ways to approach your website navigation. Just don’t make it so out-there that it becomes useless. That would be a crying shame.

5. Supplemental Navigation Elements

In addition to the main website navigation and sub navigation, there are other useful areas that deserve some attention: the footer, and tertiary navigation (I prefer to call them utility links). At its core, the footer provides a refuge for those treading water in the deep-end of an endlessly scrolling webpage. I’ve encountered footers from the barely there to the wildly ornate. What they should all contain, however, is the main navigation and any legalese and contact-us links that may not have made the cut to get in the big show. This anchors the page, tells the user when the scrolling party is over, and is a great place to put all those necessary links that were cramping the main navigation’s style. It’s also the first place I look when I need/want behind-the-scenes information about the website – i.e. who built it, are there any career opportunities, what is the address, etc.

One of many different styles of footers.

The utility links are typically items not quite important enough to warrant placement on the website’s main navigation, but not so unimportant that they can be relegated to the bottom of the page. I like to put things like “contact us”, “about us”, and “email us” up there. It gives all the us’ a place to hang out and chew the fat. Also, important links like a store locater and a global site search box are perfect candidates for utility placement.

Utility links abound.

5 Navigation Bar Best Practices: Conclusion & Summary

When you go on a road trip, there is one thing you’d better remember to bring. Even more important that clean undies (you can always go commando), you must remember the map. Ok, the atlas. Ok, GPS, whatever. Whatever method of navigation suits you, it the one thing you cannot travel without. If you don’t know where you’re going, you can’t really go anywhere. Unless you’re backpacking and hitchhiking your way through Europe for a summer to which I say, “Wish I were there. Send me a postcard.” But I digress. The point is that navigation is as important on the web as it is in non-soul-searching travel.

Below is a summary of some of the finer points to remember:

1. Name your navigation menu tabs/items properly. If your tabs say “Spring | Summer | Winter | Fall”, you’d better have some season-y content on those pages.

2. Whether you use all images or text-based HTML navigation will depend on the style & flexibility you want and the necessities of the client.

3. Make sure you don’t bait & switch your way into poor usability. Keeping the navigation in the same place with the same items will promote a more positive user experience.

4. Don’t forget about all your placement options. Some work better than others depending on the amount of content and the overall website layout.

5. Adding supplemental areas of navigation will help free up space on the main menu as well as provide a secondary road map for site utilities like a store locater or search box.