Clear and easy navigation is one of the most important things to get right when you’re building a website. Even if your content is excellent, if your site is difficult to use, visitors will be frustrated and may go elsewhere.
Users tend to stick around longer on websites with clear navigation – which is good news for you because they’ll read more of your content, view more of your products, and you’ll generally have a better chance of making a sale or conversion.
Good navigation is about better user experience but it’s also about drawing attention to content and pages that you want users to visit. For example you could include a shortcut to some of your best content from the sidebar, or a call to action at the bottom of each post to sign up to your newsletter.
Most WordPress themes are set up with a fairly clear navigational structure, but it’s up to you to make sure your site is organized well and it’s easy to use.
Looking for some tips on how to make improvements? Consider some of the following ideas:
1. Add Breadcrumbs to Large Sites
Breadcrumbs display a hierarchal menu of links at the top of the page you’re currently on so that you can “follow the trail of breadcrumbs” back to where you came from or step back a level in navigation if you came from an internet search to see other related content.
Breadcrumb navigation looks something like this
Home > Articles > WordPress > Tutorials > How to Improve Your WordPress Navigation
You can easily setup breadcrumbs on your WordPress site by using a plugin that takes care of everything automatically.
You will usually have to edit your theme files to put the code to display the breadcrumbs in the right place on your site, although some themes have built in support for Yoast’s breadcrumbs or their own theme builder breadcrumbs.
2. Consider Renaming Navigation Labels
Take a moment to look through your main menu and other navigation labels with fresh eyes and be honest with yourself about whether or not they’re clear and descriptive for a new user.
Don’t try to be clever, and give your menu items “unique names” as it will probably backfire. For example, I’ve noticed it’s a trend for professional photographers to list their prices under a navigation label of “investment” which seems needlessly obscure and would confuse me as a potential client looking for prices.
It’s also worth noting that you don’t always have to use words for your navigation labels. Sometimes images or icons work better, particularly when they’re very familiar such as social network icons. Want to add icons to your main menu? Look into the Menu Icons plugin, which makes things easy with a library of ready-to-use icons.
If you’re having trouble looking at your site navigation with an objective eye, ask a friend or colleague to find some information from your site and observe how quickly and easily they do this. Alternatively you can use a testing service like trymyUI (this is helpful for improving your navigation as a whole, not just labels).
A/B split testing can also be useful if you can’t decide between two different navigation labels.
3. Reduce Main Navigation Items
If your main menu is running over two lines or you have a long sidebar of links on your homepage (just like this old version of Amazon.com before they redesigned in 2011) you probably have too many items in your primary navigation.
If you have too many menu items, it’s too much for web visitors to take in at once and they may scan over important items and take longer to find what they’re looking for. Try to keep your main menu to five items or less.
4. Upgrade to a “Mega Menu” if You Have a Large Site
Mega menus are a type of dropdown navigation that display a large amount of navigation items in an easy-to-navigate menu layout and can also display images. They’re often used in ecommerce sites, for example here’s the menu of the Next fashion retail site:
Mega menus work better than regular drop down menus because they show everything at a glance without the need to scroll down, and there are more design options available such as using images, colors, and typography to distinguish between different sections.
User testing has shown that mega menus are usually easier to use than normal drop down menus and may help to improve the navigation of your site.
Luckily, there are several great mega menu plugins for WordPress with lots of useful features that you can try out. Some you might want to consider:
5. Install a Related posts Plugin
Once a reader finishes reading one of your posts, there’s a high possibility that you’ll lose them. Firstly they’re at the bottom of the page and the main navigation is most likely at the top and secondly, it’s probably not clear from the first glance at your main menu that there are other posts that might be useful for them.
This is where a related posts plugin can come in handy to add additional navigation in the form of direct links to other posts that cover similar content.
Most related posts plugins provide the link as a thumbnail, making this a very visual type of navigation that is eye catching and will naturally attract the reader’s attention.
6. Check Mobile Site Navigation
Even if you’ve got your site navigation down to a fine art on the full desktop version of your site, you can’t rest easy yet.
There’s a good chance that a large proportion of visitors are viewing your site on a mobile phone or other small device and if the mobile version of your site falls down when it comes to navigation, you could potentially be losing readers and business.
The key to getting mobile navigation right is choosing a good responsive theme. When you install a theme you’re considering, make sure you check it out on a mobile to see how the navigation changes.
It’s now becoming commonplace to substitute a “hamburger menu” for a standard top bar menu on mobile sites. You’ll probably be familiar with this once you see it – it’s the button with 3 horizontal lines that you can click to open a menu when you’re browsing on mobile.
There’s still some controversy over hamburger menus and whether they actually help or hinder the user, so for now you’ll have to use your own judgment and consider some possible alternatives if you’re designing your own theme. However if you’ve stuck to rule 4 and kept your main navigation items down, you don’t really need the extra space that a hamburger menu provides.
7. Add a Table of Contents to Long Posts
Long-form content ranks well and can be very valuable to users but any content that’s longer than a few thousand words can be difficult to scan and many visitors won’t want to read the whole thing in one sitting.
Just as you wouldn’t read through a whole non-fiction book to find one piece of information, you shouldn’t expect users to have to dig through a giant post to find what they’re looking for.
Adding a table of contents improves the user experience as they can see the entire content of the post in one glance and click to jump quickly to a relevant section.
Check out the Easy Table of Contents plugin for a simple way to add a table of contents into your posts and pages automatically.
While plugins can be helpful, there’s no substitute to getting navigation basics right from the start. If you’re building a new site, start by planning out the navigation before you even thing about installing a theme or adding content.
It’s best to keep things simple but offer a variety of navigation options – not every user will browse your site in the same way.
Rojenx is a leading concept artist who work appears in games and publications
Check out his personal gallery here