Keep Your Customers Coming Back - Key Principles of Good Website Navigation

Website design is becoming more accessible for amateur coders with a wide variety of quality coding resources available online. However, even the most aesthetically pleasing, professionally designed websites won’t create positive user experiences if their navigation is less than logical.

Navigation on a website is akin to navigating a road; clear, outlined directions ensure that you don’t get lost in your search and are more likely to enjoy the experience. Travel destinations that are easy to access and navigate are more likely to have repeat customers. Your website is the same. Designing a website while keeping these 10 fundamental principals in mind ensures that your site keeps your customers coming back.

1. Planning Start at the beginning. Take time to diagram the proposed navigation for your website. Visualize the hierarchy and relationship of pages by generating a sitemap in a simple document or even a spreadsheet. What’s a sitemap? Sitemaps are lists or flow chart diagrams that show the connections between web pages and website content. A visual sitemap is quite an effective method for planning, communicating ideas about a website’s structure, and generally offering a bird’s-eye view of the entire website during the design process.

2. Be clear and concise Use highly descriptive, clearly understood customer-familiar terms when selecting your navigation keywords. Keeping in mind that generic terms like ‘Services’, ‘Products’, or ‘Solutions’ might not be descriptive enough for the pages to which they link. For example, a clothing store might organize their site by clothing type (Tops, Bottoms, Swimwear, Accessories) while a company that sells only t-shirts might organize by sleeve length (Sleeveless, Short-sleeved, Long-sleeved). Streamline your navigation where possible. Navigation bars and lists that contain many top-level elements can be overwhelming and present more difficulty than intended. To quote Kelly Johnson, lead engineer at the Lockheed Skunk Works (creators of the Lockheed U-2 and SR-71 Blackbird spy planes, among many others), “Keep it simple stupid” (no comma). There’s no reason to make your navigation more complicated than necessary.

3. Don’t reinvent the wheel Use known web conventions as they are based on ideas that are proven to work. The quintessential example of this is a link back to the homepage via the website logo. Common convention has this link located at either the top left-hand corner or centered along the top of every page. This is so widely embraced that locating the link elsewhere might present unintended confusion for the customer.

4. Utilize drop-down menus and categories when necessary The consensus of opinions for drop-down menus, “hamburger” menus, and categories seem to shift as much as the tides of fashion have changed. That said, if drop-down menus and categories accomplish your goal of creating a logical navigation structure, then they serve your purpose (and your customers) well.

5. Consistency Primary navigation should stand out and be a clear and consistent presence throughout the site. Customers who can’t easily navigate are less likely to return in the future. Utilizing a fixed or “sticky” navigation layout would ensure that navigation remains a front-row priority on all pages.

6. Responsive navigation Utilize mobile-friendly navigation conventions like “hamburger” menus (fixed or floating), tabbed menus, slide-out menus, or a combination thereof to create navigation that renders appropriately on smaller devices. In an age where customers are more likely to surf the Internet on their phones than on their desktop computers, website design that does not cater to mobile-friendly navigation would be a disservice.

7. Footers Don’t forget about the bottom of your website. Footers are an integral part of the overall navigation of most websites. Building a footer that doesn’t complement your navigation is simply bad design. Current conventions have footers containing items such as privacy and legal links, email sign up fields, address details, and social links to name only a few.

8. Don’t let your customer get lost Always indicate where a customer is in a site’s navigation through the use of highlighted menu treatments or text-based location indicators, aka “Breadcrumb Trails”. Breadcrumb navigation provides links back to each previous page the customer navigated through and shows the customer's current location on a website. For example, “Home > Page 1 > Page 2” would be the breadcrumb trail for a customer’s navigation to page 2. While highlighted menu treatments work well on simple websites with few pages and a simple hierarchy, breadcrumb trails work best to enhance a complex website’s usability. Keep in mind, breadcrumb navigation should be viewed as a convenience feature and should never replace primary navigation.

9. Accessibility Accessibility of websites is crucial, and navigation layouts are no different. Navigation should work the same across all browsers, devices, with and without a mouse, and for people that may have difficulty reading the text.When websites and web tools are properly designed and coded, people with disabilities can use them without difficulty. However, currently, many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use. To verify your navigation layout is accessible as possible, review accessibility resources such as W3C Web Accessibility Initiative (https://www.w3.org/WAI/) and Usability.gov (https://www.usability.gov/what-and-why/accessibility.html), to name a few. Additionally, utilize a web accessibility assessment to get feedback regarding areas needing improvements.

10. Do what’s best for you Lastly, and most importantly, recognize there is no “One Size Fits All” rule that can guide you in your design. The best designs do what works for them and their customer base. While best practices and guidelines can help you along the way, recognizing what works for one website might be a complete failure for another helps make the design process a little less painful. In Summary, bespoke navigation layouts and design are needed for each and every website. While we need to be mindful of common conventions, best practices, and general guidelines, anything that allows you to achieve the goal of a clear, logical, and accessible website is an absolute win.