There’s no limit to how good your navigation can be — there’s no risk to it being too comprehensive, too direct, or too fast. Even if your site’s navigation is already good, any number of these 11 website navigation best practices below can make it even better.
1. Save Space by Hiding the Search Input Field
Your top navigation bar can fill up pretty quick, especially if you have a lot of pages. Save space by hiding the search input behind a magnifying glass icon. If your site does not have a lot of content, most users won’t need the search function, and if they do, the magnifying glass icon is recognizable enough as a cue.
2. Use Sticky Navigation for Sites with Long or Infinite Scrolling
Stemming from the rise of mobile browsing and social media sites, long-scrolling and even single-page sites have become more popular. Unfortunately, the natural drawback of this style is disorientation and poor navigation.
A quick and simple solution is sticky navigation — a menu or bar that remains in the same place throughout the scroll, typically the top or bottom of the screen. This affords users the control they want when browsing, which gives them more confidence to explore.
If a sticky navigation menu takes up too much room, try a simple “Jump-to” section icon, or at the very least a “Return to Top” option, also on permanently on the screen.
Because these are always present, try to make them as small as possible, but still noticeable.
3. Use Animations to Draw Attention to Shrinking Menus
Hidden menus like the drawers and the controversial hamburger menu help conserve screen space without limiting user options. You can increase their effectiveness and improve the overall usability with a clever animation.
Consider the navigation for Greek jeweler Nikos Koulis’s site above. It’s easy to forget the navigation menu with the overall minimalist aesthetic, not to mention that the carousel of featured products dominants almost the entire screen. The left-side slideout reminds users where the main pages are if they need them, without disturbing the minimal style.
The choice of slow and graceful animation even strengthens the mood and identity of the brand. In general, animation is perfect for wordlessly showing usability: on hover, the hamburger icon becomes a slash to show clickability, and when clicked becomes an X to show activation.
Using animation like this is especially helpful for mobile sites, where screen space is always limited. Try opening the site with the navigation menu prominent, then automatically shrinking it to one side or corner, with a flashy animation to show users where it will be if they need it.
4. Let Amount of Content Determine the Navigation Menu Type
No single type of navigation menu will work for all sites, so don’t just do what everyone else is doing. The amount of content should determine the navigation style.
Sites with only a small amount of content, up to around 6 pages, can get away with a single navigation bar, where all page text links can be visible at the same time. Hidden navigation options can conserve even more space.
But sites with a large amount of content, such as eCommerce sites, don’t have this option. If these sites want a navigation bar, they should implement a mega menu. These expansive dropdowns list out all options/pages for the user but remain hidden until activated to avoid overwhelming the user, and displaying options they don’t need.
Another alternative for bigger sites is to have a vertical collapsible menu. Vertical menus allow more entries than horizontal menus in more compact space, and can be pulled out from either side when needed to conserve space.
5. Use Obvious Signifiers
The navigation menu is not the place to be creative — there’s too much to risk. Avoid confusion by using the accepted standard formats: a magnifying glass for search, a hamburger icon for hidden menus, etc. You can always set yourself apart in other areas.
Even users new to Twitter can guess the meaning of the icons, especially the familiar ellipsis icon for more information.
6. For Slideouts, Give Animations 200 – 300 ms
One of the primary purposes of animations is to smooth over otherwise jarring transitions. For slideouts, drop-downs, and all other appearances of menus, use an animation of 200 – 300 ms. This is slow enough not to seem abrupt, but fast enough that the user still feels direct control of the interface.
7. Promote the Search Bar by Placing it in the Upper-Left or Center
The search bar is used more frequently for sites like Facebook or Twitter, where users often need to find a single person (or hashtag) out of millions. Sites like these can facilitate the process by placing the search bar in the left, or middle, of a top navigation menu.
The right may be the accepted standard for search bars, but if you have (or want) increased search activity, try a more visible location further to the left.
8. Set Off Popout Menus with Shadows, Contrast, or Fades
Popout menus must pop out. You need to differentiate them from the rest of the content, and make them seem more prominent, but sometimes a thick border isn’t enough. The best strategies for this are shadows, color contrast, and fades.
The least intrusive is shadows. A light shadow over the content can be enough to do the trick, and fits nicely into Material Design’s principle of layering.
For even more differentiation, try giving the menu a contrasting color like the content underneath. If your article background is white, make your menus black; it’s sure to be noticed, and there will be no confusion whatsoever about which area is content and which is a menu.
If you want your popout to steal all the attention of the page, such as a call-to-action modal window, you’ll want to fade out or blur the content underneath. This leaves the user no choice but to address the popout.
9. Cater Recommendations Based on Personalization Data
Personalization is becoming more and more relevant with users, so don’t neglect it. Page recommendations are an excellent balance between what the user wants to see and what the business wants them to see — but only if they’re done with care.
Draw on personalization data like past purchases or previously viewed pages to hone your users’ recommendations. You can even elicit specific preferences by asking them directly when they sign up or create a profile.
If you don’t have enough personalization data for recommendations, use a Related Content feature. Common tags among different pieces of content let designers organize users interests, and you can double-check this with past users’ behaviors.
10. Suggest Next Steps When Users Complete a Task
After completing a task, there’s a moment when users aren’t quite sure what to do next. Give them a helping hand by suggesting one or several next steps. Did they just finish creating a profile? Provide a link that enables them to find friends.
Especially useful at the early onboarding stage when the user is unfamiliar with the interface, next steps eliminate those moments of uncertainty or searching for what to do. It’s the designer’s responsibility to make sure the user knows how to use the interface to do what they want.
The Next Post/Product feature works the same way. For sites that display numerous posts or products, each window should have an option that leads them to the next (and previous) item. This lets the user create a rhythm with their browsing, and increases the likelihood that they’ll find what they’re looking for.
11. Enable Recent History
Web browsing doesn’t move in one direction. A Recent History feature lets users backtrack at will, whether they made a mistake going forward, or need to reexamine previously viewed content.
This is especially useful for eCommerce sites because it allows comparative shopping. Switching between two or more products raises the chances that the user will be satisfied with their purchase and gives them more control which they’ll appreciate.
What Website Navigation Best Practices Have You Used?
What navigation tricks have you picked up along the way?
Photo by Lance Asper on Unsplash.
