You probably don’t spend a lot of time planning out navigation menus. After all, there are better stuff to do, you know, like finishing up the next page and meeting a friend for coffee among other things. It’s disheartening to imagine many web designers don’t put much thought into navigation menus. They will just slap a website together, throw in a sorry excuse of a navigation menu and the work is done.
If you fall into this category of web designers, there is one thing you probably forget every single time you take on a new project: the navigation system is one of the most important parts of any website. I mean, how else will the users find their way around your site if the navigation sucks, or worse still, doesn’t exist?
In the next few paragraphs, we will share great tips on designing the perfect site navigation, so you can get it right every time and offer great user experience to your visitors. Without further ado, let’s build the perfect menu!
Start with a Plan
Nothing ever succeeds without a solid plan. If you’re going to build the perfect navigation, you must create room for it in your general web design strategy. Don’t skip this step – the perfect navigation needs a solid foundation.
Using your web content strategy, endeavor to sitemap all content pages in order of importance. It goes without saying that your most important content should be accessible easily. If your navigation menu cannot provide access to the content that matters, you will not achieve your website’s goals. Plan out your navigation first before beginning any visual design work. Remember, important menu items come first.
Keep it Simple
The last thing you want is a cluttered navigation menu that eats space and confuses users. A simple navigation menu that is easy to use will lead to higher click-through rates, which is always a good thing.
How do you keep things simple with navigation menus? Firstly, keep the number of top-level menu items low. Below ten (10) is ideal. Less than five (5) is awesome. This, of course, calls for some prioritizing; the most important page gets the best (and foremost) position.
Secondly, if you use drop-down menus, keep them to one level. Have you ever been to a poorly designed website with menu levels that made you feel like pulling out your hair? You don’t need to link to every page on your site. If you must draw attention to pages that are several levels deep, feel free to take advantage of sub menus, categories and internal linking.
Use simple terms
Your navigation is to your readers what a compass is to sailors. Without one, they would be lost. At the same time, your navigation (just like a compass) should be easy to understand among other things. You’re failing terribly in the UX department if users have to wonder where each menu item leads. Shun industry jargon in favor of simple and user-friendly terms that will resonate with your target audience.
Your Header Matters
A header with the wrong dimensions can wreck havoc and appear obtrusive where your navigation is concerned. To be on the safe side though, start by limiting the height of your header, so it won’t distract users. After all, your users care about the content that comes after (or below) your navigation menu. The header shouldn’t get in the way; the user should spot the navigation immediately they get to your site.
Secondly, you can use fixed headers. Provided they don’t take up plenty of space, fixed headers are great for navigation menus. Fixed header navigation stays at the top of the page (or wherever it’s fixed) all the time. It is always visible allowing users to move from page to page easily and quickly.
Use Cues to Direct Users
People love being told what (and what not) to do. You can encourage interaction and provide context by adding visual cues (icons ) or short descriptions to your navigation menus. Use these cues to denote drop-down menus as well, so users can tell there is more content to see under that particular menu item.
Simple versus Mega Menus
Which type of menu should you use? Which type will work for your website? Just because mega menus look amazing, it doesn’t mean it is the right solution for your project. Using Mashable.com as an illustration, you can see how mega menus can provide so much value for a huge website that publishes a high volume of content. Stick to simple drop-down menus for small websites.
Mobile-friendly Navigation
With limited screen real estate, designing the perfect navigation for mobile devices can seem challenging. But if you’ve taken to responsive web design, you probably have a @media-query way of fitting your navigation menu into the smaller mobile device screen.
On Using JavaScript, jQuery and Flash
While you can use these technologies (i.e JS, jQuery and Flash) to animate your menus, the same technologies can inhibit access to your navigation (or even the entire website) should something go wrong.
You can use CSS styling instead, and take advantage of the latest version, CSS3, which gives you a lot of control over styling. However, if you decide to use jQuery, Flash or JavaScript, make sure they can at least degrade gracefully.
Highlight Active Menu Items
It won’t kill you to let your user know where (on your site) they are at all times. In fact, most users will appreciate this. Using CSS, you can program your menus to change depending on their state: active, hover, visited etc.
Finally, Test Your Navigation
Get people to test your navigation and record their preferences as they navigate through your website. Involve a number of people, collect their feedback and analyze the responses to determine how you can improve your navigation. Please, don’t skip testing :).
Conclusion
Would you like to share any tips on designing the perfect site navigation? It would be great to get your input. Share freely in the comments below!
