The Ins & Outs of Mobile Website Navigation

Mobile Website Navigation

Take your average web surfer (let’s call him Frank), and drop him onto any desktop website in the world – doesn’t matter the language or the topic – and 9 times out of 10, I bet you Frank will know where to look on the page for website navigation. Why? Because Frank has been conditioned over years of web browsing to understand 1) What a navigation bar or sidebar looks like, and 2) Where to look for it.

Now let’s drop Frank onto a mobile-optimized website and try the same experiment. Is there a drop-down menu? Are all the pages linked via buttons at the top of the page, or at the bottom? If he clicks on a navigation link, will he be presented with an entirely new set of navigation links? In which case, how does he get back to the other pages? Frank is lost.

Because of its relative infancy, the mobile web is still trying to determine the best means of offering easy and intuitive website navigation to users. Every mobile website template, platform, or developer may offer a different solution, but what it really comes down to is usability. We’ve compiled 5 Best Practices based on our own usability studies and mobile browsing experiences.

1. Big Mobile Site? Avoid the Stack O’ Buttons

Yes, a “stack o’ buttons” is exactly what it sounds like. No doubt you’ve encountered this solution before if you’ve done some mobile web surfing. A mobile site will offer a stack of buttons on each page that links to other pages on the website.

Stack of Buttons Mobile Website Menu Navigation

For smaller mobile websites, the stack o’ buttons is occasionally the best solution; it’s easily visible, so users aren’t left searching for the navigation, and it’s intuitive. More often than not, however, these buttons are located at the bottom  of each page, below the content, so users must scroll all the way down in order to navigate around.

If a mobile website has more than 4 or 5 pages, the stack o’ buttons quickly becomes cumbersome. Beyond 5 pages, you may need to start changing the buttons to link to deeper subpages, at which point users may become confused when trying to navigate back to earlier pages.

Our recommendation? Avoid the stack o’ buttons. Not just because it limits the size of your website, but because it also takes up a lot of page real estate that could be better employed with awesome content or calls-to-action.

2. If You Really Want the Stack O’ Buttons, Make It Expandable

Similar to the basic stack o’ buttons, but with a little more flexibility for deeper site navigation, expandable footer navigation is located at the bottom of a mobile page. Unlike the stack o’ buttons, however, links to pages that have subpages can expand using carrots or +/- icons to allow for uniform navigation across the entire mobile site. Every page is accessible from every other page.

Mobile Website Navigation Expandable Footer Menu

However, this solution still forces users to scroll down to the bottom of a page in order to navigate the site. Depending on how much content is on any given page, this may be annoying.

3. Opt for a Menu Button with Nested Navigation

Gaining popularity, the drop-down menu button is becoming a staple of many HTML5 mobile websites. Having one dedicated location for nested website navigation that expands and collapses using JavaScript and CSS allows designers and marketers to free up page real estate. With nested navigation, mobile websites can have as many levels as needed; there’s no limit to the size or depth of content provided. Our own platform features nested navigation that has been usability tested to ensure that users never feel lost navigating into and around a site.

Because the menu button is often located at the top of every page, users can quickly navigate without needing to scroll. The triple-line menu button is also becoming more recognizable, thanks to its crossover use in popular native apps like Facebook and Path.

Menu Button Mobile Website Navigation

To make menu navigation even easier for first-time visitors to mobile websites built on the Bluetrain platform, we employ a one-time call out banner to grab the user’s attention before they begin clicking around the site. As soon as the user opens the menu or taps on the banner, it disappears right away (using cookies, we make sure not to show the banner again to returning users).

Mobile Website Menu Navigation Alert

4. Don’t Use Hover States!

Why? Because they don’t work on mobile. Instead, allow the users to click on a menu option and use JavaScript and CSS to expand or collapse the menu.

5. Use Common Sense & Analytics to Pick Homepage Navigation Shortcuts

When you make your navigation accessible via a menu button, it frees up a lot of valuable space on your mobile homepage (hallelujah!). So now you get to think long and hard about crafting user flows and calls-to-action. Check out our free tool, Mobile Dashboard, to find out which pages your mobile visitors really care about, and work these navigation shortcuts into your homepage design.

Keep in mind that the mobile web is still evolving, so there’s really no “right” or “wrong” solution for website navigation just yet. Is there an alternative form of navigation that you prefer? Sound off in the comments section!