In this bi-weekly show, hosts Jon MacDonald (The Good) and Ryan Garrow (Logical Position) share their best advice for helping businesses drive high quality traffic to their site, and making sure that traffic converts from a visitor to a buyer. Subscribe if you want to become and expert in customer acquisition and conversion rate optimization.
Announcer:
You're listening to Drive and Convert, a podcast about helping online brands to build a better e-commerce growth engine, with Jon MacDonald and Ryan Garrow.
Ryan:
Jon, we're going to talk website navigation and surprisingly, so many of the companies I talk to don't even think about it. It keeps like, "Hey, we'll put another thing on the navigation or add to it" and I don't know, or have a stat in front of me, I don't know if you know or not, but I would estimate at least 50% of all the people that come to your site, no matter where they come from, are the type of traffic they're going to click on navigation to try to get somewhere and-
Jon:
Yeah, I don't have that data in front of me, but I would argue it's more than 50% for sure. If I was betting, I would bet on the over that for sure.
Ryan:
Well, and I would trust you then to bet. I'm going to say well over 50%. I'll bet that every time. Anybody want to put a bet down, let me know, hit me up on LinkedIn. But for something that so many people hit, it's almost embarrassing how few companies pay attention to it or how many digital teams are like, "Maybe we should consider navigation." I feel like after working with you for so long, it comes up on a lot of my calls and I'm like, I can honestly tell some brands, I'm like, "I don't know if I would pay money to have traffic go to this site personally, because your navigation is so wonky that people are going to ... Your conversion rate will be so bad, you're almost guaranteed to lose money."'
I'm excited to hear you break down a lot of this for people because you can do it much more simply than I can. I can basically just say, "It's bad, you got to fix it." And I don't necessarily know the nuances or details and be like, "Oh, think about this." You're going to break this down for all of us, and I'm excited.
Jon:
Let's learn you something today, huh?
Ryan:
Yeah, maybe I will be able to have better conversations moving forward. I hope I will. Let's start high level. There's multiple types of navigation, so can you break down some of those navigation types and what people need to be thinking about when we say navigation?
Jon:
Yeah, yeah. I think that's a great place to start because there are different types and you're not really bound to any of these in general, but I think that these are the ones that you would see all over the nav. I kind of listed some out that I wanted to mention. I think it's best to stick to these though, because there is that idea of cognitive load, right? Where you're asking a consumer visiting your site to try to figure something out. The problem with that is that you're asking them to take on and learn something new when they're already used to a convention. What's the old book? Don't Make Me Think, right?
Ryan:
Mm-hmm.
Jon:
That's exactly what we're trying to do here is make things easy.
Ryan:
Anytime I think you step out of that, what I've been used to for so long, and old dogs new tricks almost. If you boil it down to would my mom land here and get it?
Jon:
Yep. And that's exactly it. Let's talk about the most common ones, and obviously we don't ... This is a podcast, so I don't have visual, so I'll try my best to describe these. Horizontal navigation bar, right? This is the one that it's the most common. You see it everywhere. It's the top level links that are displayed horizontally in the header with the links side by side, and they usually include the most important pages of the site. These are the ones that the user needs to access early and often. And that's why the nav's up there.
Ryan:
Like home?
Jon:
Home. Well, hopefully you don't put home in your nav, right? We'll definitely talk about this.
Ryan:
We'll probably get into that.
Jon:
I love it. Yeah, home. Don't put that in your nav. Just make your logo clickable. People will click on the logo, take them to the homepage. Okay, drop down navigation. This is one people know, right? You roll over, you have different tiers. You roll over one of those main navs and items drop down out of that, they can click or hover over it to expand more information and more links. And even as I'm describing it, it sounds confusing. This can get really confusing very fast for users because you end up having nested menus and there's several layers of drop-downs. You often hear the word mega nav, and this is for brands who have a ton of SKUs and a ton of categories, and it gets really, really confusing very, very fast. It's one you see that's pretty common, but you use sparingly is my recommendation.
Ryan:
Quick question on those drop-downs, I'm talking about the horizontal nav generally having those drop-downs, I personally find it annoying when I can't click on that top hierarchy to figure out which of those subcategories I want. Now, I might be weird, but do you generally recommend that if it's like pants and I can't click on pants, but I have to click on blue or jeans or these, is that just me being weird in that?
Jon:
It's not just you. You and Google are aligned on that. For SEO purposes, that should be a category page.
Ryan:
Okay, good to know.
Jon:
And so you see a lot of brands do this. Apple recently redesigned their site, but they used to do that exact same thing where if you would click on computers, it would show tiles basically of all the different laptops versus desktop versus server, et cetera, that they've had, right? Over the years. That's one way to look at it for sure. But you're not alone in that, just getting confusing and wanting to take the simple route. Bypass all the drop-downs and just have people click the category pages. The idea of your navigation is to get people where they want to go as fast as possible. If it's become annoying for them in that process, then you've kind of defeated the purpose of navigation.
Ryan:
Got it. Okay. I'm not as weird as I thought. Great.
Jon:
Well, that's debatable, but yes.
Ryan:
At least on my navigation preferences.
Jon:
All right, hamburger navigation. Love this one because you see it all the time. Mobile sites especially. The big issue I see with this is so many people have taken mobile idea of hamburger nav and put it on their desktop site, which is in my view, a huge swing in a mess. Because really what happens is you hide everything. You're hiding the entire navigation behind a click. Consumers have to click just to see the navigation, right? Because in a hamburger nav, you tap on the icon or click on the icon, and then a menu expands opening and showing you the options, right? It's called a hamburger nav because it's usually three lines, right? Two buns with the hamburger patty in the middle. Don't ask me if somebody was hungry when they named it, but the reality here is that I suggest it'd be mobile only and use sparingly, even on mobile, quite honestly. I stay away from it whenever possible.
Next one is a vertical navigation. This is typically done in a sidebar. This is often used as a sub navigation. It's where all of the links are stacked on top of each other, usually on the left side of the page, but it could be on either. This is great for sites that have way too much information in their top navigation. In that example you gave with pants, you could have pants in the main navigation up top. When they click on that and get to a category page, you could down the left hand side have all the variants of pants. You could have jeans, sweats, whatever. The problem with these is to eat up a lot of real estate, but if it's helpful, great, it should be there. I think it's also really helpful on those interior pages, like I mentioned, but it really just adds more to be able to link between the different categories and pages. It just adds a lot to the shopping experience personally.
Ryan:
But I would say, because I see this a lot where like automotive for example, like after market auto, we have a lot of those clients that filtering is very important to figuring out what you're trying to get, especially when they land on one product and they're probably going to go somewhere else to buy something different. But if you've got top nav getting you to the top category pages and then you've got filters on the left side, helpful, but that also tells me you should probably have a category page for that filter as well. Because a lot of those filters, the companies take kind of an easy button and we'll say, "Oh, we're just going to filter it." Then you can't land anybody on that filter page from a URL perspective, it's not a valuable page from SEO or from a even paid search, being able to land somebody on. "I want all the purple capri satin pants." Well, okay, that's a good filter. It lands there.
Jon:
I want to see you in those pants, by the way.
Ryan:
Yeah, that was the first thing that came to my head. But if you've got a bunch of those, you make a category page, keep the filter there, let it happen, but also say I need to have a category page from SEO standpoint and from my paid search standpoint to land people on that.
Jon:
Yeah, I agree. Okay. The last one is the footer, right? And so let's say you can't find anything on all these other navigations. Consumers are just going to scroll to the bottom of the page and look at that catchall spot, right? That's exactly what the footer typically is. I think that this gets overblown at times because there's also like the mega footer where people are putting every single page, they're stacking it with SEO terms. Generally that does not work very well unless you have a very, very specialized market. Like Airbnb does this at the bottom of their page or has where they list out the cities that they're in and they say like Austin Rentals, Austin short-term rental, Portland short-term rental, New York City short-term rental. They have all these cities because they know that's what people are looking for.
Ryan:
Or they're trying to execute some SEO strategy out of it.
Jon:
Yes. A lot of people will do that. I think personally that degrades the footer because it actually makes it less helpful for the consumer because they have to navigate through and read through all these cities that aren't relevant to them. And very often people will put those in the highest priority for them, not the highest priority or an easy way for the consumer to see it. If you're doing cities, it'd be great if they were alphabetical at least, but that's not going to happen because it's unlikely that an A city is really the top length that Airbnb wants to promote.
he reality here is you just shouldn't cram everything you can into your footer, but I think it's smart to offer options. I really typically want to see the main navigation redone here. The left hand of the footer should always be that main navigation restated. That's because if people have scrolled all the way down to the bottom, they were reading through your page, got frustrated by something and want a quick win, your main nav if done appropriately, should be that spot. It's also where you can put your help links, contact information, et cetera, of course. But I typically try to shy away from that mega footer idea, if you can.
Ryan:
Don't forget about us. Bottom, not top.
Jon:
Yes. There's a lot that should copy in that top nav.
Announcer:
You're listening to Drive and Convert, the podcast focused on e-commerce growth. Your hosts are Jon MacDonald, founder of The Good, a conversion rate optimization agency that works with e-commerce brands to help convert more of their visitors and the buyers, and Ryan Garrow of Logical Position, the digital marketing agency offering pay-per-click management, search engine optimization, and website design services to brands of all sizes. If you find this podcast helpful, please help us out by leaving a review on Apple Podcasts and sharing it with a friend or colleague. Thank you.
Ryan:
Okay, so we've got as far as navigation types, horizontal drop-down, hamburger, left side vertical or right side, and then footer. And so lots of different options, but how should we be directing people to think about their navigation to make sure that it converts? Because that's obviously the goal. Once you click navigation, you need to be taking action on my site.
Jon:
Right, yep. The reality here is there's no one size fits all, right? And that's why I offered up several options of different types of navigations because I think the way to be considering what nav you should use is really should be what is going to appeal to your specific customer. That's it.
Ryan:
Got it.
Jon:
It's not what you want. It's not the design that you feel looks best, it's none of that. It is what is going to appeal to your customer the best? And so that requires customer research. You have to do experimentation around it, at least test your results, whether that be actual A/B testing and iteration around your nav or doing user testing, which can be really eye-opening for nav, doing things like card sorting or just taking your laptop to Starbucks and having people navigate your site. We've talked about this lo-fi, right?
Ryan:
Got it.
Jon:
You have a lot of options there.
Ryan:
What you're telling us is it's everybody's favorite answer in digital marketing or digital traffic. It depends. Okay, so-
Jon:
But it depends on your users, not on the brand. I think that's an important distinction here. It's what your consumers want, not what the brand wants to do. Does that make sense?
Ryan:
Yeah. So if you have somebody on your IT or website team deciding what your nav is, it's almost guaranteed to be wrong.
Jon:
Yep, unless they're chatting with consumers, yeah.
Ryan:
Which they probably aren't, but you never know. But there you go. Because the answer is a wonderful, it depends. We've got to come up with somewhere to start, at least. How can we at least take steps to get people going to figure it out for themselves? What are the pointers you want to offer up to these people?
Jon:
Sure, yeah. Look, we can discuss some ways that at The Good, we've helped users find their way, it's worked across several clients, and I think that taking a research back to, I want to be clear, these aren't just best practices. This is things that you can either use, steal, or test for yourself. I want to offer up several options. I've got 10 of them here. If we don't go through all of them, that's fine, but there is an article up on thegood.com, go to insights and just search for navigation. You will find it, I'm sure, but I'll just jump in and then I'm sure we have a lot of fodder for conversation here, so.
Ryan:
Oh, of course. Sure. These are not best practices. These are things to test to see if it does make sense for your users?
Jon:
Exactly. These are things we've seen work well in specific client cases, and so sharing that in hopes that people take them and make them their own, right? Okay, first is reduce your top level navigation links. Most brands have too many links in their top navigation, so there's two that you already called out. The first is about us and home. Those are two items that should never be in your top navigation. Your goal here should be to get your nav to around five items. Now, five to seven is probably in that right number. Anything more than that, and you again are just increasing that cognitive load. You are really just making it a complicated experience for your visitors.
There's also this interesting, and we'll talk about this next, but this really interesting effect. It's called a serial position effect. And what I mean by that is if I give you a list, you'll remember the first item and last item and maybe something in the middle, but generally won't remember the entire list. And so same thing goes for your navigation. If you do eye tracking studies, you'll see people look at the first item and last item and maybe jump back and look in the middle. But if you have seven, 10 items, people just generally don't look at past the first couple because they're like, "That's too much effort."
Ryan:
It's usually like home on the left and then contact us on the right and you're like, "Wait, those are the least valuable, at least from an e-com standpoint." And those are the ones that we remember. Awesome.
Jon:
That's exactly it. You got to choose wisely here and eliminate the number. That's really the goal here. And so talking about that serial position, the second tip really is to choose the items strategically. You want to place them in the right order once you've called that list down a little bit. Like I was saying, if I asked you to give me 12 items from the grocery store, you'd come back with maybe the first two, maybe the last one, maybe one out of the middle. But again, this is called the serial position effect. It shows that people have a great recall for first and last items in a list, but generally nothing else. You consciously are trying to remember the first one when I tell it to you, and then you hear the last one last, so you automatically remember that.
And everything in the middle, you're just worried about memorizing the list. You just don't because you're distracted. You can take advantage of this in your navigation and drive people to the most important items and put them first or at the end, but generally not in the middle. Again, don't put home as your first item. Don't put contact us. Here's a great example. Anything that says us, you should not have in your navigation, because your navigation should not be about the brand. It should be helpful for the consumer. And I promise you, the consumer is not there at least initially to learn about your brand. They're not going to click on about us out of that main navigation right away. They're going to want to dive into solving their pain or need. Easy, help solve pain or need, get them to the right spot, then educate them about your brand in a supporting fashion.
Next up is organizing your mobile website's navigation. I talked a little bit about hamburger nav, and the problem with hamburger navs on mobile is it really ends up without a visual hierarchy at all, right? What happens is most people click that hamburger nav and you just get one long list, it takes over your mobile screen, you get one list of items, and there's no hierarchy at all, and you kind of are just left out in the dark as a consumer. What I really recommend doing here is stick to shopping focused links, keep every other kind of content out of your navigation because that helps with directional guidance, it decreases distractions and it provides more frictionless experience. Just make that easy. In fact, there's a good case study up on our site where we were able to boost conversions by 15% by just adding visual hierarchy to the mobile navigation. It's something that can work extremely well.
Ryan:
The other thing I would say on mobile is just to make sure that they're large enough to click. I hate mobile where it's so small that I'm accidentally clicking the wrong navigation link that ugh. I'm like-
Jon:
[inaudible 00:17:23].
Ryan:
... I can scroll down a little bit if I need to, but make them big enough.
Jon:
Yeah. It really drives me nuts that people don't test for different size screens, that everyone expects you're on a desktop or an iPad and it's like, no, no. Most people are shopping from their phone.
Ryan:
And I'm like, as a guy, I carry my phone in my pocket and I'm pocket's probably smaller than you because I'm shorter and my pants are smaller, but I use the smallest iPhone, just I always have. Their links are going to be smaller.
Jon:
Yep, I'm with you. Okay, so let's see. We'll skip over a couple of these. Site search, make site search easy to use because I think the stat is that people who use site search convert at a much higher rate. I want to say it's like 40% higher if they use site search. You want to encourage people to use site search. Make it easy to do. Include it as part of your navigation, not necessarily in the navigation but near it so people can find it. That's why you're seeing a trend with a lot of brands who have tons of SKUs putting a search bar in their header. And I like that. I think it works well. We've seen it work well. It's something that encourages people to buy because they're able to get to what they want much quicker.
Ryan:
Yeah, and a couple points on search I'll say is that make sure it stands out from a color standpoint. I've seen a lot of people with white backgrounds and it's a white search bar with no shadow, so there's a little gray, maybe search magnifying glass in the top and I can kind of see it, but it took me a long time. Then the other one, if you're using out-of-the-box search on a platform, it's bad, guaranteed. You need to likely pay for a search system unless you have less than two SKUs on your site, maybe you can use the out-of-the-box Shopify, BigCommerce, or whatever. Pay for site search. It is well worth it.
Jon:
This is one area I'm shocked that Shopify has not just baked in a better search, but they haven't.
Ryan:
[inaudible 00:19:09].
Jon:
There's a whole Shopify app ecosystem around search that's out there. Go search it, find one, use them.
Ryan:
It'll pay for yourself.
Jon:
Yes, exactly. Exactly. next one is providing context for your users. Here's what I mean. You have a big drop-down menu, it's a lot of text links. People are going to get lost in that. How do you provide some context to what people want? Well, we've done a lot of testing around adding icons or a visual next to the category. For instance, with SwissGear, which sells luggage and backpacks, we took an interesting approach here and designed kind of a nested navigation, which obviously as I mentioned earlier isn't our preference, but what we found was for top level product categories, we put a small picture next to it and that helped provide context of what they would see in that. For instance, suitcases, travel bags, backpacks, accessories, all of those had a little icon and that worked extremely well. And if you want to see a sample of this, that article I mentioned, if you go up and search for navigation on thegood.com/insights, you'll find the article. There's a bunch of pictures of this up there as well.
Ryan:
No, and I think this is a phenomenal example of not only your team's talent, but user testing in that if you say travel bag, five people will have five different ideas of what you mean by travel bag. My travel bag is a SwissGear backpack, but that's my travel bag.
Jon:
[inaudible 00:20:31].
Ryan:
If you say that, I'm like, I'm going to use a SwissGear backpack, but my wife has a very expensive brand name travel bag that is more of a tote. And I'm like, we have very different opinions. By giving the simple icons, that's the brand. You can easily tell me what the brand means when they say that. But again, label from the inside, most brands would be like, "Yeah, that's a travel bag." Well, if you don't talk to Jon or his team, you might have the user feedback that tells you 90% of your customers don't think that's a travel bag when they say it first.
Jon:
Yep. Perfect. All right. I'm going to go over two more in the name of time here, and then the rest you can get on that article if you're interested. I like this one, create separate navigation menus for different audiences. A good example here is not necessarily e-commerce, but Lyft. Lyft is the car sharing Uber competitor, if you will. They have a really tricky interface because the problem is they have to cater on their website to drivers and to passengers. It's a two-sided marketplace that they're running. A lot of brands out there, even in e-commerce, are running two-sided marketplaces, look at Etsy, et cetera. Really the idea here is to provide a separate navigation path for each and then make it easy to switch contexts if they need to. But you can have two separate navigations if you get people to go down the right path.
Now the mistake a lot of people make here, a lot of brands make is they try to separate by gender. They'll do a separate navigation for men and women. Things like that are really meant to be more filters or diving down in the navigation. But I think if you're running a two-sided marketplace or you really need to have different contexts and completely different links, completely different services, then it makes sense to do this. But it's something to consider. Basically your goal is to not have people having to dig through irrelevant content. Keep it simple.
Next one is more of a tip than anything else, but it's remove the social media icons from your header. And this one I see unfortunately way too much. You invest so much time into social media that you just feel like you have to display in your navigation. The stat is that 13% of websites have social media in their header.
Ryan:
What?
Jon:
Yeah, 13%.
Ryan:
I never would've guessed it's that high, but it's always frustrating when they do it.
Jon:
It is.
Ryan:
You're trying to send me offsite?
Jon:
Exactly, right? Each of these links is just a colorful exit sign. That's the best way to look at it, right? It's like, "Oh, TikTok, I like TikTok. I'll click on that." And next thing you know, they're not coming back because what is every social media's job? To keep people on the social media site. And they're very good at that.
Ryan:
And if you've got a competitor that's smart and they're advertising on that platform, that platform now has some intent behind where that traffic came from and what they're interested in.
Jon:
Yep, and you better hope that your competitors are no longer advertising on those platforms because they're going to be showing up in ads as well, because now they know the intent. Here's the reality, you're going to lose your customers to social media and you won't get them back. Please do not put social media icons in your headers. I argue don't even put them in your footer. People will find you. I don't know that it's that helpful quite honestly, because they're all just exit signs. You could just say something very ... Put your handle, people will go in and type in your handle. The last is adding a call to action to your header. I like this because I'm going to tell you what not to do in terms of social media, but I also want to tell you a helpful bit of information on what you should do.
And I think adding a call to action to your header is really important because if there's one page on your site you want users to visit, just tell them to go there. We do this at The Good, right? We have a very clear call to action in the top right at the end of our navigation. It's a blue button when everything else is black text. We make it stand out. You should use something descriptive, action oriented, make it stand out. Get started, browse products, take the quiz. It's very common for UD brands to have quizzes. Find something based on your skin type or your need or whatever. That's a great way into people learning about your products. And you can help them navigate the site by asking them a couple questions. Now you have more data about how to personalize the site for them and you get them right where you need them. There's a lot more I could talk about, but we're almost at 30 minutes already, so I think we should wrap here. What do you think?
Ryan:
I agree. There's a lot here. This is by no means exhaustive in navigation because you should probably write a book on it. Maybe there's one coming.
Jon:
Here we go.
Ryan:
But it never ends and it's not a one size fits all. Hopefully anybody listening has found something to at least get them started on making some improvements or at least testing those. Then there's some significant resources on Jon's site. Again, what was that, Jon? You go to your site and look for insights and then just type in nav, navigation?
Jon:
Navigation, yeah. If you just click on insights in the top navigation, that takes you to our 15 years of encyclopedia of conversion topics that we've written about over the years. New content comes out every week, so you can subscribe to get that, but there is a search bar right up front and center, just type in navigation, and I guarantee you that you'll get dozens of articles, but they're typically sorted by release date. This is a fairly new one, so.
Ryan:
Got it. There is no technical best practices or things you can guarantee you're going to work for sure. There's some pretty basic things you can do in navigation to make your site better. And most of you listening need to make some changes to your site navigation. I can very confidently say that based on the sites I see all day, every day.
Jon:
Over/under 50%?
Ryan:
Over 50% for sure need to change their navigation. And it's not even complicated things. You've heard some of the biggest things from Jon that you can change or test and you don't need to go to the article. Just do some of these first, then go to the article to get some others, and then you probably need to have Jon audit your site and start doing some CRO, I'm guessing. Shameless plug for you there, Jon.
Jon:
Appreciate that. I always like the layup.
Ryan:
But I appreciate you giving us some insights into your brain and all the things you've seen in navigation, because if everybody just listened to that first, I could very quickly get more into driving better traffic because the navigation's improved.
Jon:
There you go. Love it. All right.
Ryan:
Thanks Jon.
Jon:
Thank you, Ryan. Appreciate it.
Announcer:
Thanks for listening to Drive and Convert with Jon MacDonald and Ryan Garrow. To keep up to date with new episodes, you can subscribe at DriveAndConvert.com.