Mobile

Why Mobile Menus Belong at the Bottom of the Screen

The way you use your mobile phone can affect your brain. A research study has found that daily mobile phone users have a larger somatosensory cortex. That’s the region of the brain controlling your 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 extra work 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 interfering 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 users may 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 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.


Book

Affiliate

elegant wordpress themes

This Post Has 26 Comments

  1. E.T. Hansson Reply

    Interesting article! I would like to add two important considerations though:

    1. One-handed use is not the only way to hold a phone. Two-handed use is just as frequent, and that changes what areas you can reach. It is important to study your users to find out in what situations and posture they use your app or site.

    2. The menu might be the most important or most frequently used feature of an app. Then it should be in the “sweet spot”. In other apps, other functions are more important and therefore placed in areas which are easier to reach.

  2. Brett Reply

    You left out one crucial point, and it’s the reason why I, as a web designer, can never put the navigation at the bottom of a mobile website…
    In Safari on iOS, the browser’s own navigation bar gets hidden as you scroll down a page, and tapping in the bottom portion of the screen reveals it again.
    So if you put your website navigation there, then every time the user tries to tap on the hamburger icon, what actually happens is the Safari navigation bar gets revealed instead, and the user has to re-focus and tap further up from where the hamburger icon originally was.

    • anthony Reply

      The user will only have to double tap if you don’t use a scrollup bar. If you use a scrollup bar, the navigation bar will appear when the browser bar appears. Users will be able to tap the icon once (without refocusing) to activate the menu.

      I hope Apple removes the bottom tapping that triggers the browser bar in the next iOS. It’s unnecessary and prevents users from activating bottom screen elements when they tap them. Tapping an element should activate it, not trigger an unintended element.

      • Julian Reply

        We have implemented a navigation bar at the bottom, like the article says. Generally it works fine on apps and mobile web.

        Works great with Safary but there is an issue with Samsung Internet browser and the bottom left button that gets covered by samsung hovering button.

  3. Anthony Reply

    There is one problem you didn’t write about, though I share everything you say and would love to use a bottom navigation on my next designs: it’s the native scrollup bar on iOS browser. Browser controls at the bottom disappear when you scroll down but if you tap in this area, for example on a sticky button, controls come back and push up the sticky button. Most of the time, the action you thought you did didn’t happen. Is it an issue for you or do you consider that it’s still a better way to navigate?

  4. David Reply

    There’s another reason to consider navigation (or other key controls) on the bottom of the phone. Unlike the desktop, where the cursor is controlled by a mouse or trackpad, and obscures a very small part of the UI under it while moving, touchscreens like those on tablets and phones respond to the finger touch, and your arm and hand obscure whatever is under it while reaching for the touch area. If it’s at the top, your hand momentarily obscures nearly the entire screen. This means that if the user wants to see anything while you are making the move to touch on the icon, or button at the upper left, you have to move your hand out of the way (or abort the touch you were about to do).

  5. Jenny Lens Reply

    REAL problem: FEW know the hamburg three lines ARE THE MENU. I had to show 20 something college grads how to nav a site selling my tees.

    NO IDEA where to FIND THE MENU.

    So let’s throw out that POS icon and use the word “MENU.”

    THEN put Menu on Top AND Bottom.

    There, fixed it for you. Cos I TOO have taught people, REGULAR people. In colleges, in training centers, and mostly, everywhere!

    I cannot believe how few ppl KNOW that icon is the Menu. So let’s not discuss WHERE to put it when it’s an EPIC FAILURE as is.

  6. Charles Thibaut Reply

    I couldn’t agree more, even if I understand some of the concerns expressed in the comments. The reason is simple and apply whether you hold your mobile with one hand or not: notification pop-ups. I can’t count the number of times when, trying to reach a top menu, I ended up in another app because a notification just popped up within that micro second between thinking to reach the (top) menu and the action.

  7. DeAnn Reply

    My mobile app design students and I have been talking about this for years. I have always wondered why it hasn’t happened and am glad hear what others think. I also agree with Jenny’s comment that says “menu” is better than hamburger menu icon.

  8. Andrew Reply

    I don’t agree with this. It looks like you are trying to solve something for users who use their phone with 1 hand but what about users who use their phone with 2 hands. I don’t have the data but I would be surprised to see if more users are using one hand rather than 2 considering the mobile OS has many functions at the top of the screen. I would think most people use 2 hands which would make this solution not that helpful.

    Maybe tab navigation at the bottom makes sense but with the branding at the bottom it just seems weird from a order sense.

  9. TenTen71 Reply

    I like the ideas but the number 1 concern I have and it hasn’t been truly discussed here — at least it hasn’t been fully stated — and that is this: are we trying to make it easier for lazy people or people who like to text and drive?

    I’m not a “thumber” so I’m fine with the way things are. If it’s an accessibility issue for people with only one hand, then maybe it should be an optional feature built into mobile browsers rather than relying on web designers to get it right every time. If users need easier access, what about voice activation?

    * I am also anti-hamburger icon. I don’t even think it looks like a hamburger, let alone a menu icon.

    • Alex Haan Reply

      I was reading the comments and was thinking I would comment exactly that; Though I’m not using a huge phone, the only time I’m one-handing it, is when I can’t use two hands. It can be for simple reasons (holding a bag/umbrella), but sometimes it is because I quickly want to lookup something while cycling. And I can imagine a lot of people will while driving their car.

      The risk of making it too easy to keep using phones is something that should seriously be considered.

      • Jarrod Whitley Reply

        “The risk of making it too easy to keep using phones is something that should seriously be considered.”

        Whether is it’s easy or not people will still do it. Look at it this way. Maybe if it’s easier to accomplish what they are trying to do on their phone then they will stop using it sooner. This could mean potentially less distracted drivers.

        People are going to keep using their devices while driving no matter what. There is no downside.

        Even so, we don’t design for the minority of users. We cater to the majority of these visiting our sites. That’s just good business.

  10. Clément Menant Reply

    I agree with the idea. The main problem is that the bottom bar is already used by some applications like Safari. So if we put our navigation at the bottom we will have a set of several levels of navs including the browser nav and the website nav.

    But.. we already have this on desktop websites (Header under the browser nav), so I guess it’s just a matter of style to make effective distinction on both navs.

  11. Hing Reply

    The thumb sweets spot is based on how “we” in the west hold our phones. What about some Asian countries where most people use an “i-ring”. The sweet spot will probably move to the middle/top of the screen in many cases. How to accommodate this?

  12. Raul Gonzalez Reply

    I agree with you. Check out my Ambidextrous Mobile Navigation Menu that is position at the bottom of the screen.

    I have also found a “Workaround” to the double click Safari issue by clicking on the area between the word menu and the top of the button.

  13. Eric Reply

    I’m trying to convince one of our clients to put the hamburger on the bottom. Any good websites that are doing that already?

  14. John Reply

    Nice article, in my opinion Opera Touch does that extremely well and should be used as an example for others.

  15. JASON Reply

    Why not allow the user to customise where the menu goes? Why must menus occupy a rigid position?

Leave a Reply to Julian Cancel reply

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