I've never seen a case of someone using a tab bar in a mobile web app, but I think the idea has some merit.
I can understand that the actions may be hard to click because they'd be right above the native browser's controls, also since bottom tab bars are rarely used, the user may be instead looking for an upper nav bar and completely miss it.
Does a bottom tab bar seem completely ridiculous, or might there be some use to it?
You have pointed out two clear negatives to this design:
Another issue I see:
A good UX rule is don't do something nobody else does. You should stick to established paradigms unless there is a very clear, compelling benefit to doing something in a new way.
In this case, using the tab bar on a web page causes several problems, and there doesn't seem to be any benefit compared to navigation at the top of the page. Don't do it.
I believe Tab Bars are a much more user-friendly approach than the "hamburger" button.
"Hamburger" buttons hide the menu options, and many times users wouldn't even know some of these options exist if they don't open the menu. Sure, "About Us" and "Contact" are expected, but what if you have other offerings? Different sections?
People are not unfamiliar to this, on the contrary — They are VERY familiar to it from app usage.
Of course this will vary on your content/users but do consider it.
Quartz (qz.com) have implemented this brilliantly in my opinion, with none of the mentioned issues.
We've been working on a responsive web app with a sidebar on desktop / tablet and a tab bar on mobile. From what I've seen, most research done on hamburger nav vs tab bar nav is in regards native apps. Engagement and time spent on the app all increases considerably with tab bars, but again, finding this data for web-apps is a little harder to come by. Because of this, we're going to run production level A/B testing on a hamburger nav vs tab bar nav to get some real world data with our actual users (as opposed to something like usertesting.com).
In regards to the top answer:
"It will be unfamiliar to users. They might confuse the page navigation with app functionality". - Agreed, sort of. I think it's safe to say in 2016 users are familiar with the tab bar as a navigation pattern, BUT there might be some discomfort with the tab bar nav in the context of a web browser. This is the biggest issue of using a tab bar on a web app IMO. Looking for some qualitative data to provide insight on this one.
"It will be right next to the app controls, possibly making it difficult to tap on the site navigation and the app navigation." - This isn't exactly the same, but I think it's similar enough to reference for this concern. Bottom tab bar on android didn't result in high numbers of users accidentally pressing the wrong controls. From Luke W's twitter feed: https://twitter.com/lukew/status/705156719446351872
Another issue I see:
"Problems if content doesn't fit on the screen. When navigation is at the top, it is no problem if content is longer than the screen--the user can simply scroll down to see additional content. If navigation is at the bottom, this won't work. Either the navigation disappears off the screen, or you have to have a scrolling frame for the content. Neither one would be ideal." Not sure this concern still applies given the advancement of CSS and HTML5 tricks over the past 2 years. Tab bars can be easily pinned to the viewport so it wouldn't scroll off screen, and the scrolling frame comment would be applicable to a top nav as well. Ultimately I think it depends on your content and goal that your design is helping to achieve. There are ways to show / hide the tab bar if maximizing screen real estate is a priority. Ex from a TC article:
"There are also clever ways to make the tab bar disappear when it’s not in use. If the home screen is a scrolling feed, the tab bar can be hidden when people flick it up to unfurl new content, and revealed if they start pulling down trying to get back to the top. In an interface like a map where maximizing screen real estate is key, the tab bar can be hidden when a user taps or drags. It’s not perfect for all situations, but many information architectures are better conveyed this way."
https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
I'm not totally sold on one over the other here, just trying to understand which navigation pattern is best for our users and what will help them achieve their goals. I'll follow up on this answer once we've got some results from our testing.
