Make no mistake, the most impressive-looking and product-rich websites will fail to convert visitors into paying customers if the visitors are unable to easily find what they are looking for. A lot of web designers forget that the navigation menu is still the #1 element on your website new visitors look for. The navigation menu – whether simply or extravagantly designed – must be easily found and usable.
How do we accomplish this?
First, you need to consider how most people use the Internet these days. Axios has a great piece that confirms that Desktop traffic essentially dies on weekends. Smart Insights has even more graphs and stats that show that optimizing for mobile devices is absolutely imperative.
Here are three ways to optimize your navigation menu for today’s Web user:
#1 – Optimize for All Devices, Especially Mobile
Your first priority is that your navigation menus work perfectly across all displays. One very common navigation menu set-up we’ve all seen and used is to have the links align horizontally for Desktop and/or landscape-oriented displays and switch to a vertical alignment for smartphones and/or portrait-oriented displays, with the smartphone menus being identified with the familiar bar icon:
Don’t Make Them Think
For those of us familiar with the Web, we understand what the bar icon (i.e. “hamburger menu”) means. That visual reference is permanently ingrained in our memory. However, we know there’s a large amount of people who won’t get this visual reference. In order for your menu to be truly accessible to everyone, we recommend adding a text reference like Menu or Explore next to the bar icon. This way, there’s no confusing where the menu is located on the mobile display.
#2 – Develop Intuitive Navigation
What exactly is intuitive navigation, and how do we design it into our website? Well, we can tell you what intuitive navigation is not; it is not flashy or creative designs that are made to entertain or to distinguish you from the other “dull” websites out there. Simply defined, intuitive navigation implements a familiar and consistent look and feel across all the design elements of your website.
#3 – Know Your Menu Types
We’ve touched a lot on the main navigation, but there are other menu types that – when used correctly – will optimize your website further and add to the ease-of-use.
Main Menu
Designers and Developers like to call this the “Top Bar” as it is universally accepted that this bar be located towards the top of every page. This is your main menu that directs visitors throughout the various pages of your website. The main menu design should be consistent with the rest of the design elements. Remember, this is the #1 point of interaction the visitor will use.
Breadcrumbs
Breadcrumb menus compliment your main menu and show people the basic path they took to get to where they are now. Basically put, this is Web equivalent to the “You Are Here” stickers you see in shopping mall directories. For an example, see the hardware store-themed breadcrumb menu below:
Each link before the current page can be clicked to take the visitor back a step or two in case they got lost looking for a particular piece of information.
Sitemap
A useful and often-neglected menu is the Sitemap. The sitemap menu is shown on its own web page and contains a hierarchical, top-down, organized list of all of the pages on your website. It’s a simple road map of your site that’s predominantly used by people using screen readers. People with screen readers have no care in the world for your main menu becaue they are either blind or have a vision disorder that eliminates their need for visual cues. Sitemaps are perfect for these visitors as it takes away all of the fuss of having their reader struggle to navigate through your styled main menu.
Pagination Links
If you have an eCommerce or online storefront, you’re likely selling quite a few products. A problem that may arise is that when people search for every product, the browser will list each and every item down the page. What you’re left with is terribly unusable list of products. This is where you want to set up a Pagination system and menu; the system splits all of the items in to seperate pages that only show X amount per page. The menu then will allow users to go from page to page to find what they’re looking for.
Back To Top
For web pages with a lot of content that requires the user to scroll down a lot, having a ‘Back To Top’ link or button in the lower-right corner of your page allows visitors to return to the top of your web page with one click, without the need to scroll all the way back up.
Footer Links
Placing menu links in the footer is a newer tactic, but one that has merit. Some of you will ask, “Why have duplicate links on the top and bottom of the page?” If you think about it, a visitor may appreciate a quick link at the bottom of the page once they’re done reading the content on your page. It’s simply a matter of preference and generally a good thing to have a small menu in your footer. This does not mean that you need each and every link in both the top and bottom menus. Consider your most popular pages along with a link to the Home page, About Us page and Contact page.
Without proper menus in place, your website would be a confusing and intimidating mess of content. Whether your site content is simple or complex in nature, a proper navigation system will turn potential chaos (and lost customers) into a smooth & pleasant ride across your website.