Hamburgers vs Tab bars

Tricky one.

Super important question that many designers ask often. Quite a lot of designers think that standard iOS Tab bar is kinda a limitation, sort of ugly thing that just limits their creativity. Well, I was one of you, guys. Not anymore :)

So the problem what kind of menu to use for the main navigation through your app is a bit more complex. Let’s try to dig dipper.

Essentially there are 4 majour types of menus:

© Facebook 2015

#1: Classic Tab bar

Standard iOS tab bar. Located on the bottom of the screen with icons and text that explains what the section’s name is.

Pros:

1. Super native and clear for not geeky users;
2. Works in most cases;
3. You can super quickly get to the section you like;
4. Works best when your app requires a lot of menu interactions.

Cons:

1. Covers the content;
2. Takes space on your screen;
3. Doesn't look good and accurate.

© Zoomlee 2015

#2: Hamburger

Three lines on the left (normally) at the Navigation bar. Normally your menu is hidden and when you tap on those ‘lines’, your screen goes right and your menu appears (mostly).

Pros:

1. Nice and elegant.
2. Some cool animation can be applied;
3. Works best for not reach (promotional) apps with not a lot of interactions with the menu.

Cons:

1. Not too clear for all users;
2. Quite difficult to get to with your finger;
3. You can’t say what’s hidden there at once.

© Urban Walks 2015

#3: Floating Hamburger

Same as previous but can appear all aver the screen and normally not tied to a navigation bar. Similar to Action button on the Google material design.

Pros:

1. Looks cool and minimalistic;
2. Works best for promotional apps with not much functionality;
3. You can adjust it depending on your finger length.

Cons:

1. Covers the content;
2. Not too clear what is this;
3. You can’t say what’s hidden there at once.

#4: Android style tab bar

Borrowed from Android UI. So you can either tap on the section or just swipe left or right.

Pros:

1. Looks cool and minimalistic;
2. Nice and easy interaction;
3. Some cool animation can be applied;

Cons:

1. Doesn’t work perfect when you’ve got lots of sections because, effectively, some of them would be hidden and the menu gets not too clear;
2. Quite often designers use all capitals which are hard to read;
3. Not clear for not geeky users that you can actually swipe.
4. When you need a navigation bar you end up having two bars on top which covers a lot of content.

So what’s the best of them? Well, to be honest, you just can’t say which. They’re all good for different cases.

A couple of years ago Facebook had a hamburger and then went back to the standard tab bar, effectively because people didn’t get it. But I guess specifically for the Facebook, people use their Menu quite heavily so they just need practicality and something on the tip of their fingers.

This Image has been taken from the © Google Design section.

Probably it’s worth mentioning Android L now :) Yes, they use hamburger as a main element, but you have to remember that they also have an extra navigation on the bottom where you can reach your menu or go back quite quickly. So in their cases Hamburger still works.

They also use this ‘+’ floating action button that’s not the best solution from the UX point if view (personal opinion).

Conclusions:

1. If you don’t know what to use — use a tab bar (works mostly in all cases);
2. Hamburger works only when you don’t want your user to interact with the menu heavily. Apps like Facebook, Twitter, Instagram use tab bars because users would just flip through their sections like crazy and tab bars are a lot more comfortable to use. Hamburger also works for geeks mainly;
3. Floating menu — I wouldn't recommend using it for reach content apps. May quite work with sort of promo apps, like Urban Walks. I guess it’s the biggest miss with Android L because they’re simply cover the content and you don’t need it all the time in front of you;
4. Android style tab bar works only for geeks;
5. Think of practicality first then about beauty;
6. If you can't come up with super clear icons for your tab bar — add the description. Instagram got rid of description in the tab bar after they gained quite a lot of people and made them get used to the app. And also they haven’t changed the sections dramatically since then.

Taking into account all the thoughts mentioned above, there’s quite a clear message saying:

If you don’t know what to use — use Tab bar. If you do — test it first.