Navigation is a crucial part of any website and its design should not be taken lightly.
It is the portal to important content and it can drastically increase (or decrease) site click-through. Effective site navigation depends on almost all of the design disciplines involved in web design including information architecture, user experience design, visual design and front-end development. This post will focus mostly on visual design with some notes on usability and implementation.
Information Architecture and User Experience
I’m not an IA or UX specialist by any means, but I realize the importance of a thorough, initial content strategy and plan. Before any visual design begins, it is absolutely crucial that you sitemap all main content pages in a clear hierarchy. I also recommend user experience research if you have this resource available. This process will include things like site mapping, researching user needs, persona development and defining clear goals for your site. These processes will lead to better navigation design. If you do not have access to a user experience professional or have limited time, there are simple things you can do to start creating effective website navigation:
Limit the number of top-level navigation items
Shoot for 4-7 and no more. Prioritize your most important pages.
Keep dropdowns to one level if you can
The main navigation in your header does not have to include a link to EVERY page on your site. And if you have a large site (50+ pages) it shouldn’t. You can always have submenus on interior pages with links to deeper child pages. Keep it simple.
Tips and Tricks
Every website is unique in that it has unique content and (hopefully) a targeted audience. The following points are mere suggestions and tips based on personal experience. When it comes to your own site, use your best judgment and as always, try to simplify things and cut out any unnecessary fluff.
Limit the height of your header
Headers should be unobtrusive. At the end of the day, the content that is below your navigation is the most important thing on the page. Users should know where your navigation is, and should not be distracted by it.
Consolidate admin bars and other additional navigation if you can
Try consolidating things like login and search input fields by hiding them initially and showing them on hover or click instead.
Denote dropdowns with visual cues
While not absolutely necessary, they’re a simple way to let your users know there is more content to be seen. A simple down facing arrow paired with a parent item is sufficient.
Dropdown structure - simple dropdowns vs. mega menus
Just because you like the look of a mega menu doesn’t mean you should use one. If your site is small with little content, stick with a simple dropdown. Sites like Mashable and The Verge use mega menus paired with dynamic content because they push out 100s of articles every week.
Mobile menus are pretty universal. Stick to the norm and use a ‘hamburger’ icon (menu indicator) to denote an off-canvas mobile menu. This should house the same top-level navigation as your desktop site. If your site is responsive, show the mobile menu when you find it appropriate. I would recommend just using it for the smallest mobile devices (e.g. phones).
A note on mobile headers
Screen real estate is even more limited on mobile devices. Keep mobile headers as small and minimalist as possible. Your mobile menu should at least include your logo, a main menu (hamburger menu) and possibly an additional item like a site search.