Rethinking The Menu On Mobile

“The most common user action on a website is to flee.”

– Edward Tufte, Information Design Guru

Why are most website navigation menus in the top left or top right corners when viewed on mobile devices? In terms of usability, that’s the worst place they could be located. Most of the time.

In the early 1960’s, Bell Labs was working on the Touch Tone phone. That new phone featured a push-button keypad. Various layouts were user tested for speed of dialing, accuracy, and comfort. They played with button size, spacing, typography, button tension, and click or no click. Finally they chose the layout that is the standard on all telephones today.

Fig. 3 Rethinking Mobile Blog

Today we’re learning similar lessons when it comes to how users interact with touch-driven devices, but this time we’re learning it after the fact. When the popularity of the mobile web exploded, there wasn’t the same amount of user testing as Bell Labs had done for the Touch Tone. Screen real estate on a mobile device was (and still is) at a premium, so it was necessary to remove, or at least hide unnecessary page elements like navigation bars, search forms and footer links. To that end, the hamburger button was born. It has become a standard user interface element that is typically used to toggle a website’s primary navigation. But since touch-based user interaction on a mobile device depends on hands, fingers and thumbs, it makes sense to know how people interact with their devices. Where do hands and fingers fall on the device? Do most people use one hand or both? If they are using one hand, what is the range of motion for a thumb? Of course this varies a bit, depending on the size of the device’s screen, and hand and thumb length. Right-handed or left-handed, or more simply, handedness is also a factor. As with most things UX related on the web, there is no one-size-fits-all solution.

Hand and Phone Rethinking Mobile Blog

According to one study about half of all people interacting with a mobile device do it one-handed. Thirty-six percent use a cradled grip, and the remaining fifteen percent use a two-handed approach. Of the two-handed users, ninety percent of them use the phone in portrait vertical orientation. That means, for most users, the top corners of the screen are the least reachable when using their thumbs. As the device screen gets taller or hands get smaller, the difficulty increases. Unfortunately, a lot of websites have the hamburger button in one of the top corners, usually the right. Generally stated, most WordPress themes have this same behavior, as do the most popular CSS frameworks including Foundation and Bootstrap. Unfortunately, moving the hamburger button to the bottom of the screen is no small task in either of these cases. There are a few WordPress starter themes that feature a bottom positioned menu, but it is not typical.

Depending on the nature of the site, expected user interaction, target audience and device-type usage, the position of the hamburger button could have a significant impact on the website’s bounce rate for mobile users. Positioning the navigation at the bottom-left corner of the screen, would be the logical location to target the highest percentage of users. That is, unless they are on a tablet or one of those in-between-sized phabulous phablets. There are also touch-screen enabled laptops to consider. Next year, there will probably be something new. Each of these different screen sizes has different UX requirements, and a different ideal location for the menu. Bad news for website builders, good news for website users.