Simple Website Navigation That Sells

WEBVTT
00:00:00.160 --> 00:00:04.559
Before we jump in, this week's episode is one I'm bringing back from the podcast archives.
00:00:04.719 --> 00:00:10.320
It's originally aired when this show is called E-Commerce Made Easy before we renamed to Smarter Online Business.
00:00:10.640 --> 00:00:14.560
The name may have changed, but the advice in this episode is just as relevant today.
00:00:14.720 --> 00:00:16.079
So let's jump back in.
00:00:16.320 --> 00:00:22.079
Have you ever gone to a website and just clicked away so fast you didn't even realize what you did?
00:00:22.640 --> 00:00:24.800
Why do you think that's the case?
00:00:25.039 --> 00:00:28.160
Many times it is the customer navigation.
00:00:28.399 --> 00:00:36.399
That is one of the key elements above the fold that is really important for customer conversion and customer satisfaction.
00:00:36.640 --> 00:00:43.119
Today we're tackling one of the most overlooked aspects of website design, and that is navigation, like I mentioned.
00:00:43.280 --> 00:00:52.880
I'll walk you through the do's and don'ts of website navigation so your site becomes a seamless experience that keeps visitors engaged and converts them into customers much more easily.
00:00:54.000 --> 00:00:56.240
Welcome to the e-commerce made easy podcast.
00:00:56.320 --> 00:00:57.920
I'm your host, Kiri Saunders.
00:00:58.159 --> 00:01:02.079
When we started this business, all I had was a couch, a laptop, and a nine-month-old.
00:01:02.479 --> 00:01:03.280
My main goal?
00:01:03.439 --> 00:01:04.319
To help others.
00:01:04.480 --> 00:01:10.000
Now with over 20 years in the e-commerce building industry and even more than that in web development, I have seen a lot.
00:01:10.159 --> 00:01:16.480
I love breaking down the hard tech into easily understandable bits to help others be successful in their online business.
00:01:16.719 --> 00:01:21.040
Whether you're a seasoned e-commerce veteran or just starting out, you've come to the right place.
00:01:21.200 --> 00:01:25.439
So sit back, relax, and let's dive into the world of e-commerce together.
00:01:26.400 --> 00:01:27.680
Welcome back to the show.
00:01:27.840 --> 00:01:35.680
Today we're talking about website navigation and why it is so important for customer satisfaction and customer conversion.
00:01:36.560 --> 00:01:40.959
It is one of the first things that your customers see when they come to your website.
00:01:41.120 --> 00:01:47.120
It isn't just a design element, it is actually the backbone experience for your user.
00:01:47.359 --> 00:01:55.840
And a clear, intuitive navigation menu could be the difference between someone staying on your site or bouncing off of it forever and never coming back.
00:01:56.159 --> 00:02:01.920
So why do we need, we've touched on some of it, but why do we need a great customer navigation menu?
00:02:02.159 --> 00:02:04.640
It really helps keep your customers engaged.
00:02:04.799 --> 00:02:11.680
When they don't feel confused, when they don't feel lost, they're going to keep looking through your site, especially if they find it interesting.
00:02:11.919 --> 00:02:16.000
It really guides them towards taking the next desired action as well.
00:02:16.240 --> 00:02:20.000
And a bonus is it relates to search engine optimization.
00:02:20.240 --> 00:02:30.960
If it's well structured, it can help guide major search engines like Google and Bing through your website and show them what are the most important pages on your website.
00:02:31.199 --> 00:02:35.520
So having it structured well actually helps you for search engine optimization as well.
00:02:36.000 --> 00:02:50.560
88% of online consumers are less likely to return to site after a bad experience, and navigation is often the culprit, which is why this is a super important, but many times very simple element to fix on your website.
00:02:50.800 --> 00:02:52.879
So let's jump into some of those do's.
00:02:53.039 --> 00:02:55.439
What are the things we actually want to do on our website?
00:02:55.599 --> 00:02:57.520
What are the good things we need to have?
00:02:58.319 --> 00:03:02.639
So first we want to avoid vague terms and have intuitive terms.
00:03:02.800 --> 00:03:07.520
So this is where we come back to our theme that we tend to have on this podcast episode.
00:03:07.599 --> 00:03:09.280
We want to be clear and not clever.
00:03:09.520 --> 00:03:16.000
So we want to use intuitive labels like about shop contact services.
00:03:16.159 --> 00:03:19.120
You know, if you're a service provider, that would be one.
00:03:19.280 --> 00:03:22.080
Um, we want to make sure these are all very clear.
00:03:22.319 --> 00:03:27.039
We also want to have only about five to seven items on our menu.
00:03:27.199 --> 00:03:29.759
We want to avoid overwhelming visitors.
00:03:29.919 --> 00:03:33.680
There are a few exceptions to this, and those are very large e-commerce sites.
00:03:33.759 --> 00:03:35.520
You may need more like 10.
00:03:36.000 --> 00:03:40.159
I would not go too much more than 10, but you might need more like 10 or so.
00:03:40.400 --> 00:03:43.759
As long as you have them well organized, it's probably still going to work pretty well.
00:03:43.840 --> 00:03:46.719
And I've seen it actually be very successful for some of our clients.
00:03:46.879 --> 00:03:53.280
Um, so be but we want to in general keep it about five to seven items to avoid overwhelming our visitors.
00:03:53.680 --> 00:04:02.879
And I highly recommend that you have the about and the contact as being one of those or two of those um menu items across the top.
00:04:03.039 --> 00:04:06.400
Generally, we find these off to the right side of the top.
00:04:06.800 --> 00:04:08.879
Because we want to make sure it's easy.
00:04:09.039 --> 00:04:14.560
If they want to learn more about you or your business, that's really easy to find from the about link.
00:04:14.639 --> 00:04:20.879
And if they have questions or want to contact you, we want to make sure that that contact link is right up there at the top.
00:04:21.120 --> 00:04:26.720
If both of these are missing, one or both of these are missing, that's going to erode some trust in the customer.
00:04:26.879 --> 00:04:34.000
If it's not easy to find out more about you and easy to find out how to contact you, that's going to affect your trust factors.
00:04:34.240 --> 00:04:36.319
We want to make sure that's right up there at the top.
00:04:36.560 --> 00:04:39.439
We also want to be making sure we're making it mobile friendly.
00:04:39.600 --> 00:04:43.680
And I stress this a lot on the podcast, but we want to make sure we're testing for mobile.
00:04:43.839 --> 00:04:48.879
Make sure it works seamlessly on tablets, mobile devices of many different types.
00:04:49.120 --> 00:04:52.319
And many times we use what's called a hamburger menu for that.
00:04:52.399 --> 00:04:57.199
It's a collapsible menu with three lines, kind of looks like a really flat squished hamburger.
00:04:57.360 --> 00:05:05.199
So make sure that you're having something intuitive like that that users are used to seeing, such as the hamburger menu when they're on mobile and on tablets.
00:05:06.160 --> 00:05:09.680
And then we want to also get in the heads of our customers.
00:05:10.240 --> 00:05:11.199
Think about them.
00:05:11.360 --> 00:05:13.439
What do they really want to find first?
00:05:13.680 --> 00:05:15.519
What's what's in their curiosity?
00:05:15.680 --> 00:05:17.040
Why do they come to your website?
00:05:17.120 --> 00:05:18.800
What do they want to find first?
00:05:19.279 --> 00:05:21.759
So get in their heads and think about that.
00:05:22.000 --> 00:05:24.720
And make sure that your navigation meets that.
00:05:25.199 --> 00:05:36.480
And then if you have a lot of pages, I highly recommend having a search function at the top, especially if you have a blog or an e-commerce store, obviously, needs a search function, but I feel like blogs do too.
00:05:36.560 --> 00:05:41.120
I find a lot of websites that have blogs that don't have a search function for those blogs.
00:05:41.279 --> 00:05:45.839
Having a search function is really important as well to have up there in the navigation.
00:05:46.639 --> 00:05:50.079
So some things we don't want to do is we don't want to overcrowd our menu.
00:05:50.240 --> 00:05:57.120
We talked earlier about having about five to seven, maybe a little bit more as an exception if you're an e-commerce store with a lot of items.
00:05:57.360 --> 00:06:02.399
And we want to make sure that we have it nice and clear and clean and not overcrowded.
00:06:02.639 --> 00:06:07.439
And also overcrowding can happen even if you only have five or five to seven items.
00:06:07.600 --> 00:06:18.800
If you have all the menu items squished together without proper spacing to make it easy for our eyes to scan, then that's going to also have that perception of being overcrowded as well.
00:06:19.439 --> 00:06:26.480
And then we also don't want to have an overly complex or hidden or weird navigation structure on our website.
00:06:26.959 --> 00:06:30.560
So, you know, multiple drop-downs and flyouts and things like that.
00:06:30.720 --> 00:06:34.639
I would recommend maybe one drop-downslash flyout thing.
00:06:34.720 --> 00:06:39.360
If you're an e-commerce store and you have a lot of products and categories, that's probably fine.
00:06:39.439 --> 00:06:51.759
But you need to make sure that even those, each element needs to be nice and clear and not clever and well organized, well spaced out so it's easy for the user to scan and see what they're looking for.
00:06:52.000 --> 00:06:56.560
And then we also want to make sure that we are testing our navigation for accessibility.
00:06:56.720 --> 00:07:05.360
This is highly important now and forever, as we want to make sure that we are up to date on our web accessibility standards.
00:07:05.439 --> 00:07:19.040
And we will link in the show notes to our accessibility podcast that we did earlier on when we first started the podcast, and that has some great links to some resources on where you can find the latest information on accessibility.
00:07:19.360 --> 00:07:35.279
And when we're doing this, we want to make sure we're including keyboard navigation, which means that they can not use your website without using a mouse, so they can just use the keyboard to get through your website and tab through everything and select pages without a mouse.
00:07:35.439 --> 00:07:38.959
And then we also want to make sure it's screen reader compatible.
00:07:39.199 --> 00:07:51.519
So what that means is for those that have an eyesight impairment, we want to make sure that it can read your website back to them and in the order, this is really important, and in the order that you would visually expect to see it.
00:07:51.680 --> 00:08:00.879
So if you're a you know person who has good eyesight and you can see the order of your menu, you want to make sure that the screen reader reads it in that same order.
00:08:01.040 --> 00:08:05.759
And if our structure of our website isn't built properly, sometimes it'll jump around.
00:08:05.920 --> 00:08:09.519
The screen reader won't jump around because it doesn't know which comes first.
00:08:09.839 --> 00:08:19.600
It's a little bit more advanced, but it's something I highly recommend you go looking up because it is the law and it is something very important because we want to make sure our websites are accessible to all.
00:08:20.000 --> 00:08:23.040
And we also want to make sure we're not burying key pages.
00:08:23.199 --> 00:08:26.079
So make sure essential pages are one or two clicks away.
00:08:26.160 --> 00:08:37.120
I highly recommend one if it is actually essential, just like the about and the um contact us page I talked about, making sure those are one click away, very easy to find.
00:08:37.360 --> 00:08:49.039
Now, some that you might want to have maybe not at the top, kind of depends upon your store and your services, is a shipping or and or return policies.
00:08:49.360 --> 00:08:54.080
Sometimes you'll see those linked at the top, sometimes, and that's also okay to put them at the bottom.
00:08:54.159 --> 00:08:57.679
I find that consumers, if they don't see them at the top, they're gonna look at the bottom.
00:08:57.759 --> 00:08:59.840
So that's something we don't want to bury.
00:08:59.919 --> 00:09:04.960
We do want to have directly linked on the page, whether it's at the top or the bottom.
00:09:05.200 --> 00:09:08.240
And so that's something to consider, it's not burying that.
00:09:08.559 --> 00:09:10.879
And then we also don't want to use confusing labels.
00:09:10.960 --> 00:09:15.600
We don't want to be using jargon unless that's the purpose of your website.
00:09:15.840 --> 00:09:23.759
If your target is people who use the jargon and they expect to see the jargon, that's basically the only time you want to use jargon on your website.
00:09:24.000 --> 00:09:27.840
Otherwise, we want to make sure we're back to that clear, not clever type of language.
00:09:28.000 --> 00:09:33.759
We want to make sure it's clear, easy to read, easy to scan, easy to process for the person's brain.
00:09:34.240 --> 00:09:40.639
And then we have some bonus navigation tips that can really help you like even take it a step further.
00:09:40.879 --> 00:09:46.080
And this is something I find that we aren't having nearly as much on websites lately is breadcrumbs.
00:09:46.159 --> 00:09:53.759
And what that basically means is let's say you are went to the home page, you clicked on services, and then you click on one-on-one consulting.
00:09:53.919 --> 00:09:56.159
Well, you just went through three steps on the website.
00:09:56.320 --> 00:10:05.120
So breadcrumb would show home services and then one-on-one consulting in a row, and with not really very big text, honestly.
00:10:05.200 --> 00:10:09.200
It's a very subtle thing, but it shows you how you went through the website.
00:10:09.360 --> 00:10:10.799
Kind of like when you go into a store.
00:10:10.960 --> 00:10:17.200
You walk in the door, you're gonna walk down a couple aisles, you know, walk past a couple aisles and then go down one of the aisles.
00:10:17.279 --> 00:10:24.720
Well, in your mind, you've visually just seen that you went through the door, you walked through the store, walked past a couple aisles, and went down, let's say, aisle three.
00:10:25.039 --> 00:10:27.919
So you know as a person where you just went.
00:10:28.080 --> 00:10:32.480
Well, this helps them visualize where they just went when you have it on your website.
00:10:32.639 --> 00:10:34.879
It's something that it's a nice to have.
00:10:35.200 --> 00:10:38.159
I think it can really help, especially if you have a lot of pages.
00:10:38.320 --> 00:10:40.720
And then we want to make sure we're highlighting the current page.
00:10:40.879 --> 00:10:42.720
Make sure it's obvious they know where they are.
00:10:42.879 --> 00:10:46.080
Make sure they still know that they're in aisle three in the store, right?
00:10:46.240 --> 00:10:48.240
Make sure it's not confusing them where they are.
00:10:48.399 --> 00:10:50.960
And then always testing your navigation.
00:10:51.200 --> 00:10:54.240
Make sure you're always testing it on multiple devices.
00:10:54.480 --> 00:10:58.399
Have have other people test your navigation that aren't familiar with your website.
00:10:58.559 --> 00:11:01.600
Have some business friends or some just in-person friends.
00:11:01.759 --> 00:11:04.559
Um, and then we also want to make sure we're keeping it updated.
00:11:04.720 --> 00:11:05.519
This is really important.
00:11:05.600 --> 00:11:08.559
I want to make sure that you are auditing this regularly.
00:11:08.879 --> 00:11:14.639
Now, regularly for you could be once a year, could be twice a year, could be once a month.
00:11:14.799 --> 00:11:19.440
It really depends upon how much your website's changing as the year goes by.
00:11:19.600 --> 00:11:31.679
But I'd want to make sure you don't never check it because what if you change something simple on your you've changed something and you didn't update your navigation to reflect it, and now your customers can't find it or they get confused.
00:11:31.840 --> 00:11:33.120
You know, why is this page here?
00:11:33.279 --> 00:11:36.240
Maybe you don't offer the service anymore, but the page is still there.
00:11:36.399 --> 00:11:42.639
We want to make sure that things like that don't happen, which is why at least checking it once or twice a year is a really good idea.
00:11:43.440 --> 00:11:45.679
Okay, so let's recap this episode.
00:11:45.840 --> 00:11:52.240
We want to make sure that we are keeping our navigation simple and have it user-friendly and accessible.
00:11:52.320 --> 00:11:56.080
Those are the three pillars of a great website navigation.
00:11:56.480 --> 00:12:02.159
And great website navigation directly impacts conversions and customer satisfaction.
00:12:02.399 --> 00:12:04.720
Nobody wants to be confused when they go to your website.
00:12:04.879 --> 00:12:07.519
They want to feel at home, they want to feel natural to them.
00:12:07.679 --> 00:12:12.399
So make sure we make them feel comfortable at home and know exactly where they are.
00:12:12.639 --> 00:12:17.600
All right, so that's all we have for this week's episode of the e-commerce made easy podcast.
00:12:17.759 --> 00:12:19.279
I hope you enjoyed this show.
00:12:19.519 --> 00:12:23.919
If you find this this helpful, make sure you're sharing it with a business friend as well.
00:12:24.000 --> 00:12:28.399
That helps them out and helps us get the word out better to help others.
00:12:28.799 --> 00:12:30.240
And we will see you next week.
00:12:30.399 --> 00:12:32.320
I hope you enjoyed this episode from the archives.
00:12:32.399 --> 00:12:38.320
If you're new here, Smarter Online Business is all about helping you turn your website into your smartest sales tool.
00:12:38.480 --> 00:12:41.120
Be sure to subscribe so you don't miss out on what's coming next.
00:12:41.200 --> 00:12:45.039
And you can find more resources at SmarterOnlinebusiness.com.