23

Using a bottom bar on mobile websites

over 6 years ago from , Designer at Incentro

Hi all!

I'm currently doing a small research concerning the use of bottom tabbars on mobile websites. A lot of native mobile applications are switching to a bottom tabbar as a primair navigation. In my opinion this is a logical result of bigger phones with larger screens which makes it harder to reach a topbar navigation with one hand. The use of text labels (+ icons) and focus on important pages helps defending a bottom tabbar against a hidden navigation within a hamburger icon.

The only real disadvantage for a bottom tabbar that i've discovered is more a technical one. Using it means that is has to be sticky to the bottom, which means (in the case of Safari on iOS) that the default state of the browser controls stays as it is (which is already using 16% of the screen) and doesn't collapse like it usually does.

Some additional info:

So my question is:

Do you ever choose for a bottom tabbar in your mobile web design and why not?

18 comments

  • Nicholas BurroughsNicholas Burroughs, over 6 years ago

    Pitchfork

    Another great example of a site doing this.

    8 points
  • Denis RojcykDenis Rojcyk, over 6 years ago

    I didn't research it thoroughly, but the last time I checked it required two taps to actually do something.

    If you stick your navigation to the bottom (Safari for iOS) and you've scrolled a bit (Safari in its minimalistic view) you need to tap twice to change the tab. First: to get the full Safari UI, and second: for the actual navigation action. This bugged me so much that I've sticked with top navigation.

    7 points
    • Adam RasheedAdam Rasheed, over 6 years ago

      This is the biggest reason I stay away from bottom navs on my mobile sites. I'm currently experimenting with horizontally scrolling nav items.

      2 points
    • Sander SmeekesSander Smeekes, over 6 years ago (edited over 6 years ago )

      Hmm.. yeah. I've just found an example of that issue. Definitely not ideal. So basically we have two options for Safari:

      1. Static Safari controls + a bottom tabbar (The native ui takes 16% of the screen)
      2. Collapsing Safari controls + a bottom tabbar (It takes two taps to get acces to the link you want to visit)
      1 point
  • Duke CavinskiDuke Cavinski, over 6 years ago

    It was generally considered to not use them because android native controls are there and can create a huge traffic jam in one area. I guess we don't care about that anymore, though.

    3 points
  • Drew McDonaldDrew McDonald, over 6 years ago

    A small startup I'm working with has chosen the bottom bar for our mobile experience. We liked bottom menus such as Pokemon Go's FAB menu and various other apps with bottom tab menus - we feel it just lends to the mobile experience and how users interact with mobile experiences.

    For desktop however, we're sticking with the top nav menu for familiar convention.

    3 points
  • Jimmy OfisiaJimmy Ofisia, over 6 years ago

    I'm using bottom tabbar on my site, because of LukeW, and why not? :D

    2 points
  • Megan McNeice, over 6 years ago

    I have not personally gone into a lot of research for this, but I would also like to note something that may or may not affect your site: mobile ads.

    I work for a mobile ad company and I know we keep them at the bottom of the page and locked there to avoid navigation issues with the typical top-nav that most sites have.

    While a personal webpage may not have mobile advertising nor need to worry about it, a larger company site that's being designed may have to consider this for their mobile experience as they are making revenue off of these ads and the clicks.

    1 point
  • Mike HeitzkeMike Heitzke, over 6 years ago (edited over 6 years ago )

    I've been very curious about this as well. I don't have any firsthand knowledge as my research into it came up pretty dry but one thing that might be of note is that Curbed and Recode both (temporarily) used a bottom tab bar for mobile sizes but are back to top nav.

    Granted, they're in the same platform family so it makes sense for them to move the same direction, but I'd be really interested to see how their bottom nav tested and reasoning behind moving away from it.

    i've asked out about it on twitter, but never heard anything. Anyone know people at Vox? I'd love to know.

    1 point
  • Todd SielingTodd Sieling, over 6 years ago

    We haven't used a bottom tab bar in our mobile work yet, mostly for the same reason as Denis which is the variable appearance of the browser chrome, chiefly in Safari. I don't think I'm against it outright, it just seems to carry usability and experience risk that I haven't found a project to work that out with.

    I think we're seeing this approach happen more because it's relatively well understood by people using mobile devices having been a common pattern for iOS apps since the start, and getting past the problems that off-canvas menus create for engagement.

    Good to bring it out for discussion though, thanks for posting this.

    1 point
  • Gonzalez Raul, over 5 years ago

    I use a bottom bar on my mobile website at https:/raulgonzalez.com

    0 points
  • Gianluca Maldoror, over 5 years ago

    I'm experimenting a lot with bottom bar on mobile websites and it's awesome except for the notable "double tapping" issue. Here a great article that you need to see: Websites using alternatives to the ‘hamburger’

    It seems that Eventbrite uses a technique to avoid the double tapping but I've not checked it.

    0 points
  • Tim Resudek, over 6 years ago

    Do your desktop site visitors use navigation significantly more than the mobile users?

    If you're currently using a burger menu for mobile nav, try adding a label like "menu" to it and see if it lifts the number of clicks. It's a really simple change you can use to test if discoverability is the issue. My guess is that this will get you the lift you're looking for.

    Investing the effort to improve the convenience of an app that people use all day everyday (like Spotify) seems more reasonable. It is only a matter of convenience, of course. I highly doubt anyone opted not to navigate to their library when it was tucked away in a menu. Similarly, if you're users are compelled, AND the menu is discoverable, I'm sure they will navigate.

    0 points
    • Daniel GoldenDaniel Golden, over 6 years ago

      Hey, man. They deleted that last post, so I'll just respond here:

      Totally respect your view but can you go into more detail about how it influences the design work you do? If I think about an important part of my life – fatherhood – I can't think of any way that it guides my design decisions creating web experiences. It gets me through the day sometimes... but, if anything, it only serves to make my work feel less meaningful by comparison. I would imagine religious faith would do the same thing and that you'd want to compartmentalize the two. Tell me more...

      I'm not a father, so I can't speak to the effect that it would have on my life, but I think one of the differences between the impact fatherhood has and Christianity has may be that Christianity gives my work meaning. Without it, my work would feel meaningless to me. We're taught that everything we do should (whether eating, working, etc.), we should do it to bring God glory (which we're taught, is the purpose for us being alive).

      Christianity effects my design work because we're taught that we should work as if we're working for God himself, not for a man/woman. We're taught that we should love our fellow man/woman as ourselves and that (among many other things) has huge implications on how I treat my boss, my clients, my colleagues, and the effort and care I put into my work.

      0 points
  • Steve OrchoskySteve Orchosky, over 6 years ago

    As long as you can keep the navigation short and sweet, I love the bottom tab bar idea, but I can only think of native apps that use it like you mentioned. Playstation's "curtain" menu is pretty cool for more complex navigations, but it seems like it would work better for product-oriented sites. Just another idea!

    0 points