Problems Using Tabs Instead of Navigation Drawers in Android

A few days ago, I wrote about how the Navigation Drawer (side-navigation or hamburger menu) was removed from the Facebook app and was seemingly going out of vogue. In the case of Facebook, they used a Tab Bar in an implementation that was almost identical to how iOS has been using it (in the clock app for example) since the very first iPhone. This implementation is the default behavior of the TabBarController in the iOS SDK and is ridiculously easy to set up.

For the Android app, Facebook used the Tabs UI element in the Android SDK in a way that mimicked the TabBarController. This is not the way Google has been using it in their Google Play app for example, but it isn’t much effort to get it to work. Their result is the following screen shot.

However, there is one important deviation from the implementation in iOS. That is the icons do not have any descriptive text associated with them, so you have to understand what each button does from the icon alone.

Compare this to the iOS app (below). In the iOS app, each icon has a descriptive text label which makes it easier to understand the function of each button.

Although I cannot claim to have a good understanding of why this is the case, I have observed the following which is likely relevant to some degree;

1. The iOS SDK makes it very easy to add miniature text below the icon to aid users who are unfamiliar with the icons. You simply write the text in a field in the graphical UI design software. It is important to note that this was available since the original iPhone with its 3.5-inch non-retina display, which suggests that Apple viewed the text as a necessity for users unfamiliar with the icons.
2. The Android SDK makes it similarly easy to add text. However, instead of placing miniature text below the icon, the Android SDK simply adds regular sized text to the right of the icon. This makes the button much wider, and in the case of the Facebook app, you would no longer be able to fit the five buttons.
3. This is of course quite easy to fix. For example, you could simply add the miniature text to the icon graphic file. It is unclear why Facebook decided not to do this since Facebook generally adds text whenever possible to their icons to clarify their functions. It is unfortunate though that this issue discourages developers from adding text.

Summary

The Android SDK has provided Tabs which allow applications to mimic the behavior of iOS TabBarControllers. However, they have omitted an important feature that would have made it easier for users to understand and explore new features.

In my own development, I doubt that I would ever use my own custom icons without explanatory text. On the other hand, I would also never let a tab bar overflow so that the user has to scroll to see all the tabs. I’m also very hesitant to use a Navigation Drawer because this creates an “out of sight, out of mind” situation and is very bad for discoverability.