A visitor has landed on your website in search of something. Navigation is often the guide to what it is your visitor seeks. Something as simple as word choice can be the difference between a visitor finding what they’re looking for or leaving in frustration.
Effective navigation can facilitate a fruitful visit and increase the likelihood of a return visit in the future. Ineffective navigation can lead to an unproductive visit and feelings of frustration, which don’t generally bode well for a return visit.
Here are six best practices to bear in mind as you think about the navigation for your website.
Avoid Jargon in Website Navigation
Remember, your website navigation is not for you – it’s for your visitor. Don’t use language that only insiders will understand. If you’re unsure whether or not someone will know what you mean, try rewording it.
This is also a great time to ask for second opinions. Solicit feedback from people that aren’t as familiar with your industry about the type of content they’d expect to find if they clicked a certain part of your navigation. Such feedback can be enlightening and lead to a more user-friendly website.
Use Common Page Names in Website Navigation
As Louis Lazaris highlights in a post on Smashing Magazine, it’s important to align your navigation with the expectations of your visitors. Navigation is not a time to get overly creative with your word choice (design is another matter altogether). The goal is to provide users with a structured way to find what it is they’re looking for on your website.
Use common page names in your navigation, like:
- About Us
- Contact
- Blog
- Portfolio
- Products
- Donate
If you’re going to deviate from the norm, make sure it’s evident what a user can expect to find in each portion of your website. To learn more about organizing web pages in intuitive ways, check out our guide to common website structures.
Keep It Short
Sum up what information a visitor will find in a word or two. You don’t have much real estate in the navigation bar. And your users don’t have much patience. Be succinct.
Use Dropdown Menus in Your Navigation
If the pages in your navigation have subpages, you should include dropdown menus. Dropdown menus allow users to scan the different types of content in each section of your website without unnecessarily clicking through the pages of your site. By getting a feel for the content in each section, a user can make a more informed prediction as to where the content they seek resides within your site.
Make All Menu Items Clickable
If an item is in your navigation, make sure it’s clickable. For instance, even if you have an “Our Mission” page in a dropdown under “About” in your navigation, a visitor should be able to click on the “About” page if they’re so inclined. Going back to expectations, most users will expect these items to be clickable since they’re in your navigation.
Striving to meet visitor expectations whenever possible will lead to a much better user experience throughout your website.
Make Your Logo Take a User Home
There’s a good chance your website has a logo in the upper left. Make sure your logo is clickable and takes a user back to your homepage. This is a common convention and many visitors to your website will expect it to be the case.
Such simple improvements to your website’s navigation can have an impact on the overall experience a user has on your website.
What do you think? Does the navigation of a website impact your view of the site?
Image courtesy of Calsidyrose, Flickr
For an e-learning website, where the user creates an account and takes a course through a member account, is it important to maintain the global navigation (as it appears on the public website) in the member account, or is it acceptable to display a separate “member” navigation instead?
Hi Elida. There’s not necessarily one “right” way to handle your navigation. I’ve seen navigations that will change if a member is logged in. The key is to ensure it’s not confusing for your member. The issue with a navigation that changes significantly is it can make it difficult to find info. I’d recommend thinking from a member’s perspective and then testing it with some folks if you can do so. Ask them to complete key tasks and note any places they have difficulty. Doing so will show you what may need to be adjusted to better serve your visitors.
Hope that helps.
This was interesting to read. Most of the sites listing best practices for web navigation say the opposite to some of your tips.
Most say to avoid drop-downs, because research shows that they annoy users and they are not touch-screen friendly.
Many also say not to use generic terms like ‘Products’, because this conveys no information to the user (instead, use ‘Shirts’, ‘Pants’, ‘Hats’), and is not search engine friendly (does anyone google for ‘products’?).
Hi James. Thanks a lot for your comment. Definitely some good points to consider.
With regards to drop downs, I would caution against eliminating them altogether, especially on larger sites with complex organization. Instead, a responsive design may be the way to go. This would accomodate both desktop and mobile users to provide a seamless experience by changing the navigation to match the device. There are also ways to implement drop downs that are more friendly to touch devices (as detailed in this post: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly).
To your second point about generic terms, on some level I agree. What we’re advocating for in the post is basically all about user expectations. It is beneficial to users if they know what they’ll find on a given page. If you can set up your website to only use page names like ‘Shirts,’ ‘Pants,’ etc. that can be great. But many websites will be too complex to allow for these individual pages to exist as top level pages in navigation. Instead, it may at times be necessary to group them in some way. And when grouping them, we’re pushing people to use terminology most users will likely understand. And with other pages, like your About page, we think About Us or About is a better way to go than something atypical like “Why We Rock.”
Again, thanks for your thoughtful comments. You’ve highlighted there isn’t any one way that’s right when it comes to navigation. It’s one of those things that must be customized to fit the needs of a given site.
I also noted that some of the points made in the article contradict similar articles. While larger sites may have a need of drop down menus they can be avoided altogether on smaller sites.
I agree with you. All of the biggest players in digital marketing like HubSpot contradict what David was saying here. What’s interesting is that by just reading several articles from more trusted sources, we technically know more about best practices than a guy writing about them for a living on this blog. I love the internet!
Thanks for the comment Andy. I definitely share your love of the internet and welcome any dialogue that helps move conversations around best practices forward.
I’m still not personally sold on eliminating drop downs altogether for more complex sites. I think it works fine when site structures are really simple, but when you add layers of complexity avoiding drop downs can make it really difficult for visitors to find info. That said, we do recommend avoiding flyouts (that show grandchildren pages) because they often frustrate visitors.
And as noted above, I do agree with James on some level that it’s best to get specific whenever possible. But oftentimes with complex navigation it becomes difficult to introduce that level of specificity into the main nav. Instead, we often advocate for grouping content into big buckets that are aligned with visitor expectations and provide a clear overarching structure to the subpages they contain. Again, for simple sites a higher degree of specificity is often possible. But with large sites these top level items tend to broaden out a bit.
If there’s anything else in the post you’d like to discuss specifically please don’t hesitate to leave a comment. And thanks again for helping to push this conversation about navigation forward.