Site navigation is a crucial part of every website development project. It requires full design attention. With the increasing popularity of mobile devices, having easy–to-use navigation can increase user satisfaction and convert new visitors into returning visitors.

In 2012, a Google study found that 96 percent of users came across a site that wasn’t mobile-friendly and 72 percent thought it was important that brands should have a mobile-friendly site.

It’s pretty clear. Helping mobile users find what they are looking for more quickly and with less effort will create a better user experience—and, possibly increase conversion rates.


According to a recent report, Apple smart phones are responsible for 68 percent of mobile sales. Android smart phones made up an additional 31.4 percent of those sales.

There are many different solutions for mobile navigation, depending on your need, site design, and business goals. These include drop down menus, toggle navigation, footer/anchor, and sidebar navigation. Each solution has strengths and drawbacks.

Mobile Navigation Solutions

Window Shade
The window shade menu style displays in the foreground and underlying content is behind it. Users tap on the horizontal bar as the visual cue and drag the navigation up (or down) to view menu options. Here’s an example from the Inc.com mobile site:
Popover Drawer
The popover drawer menu style works well when the content of the navigation is light. It’s good for websites where the user is likely to jump between each section frequently. Avoid using this type of navigation when content is long and requires a lot of reading.

Double Drawer
Facebook iPhone app uses the double drawer solution. This is good to use when there are separate types of navigation (e.g., main nav and tools/settings) and allows users to navigate between these areas without digging to deep into content.

Dashboard
The dashboard solution is great use of icons and displaying high-level information, but it can be very limiting because there is only so much space for the icons/text on the home screen. The content should only cover one screen. If it covers more than one, find a different solution.

Carousel Menu
The carousel menu utilizes a small space for sub-navigation items. To switch between items, users swipe the horizontal bar to see more sub-menu items. This option is useful if users can see the menu items peeking in from either side as a visual cue to swipe.

Radial Menu
The radial menu option is relatively new and really fun. The radial menu has an icon that when touched, fans out a menu of links. Unfortunately, it is limited to the amount of real estate in the corner of the screen and to about 6 menu items.

Quick Tips—

  • Try not to overwhelm menu real estate with branding. Keeping a seamless experience between your desktop site and mobile site is important, but be sure to trim down content and remove extraneous information.
  • Avoid two icons next to each other.
  • Avoid using buttons when simple links suffice. This will relieve some much needed screen real estate.
  • Tabs should be placed horizontally. This allows users to switch between different content views rather than scrolling to cover all tabs if vertically stacked.
  • Avoid using your logo as the menu icon. This can create some confusion as the logo is often meant to take users back to the homepage of a site.

Additional Resources—

There are many different options for mobile navigation depending on business needs and goals. Having an effective navigation can lead to increase conversion and returning visitors to your website.  Does your business need a mobile site or refined mobile navigation? Let TBH Creative help on your next website design project.