6
10 Comments

What do you think about mobile menu buttons at the bottom of screens?

I got to thinking about this several months ago. Seems it would be more convenient for people on mobile, to have the menu button at the bottom left or right.

Then I happened to see this is what tailwindcss did on their mobile docs site.

  1. 2

    I think it's just common sense.

    I've never even heard of the concept of "thumb zone."

    Just open your favorite web apps, where are the buttons?

    This is the principle I used to design Zlappo's app:

  2. 2

    This is what we did for the mobile for our app, on desktop it's at the top of the screen, but if you access it from your phone it's at the bottom. I think Instagram, Reddit, and other apps follow this pattern too.

  3. 2

    I think it is a trade-off.

    Pros:

    • Easier to reach

    Cons:

    • Non-standard so it introduces change/friction for users, especially first-time visitors
    • Covers valuable real-estate on the screen (I think bottom/center is more valuable than top)

    Probably not a good idea to implement unless 1) your users frequently visit the page/site and 2) frequently use the navigation sidebar. I think Tailwind documentation fits these two criteria, so it probably makes sense there.

  4. 2

    I've always thought it made sense to put the menu near your thumb from the start. Reaching my right thumb to the top left of a screen always feels like a chore.

    Bottom navigation on mobile is a no-brainer.

  5. 1

    I like them, there is definitely value in making your more frequently used or primary buttons easy to reach when the user is only using one hand.

    For hamburger menus I would still consider the top left or right, just because of how much users have already been trained to look for them there.

    For web on iOS you sometimes need to contend with the way iOS Safari adjusts the viewport size (hides and shows the bottom menu bar) depending on how you are interacting with the page. Depends on how you've put together your site/styles.

    (If you are using react and cannot rework your site to handle that behaviour, a workaround exists in the form of react-div-100vh. Downside is the bottom menu bar will now always show)

    And on iOS devices with a notch you might also need to consider avoiding the home indicator bar.

    (If you are working on a react native app, checkout react-native-home-indicator. There is a rejected PR floating around that I've turned into a patch using patch-package which lets you fade the indicator and make it hard to accidentally activate when you are showing your bottom buttons)

  6. 1

    For me it doesn't make much of a difference as I nearly always hold and use mobile devices with two hands.

  7. 1

    I recently created a new bottom (context) menu on my client's site.
    It's definitely better and more usable than before. This is a conclusion after showing it to a few friends.
    This menu has been in production for several days. For now, user feedback is also positive.

  8. 1

    I think it's user-friendly and more natural, but you need to test for sure to see how your audience is behaving.

    Here is more about button placements, mainly CTA buttons but it can give you some idea how it affects usability: https://uxmovement.com/mobile/optimal-placement-for-mobile-call-to-action-buttons/

    1. 1

      Excellent article! Thanks

  9. 1

    It's intuitive and convinient, try it. You can make split-test for A/header menu and B/footer menu style and see how the users are reacting, get some feedback. It can't be worse than this useless bottom bar on this site.

  10. 1

    This comment was deleted a year ago.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 18 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments