Bottom Navigation Issue on iOS, Android and UX

Bottom menu structure after Spotify’s Android update. (görsel kaynak: 9to5google.com)

Bottom menu bar is a long-standing topic that has been spoiling my mind and I wanted to talk a bit about it. By the way, bottom menu can be called as Tab Bar, Bottom Bar, Navigation Bar, Bottom Navigation etc. — Picasso does not even have so many names.

Facebook iOS Application

Bottom Navigation on iOS Devices

Apple had valid reasons to reveal the bottom menu in the iOS operating system:

1. Screen sizes becomes so big that your thumb can not move easily across the entire screen,
2. Research shows that 49% of the users do all the operations on the phone with their thumbs,
3. Users can get lost in the application and need a navigation menu in order to understand where to go.
4. Displaying the basic functions of application to users without hiding in a side menu.

Green indicates the area a user can reach easily; yellow represents areas require stretching; and red area requires users to shift the way in which they’re holding a phone. Image Source: uxmatters

Personally, I find quite reasonable placing a bottom menu to iOS operating system. Unlike Android phones, iPhone does not have a back key which makes difficult to return to the previous menu on large phones (like iPhone 6 Plus).

A image from Bottom Navigation in the Material Design Guideline.

Bottom Navigation on Android Devices

Actually, Google was thinking like me a year ago. Then, Bottom Navigation is added to Material Design Guideline. Firstly, it was used in products such as Google+ and Google Photos. Additionally, guidelines for using bottom menu were announced as the following:

1. Use bottom menu if you want to perform a basic function between three to five top-level destinations, in this case use it as the top tab if you are guiding two basic tasks.
2. Avoid scrollable content in the bottom navigation bar.
3. Try to use common icons that users know well and help to clearly indicate the tab that user in.
4. Do not use different colors.

Another suggestion for a bottom menu by Google.

Dear Google, it is nice but I insist that the bottom navigation does not work well on Android devices because of the system buttons. When I ask about 15 Instagram users on Android devices, they declared that they often click on system buttons accidentally when operating with bottom menu.

Some Android devices like Samsung place system button on the phone as a key. If all Android devices do the same, bottom navigation becomes more useful. It is a failure in terms of user experience when user accidentally exits the application. As a product team, do we want the user to leave the application?

Instagram’s bottom menu structure. I showed the area of the system buttons with red circles.

Spotify Android Update: Hamburgers Menu is dead, Welcome Bottom Menu!

Spotify’s new update — which I found very successful- removes the hamburger menu and brings up the bottom menu. I did a lot of research on this issue. It’s been a long time I thought about it. I have read many articles, but I can still say that there is no clear view in this regard. Most of the articles mention that both menus can be used. Spotify’s radical decision will upset some Android users at first. Because majority of Android users do not have experience in bottom menu.

Presenting the basic functions to the user without needing an additional touch is an a plus; but placing Profile and Settings under the Library tab is quite wrong. There is a great irony here. You are hiding Profile and Settings in Library while trying to give user an easier experience. Of course Spotify can say that “The biggest feature of our application is listening to songs and creating playlists so user don’t frequently change the user profile or settings. If they want to go, they can find it with a little struggle.” Is that correct? No. So what could it be? At the top the page, only the name of the current page is included. The right and left sides are empty. A user icon can be placed on the right or left side, allowing the user to go to the profile or settings at any time. (For example, YouTube prefers the “More” icon on the top right menu.)

Additionally, some successful apps like Airbnb have the same interface on both Android and iOS versions. Airbnb has long been using the bottom menu on Android. In my opinion, the bottom menu structure of Airbnb is better positioned from the sub-menu structure of Instagram. In Airbnb, the bottom menu includes label of the tab and has an easy and accessible height.

(görsel kaynak: pttrns.com)

Facebook Uses Upper Top Menu Instead of Bottom Menu

Facebook used bottom navigation bar on Android for a while, but they did not get positive results in the tests and turn to tabbed structure. Just like Messenger and YouTube. YouTube also removed the hamburger menu a long time ago and use top menu which gives user an opportunity to swipe between the tabs. The structures of Facebook and Messenger are the same. The reason is very the screens must be scrollable to easily switch between the tabs in an application that is used with the thumb. This means the position of the device does not require change in your hand.

Conclusion

It seems that apps will gradually move to using the bottom menu for Android. It’s definitely a must for iOS, but I’m still not sure about Android design. Yes, despite of the Google’s Material Design Guidelines, I’m not sure. If one day the system buttons are positioned separately from the screen, we can say that the bottom navigation can be also useful for Android devices. And finally, I do not find the hamburger menu envy correct because of using bottom menu. If so, you put the Profiles and Settings under My Library just like Spotify. I am sure the application will update again :)

Wait and see.

Let’s say goodbye with Hey Douglas:

Sources:
UXplanet, 9to5google, material.google.com, iOS design guideline, medium