inConcert's Navigation
When designing your site, you are faced with an endless array of options. The thing is, there is just so much to think about and take into consideration, that we often overlook the critical points that can make a site successful. One such point is your sites navigation. It can’t be stressed enough how important your navigation is on your site. Your navigation is the road map that helps users get to where they want to go. You wouldn’t want to drive around without knowing where you are or where your going now would you? In this article we will be taking an in depth look at various navigation styles that create simple, user friendly experiences.
The User Experience
Lets start by taking a deeper look at the implementation of a sites navigation. When a user first loads your site the very first thing they are going to look at 99 out of 100 times is the sites header. If you want to look at things semantically, we can use this to our advantage. Right from the start, we want to ensure that the user knows how to use your site. This means, just keep it simple. The less distraction in your header, the easier it is for the user to immediately pick out what you want them to see as important, which most of the time will be the navigation. The majority of sites on the web integrate their navigation into the header to ensure that the user finds it and recognizes its purpose instantaneously. When a navigation is surrounded by clutter and ads, it can often become difficult for a user to distinguish between the navigation and the junk. This is the primary reason for keeping your navigation as clean and simple as possible.
Text based navigations
The most basic form of a navigation takes form in pure text. This type of navigation can be very easy to overlook, which is why it is critical to ensure that you surround it with plenty of white space. Text based navigations can be implemented either in horizontal or vertical format. Below is an example of a horizontal text based navigation.
As mentioned above, text based navigation’s also often take vertical list form. This typically is used in interior menu navigation’s, an example of a vertical text based navigation can be seen below.
As you can see, text based navigation’s can be very effective when used right. Upon the design process of your site, it is important to take some time as to decide if a text based navigation is right for your site, or if something a bit flashier is needed. A good example of a horizontal text based navigation can be seen in the header of barnesbuilding.net.
Image based navigation’s
A navigation is image based when the nav item consists of a background image to add a more eye catching design element to the site. So that you know what we are talking about here, a good example can be viewed on gardervna.org. Here you will notice that the navigation not only consists of text overlapped onto a background image, but that a consistent hover effect is in place as well. This is a very common trait of image based navigation’s. One huge upside to an image based navigation is its ability to catch the users eye. These types of navigation’s tend to blend with the overall design and theme of the site, creating that natural look and feel as you navigate from page to page. Is an image based navigation right for your site? Well this is a question that you should be asking yourself during the design process of your site. Typically you will want to create an image based navigation if the theme of your site is color and graphic heavy. This is to ensure not only consistency, but that your navigation doesn’t fall into the background as just simple text that can be easily overlooked. An example of an image based navigation can be seen below.
As demonstrated above, an image based navigation can be as simple, or as complex as needed to fit within the theme of the site. Here is a simple rounded box image background to add personality and color to the layout and bring attention to the navigation. With this system, there is a much larger area for the user to hover their mouse over and click, which is an advantage in usability, and also the hover effect is a nice touch to confirm that the user actively has their mouse over the link.
Icon based navigation
Think of an icon based navigation as a cross between text and image based. With an icon based navigation, we move away from a full background image and to an image placed to the side of the text in icon form. This can range from using one standard icon as a hover and active state effect, to having individual icons for each nav item. With an individual icon navigation system, the user is able to easy identify what the nav item is at a quick glance. It also adds a crisp, elegant design element to the site that helps the navigation to pop. Icons are typically used in navigation’s when a site has many different options and pages that are broken down in the main navigation by category. A great example of a standard icon based navigation can be viewed at toysfortotsma.org. An example of an individual icon based navigation can be viewed in the left navigation panel at w3.org. An example of a standard icon navigation can be seen below.
This system adds many of the same usability and eye catching features of an image based navigation while keeping things organized and simple. This is a great method for a site with a very professional and graphically light design.
Dropdown navigation’s
Dropdown navigation’s are an entirely new beast to deal with. These navigation’s can consist of pure text, background colors, background images, and even icons. But one thing is always consistent with them, the main nav items are categories, and upon hovering your mouse over these categories you receive a dropdown effect of subcategory nav items. This technique is most often used on sites that have a lot of content and pages. Rather than just fitting in a simple navigation and relying on interior page linking to get the user around the site, they stuff every nav item in one place. The success of a dropdown navigation comes down to how well its organized, and if the user is able to use it effectively to get to where they need to go. One such example of a dropdown navigation can be viewed on electronicfasteners.com.
Conclusion
Going through these options for your sites navigation is alot to take in. What it comes down to is how you can implement a user friendly, successful navigation into your site. When choosing which style to go with, you have to take an in depth look at the end design of your site. This not only includes the graphics and color scheme, but how many pages and categories it will have. Analyze what the purpose of your site is to determine which navigation style is right for you, but just remember that the best navigation is the one that works. Just imagine that your navigation is a roadmap you are handing to a friend, you want the directions to be as clear and easy to follow as possible. Why would you want anything different on your website?