Navigation Basics
Time to Read: 5m 30s
Have you been to a website and gotten lost or were unable to find what you were looking for? What did you do? You most likely left and found something elsewhere that took up less energy. You’re not alone, that’s what most users would do too. We want websites to answer our questions efficiently, so we don't have to spend time guessing or wondering where something is. Now think of a website that was easy to navigate and find exactly what you were looking for. Well, you maybe didn’t recognize this because it was seamless, and it is how a website is supposed to be.
Example of Mega Menu for an Ecommerce Site
Drop Down Menu with Flyout Example[/caption] Another type of menu option includes the local left navigation. This type of navigation is something in addition to the mega menu or drop-down menu. It shows up on the left side of a page you’re on and it gives your user another outline of where they are on your site and how they would navigate to the next page. It is pretty much a drop-down menu expanded and can also include flyouts as well.
These different types of menus all give the opportunity to show your product and service offerings in one place. Which in turn provides the user with a clear way to navigate through your site. Additionally, site structure plays a vital role in how your navigation is laid out. Look out for a blog post that goes in depth about why site structure is important for your website.
Example of Descriptive Menu Items and Calls to Action
Example of Footer with calls to action and links
The Importance of a Well Designed Navigation for Your Users
When you land on a website the navigation is usually the first thing you see. It tells users where to go next and how they will get there. If your navigation is poorly laid out, unclear, or hidden, users can get lost and confused and often give up and move to another site, taking their wallets with them. Your navigation should give users a clear “outline” of what you do and what users can find within your website. It is also essential in increasing user engagement. If a user spends more time on pages of your site engaging with content rather than trying to navigate, this creates more value for them and hopefully goal completions for you. Example of Mega Menu for an Ecommerce Site
Things to Consider When Designing Your Navigation
Design your navigation with the user in mind. Make it easy for them to navigate around your site, find exactly what they are looking for and in the end make a conversion. Think of it as a road map. Your user should be able to find their next click without getting lost. Here are a few things to consider when putting together your “road map.”Consolidate your Main Navigation
Think about consolidating your main navigation to include descriptive menu items. These pages should clearly describe what your business does and point your users in a clear direction on your site. Take into consideration the different menu types as well. Mega Menus are great for websites with category pages, subcategory pages, and sub-sub-category pages; these types of menus give a clear outline specifically for e-commerce sites. Single item drop-down menus work well with smaller sites that provide the user with the information they need and then guide them to either contact for more information or request a quote. These drop-down menus often include “fly outs.” The flyouts should have an arrow or something to indicate that its a flyout in the menu. Flyouts give a simple drop-down menu a place to house the sub-sub-category pages. Drop Down Menu with Flyout Example[/caption] Another type of menu option includes the local left navigation. This type of navigation is something in addition to the mega menu or drop-down menu. It shows up on the left side of a page you’re on and it gives your user another outline of where they are on your site and how they would navigate to the next page. It is pretty much a drop-down menu expanded and can also include flyouts as well.These different types of menus all give the opportunity to show your product and service offerings in one place. Which in turn provides the user with a clear way to navigate through your site. Additionally, site structure plays a vital role in how your navigation is laid out. Look out for a blog post that goes in depth about why site structure is important for your website.
Avoid Generic Terms
Avoid using words like “Products” or “Services” as catch-alls to explain what someone will find in a category. Instead, use descriptive words, so users know at first glance exactly what type of products or services are under each navigation category.
Example of Descriptive Menu Items and Calls to Action
Make Menu Items Actionable
It is essential to place your items that users can act on in the most visible place on every page. A click-to-call phone number, Contact Us button, Request a Quote button and a site search function should be apparent at all times. This makes it easy for your customer to convert or get in contact with you.Use Your Logo as a Home Button
You can skip adding a ‘Home’ link on your site. Your logo should act as the designated ‘Home’ button, and most users understand if you click on the logo, it will bring you back to the homepage.Don’t Forget The Footer
The footer is a great place to put the links that are still needed but maybe aren’t somewhere you want to point people to right away. Put pages like the About Us, Quality Assurance, Privacy Policy and Site Map in the footer. Every page still has the items listed and can easily be found by doing a site search. Don’t forget to restate your calls to action here as well. Often, the foot of the site is the last thing people see before leaving.
Example of Footer with calls to action and links