Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
8 ways to improve your WordPress website navigation

8 ways to improve your WordPress website navigation

A good user experience is what every website and blog should provide to its audience. It doesn’t matter if you use a web development platform or a CMS (content management system), your website has to have the customer journey in mind. How will a user find a specific page on my website? How will they know how to contact me? What can I do to make navigating my website easier? That’s the golden question! And I’ve got the answer: Improve your navigation.

Website visitors aren’t going to convert if you don’t make things easy for them to find. Tweet It just makes it too difficult for them to find what they’re looking for. Time spent on a website is super important; you don’t want visitors to bounce just because they can’t find what they want and they feel like they’re wasting their time trying to find it.

Improving your website navigation is a top priority for any website or blog. Tweet If you’re using WordPress, templates are a good start to optimizing your navigation, but not every template is designed with the user in mind, nor does it mean that your pages and content are easy to navigate.

Also, improving your website’s navigation isn’t just great for the visitor, but also for SEO (search engine optimization). Let’s get started with these ideas:

  1. Keep it simple
  2. Optimize the navbar
  3. Include contact information
  4. Use breadcrumbs
  5. Include social networking buttons
  6. Fix broken links
  7. Add a sitemap
  8. Optimize for mobile

1. Keep it simple

flywheeler in bright white space on laptop and with notebook nearby improve wordpress website navigation

Meaning your website’s design. Keeping your design simple helps with a multitude of factors. Not only is it easy to navigate for a user, but it also increases your chances of gaining a conversion. You don’t need to get all creative to try to appeal to visitors, simple is better. Stick with the modern day status quo Tweet – don’t try to go off doing your own untested thing because whatever is working now is obviously working for a reason.

A simple design also means that users won’t have to spend extra time trying to find what they’re looking for. If your website doesn’t have a lot of distractions and isn’t too cluttered, a visitor is more likely to discover what they want.

Check out the guide to using white space in web design!

The navbar (navigation bar) is essential for visitors to find pages of interest. Without a properly optimized navigation bar, you’re likely to lose that visitor and, in turn, conversion. This navigation bar obviously should be above the fold on each web page, but you should also keep it in front of the user at all times. Think about creating a sticky navbar that follows the user as they scroll down and through various pages.

Don’t get too excited with your menu items (links to pages in the navbar). Again, you want your design to be simple and easy-to-use, so limit your menu items to under seven items so as not to clutter your navbar. Go to most websites and you can see that they keep their menu items at or under seven. If you honestly need more menu items, then use a mega menu, not a drop-down menu.

Mega menus are good for showing and linking out to various pages under a certain category found on the navbar. Let’s say you have a website that offers products pertaining to apparel, you wouldn’t just want to use “Products” as a menu item then have the visitor click. It’s way too vague and even Google’s search engines will have a tough time understanding where all of your pages under that category are located. Instead, you can use the menu item “Products” and when a visitor hovers with their mouse over that item, a mega menu will drop, allowing them to see all different types of apparel associated under the products category in various subcategories.

Try organizing your menu items appropriately and don’t allow your category menu items with mega menus to be clickable, as this can lead to confusion.

3. Include contact information

What if a visitor needs to contact you? How are they to find your information? There are a couple of ways you can do this, and WordPress makes it nice and easy.

flywheeler in bright white space on laptop and with notebook nearby improve wordpress website navigation

Use a “Contact us” page. A very popular way to get visitors to communicate with you is through a “Contact us” page. This page should be located within your navbar or at least in your footer at all times. This tells visitors that you’re open to communication and want to hear from them. This is a very easy and important navigation factor to consider and implement since you’re most likely wanting contact from your visitors if they have any questions or concerns. 

Consider including either a contact form or active email address such as “[email protected]” (or even both) for users to easily connect with you at any time. WordPress has several plugins for creating contact forms, one very popular plugin being Contact Form 7.

Add a live chat to your pages. Live chat allows any visitor to contact you on any web page. Lots of service companies use this method and it goes hand-in-hand with a contact us page. If you really want visitors to contact you and convert, add that live chat ASAP! Great areas to place the live chat on both desktop and mobile website versions include the bottom-right or bottom-left corners of the screen. Don’t let the live chat button overlap your other website content though. Yes, WordPress has a plugin for this as well.

Breadcrumbs are fantastic for visitors to find their way back through pages, especially if you have a lot on your website. But breadcrumbs aren’t just for finding your way back, they’re also for telling you where you are. If you have loads of pages or even a small amount, breadcrumbs will lead visitors through the process of how they got there and how they can get back to where they just were.

This is especially nice for large websites because it can become confusing as to how you accessed the page you’re currently on since it might have taken you a few page clicks to get there.

5. Include social networking buttons

Want users to find you on social media or to share your recent post? Include social media buttons on your website. Social media expands your brand across multiple levels. For visitors interested in your content, it’s a way for them to share with others what they found to be helpful or intriguing. For your business, it’s a way to help you spread your name.

How will visitors share your content or find you on social networks? WordPress has several plugins to help aid in social network sharing. Choose which one works best for your desktop and mobile website versions.

Catch the latest from Layout on social media!

Over time, web pages become old and errors can occur. The average lifespan of a web page is said to be 100 days. Keeping this in mind, links can break over time. Whether the page is yours or another website’s that you hyperlinked somewhere, 404 error pages aren’t helpful for visitors. Actually, they make them want to leave!

Fix your broken links. Large websites are especially prone to this, since you could have so many pages with so many links that you don’t have the time to individually check each one on a regular basis to ensure they’re working properly. To make this simple for you, WordPress has multiple plugins to check for broken links within your pages, posts, comments, directories, etc. but I suggest using Broken Link Checker since it’s one of the top plugins for this purpose.

7. Add a sitemap

A sitemap is a list of all the URLs on your website. Each and every page and post has its own sitemap URL. Adding a sitemap to your website means two things:

  1. Users will be able to have every link in front of them and choose which one(s) they want to click.
  2. Google will be able to add you to the SERPs (search engine results pages) way faster than waiting to be added and hoping Google will index and rank all of your pages.

Note: Not every website uses a sitemap for its visitors, but you can if you want to add that extra user experience for your visitors. Check to see what your competitors are doing.

Learn more about sitemaps and create your own with this tutorial!

The sitemap that you’ll want on your website is a basic HTML index that you’ll want in the footer since it’s not of the utmost importance but could be useful to some visitors. It will look something like the USPS About sitemap. Again, this allows visitors to view every link to every page/post you have on your website, which could prove useful if they want to see an overall view of your website.

You can upload this same sitemap to Google Search Console for SEO purposes, but an XML file is recommended. HTML sitemaps are more for users and Google may not be able to find all the associated pages, posts, and attachments like images or videos on your website.

8. Optimize for mobile

flywheeler in bright white space on laptop and with notebook nearby improve wordpress website navigation

Everything previously stated can help with your mobile website version as well, but there are a few things that you should consider for a mobile website that won’t affect desktop visitors the same.

As of 2017 Q1, mobile devices were found to be used for 49.7% of overall web page views globally. This means that you should definitely be prepared with a kick-butt mobile layout. 

Make sure that everything you have on your desktop website version fits well with the mobile version. Choose either to create a responsive or adaptive mobile version depending on budget and what works best for your overall needs.

Some things will need to be different from your desktop site. Since mobile devices are typically a much narrower screen, your navigation won’t be the same. For instance, you’ll need to optimize your navbar. Instead of listing your menu items, you’ll need a mobile menu.

This can be shown as a “hamburger” menu icon at the top right or left of the screen. The hamburger menu icon is three horizontal lines stacked atop each other and is the best way to imply “click here for menu” instead of using the desktop technique of always showing the navbar. (This will remove the clutter of all the menu items until a user wants to view it). If you add the text “menu” below or within these lines, you’ll be doing your mobile visitors an extra favor, since some might not know what the icon means.

This technique is becoming more popular and has been in speculation for a while. But as long as you make it clear that the three stacked lines are for the menu items, then it will prove very useful for your visitors.

Conclusion

Use any or all of these techniques for your WordPress website, and you’ll be helping yourself and your visitors! Tweet No one wants to go through leaps and hurdles to get to the end point, so make it easy and optimize your navigation for a better user experience.

3 Comments

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free
[if lte IE 8]
[if lte IE 8]