Horizontal Navigation: Trends of the Future?

Horizontal Navigation: Trends of the Future?
http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/digg_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/reddit_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/dzone_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/stumbleupon_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/delicious_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/blogmarks_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/newsvine_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/google_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/myspace_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/facebook_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/yahoobuzz_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/sphinn_16.png http://www.nurelm.com/themanual/wp-content/plugins/sociofluid/images/twitter_16.png

A mainstay among website development has become the horizontal navigation. Due to limitations of vertical style navigation bars, horizontal navigation dominates design. CNN discovered certain limitations before switching from vertical to horizontal a few years back. They even created a page to highlight the changes they were going through. Taken from Smashing Magazine’s article, I compiled a short list of their  “techniques and best practices to improve the usability of horizontal navigation bars.”

  1. Create primary points of focus – keep names the same. Using creative names detracts from usability. Also, avoid design that will be distracting or confusing for the user to understand and find what they’re looking for quickly.
    1. Once you figure out what parts of your website are “primary” and what parts are “secondary,” you can establish a visual hierarchy that enhances usability.
    2. Primary links are usually accessible from every page and located near the primary links. This shows the user that this information is important.
    3. The prime idea would be to design the secondary links likewise to show a hierarchy of importance.
  2. Include A Search Box, typically on the right side of the website as a part of the navigation.
  3. Avoid “Surprise” Drop-Down Menus. Drop-down menus  are quite prevalent in modern design because they simplify cluttered layouts.
    1. Visually indicating whether a navigation link will reveal a drop-down menu when the user mouses over it is best practice. This is most simply accomplished with a downward-pointing triangle, but whatever works for your design is fine also.
  4. Before you design a horizontal navigation menu, consider link names, section hierarchy and any other factors that could affect usability.

When it comes to designing your own navigation bars though, common sense is key. What may make sense to you might not make sense to a user. Although horizontal navigation is now mainstream, having a vertical navigation isn’t out of the question if it works for your design. As long you have your hierarchy of importance set and it is obvious to the user, the sky is the limit. I personally do enjoy horizontal navigation bars and the fun things you can design to go with them;  Apple being one of my favorites for clean looks and simple navigation.  Last, who knows what the future holds for us web developers, for the internet is an ever-changing beast.

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations before switching from vertical to horizontal a few years back.

There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better.

In this article, we will focus on a variety of techniques and best practices to improve the usability of horizontal navigation bars, and we will note less effective styles. We’ll also look at several trends that developers can choose from when working on the navigation design for their next project.

About the Author

Author Profile: