Your mobile-friendly navigation can take many shapes as part of your SEO strategy. The option that is best for you depends on how complex your navigation needs to be, your conversion goals, and your users’ preferences.
Remember that your site’s navigation needs to help visitors — and search spiders — navigate through your website. So your mobile navigation needs to be intuitive, functional, crawlable, and optimized for touch.
Keep these best practices in mind when designing your mobile-friendly navigation:
Keep it simple, sweetie. Keep top-level navigation as simple as possible, especially if you want your navigation displayed across the top of your mobile page. Remember that you’re designing for a small screen size. (An iPhone 6 is 750 pixels wide in portrait mode, whereas a 13-inch laptop computer is 1,280 pixels wide).
The point of a mobile site let your visitors easily browse your website with a mobile device. Your navigation should give them links to your main category pages and pages that improve usability (such as a “Call Now” option and a link to your shopping cart).
You don’t have to link to every page in your website here. In fact, too many options can result in decision paralysis and confusion, which creates a poor user experience.
Including four to eight items in your top menu is usually a good rule of thumb. See the example of Bruce Clay, Inc.’s top menu.
Bruce Clay, Inc. simplifies its desktop navigation (top) significantly to improve mobile user experience. To help users with task completion, the mobile site navigation (bottom) also includes a click-to-call button.List your most important pages first. These are usually your conversion calls to action, such as “locate store,” “shop,” “subscribe,” and “products.” If your website is more content oriented than sales oriented, list your most important category first.
GameStop simplifies its desktop navigation (top) by including only user- and conversion-focused calls to action on its mobile home page (bottom).Consider losing the Home button. To save space, you can leave off the Home button in your navigation and instead have your top-of-page logo navigate to the home page when tapped.
Design for touch and give enough space for a finger. Because both your tablet and smartphone users are navigating your mobile site using touchscreens, it’s very important to make sure that the tap sensitivity of your navigation buttons are large enough to use. The average finger requires a space at least 44 pixels large, left to right and up and down.
Make your menu intuitive. Your visitors should know exactly where each of your menu items will take them.
Minimize multilevel navigation. Keep it simple, but if your navigation simply must have drop-down levels, never add more than two layers of drop-down functionality.
Make sure that drop-down menus are activated by touch. Although mouse-hover activation works in the desktop experience, it leaves your user stuck in the mobile experience.
Use visual menu indicators. If you use an off-screen menu, use a three-line menu indicator so that your visitor can access your menu.
If you have a multilevel navigation, use an intuitive symbol, such as a plus sign (+) to indicate that the menu item has further drop-down options. Also consider using a symbol to differentiate buttons that navigate to a new page from buttons that reveal more drop-down options. REI uses a right-pointing arrow (>) to indicate when a navigation item takes you to a new page.
REI uses visual menu indicators to guide users through its multitiered navigation.Add touch feedback. When users tap an item in your navigation, something needs to happen to assure users that they tapped in the right place. This feedback can be a color change, a blink of color, or a font change. Local, tapped by a user, is highlighted in blue.
Search Engine Land uses color-change touch feedback to let users know where they have tapped within the navigation.Avoid horizontal scrolling. In general, search engines aren’t fond of excessive left to right scrolling, and neither are users. If your menu is too long to fit within the parameters of the screen from left to right, consider a vertical navigation.