User Experience Design
Mar. 25, 2014

Best Practices for Modern Website Navigation

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.

Where to start – a few notes on 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 bullet 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.

- Fixed headers. Fixed headers are great if they aren’t too bulky and don’t take up a ton of real estate. Fixed headers allow your users to move quickly from page to page and are a great place for calls-to-action. If you find that your header is too big to set as fixed, you can always fix a portion of it or show a consolidated header with JavaScript after a certain scroll length.

- 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

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.  Great examples of mobile menus: 
mobile header examples

Add new comment

By
Chad Johnson

Stay in the Loop.

Sign up to recieve our best content monthly: