You are not considered as a ‘complete’ UX designer till you publish your views on the “≡” alias “hamburger menu,” alias Side Drawer Menu!

The recent update of the YouTube Android app by Google prompted me to jump on the bandwagon and express my thoughts on this interesting UI pattern.

“≡” is called a “hamburger menu” for its resemblance to a hamburger, the top and bottom lines representing the bun and its middle line representing the hamburger filling.

- Wikipedia

Is Google Moving to Tabs?

Google+ and YouTube apps (Android) spotting a dropdown menu and tabs respectively.

Google+ and YouTube apps were following the Hamburger Menu pattern initially. Google+ moved over to a dropdown based menu in May, 2014. Now, YouTube app update of July 2015 dropped the Hamburger Menu and adopted a tab based style.

There and Back Again!

Let us see who else did the earlier switch to Hamburger Menu and came back with alternative navigation.

LinkedIn

LinkedIn Android and iPhone app with tabs

This is the latest app that jumped on the “tabs” bandwagon. As you will see further down in this article, LinkedIn was following a rather “strange” hamburger menu pattern till now.

Usually the number of tabs in Android and iOS versions are the same — a maximum of five as dictated by iOS tab bar guidelines. In LinkedIn app, you can see six tabs in the Android version. They removed the ‘LinkedIn Apps’ tab from the iOS version and kept it on the home screen only. It makes sense.

Facebook

Facebook Android and iPhone apps with tabs.

Facebook still uses the Hamburger Menu icon renamed as a right corner “More…” icon. True to the Android vs. iOS guidelines, the tab bar is placed either on the top (Android) or bottom with labels (iOS).

Twitter

Twitter Android and iPhone apps with tabs.

The ‘Notifications,’ ‘Messages…’ icons on the Android action bar (app bar) is shown as the tab bar in iOS. Android groups the action icons from the Twitter app icon by placing it right-aligned. The ‘Home,’ ‘Discover…’ tabs on the top of Android app is shown using pagination dots in iOS.

Flipboard

Flipboard Android and iPhone apps with tabs.

‘Nested tabs’ in the Android version. Did you spot the page title ‘Following’ in iOS? The tab icon serves the same purpose in the Android app.

Airbnb

Airbnb Android and iPhone apps with tabs.

The action icons on Android action bar are grouped into two, with a left alignment. The iOS tab bar doesn’t support grouping.

9GAG

9GAG Android and iPhone apps with tabs.

This is interesting! Have you ever seen a tab bar in Android app, complete with labels, just like the iOS standard? Also, the Hamburger Menu icon is passed off as ‘More’ as in Facebook.

‘Back’ button on Home page!

Old LinkedIn Android app with a ‘Back’ button on the home page (left). It serves as a Hamburger Menu icon revealing the drawer menu (right).

Because of reasons unknown to humans, the old LinkedIn Android app simply replaced the Hamburger menu icon with a ‘Back’ icon.

It is probably a clever trick to fool the user. I feel that this implementation improves the chance of discovering the items in the drawer menu while a user tries desperately to ‘go back’ to a home screen.

Right is Right!

Majority of apps have the Hamburger icon placed on the left corner. This creates an inconvenience if you are trying to access the menu while inside a drilled down page, deep in the hierarchy. Because, you will often see a back icon on the left corner instead of the Hamburger icon.

Is there a solution?

Inform News

Inform News iPad app uses the ‘Home’ icon on the left corner. Right next to it is a ‘Back’ icon.

Inform News iPad app displays the ‘home’ icon always on the left corner. If you are inside a section, the ‘back’ button is placed right next to the ‘home.’ In iPhone, this ‘home’ icon is placed on the top right corner.

Jamie Oliver’s Recipes

Jamie Oliver’s Recipes iOS app with a Hamburger Menu icon on the right corner.

Moving the Hamburger Menu icon to the right corner helps us to display the ‘back’ and ‘menu’ icons together in a single screen. Jamie Oliver’s Recipes iOS app and Epicurious iPhone app are examples.

Epicurious

Epicurious iPhone app with the Hamburger Menu icon on the right corner.

Interestingly, both the above examples are from ‘cooking’ category!

To use, or not to use, that is the question!

A Hamburger Menu saves space on the screen where the content gets more room. It is argued that discoverability issues are there if a hamburger icon is used instead of tabs.

On the other hand, if you have more items in your tab bar, you are forced to use a hambuger-look-a-like ‘More…’ icon.

The best path forward is to use a combination of tabs and a hamburger menu (‘More…’ icon) placed on the right corner.

If we use tabs, the users will instantly know where they are and where they can go. They will discover more functions under the ‘More…’ icon.

What do you think about my observation on the Hamburger Menu? What will you do the next time while designing an app? Share your thoughts below.