Website Navigation Best Practices
Navigation and Usability
A well-planned navigation structure is one of the most important features of a website. The navigation structure influences how users make their way through the website. You don’t want such an overwhelming navigation structure that website visitors immediately get frustrated on your site and go to a competitor.
Usability and customer experience are a high priority for us as we plan, design, and develop client websites. We know companies that provide superior customer experience (CX) are more likely to grow and maintain a loyal customer base. And we believe a major component of providing superior customer experience starts with the navigation. Before starting any design or development work, we put together a navigation outline, review it with the client, and get approval on the structure. We believe this sets up each project for success.
Informed Decisions
The pages in your main navigation should be the most important, searched-for pages on your website. Think about who your target audience(s) is and what they are searching for. A helpful exercise to determine your target audience(s) is creating user personas and mapping their path through your website with user journeys. These exercises will tell you who your target audience is and what they are trying to accomplish on your website.
Google Analytics is another great way to plan for your navigation pages. This data will tell you which pages get the most traffic on your website. The heatmaps show you where people are most likely to click on each page, telling you what your users find most interesting. The Behavior Flow helps you understand how users enter your site, and the path they take as they explore through the pages.
Responsive Framework
Nearly 70% of web traffic comes from mobile devices, so it’s important to have a website that functions well on mobile devices and iPads along with desktop computers. And that is easily achieved with a responsive website framework.
Smashing Magazine defines a responsive website as “the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images, and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.”
Less is More
We recommend keeping your main navigation simple, with no more than six pages included. You don’t want to overwhelm website visitors with unnecessary information. We understand there can be more information you’d like to share, so sometimes secondary navigation is needed. But we never go beyond secondary navigation, also called drop-down menus.
The ‘less is more’ phrase also applies to the way you label the navigation pages. It’s best to keep each main navigation page title to one to two words so it doesn’t appear cluttered. Instead of ‘About Us’ use ‘About’ and ‘Contact’ instead of ‘Contact Us.’ That will give your navigation more breathing room and your website users will still understand what the page is about.
Navigation Order
The order of pages in your main navigation is just as important as the pages you add to it. The pages should be shown in order of importance from left to right. In this blog article, web strategist Andy Crestodina said, “Put your most important items at the beginning of the navigation and the least important items in the middle. ‘Contact’ should be the last item on the list, put it at the far right in the top-level horizontal navigation, a standard location.” Since we read left to right, most website visitors will start at the left side of your main navigation, so you want the most important page in that spot.
Link the Logo
While your logo isn’t one of the pages in your main navigation, it is incredibly helpful for visitors as they browse your site. By linking your logo to your homepage, visitors always have access to their starting point in case they get lost or want to explore another area of your website.
Consistent Structure
Your navigation structure should be consistent and accessible across all pages of your website. The main navigation and secondary navigation should never change from page to page, and additional pages shouldn’t be linked only on certain pages. This makes usability very difficult and can lead to frustrated website visitors.
Sitemaps
Sitemaps are critical for a well-organized navigation structure. If a website user does end up confused or lost on your website, a sitemap with links to all of the pages will help them find the information they are searching for. A sitemap will list pages in a clear, organized list in order of hierarchy and link to each respective page.
ADA Accessibility
It’s important to plan for and design a website and navigation structure that is ADA compliant. That means your website should be easy to navigate for visitors who have visual impairment or other disabilities. The pages in your navigation, and all copy on your website, should be easy to read and accessible by keyboard commands and text readers.
ADA compliance also plays a role in how search engines rank a website. A search engine will rank a website with ADA accessibility features in place higher than a website that isn’t ADA compliant.
Footer
While not part of the main navigation, the footer is another important area that will help website visitors navigate your website. The footer should include ‘quick-links’ to the most important pages but can be expanded to include more information like contact information (office address and phone number), social media links, newsletter signup form, and privacy policy.
Structured for Success
A well-organized navigation structure will set up the rest of your website project for success. Since the navigation structure will influence the layout and organization of the content, we recommend creating a navigation outline as the first step of a website redesign project. This will ensure the rest of the website is also created with a user driven mentality.
By Christina Maxwell