Episode summary
Though it may seem minor, website navigation design has an outsized impact on the user experience.
In this episode of Websites Decoded, Phil provides a deep dive into crafting intuitive website navigation. He outlines the key elements that improve user experience for your visitors, including:
- Device appropriate navigation
- User psychology
- Making choices on behalf of your buyer
- Different types of website navigation and when to use them
Navigation design contains many intricacies, but the payoff of getting it right is huge.
Join Phil as he decodes the elements that convert visitors into customers. From information architecture to user psychology, he covers how to optimise your website's navigation.
Episode transcript
Navigational best practices for B2B websites is really interesting. It's a small area of the website, relatively speaking, but it has a huge impact because it's the way that buyers interact and engage, discover, travel, and navigate.
So, it has an outsized impact on the experience and on the results that you get. So, it's really important that you do things that are, fortunately, best practice, but ultimately buyer-centric and user-centric.
So, a couple of things that I consider to be best practices when it comes to navigation are...
Device appropriate navigation
First and foremost, the layout, the presentation, and the style of navigation you use should be driven by the amount of space that you have. Meaning on desktop where most buyers in B2B are making their decisions you should use horizontally presented navigation, not a burger menu that hides all that content, that critical navigational content behind multiple clicks and away from the view of the visitor.
Although, you should use that approach on mobile because you simply don't have the space to do anything else. Burger is a brilliant solution to mobile navigation, a terrible solution to desktop navigation.
So on your desktop, you've got this intuitive, familiar horizontal navigation and you've now got to decide what to put in it.
Deciding what to put in your navigation
There are two elements to that I think.
There's the language that you use on the top level hierarchy and like messaging, really clear and crisp is the way to go. Buyers, users of websites typically don't engage well with the kind of more clever, more friendly approach to navigation.
Who we are, what we do, who we serve, your persona, your sector, your industry, those things are not what buyers are looking to engage with when they visit a website, when they're trying to solve a problem.
Products, services, solutions, customers, pricing, these are the things they're looking for. So, these are the things that work well on main navigation.
Now, in most cases, websites need more navigational links than that top-line, top-level allows. So, there'll be some form of drop-down. There'll be some form of second level, and keeping those simple is the key.
It's about making proactive choices on behalf of your visitors, about what they need to see next and presenting them with those choices rather than giving into the very real temptation to put everything on.
For example, a big mega nav drop-down.
A word of caution when using mega navs
The problem with those huge mega navs that list every product, every service, every solution you offer, is that they very, very instantly induce that choice paralysis phenomenon.
Which is people are so shocked and overwhelmed by the number of options that they see that they actually don't have the cognitive load, it's called, but they don't have the cognitive desire to look at it long enough to work out where they need to go.
So, they close that menu, they look for links that are on the page, they find what's available, that method if anything, or they just go elsewhere for a simpler experience.
So, it's about making choices on behalf of your visitors, using language that reflects what they're looking for and keeping it simple and keeping it device appropriate. Take those approaches to navigation on your website and you will see more engagement with the right type of visitor, which is great, and most likely more conversions at the bottom of the funnel as a result.
Other navigational approaches on B2B websites
So there are a variety of other navigational approaches that can be used and can creep into B2B website design.
Footer navigation
Footer navigation is a form of navigation and it's a good and useful one. People will very frequently reach the end of a page and that's an excellent place to put links that help them continue the journey without having to scroll back up or move their mouse back up. Or, a variety of links that don't belong in the navigation, but nonetheless might be useful to the buyer.
I think there's quite a sort of reflex developing in buyer behaviour, which is, when all else fails, sort of scroll to the bottom of the page and see if I can find that link to locations or contact, or the resources, for example.
There's some natural expectation, again, within the footer navigation, there's no benefit to presenting every option, there's no benefit to making it overly dense and complicated, so you need to make some choices.
But it is a good navigational aid for both users and for search engines, in fact, to have some key links down there.
Breadcrumb navigation
In certain website situations breadcrumbs do make sense, although I'd say only when the taxonomy gets really deep. Within eCommerce, for example, it can be very, very useful within very big websites.
It's got uses, but in most cases, it's not a high priority, in my opinion, if it comes at a cost or a time impact to getting your website live, for example.
Vertical navigation
Outside of those approaches, there are other, shall we say, less conventional, more innovative approaches to navigation. Probably the main one that springs to mind for people is something vertical along either left or right-hand side of the website.
It's simply not worth getting buyers to spend their time figuring out how your navigation works when you could give them something familiar and intuitive.
So I'd stay away from things that are not traditional because it won't have a positive impact on your conversion rate and on the results that you drive. It will simply frustrate and distract buyers from what's important because although navigation is an important part of the website, it's not what they're there to read and see.
The finer details of website navigation
There are some nuances to the user experience of navigation that need to be considered depending on which approach you're taking.
And it's simply things like do the menus appear on hover or on a click?
And what happens when the user moves their mouse, for example, diagonally from the menu item that they clicked to the menu item that they want to visit?
Just the other day, I was on a website and I opened the menu item. It opened on hover rather than on a click, which I think is probably suboptimal UX. And the moment I moved my mouse to go to the first most important sub-item on that menu, the menu closed and I had to go back and reopen it and move my mouse in a very particular path to actually navigate to the page I wanted to visit. And that's very frustrating to buyers.
So, if you have drop-down menus or you have mega menus, you've got to look at a what's the best way to open it?
Usually on click is best, especially when you're building a site that works across both desktop and mobile. And you've got to make sure that natural, full mouse movement, for example, doesn't produce unexpected behaviour in the menu that frustrates the buyer, because every time you introduce a little bit of friction like that, you decrease the likelihood that the visit will turn into a conversion.