Web designers – and just about everyone else for that matter – have experimented at length website navigation design. This experimentation is a good thing; in fact, it’s a great thing. Experimentation and trial and error are how we all work together to continually evolve web design and user experience standards and best practices. In truth, the vast majority of navigation design experiments crash and burn for one reason or another. They may confuse the audience, or wreak havoc on search engine optimization. There are countless ways navigational design can go wrong, but we need brave souls to explore new ideas and real-life web users to provide feedback. With this vital feedback, we can create a set of best practices for website navigation design. We can rely on these best practices to ensure we’re offering the best experience to website users and providing clean and clear instruction to search engines as they crawl and index our websites.
Best Practice for Website Navigation Design
1. Give Users an Experience They Expect
Many people read this first rule and think, “If we give users an experience they expect, how do we stand out from the competition and showcase our brand as being unique?” This question is excellent, and the answer given by our Toronto web design company is consistent and based on twenty years of experience. Website navigation is a fundamental part of every single website. A website’s navigation is its most important tool and drives user experience and conversion just as much, if not more than a beautiful design or well-executed landing page. We do not want our audience to have to learn to use our website’s navigation, nor leave any doubt as to what will happen when a button is clicked or pressed. The opportunity to be unique and stand out from the competition lies within the interface design and messaging – not the design of the website’s navigation. If we confuse web visitors right off the bat when they enter our website, we can be sure they won’t be converting at a very high rate. Still, more importantly, we create a negative experience with our brand as well as drive up the bounce rate damaging our website’s organic search rankings.
2. Navigation Design Must Be Consistent
Consistency is vital for creating a well-received navigation design. We must choose a link or button colour and use it consistently across the entire site. Our Toronto web designers refer to this as our “action colour,” which is usually the brightest, most vibrant colour within a brand’s colour palette. For the sake our this article, let’s say the brand we’re working with includes a vibrant red within the corporate identity design system. We want to use that strong, attention-commanding red only for buttons and links throughout the website design, where we want users to take action. Using the red not only ensures we rely on the most dominant colour to grab attention but also entice conversion with a robust attention-holding design. If we use this red consistently for navigational elements only, we know that our audience, within seconds, will understand that all red elements within the user interface design are clickable. Their user journey will be smooth and predictable.
3. Navigation Should Be Accessible and Visible
Now that we understand the navigation is an essential element within the website design and user experience, we can touch on a rule that has some flexibility. Navigation should always be accessible and visible to every user. With the evolution of responsive web design, this rule has had to become much more flexible as the experience we design for the desktop environment can sometimes differ significantly from experience on a mobile device. As a general rule of thumb, our Toronto web design company aims to keep all primary navigation visible in the website header. This practice ensures our website navigation design is formatted and positioned in a place the audience expects to find it, and also allows us to be consistent. As users dig into the website or begin to scroll down long pages, we employ what is called “sticky navigation” or “persistent navigation.” This strategy means that once users move past the initial page, fold the navigation or header sticks to the top of their web browser and follow them down the page to ensure that the navigation is always in view and always accessible for users to take the next step in their journey.
Where this rule can be bent further is in the mobile environment. On a smaller mobile device, we do not have the same amount of real estate to layout a traditional desktop-style navigation. Instead, we hide the navigation inside a flyout menu, more affectionately known as a “hamburger menu” because of the little hamburger icon with which we’ve all become so familiar. Mobile navigation is typically not visible, but it can be accessible and predictable. Using the sticky navigation concept, we can ensure the hamburger menu follows the user throughout their experience on the website, allowing them to access the navigation when needed quickly.
4. Navigation Should Be Simple
One mistake we repeatedly see with website navigation design is the sitemap or mega menu approach. This practice or design theory treats the website navigation like a site map that lists every single page within the website. In general, we do not want visitors to make more than three clicks to get to the information they want. Ideally, we only ask them to click once, but in reality, two or three layers of navigation are reasonable.
When we cram the entire site map into a mega menu design, we immediately introduce two huge navigational problems for our audience. Immediately, they are overwhelmed with too many choices. The user’s next step in the user journey is unclear and confusing, ultimately resulting in high bounce rates and diminished conversion rates.
Second, if some users are patient enough to start clicking around the navigation to find what they’re looking for, they are forced to jump through too many layers of navigation. With each hoop, we ask our audience to jump through; we risk losing their attention, and we nurture the growing negative experience with the website and brand.
Websites that feature vast amounts of pages and information should rely more heavily on integrated site search. Our Toronto web design firm employs this strategy in these scenarios by focusing our navigation design on the essentials. We ask our clients, “what are the essential pages that we want all visitors to have immediate access to?” These are often high-level landing pages, contact pages or conversion pages. Then, deeper level pages that feature in-depth content and longtail information are easily linked from key landing pages or semantic search. When we design a more complex navigational experience for these cases, we also create an intelligent “search as you type” or “recommendation” feature into the search tool to speed up the process and help users quickly narrow down search results on the fly. If our user begins to type “website design” into the search bar and we immediately eliminate all pages and topics that do not discuss “website design” we narrow the results and help them find their destination much faster. Further to this experience, displaying page titles in the search recommendations allows users to quickly distinguish between similar pages or topics and select the exact page they want.
5. Pay Attention to Menu Order
This rule is the one we get the most pushback on. Ultimately, there is no right or wrong answer, but we must be in-tune and attentive to our audience. Depending on the industry, demographics and scale of the navigation, the order in which we present menu options matters. In most cases, our web designers in Toronto prefer to display top navigation in the order of importance based on analytics data. This means that we want our most accessed pages at the beginning of the primary navigation, starting on the left and ending with our action point or destination, such as the Contact page, on the far right. This approach is based on the pattern North American’s (and most of the world for that matter) read in. We start in the top left corner and read left to right.
To further this approach, within sub-menus or drop-down menu design, we most often recommend keeping pages grouped alphabetically as this allows visitors to quickly scan the list of options and find the topic they’re looking for quickly.
Where we often get pushback on this website navigation design strategy is placing company description pages too early (too far left) in the navigation instead of in the middle. Many clients are not able to separate themselves from the mentality that users are first and foremost interested in learning about their stories. How the business started, and where it’s headed. In most cases, this is a mistake that we fix months down the line when clients realize that the majority of traffic starts with the service or product pages.
The same mentality can cause issues in the sub-menu experience when pages are not in alphabetical order. Many clients insist they know better than their customers what pages are most important. The analytics data doesn’t lie! Use it as gospel, present it to your client when pushing back on poor navigation design choices and explain the benefits of giving users what the data tells us they want, not what the business owner believes they want.
Putting It All to Work
Understanding the intricacies of navigation design within a website is fundamental to its success. One of the essential roles a web designer plays in a project is educating the client or business owner and convincing them to trust the data. Emotion and “feelings” cannot be relied on to create a website design that converts well. What does work has been tried, tested and practiced in the real world for years. The analytics data and industry studies performed all come to the same conclusion. Following our best practices for website navigation design will ensure your website provides a positive experience to visitors and ultimately drives a successful conversion rate.