Guide to mobile menu UI: bold buttons and intuitive types of navigation

Whether a mobile site uses a hamburger icon, menu button or alternative forms of navigation, it is critical that it stands out.

It should encourage the user to interact; it should work as intended; and when the menu is triggered, the user is greeted with a menu that is logical, usable and visually appealing.

The first column in this series on mobile menu best practice looked at:

  • The hamburger icon and alternative menu buttons.
  • Supplementing, or replacing the menu, with visible navigational tabs and buttons.

This column will look more closely at the design and user interface (UI)/user experience (UX) aspects, including:

  • Making the menu and navigational buttons standout. Type, size, color and placement of buttons.
  • Navigational discipline, taking a logical approach to size, number and names of menu items.
  • The different types of menu, including overlay; off-canvas; multi-toggle; full-screen takeover; and no-menu.

In the interest of continuity, let’s return to the wise words of Norm Cox, a member of the design team on the world’s first graphical user interface for the Xerox “Star” and the originator of hamburger icon, 35 years ago:

“The hamburger is merely another widget in a designer’s arsenal of tools that s/he can use… well… or poorly. It has no inherent goodness/badness, or rightness/wrongness, except in the context of how it’s applied by the designer. Poor UI design is not the widget’s fault. It’s a failure of poor communication using the tools and primitives of a toolkit.

Just as all writers have the same set of primitives (alphabet, words and phrases) and guidelines (syntax, structure, tense, etc.) as the next guy; the writer’s skill comes in how well they arrange them to communicate their thoughts.

Good UI design is similar… we designers also have primitives and guidelines with which we work. How well we communicate a design and its behavior is a skill set grounded in a broad base of knowledge in design, soft sciences, human sciences, technology and maybe a little magic.”

Navigational buttons that standout 

Mike D’Agruma, lead front-end developer, Evolve Creative Group, a web design agency in Akron, OH, USA, suggests four best-practice rules for menu buttons.

  1. Make it obviously tappable.
  2. Make it large enough to tap (44px x 44px).
  3. Place it in familiar locations.
  4. Provide a text description.

D’Agruma submits two sites to illustrate his point. On the Stanek Windows site (developed by Evolve), the menu button is large, in a prime location, and defined from the background header by a different color – which all helps to make it look like an interactive button.

Meanwhile on the Akron Beacon Journal, the menu button is smaller, and not defined from the background. (The open menu we will discuss below).

ohio_stanek_cz27

Location, location, location

The most common placement of the menu and other navigational buttons (such as search or most popular sections) on a mobile site, like on the desktop, is at the top of the webpage. There is no default spot, but it is often found in the top left or top right corner, adjacent to the logo.

One innovation is the fixed or sticky navigational tab that keeps the menu on screen as the user scrolls down the page. Where this occurs on mobile web, it tends to be at the top of the screen.

Some native iOS apps, such as Facebook (see previous column) have introduced a bottom navigational tab, but this has not migrated to web or Android apps, perhaps because they might interfere with the native hardware buttons at the bottom of Android screen.

Nick Babich, editor of UX planet:

“For mobile and desktop websites there is a good option: sticky navigation. This means the menu is permanently visible even during scrolling.

The traditional location for this type of menu is top (header) of the page. You still can put a menu to the bottom (e.g. make it bottom navigation), but this is a break with user expectations – because most web users expect to find a menu at the top of the page.”

The most familiar example of sticky navigation is Google Maps. The search box and hamburger menu icon are ever present, regardless of zooming, horizontal or vertical zooming.

Also of note on Google Maps is the immobile location and navigation buttons, in the prime spot on the lower right of the screen.

From this, it is clear that Google has determined which actions users are most likely to want to do next with maps: view present location, navigate to, or search for new place, and has made it very easy for users to achieve these goals.

As explained in the previous column by 4ourth Mobile’s Steven Hooper, these actions that users are most likely to do next, are known as secondary actions.

The less common/predicable user intentions – referred to as tertiary actions – are addressed through the website’s hidden menu.

google_maps_s6_navigation_cz27

Menu discipline

There are no hard and fast rules on menu format, but plenty of recommendations such as this checklist from the experts at Nielsen Norman Group.

The important thing is to take a logical approach. Prioritize the links that users are most likely to require, make them obvious and easy to interact with.

Don’t guess what users want. Research how popular mobile sites use mobile menus and test out different approaches with real customers.

Comparing the open menu for the Akron Beacon Journal example in the first image, with either the Google open menu above or any of the examples below, it is clear that there are many more menu items and they are smaller and closer together which could make them harder to read and tap accurately.

D’Agruma makes the following recommendations for open menus.

  1. Use category labels that are familiar and relevant. Navigation is meant to funnel the user through a site. This isn’t an area for experimentation.
  2. Condense menu lists where possible. People will scroll, but length should be kept to a minimum.
  3. Longer lists need to be easy to scan, so left justify labels, if you can.
  4. Make link areas large enough to be tapped accurately.
  5. Make it clear where there is a subsections using down arrows or plus signs, obvious color contrast and hide/show functionality.
  6. Give users the ability to swipe within the active screen without accidentally triggering a menu option.
  7. Provide an easy, intuitive way to close the menu.

Types of mobile menu

Both the Google Maps and Akron Beacon Journal, pictured above are examples of a navigational style called the off-canvas menu. These are popular for responsive/mobile sites that have large number of menu items, which often open into sub-navigations.

There are lots of other approaches to mobile menus. They are explained and demonstrated, with sample HTML code, on the excellent ResponsiveNavigation.net (view it on a mobile device).

The examples of menu types below were shared with ClickZ by author of the ResponsiveNavigation.net, Erick Arbe, entrepreneur and founder of HIBR.

  • Menu Overlay: Tapping the menu icon drops down a menu in one or two columns over the top of the webpage. This works well for concise menus. The menu button changes state to an X, which, when tapped, closes the menu.

Example, pictured: HIBR.

  • Full Screen Takeover: Creates an overlay – this is also referred to as modal – over the entire webpage. As this happens the menu icon switches to a prominent X. To cancel and return to the webpage, the visitor taps the cross. Again only for brief menus.

Example, pictured: R+Co

  • No menu/Do nothing: One option, where there are few menu items, is to ditch the menu entirely in favor of visible navigational tabs.

Example, pictured: Google Ventures.

hibr_gv_r+co_cz27

  • Off-canvas: Opens by sliding in from the right, pushing the main screen of to the left. One third or one quarter of the webpage remains visible, but often with a shadow overlaid, to show change of state. To cancel the menu and return to the page, the user taps the main screen or taps a close menu button. Popular for sites with large menus.

Example, pictured above: Google Maps. Pictured below: Nixon.com

  • Multi-toggle: Often used with the off-canvas menu, this accordion-style menu opens submenus when menu items with a + symbol are tapped. The submenu is closed again by tapping the – or X symbol.

Example, pictured below: Nixon

Nixon_menu_x3_cz27

Read the reports:

DNA of a Great M-Commerce Site Part 1: Planning

DNA of a Great M-Commerce Site Part 2: The 12 Pillars of Mobile Design

Related reading

responsive web site
Screen Shot 2016-08-09 at 18.14.41
google amp logo
piccadilly records mobile site
Simple Share Buttons