Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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 =========================== Menu at the bottom Menu at the bottom - 'More' section

=========================== Hamburger menu =========================== Hamburger menu 1 Hamburger menu 2

share|improve this question
2  
What do you mean by 'best'? –  JonW Jun 26 '13 at 10:03
    
"Which one offers the best user experience" –  Leo Jun 26 '13 at 10:07
4  
That could mean a lot of things, which is why I queried it. Which gets used more? Which do users prefer to use? Which gets the best feedback in testing? Which option provides the most optimal for accessibility? 'Best User Experience' is quite a wide field, so we'd need to know what criteria you're going to be measuring this against. –  JonW Jun 26 '13 at 10:12
1  
hamburger menu? =) –  AndroidHustle Jun 26 '13 at 10:24
    
:) ux.stackexchange.com/questions/32877/… –  Leo Jun 26 '13 at 10:27
show 3 more comments

9 Answers

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 :)

share|improve this answer
    
Thanks for your answer :) 3 items are available in the 'more' section. I'll add a screenshot in 1 minute. –  Leo Jun 26 '13 at 10:00
    
Hi, given that you are building a news and prices app, I cannot see what publications, info, and settings have in common. Therefore, I would hesitate to include them under a "more" option. Moreover, publications and info navigate to content, while settings would be a call for potential action. I would keep those as separate as possible. –  ekapros Jun 26 '13 at 14:17
add comment

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.

share|improve this answer
add comment

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 :-)

share|improve this answer
add comment

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!

share|improve this answer
    
To answer your doubt: ux.stackexchange.com/questions/32877/… –  rk. Jul 1 '13 at 18:57
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
    
Hi @Pham. Welcome to the UX Stack Exchange! Can you give some more information (such as a study or specific personal experience) about why you think a hamburger menu is the best option. –  3nafish Oct 25 '13 at 3:49
    
Sorry, I updated the link –  PhamThang Oct 28 '13 at 7:25
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.