Why Mobile Menus Belong at the Bottom of the Screen

The way you use your mobile phone can affect your brain.

research study has found that daily mobile phone users have a larger somatosensory cortex. That’s the region of the brain that controls the thumbs.

Further research has found that most users use their phones with one hand. When they hold their phone, they’ll use either their right or left thumb to interact with the screen. The thumb is like the user’s mouse but with limitations.

The Thumb is the Mouse

On desktop devices, users use a mouse to interact with the screen. They can move their mouse to a navigation menu with ease. This is because the mouse does not constrain their wrist movement.

But when users hold a mobile phone, their thumb has a limited range of motion. There are certain areas of the screen they cannot reach. These areas will vary based on which hand they use to hold their phone and the size of the phone’s screen.

small-screen-thumb

(based on average hand size and grip span)

When you place a menu in a hard to reach area, users have to regrip their phone to move their thumb closer. Or, they have to use their other hand to interact with that area. This is extra work that can make navigating harder and slow down the user’s task.

Large Vs. Small Screen Phones

The top areas are becoming harder to reach as more users opt for large screen phones. Large screen phones (more than 5 inches) have lower reachability at the top than small screen phones (less than 5 inches).

large-screen-thumb

(based on average hand size and grip span)

Large screen phones also have low reachability in the corner opposite to the user’s thumb. Whether it’s the left or right corner will depend on which hand the user holds the phone with.

If they hold the phone in their left hand, their thumb will have trouble reaching the right corner. If they hold the phone in their right hand, their thumb will have trouble reaching the left corner.

In contrast, small screen phones have high reachability in the bottom corners. This is because the device is thin enough for the thumb to reach the corner.

The Law of Thumb Reachability

Designers can’t change how users hold their mobile phone. But they can change where they place the navigation menu. Most designers place the navigation menu at the top of the screen. While a convention on desktop, it doesn’t translate well to mobile.

mobile-thumb-reach

The hardest to reach areas for the thumb are at the top of the screen. Placing your menu at the top will make it harder for users to navigate your interface. Users use menus with great frequency. It’s necessary to place the menu within thumb’s reach. This will allow users to complete their tasks much faster.

Research has found that “regions within easy reach of the thumb were fastest and most comfortable”. In other words, the closer a target is to the thumb the faster it is to hit. The easiest to reach area for the thumb is the bottom of the screen. This is where your mobile menu should go.

thumb-reachable-menu

The bottom placement of the menu allows users to tap the hamburger icon and select an option much faster. Placing the menu at the top forces users to regrip their phone or use their other hand to navigate. This requires physical maneuvering and slows down task time.

When users tap the hamburger icon with their thumb, the menu will open from the bottom. The menu options closer to the bottom are within thumb reachability. But the menu options at the top of the screen are out of the thumb’s reach.

In a traditional menu you would place high priority options at the top. But for a bottom menu you should place high priority options at the bottom. This makes them quicker to reach and tap. The new menu hierarchy would start with lowest priority options at top and end with highest at bottom.

The Thumb Sweet Spot

The hand users hold their phone with will vary by preference. Which side should you place your menu then? The same research study discovered a “sweet spot that required movement primarily from the base of the thumb”. This means users did not have to stretch or bend either of their thumbs to reach the sweet spot.

mobile-thumb-sweet-spot

The sweet spot to place your menu is the bottom center of the phone. That’s the spot that’s easiest to reach for both left and right thumbs on small and large screen phones.

The sweet spot benefits large screen phone users more. Small screen phone users don’t have unreachable corners. But users may need to bend and stretch their thumbs to reach them.

As the trend of large screen phones grow, the thumb sweet spot seems more important to consider. The ideal is for users to navigate your interface with as little thumb movement as possible. This mechanical efficiency will lead to faster task completion.

Answering Common Criticisms

Any new recommendation that strays from traditional practice will get criticism. Placing the mobile menu at the bottom is not the norm. But it’s what should be the norm based on how users use mobile devices.

It’s clear that mobile menus at the top are hard to maneuver. But are there any drawbacks or conditions to following this new recommendation? Let’s answer the criticisms and see.

“The user will miss the mobile menu because it’s at the bottom and not the top where users are used to seeing the navigation.”

Yes, users are used to seeing the navigation bar at the top. But they’ve also seen it at the bottom on different mobile apps and devices before. A bottom navigation is not an unusual occurrence for mobile users.

mobile-bottom-bars

Bottom navigation is more of an unusual occurrence for desktop interfaces. A bottom navigation on desktop is easy to miss because the screen size is much larger. This makes it harder for users to view the screen as a whole.

It’s easier to spot a bottom navigation on mobile because the screen is much smaller. This allows users to get view the entire screen where they can spot the navigation bar with ease.

“The bottom navigation will get in the way of browser controls which is also at the bottom. The user can accidentally hit a browser button instead of the menu button.”

You won’t have browser controls that interfere with a bottom navigation on a native app. But a bottom navigation on a web app will have browser controls below it.

It’s possible that users will hit a browser button on accident. But that’s no different than them accidentally hitting a button that’s next to the intended button.

bottom-bar-padding

When two buttons are near each other there’s always a possibility for user error. That doesn’t mean designers should never place buttons next to each other. It means they should add padding between the buttons to prevent these mistakes.

You can do the same with the bottom navigation bar. Add padding between the menu icon and browser bar so that there’s visual separation. This will prevent accidental hits.

“It interferes with scrolling as the user swipes from the bottom. It can also distract users from viewing content.”

Users use their thumbs to scroll and their thumbs are closer to the bottom of the screen. This means they can hit the navigation bar when they scroll down a page. The bar can also distract users when they’re viewing content.

mobile-scrollup-bar

You can solve both of these issues by using a scrollup bar. This would hide the navigation bar when the user scrolls down the page. The bar would only show when the user scrolls back up. This is a common technique already used on mobile apps and browsers.

“It interferes with the call-to-action button on landing pages, which has higher priority than the navigation bar.”

An important call-to-action should be within thumb’s reach as well. But you don’t have to decide between the navigation bar or call-to-action button. You can put both at the bottom without interference if you use the scrollup bar.

If you don’t use a scrollup bar, you should weigh your goals. If your goal is to increase engagement, put a menu within thumb’s reach. if your goal is to increase conversions on a landing page, put a call-to-action button within thumb’s reach.

Thumb Function Dictates Menu Form

A bottom menu may look unusual compared to the more familiar top placement. But the latter ignores how the user’s thumb functions on mobile devices.

The thumb is the primary digit used to interact with mobile devices. This means thumb function should dictate menu form. Ignoring this principle leads to designing a menu that’s hard to use. A hard to use menu decreases user engagement and satisfaction.

The user experience designer’s goal is to make mobile navigation as fast and smooth as possible. Following the law of thumb reachability can make tasks faster and easier for users. Remove the obstacle of low thumb reachability with this simple design change.

11 thoughts on “Why Mobile Menus Belong at the Bottom of the Screen

Leave a Reply

Your email address will not be published. Required fields are marked *