The Website Navigation Guide Tips and Examples

The Website Navigation Guide Tips and Examples

Website navigation tips and examples

Website navigation refers to the elements on a webpage that help a user move around a website. The easier a website is to use, the longer people will stay and the more likely they are to return.

You might not have thought too much about it before, but clear, concise and easy-to-use navigation design is critical to your membership website’s success. Hopefully, this website navigation guide will help you set up a relevant and easy to follow navigation structure for your website visitors.

What is your first step when creating your website? Most people would say designing the website’s look and feel – colours, font, other design elements used in page layouts. But in fact, the first task that should be undertaken when creating a membership website (or any website) is to draw a sitemap.

A sitemap maps out the navigation of your site. Once you have done this, you’ll have a clear picture of:

a) How many pages your site will have;

b) How the pages will link together;

c) How many navigation links you’re going to need on your homepages.

A simple, clear, and intuitive top navigation is not only inviting for visitors, but also for search engines. If search engine bots can follow your navigation links logically within your site, they will get a clear picture of what your site is about, and what topics your site is an authority on.

Your main menu is mostly likely going to be across the top of the page.  This is where it’s most expected by visitors.  While in the early days of websites, left-hand menus on homepages were popular, and in some cases have a place today, most homepage navigation consists of primary links across the top, and possibly some website secondary navigation links in the footer. Blogs will often use category or menu links down one side of interior pages. But to avoid looking cluttered, side navigation should be avoided on homepages.

To build your navigation, start with a big sheet of paper, or a program like Canva, Word or your favourite flow chart software.

If your website will just have free content and no private membership area, draw a single box at the top and label it ‘Public Home Page.’ If you plan on having a private member area, draw two boxes at the top of the page and label them ‘Public Home Page’ and ‘Member Home Page,’ From these boxes, draw lines to the pages that they link to. At the end of each of these lines, draw another box to represent an additional webpage.

Here is an example of a sitemap:

navigation wireframe membership website

Once you start thinking about it, you will end up with different layers in the navigation. For example:

•    Level 1 – Public Home Page and Member Home Page

•    Level 2 – Pages that link directly from the Home Page

•    Level 3 – Pages that link from the category pages  and other level 2 pages

Once you have built your sitemap, get another piece of paper and draw a larger version of the Public Home Page and write in all the link names as you want them to appear on your site. Do the same for the Membership Home Page and your Category Pages.

Types of Website Navigation

Other navigation elements include images with links, text links within articles, floating menus and individual buttons such as ‘Back,’ ‘Previous page,’ ‘Details,’ ‘Top of the page,’ etc. These links can be extremely useful, especially in a membership website.  Let’s say you are running an online yoga business. You may offer different types of yoga – some focusing on an area of the body, hot yoga, Vinyasa, and more. You may find yourself contemplating including all of these categories as top navigation links somehow.

The beauty of the member homepage in a SubHub membership website is that you can create “doorways” or portals to your various topics by using 3-column layouts or blocks with links to the category pages pertaining to the topics. Here is an example:

links to relevant website pages as navigation tool

Now you have a sitemap worked out, and you’ve thought about navigation elements for both the public and member homepages. You’ve also got a good idea of which topics and category pages you will want to show on the top navigation, and which you will present as other link elements like the boxes above. You can have it both ways, of course, if you want to. For example, the above boxes are designed to help members access the content they have paid for.

These links could also appear in the main navigation of the member homepage. They could also appear in the main navigation of the public homepage. In that case, if the member-only links were clicked on, non-members would be prompted to join for access. There could be a strategic advantage in enticing non-members with just a taste of the content that awaits them if they join your community.

Top Navigation Best Practices

Having said that though, there are some caveats to placing more links in your top navigation design, both for human consumption and for search engines. Here are a few points to look out for.

For example, it’s advisable to have no more than 7 links across the top of your page. Any more than that, and it becomes too big a “mouthful” to swallow, especially for newcomers to your page.

What should those 7 links consist of? This is an important consideration. Many websites show links across the top including About Us, Contact Us, Services, Testimonials, and, in the case of a membership website, links to Subscribe and Login. The reality is that other than Subscribe and Login, none of the links just mentioned necessarily belong in the primary top navigation. Let’s take them one by one:

ABOUT US: This one might be okay at the top, especially if your business is new in the industry, or if you have a particular reason to highlight yourself or team members, such as years of experience, or a particular expertise. But to save space, consider placing this link in the footer.

CONTACT US: This can definitely go in the footer area of your site. That keeps it on every page, but again, you’re not using valuable space at the top. At one time, a Contact link was expected in the top navigation, but that has changed, and now, visitors will automatically be drawn to the bottom of the page for contact information and/or a link to your contact form page.

SERVICES: Your primary offering should certainly have a prominent place in the top navigation, however the word Services doesn’t tell the visitor much. You have two ways to go here: 1) Create 3 or 4 more descriptive links across the top of the page that will tell the visitor at a glance what kind of services you offer. For example, if you are a wellness coach, your primary navigation could include links for Reiki, Massage, Homeopathy, Aromatherapy. This tells both visitors and Google what your site is about, and what topics are included in your expertise.

Website Navigation Examples

descriptive terms in website navigation

If you feel you have too many areas of service to link them individually, you can use the Services top navigation link as a heading, which when hovered, reveals a dropdown list. Just be careful of having too many choices within the dropdown as well. Two to four is ideal.

And here is a tip: the top level link of a dropdown list should be a dead link because most visitors will only click on the dropdown offerings. Generally, they won’t be expecting that top link to lead to a page. If you do have it linking to a page, make sure you don’t include any important information in the content, just in case it gets missed. To create a dead link in most platforms, make the link URL a hash tag (#).

dropdown menu navigation

TESTIMONIALS: Rather than make visitors click for a separate page, it is strategically better to place testimonials right on your home page. The SubHub platform offers a nifty testimonial slider layout to easily add your glowing recommendations from your clients.

website testimonial slider

Take a look at the pages on your competitors’ websites for ideas on other standard content that you might want to include.

Is your website navigation structure working?

Now that you’ve strategically mapped out your site, and used best practices to create your navigation links, how do you know you made the right decisions? The obvious metric would be conversions, whether those are phone inquiries, completion of your contact form or an opt-in to an email list. Another method of measuring results is your Google Analytics account. It will tell you where your visitors are navigation to and from on your site. If they are missing an important page, perhaps a re-think of the navigation would be in order.

For a more granular analysis of user behaviour, try an app such as Hot Jar, which actually tracks your users’ mouse and eye movements on your pages.

Conclusion

Completing a sitemap before you start on your website is a big and important step in the planning and building process of your site, and will clarify a lot of things in your mind. From there, you can decide on how many links, their content, whether they should be primary links or in a dropdown list, and if you want to include other types of links as doorways or portals to content. One last important point: When you are choosing a service on which to run your site, make sure you choose one that makes creating navigation links easy, and also offers the flexibility of creating different nav links for the public vs. for members. The SubHub platform offers both, as evidenced by this quick tutorial:

Get started on your new membership site today: https://subhub.com/trial

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.