Best practices for setting up your website’s navigation.

Your website’s navigation might not be the first thing you think about when setting up your website, but it is a key aspect of your customer’s experience with your brand. A smooth navigation setup can really make an impact and encourage repeat visitors.

A common goal for navigation is making sure your visitors don’t have to click more than 2-3 times to get from one section of the website to another. Some achieve this by sketching their site out on paper first. Others put everything in first, then let their analytics do the talking. Everyone has different strategies to achieve their perfect site navigation.

What has been most helpful to you when setting up your website’s navigation? Share in the comments below!

Navigation is the first thing I think about, how to keep it clear and concise.

Also important to remember the user journey, say you have a Services page, you probably want to include an option for them to go to the bookings page / contact page from there.

I believe a sites homepage is its most important tool, I ensure users can get to all of the most important areas of the site from this page, in both the navigation bar and the pages content. 

any examples of good navigation?

Greetings!

My site has two navigations due to one being for mobile. This becomes an issue for screen reader users as my navigation appears twice when I remove my styles (see image)

It makes my navigation redundant for screen reader users.

Any idea of how to remove the extra navigation with html code

and then add CSS Style that can make the menu accessible/responsive on mobile?

Thanks!

Over the years, I've adopted various strategies. For smaller sites, it's usually just easiest to sketch on paper so I can "feel" the logical flow. This can work for larger sites also, when navigating to grouped sections. If I have an ongoing partnership with my clients, then I will use analytics to determine what might work best.

I would like to switch to digital wireframing, has anyone used Adobe XD? Sketching will always be quicker for me, but I'd prefer a digital copy to look more professional and more quickly share ideas with clients.

Primary, secondary, and tertiary navigation.

Primary:
your main header nav, and this should be the big guns of your business, product, or service and what your customers will be looking for and will immediately find easily. Maybe a CTA button as well of which the purpose is what action you want your site visitor to take (alternately, you can place your CTA in the top bar/secondary nav). I try to keep the number of links in this section to 7 or less, and occasionally omit the HOME link if the target audience is savvy enough to know the logo/company name links to the home page. I also include the logo or entity name, with easy-to-understand tagline in this section.

Secondary:
a top bar with email, phone, maybe address (or map icon) if brick/mortar; sm links; and "secondary" links that are not as critical as links in your primary nav. You can also place your CTA button in this section rather than the primary nav. 

Tertiary:
in the footer. Basically all nav links for easy access (perhaps separated into columns by content), along w/ contact/location info, SM links, logo/company name, and tagline.

Examples here and here of primary and secondary navigation.

Example here of primary, secondary, and tertiary navigation.

I think the initial navigation, the landing page, should be simple and obvious. It sets the tone for the whole site. Mine is two buttons, actions, that tells the visitor what my site is about and how to get there. Pictures and Stories  (blog posts and photographs)  once someone clicks a button then the whole site is available for them to look at, about page, stories and images by category displayed in either an index page or blog summary page and some stories grouped on the nav bar itself. Once inside a story, if it is large, more than one part, I make sure to connect the parts together with a button or text link.  

As a foot note to the above, the back to top arrow on my pages is one of the best additions I have made to my site. A viewer can get back to the nav bar in a second from wherever they happen to be. 

my random views