iPhone app - bottom menu vs hamburger menu

Question

I'm working on a news and prices app, and I'm currently working on the menu. The team has 2 different approaches: a traditional bottom menu or a hamburger menu (like on Facebook app). Which approach is the best?

Here are a few wireframes:

=========================== Menu at the bottom ===========================

=========================== Hamburger menu ===========================

Answer 1

Hamburger button

• scales better with >4 navigational items
• can contain icons and longer text
• is robust if text navigation items gets long (translations!)
• good for navigation

Bottom menu

• very obvious, sticky navigation unlikely to be missed by users
• great if you're sure it's never gonna be >4 items and the description text is always short
• good if items in bottom menu are perceived rather as function than navigation
• strange if the keyboard comes up and due to the menu bar almost no space is left for reading/interacting with the content

Which approach is 'the best'?

Of course this depends on the type of application and the menu items.

From the limited info in the wireframes I can't really tell what the app does. Is it some sort of stock market app to watch prices of a specific domain? Then "Price type 1" and "Price type 2" seem like filters -- or are they settings? I guess the two might be changed by the user fairly often, so having them in a bottom bar would be convenient. And publications, if not accessed often, could easily live in the "more" section along with settings. But watch out for that marketing person that wants to sell more publications and hence asks you to pull it to the front row :-)

Answer 2

Each option has own drawback.

• Hamburger menus are, in essence, hidden menus. That means you have to click somewhere to see the menu.
• Bottom menus are limited in size, so that's why you cannot add many buttons there.

So, I completely agree with ekapros: If you have few buttons which will be used frequently (functional buttons) by user, then go for bottom menu.

Answer 3

The first question you need to ask is, how important is the visibility of the menu items?

• If the user needs the menu to be always visible for quick access, then, a bottom menu makes sense. Show the 4 most used items and then hide the remaining under 'more' or something as the 5th item.
• If your items have status indicators - like number of unread posts, or something, then you gain advantage by using a bottom navigation. Hamburger menu can also get you the result, but the user needs to open the menu to see it.

However, if you concern is more number of items and/or customizability of the menu by the user. A hamburger menu is quite handy. I feel that having to scroll in a hamburger menu feel more natural than scrolling sideways on a bottom fixed menu.

Answer 4

There are already some really great answers here, but I wanted to point out one important differentiation between the two- state preservation.

When navigating away from a "section" in a bottom menu, it usually preserves the hierarchal navigation of that section when you leave. This means that if you had a navigation stack, represented by a Navigation Bar, in the "News" section and you went to "Publications" and then back to "News", you would see whatever state you left "News" in. However, when tapping on a section in a hamburger menu the state is usually cleared and you always see the "first" screen of that section.

With that said, one major concern with using a bottom menu would be that if you have any cross-sectional linking (i.e. links in News that go to the Publications section) things could get tricky with how and when you preserve the state of sections.

Answer 5

The answer is: it depends.

At the bottom menu you are restricted by the size of the target. As a result, you have a "more" menu item. Are the options in this item going to have any conceptual similarity? If yes, then it's OK. If not, and you plan to put everything that doesn't fit on the menu bar in a "more" option, that will result in bad user experience. The user would have to tap "more" even to see what options might be available.

Using the side menu you provide a flatter hierarchy in the sense that all options are in one menu. If there were few options or they necessarrily need to be grouped, I'd go for the bottom menu; if options are plenty and "independent", I'd go for the side menu.

Hope that helps :)

Answer 6

I would recommend the Hamburger (are you sure its technically right name?- I have'nt heard by that name). It vastly gives you the description for each of your icons. It really has a better experience vs. bottom menu. Its sleek like a drawer. It carries more content for nav. and more number of items that seamlessly works as a mental model.

Now when you call it to be best - I assume you are looking at usability as well as experiential design.

The bottom menu may be mundane and ordinary. The sliding function makes it more horizontal in nature to pull the deck and then gradually move down vertically which means a lot easier to the user (mental model wise). Also the user's level of expertise is to be understood (hitherto mobile experiences are more of a free-hand trial and error) - but in case of shop floors the user will have a greater problem to slide this out everytime.

One drawback is that it hides (off) your main content as you digress into the navigation mode. But I do not see your context really a worry since you do not require a navigation pinned down as you look at the content - it can be independently understood.

Please also include the User Type/Persona that is aimed at in future since it helps to address the micro-nature of work.

Have a good time with your creative work!

Answer 7

I think it depends on the application, however some things to think about:

Burger - This takes up less screen real estate (Realistically, with a lot of apps we don't need constant access to the menu) meaning we can use more space to show actual content.

Bottom menu - With a small screen you're going to be limited to a small amount of items, in your first image you show 5, probably the maximum you'll be able to fit there without some kind of scroller.

Also this may not apply to your app, however with the release of iOS7, tapping at the bottom of the screen on iOS Safari brings up Safari's lower menu meaning a lot of apps with bottom menus or even buttons at the bottom of the page are making users tap twice to select what they want, in effect having their UI compromised.

Answer 8

I don't see problem in both approaches, but you should identify user's behavior or expectations from an IOS application. if you are targeting ios users only, then i would strongly recommend to go for usability testing with some users, as ios users may not be familiar with this pattern. i have windows phone and somehow i don't like Facebook new layout with slide menu.

but if you want to have application that looks same on all devices (Windows, IOS, Android) then you can go ahead with the hamburger menu or slide menu. since this design pattern is accepted by the all OS providers, it will be easy to launch app on all stores with less efforts i think.

Answer 9

I think hamberger menu is better for your app at this time, you don't have to move user to other screen to make a choice. By the way, with iOS 7 and flat design, you can extend hamburger and sidemenu to bigger view you can read more here http://uxmag.com/articles/adapting-ui-to-ios-7-the-side-menu

Answer 10

This may be a very old Post but I went trough the same question a few days ago, and maybe this helps others.

I found this Article and it helped me a bit, but it is from the year 2013 - so things changed.

I will break it down for you:

• one handed—49%
• cradled—36%
• two handed—15%

A quote: "The way in which users hold their phone is not a static state. Users change the way they’re holding their phone very often—sometimes every few seconds." - What happens me: I hold my phone in my right hand and my pinky finger supports the phone on the bottom (Lumia 950XL, with a case pretty heavy), after some time my pinky feels numb, so I change to the 2nd position.

---

One-handed use—with the

• right thumb on the screen—67%
• left thumb on the screen—33%

---

Cradling—with a

• thumb on the screen—72%
• finger on the screen—28%

I often see "older" people holding their phone like this. So a very important thing to keep in mind is: How old is your audience? Teenagers? Adults? Old People? I bet that most young people hold their phone with just one hand (if those small hands can reach around those Phablets).

---

Two-handed use—when holding a phone

• vertically, in portrait mode—90%
• horizontally, in landscape mode—10%

I hardly use my phone in landscape mode - only if I watch a video and sometimes not even then.

So the answer to the question: "Hamburger Menu, or Tab Bar?" - seems to be Tab Bar, right?

• Well I asked some of my friends/colleagues (from 18-23 years, no knowledge of UX, just Users) and 80% of them said they would prefer a Hamburger Menu, over a bottom Tab Bar. Most of them said, that they could see more of the content and the Tab Bar would not be in the way.

• A lot of online posts say that a Hamburger Menu is "old" and Tab Bars should be used, because most of the people use the phone with just one hand, so a Button in the Top Left Corner would be "too far away".

  ---

The biggest questions should be:

• What is your app doing? (An app where the user can scroll fro hours (9gag p.E.) has/should have the menu on top, so the content is in focus and the other functions are hardly used).

• Who is your audience? (I think, that older people use their phone more with two hands than younglings.)

• Do you have a "Main Site" on your app, or is it necessary for the user to switch between sites?
• What audience do you target with your app?

Hope I could help others, who look for answers.