Getting your navigation right is critical in any successful website design. After all, it is the way that your users gets to your site’s content. By having the right information architecture, labeling, and visual cues you can improve user experience and increase click-through rates.
Here are a 5 key considerations when developing your navigation scheme for your website design.
1. Header Height: Keep the header height to a minimum. The content below your header should be not be obstructed by a header that just takes-up too much of the screen. Fixed or “Sticky” headers are nice (when you scroll, the header stays anchored at the top of the screen), but if it’s too high, it can hinder your user’s ability to survey the screen and access the content that they intent to view/read when scrolling. This is even more true when it comes to your mobile view.
2. Number of Main Navigation Items: For us, 5 or 6 main navigation items is optimal – no more than 7. Too many items in the main navigation (which is more often than not horizontal) can get cramped, hard to read and confusing. Make it easy for your viewers to scan your main navigation categories. That white space between each item is important.
3. Navigation Labeling: Try using less generic labels like “Who We Are” and “Our Services” in you main navigation. Think about what what your users are searching for and include those words in your label if possible.
4. Order: Your navigation order is important. We read left – right, so put your most important navigation items to the left. Users expect “Contact Us” to be on the end or to the right of your navigation. Your logo should always link to home, but if your are including “Home” in your main navigation, then put it first.
5. Dropdown Menus: While I do not think it’s necessary to have all of your content accessible via the main menu (top level and deeper pages), there are times when you may want to decide to use dropdown navigation. Dropdown navigation is largely more appropriate in site’s that are deeper, or have a more complex categorization (eCommerce).
I would just say keep in mind three things when using dropdown menus in your navigation. First, consider using a visual indicator next to your label that has a dropdown menu. Secondly, think about how a tablet users navigate your site. I prefer using a “click” instead of a hover in many cases to expose these menus. If not right, hover menus can be quite cumbersome and annoying if not completely unusable on touch screens. Lastly, realize that the parent page (or main category) of a drop down menu tend to be devalued and accessed less.