Web tip: the 3 C’s of website navigation

Exploring your website should be a stress-free, positive experience for customers. Your site’s navigation can hugely impact whether your visitors have a positive or negative experience on your website and with your brand. Lucky for you, you have control over your site navigation.

Today, we outline the Three C’s of successful website navigation (clear, concise, and consistent) to ensure your customers enjoy their experience and come back for more. Before we tackle the Three C’s, let’s review a few tactics that support a clear, concise, and consistent site navigation.

But my website is FULL of content!

An easy-to-follow site navigation doesn’t mean you throw all your good content out the window. In fact, our three website samples, below, offer TONS of different kinds of content for users, but have streamlined navigation that is easy to follow. Employ the following tactics for a clutter-free navigation.

  • Sub-navigation is a second tier of navigation, often a dropdown menu from your primary nav. Your sub-navigation leads visitors deeper into your website and lets you highlight additional categories of content without overwhelming the visitor. If your primary navigation is a bookshelf, your sub-navigation consists of the baskets on the shelves hiding your items out of sight.
  • Clear headlines and sub-headlines convey the value proposition (what’s in it for the customer) of each webpage. Headlines and sub-headlines help your page stay organized and uncluttered.
  • Every webpage should have a clear call-to-action (CTA) guiding the visitor to the next step of their journey through your site. For example, a product detail page might have the CTA to “Add to Cart,” or a page about your services might have a CTA to “See our Work in Action,” linking to client testimonials.
  • Incorporate images to captivate your website visitors and give them a reason to click. All of our sample websites include thumbnails in their sub-navigation.

Without further ado: the Three C’S

Clear and uncomplicated: this is not a “pick your own adventure” story

Do not approach your navigation like a “pick your own adventure” story. In fact, we recommend an opposite approach. You don’t want to include every possible page, product, and purpose a user has for visiting your site, in your primary site navigation.

Think of the site navigation as the roadmap to direct users to an end goal. On an e-commerce website, the end goal is often the shopping cart and a completed purchase, whereas the end goal for a business strategy website might be users signing up for a consultation.

Similarly, your website navigation isn’t the place to take risks or throw in unnecessary design elements. Thoughtful and straightforward is the way to go. Site visitors expect horizontal navigation across the top of your site or vertical navigation down the left, and their eyes are trained to scan a site this way. To delineate from this rule of thumb is to risk your users not finding important navigation links. Gift Craft website

Our client Giftcraft’s website makes it easy for customers to find products:

    1. Uncomplicated primary navigation divided into product categoriesGiftcraft Navigation Blog
    2. Streamlined sub-navigation offering additional options beneath each category and a thumbnail sample image
    3. Sub-navigation is repeated in the left navigation.
    4. When you click to one of the product categories, like jewelry, you see: all primary, sub, and left navigation stays the same, maintaining consistent navigation and layout on the product detail page.
    5. An option to filter products based on criteria like product collection, availability, or product type – makes it easy as pie to locate the products you are looking for.

Concise and click-friendly – clutter is our enemy

Concise website navigation is easier to follow and won’t overwhelm visitors with too many options.

Make sure the most important webpages are easy to find in the primary navigation. Then, group similar content together into categories that will make up your navigation hierarchy. Take this exercise a step further by reviewing pages that are most popular and frequently visited, via your Google Analytics dashboard, and make sure they are easy to find from your primary nav.

Mashable, a leading source of digital news and resources, offers a ton of content on their website, but the navigation is clearly grouped into categories that make it easy for site visitors to find information.

  1. Clearly grouped content categories in primary navigation
  2. Left navigation offers additional content categories, keeping the primary navigation less cluttered
  3. Sub-navigation highlights articles with engaging graphics, further moving the visitor around the site

Mashable navigation

Consistent:

Reduce visitor confusion by keeping the overall look of each webpage consistent. Keep your logo in a static position on each page to maintain the same look and feel. Lay out text, graphics, and navigation in the same page areas and mimic the same look for all CTA’s, to help visitors navigate each page without getting lost.

Martha Stewart’s website keeps a consistent look to each page, so although the site is chock full of content, the visitor doesn’t feel frustrated trying to find it. Each page is laid out the same way, offering groupings of similar content. For example, whether you click the primary navigation option “Cook” or “Create,” your sub-navigation offers similar options (Cook with us/Create with us), and the look of the page stays consistent.

Martha Stewart web navigation
You can always make changes

Once you decide on an effective navigation, it’s time to test. Start with Google Analytics – if results show no one is visiting a certain page, it might be difficult to find. Your website is a work in progress and a fine-tuned, tested navigation is the key to influencing customers’ behavior on your site and with your brand.