Today on The Journey,
we're talking about 10 best practices
for website navigation.
Have you ever landed on the website
and have been unsure of where to click to get to the page
or content you were looking for in the first place.
Or felt overwhelmed by the cram stacks
of links in the footer.
Or worse, none of it works while you're on your phone.
That confusion was likely created by a mix of communication,
website design and site hierarchy problems.
And it takes about 50 milliseconds that's 0.05 seconds
for a users to form an opinion about your website.
That determines whether they like your site
or they absolutely despise it
and they're just gonna bounce.
Holy smokes Nealey that's fast.
And as common as it is to say,
don't judge a book by its cover.
Websites are subject to an extreme level of snap judgment
that immediately influenced perceptions of credibility.
Now the best end, well only way to get rid
of that snap judgment is to focus on your home page.
Your homepage needs to improve its site navigation.
Before we go into our 10 tips,
let's talk about why this actually matters.
Now, even if you are a web design pro,
you may not be able to list all the best practices
for website navigation just off the top of your head.
But you can definitely tell when they haven't been followed.
In addition to being a normal functioning website,
an intuitive and well laid out navigation structure
can help increase search engine rankings
and drive website traffic,
increase time on site and number of page views,
improve the overall user experience
and improve conversions and on sites sales.
When you use good website navigation design,
it benefits your visitors search engines
and ultimately your business.
So here are our 10 best practices for website navigation
to improve your existing site structure
and or create a plan for your new website.
And just remember these are best practices.
Use them to guide your process,
but make adjustments based on what is best for your audience
and your industry.
And the first best practice is to start with a site map.
And all a site map is,
it's just a list of pages on your website.
And it outlines your pages by starting with primary
categories and themes.
And then defining pages within those main ideas.
So use that site map to determine which primary navigation
items you need across your main navigation footer
and then all the children that live underneath it.
Two, cater to the visitors' wants and needs.
You want them to be able to land on your site
and quickly find the information that they're looking for.
What's gonna be useful to them.
What is most relevant to them.
What are the pages that every user needs to see.
Make sure that those pages are front and center
on your website.
And with your navigation,
you really wanna make sure you use descriptive
short menu titles.
Long menu titles can clutter the navigation
and make your website look really messy on mobile.
So use short titles when possible.
But cut titles down to as few words as possible as well.
Ideally use one, maybe two words,
but use enough description that users and search engines
can predict what they will find on each page.
It's why when you go to most sites,
there's a home, there's an about,
their services, there's contact.
Nice and easy and clear with what those pages are
when I go there.
Number four, limit the number of menu items
in top navigation.
Think of it like when someone goes to your site
and there's just too many words, there's too many options.
It's overwhelming.
People scan websites to quickly find what they need.
And you wanna simplify that.
And that's by decreasing the number of menu items.
Exactly.
And don't use more than two menu levels
in the top navigation.
What this is, is a drop down that leads to another drop down
that leads to another drop down
that leads to another drop down.
And it's just this giant mess.
I've seen it and it's just gross.
So, instead you consider using something called a mega menu.
So this is if you mouse over the menu item
that has a ton of different options,
it takes up the full width of the page
and you can see the entire structure.
Pretty clear, nice, and easy versus the mega dropdown
over and over and over and hover, hover, hover.
So number six, use menu headings in fat footers
and mega menus.
Now, a fat footer is a navigation structure
that's actually at the bottom of a website
that includes menus and links.
So, if you use a fat footer or a mega menu
that has a lot of links.
Incorporate headers to help categorize the links
and make it easier for users to scan.
Yeah, and it goes back to that site map
of having the parent and then all the children
that relates to it underneath.
With those different either fat footer headings
or mega menus, each column will be a group.
So that way I know that if I go to services
that that column everything underneath
that is related to services.
But one thing that I love to do to really improve
my navigation and just improve my sales overall,
is to actually add a call-to-action in the top navigation.
Now, if you think about your navigation
and why it's so powerful to have a call-to-action here.
Is if you use a sticky header,
so that header goes along with you wherever you go
and have a call-to-action to either shop or contact
or whatever you're trying to get visitors to do.
No matter where they go on your website,
they will always see that call-to-action
and be able to click it anywhere they are.
This just makes the entire user experience that much easier.
So they start to scroll and realize, yep, I'm sold.
I wanna buy now.
But they're not in a section that gives them the option
to click anything.
They just click that top CTA
and go about their day.
Well, Nealey stole my point,
but I'll reiterate number eight.
Experiment with sticky top navigation menus.
This is a navigation menu bar that remains at the top
of the webpage even when the user scrolls.
So, it's a design plus in my opinion.
Because it follows the user
as they navigate through your site.
Sorry about stealing.
I just, I was on a roll I had to keep going.
But next up you wanna really consider the mobile view
of your menus.
Responsible website design adjust the layout
of the website based on the screen size.
Websites adjust to create an optimized experience
for the user.
Whether they're on a small mobile device or a large desktop.
You really wanna keep this in mind
while laying out your menus.
Test your menus on different screen sizes
and make sure that the long menus don't take up
too much space.
And that the hamburger menus, those little three-line icons
are visible and easy to access.
And now what I've seen a lot of other website designers do,
and I do it myself personally.
Is I'll sometimes create a separate navigation
just for the mobile experience
to make sure that it meets the needs of the people
that are actually gonna be using the website.
Cause what might work on the desktop,
even though it's responsive.
It may not work with, the logo, the call-to-action button
and the hamburger menu.
So, some things might need to be adjusted there.
Last but not least use your analytics to improve.
As with all marketing tactics,
what works for you and your brand
might not work for another one.
I'm a big fan of Google Analytics.
So, look at those results there.
Monitor it, help it to inform the next decision
that you make.
Also a really nice feature is the heat map tracking.
Where you can actually see where your customers
are going on your site.
Where are they spending the most time?
Where are they clicking?
And then, iterate to improve the user experience.
Now I wanna reinforce that your website
is always a work in progress.
Don't just set it and forget it.
Use these best practices for website navigation design
to improve the user experience,
boost SEO and drive more conversions.
And then see what other changes and updates
will make your website even more effective.
But if you like this video,
give us a like and drop us a comment below
on something that you learned today.
Also be sure to subscribe and ring that bell
so you're the first to know when our next video comes out.
This is The Journey.