As far as in-app navigation is concerned, the norm till now has always been bottom-bar navigation for iOS and the good ol’ hamburger menu (noticed the three parallel lines that reside on the top corner of your app screen, from where you can pull down other screens?) for Android. Well, this difference is going to get considerably blurred in future, thanks to the changes in the Material Design guidelines that Google published in mid-March. Android app developers have been advised to move to the bottom navigation bar in their applications (in place of the hamburger menu) whenever possible, for greater convenience of users. This, in turn, is likely to make the overall navigation scheme of Android apps a lot more like that on iOS apps. Over here, we focus on this material design update by Google:
- The need for bottom bar navigation – Android users have lived with the hamburger menu till now, and it’s not particularly confusing or anything. However, it is a static navigational tool. The menu actually has to be tapped, to see what other important screens an application has. A bottom navigation bar would provide dynamic, top-level navigation options – just like it does in iPhone apps. People will be able to see at a glance the main screens of apps.
- Only for mobile devices – Most Android app development experts would agree with Google’s contention that a bottom navigation bar would not be necessary for devices with larger screens (think: tablets, laptops, PCs). On such devices, navigation icons that follow the conventional ‘rail’ treatment (i.e., side navigation scheme) would be more user-friendly. Smartphones have, in comparison, much smaller screen real estate – and hence, bottom bar navigation would be most suitable on them.
- Not an entirely new concept – The concept of bottom navigation is new within the Android ecosystem, but it’s far from being a breakthrough idea. As already stated above, most iOS applications use this scheme to facilitate smooth in-app navigation. Google has also tried its hands with bottom bar navigation, first on Google Plus, and now on Google Photos. It now remains to be seen how well Android developers manage to implement this navigation scheme in their apps.
- Difference from iOS navigation – The jury is still out on whether the idea of using bottom navigation bar on Android applications is a rip-off from iOS applications – but there is one significant difference between how the navigation will work on the two platforms. On iPhone apps, the navigation bar remains static/ever-present (‘always-ON’) at the bottom of the app screen. Those who make Android apps can, however, make the bar disappear when the user is scrolling down (upward swipe will make the navigation bar reappear). This frees up even more screen area on handsets, and is definitely an interesting feature.
- Focused action on tap – The bottom navigation bar on Android apps will not be a place where developers can cram in ads, messages to rate their applications, and the like. According to Google, no type of additional menus and/or popups are supposed to appear, when a user taps on any of the icons on the bar. Either the same page of the app should be refreshed, or the user has to be taken to the page/destination as indicated on the icon.
- How many icons on the bar? – The revamped Material Design guidelines from Google instructs mobile app developers and UI/UX designers to use the bottom navigation bar ONLY when there are three to five (max.) top-level screens/destinations/pages in an app. The destinations have to be of equal importance, i.e., a user might need to access them from anywhere within the app. In case an application has six or more of such destinations (and many apps indeed have more), app makers should include an additional navigation drawer or stick with the old hamburger menu style.
- Highlighting – When the navigation bar at the bottom of the screen of a new Android app has 4 or 5 icons, the icon tapped upon will get highlighted (with the other icons still viewable, but pushed slightly out of focus). However, for apps with only 3 icons in their bottom navigation bars, all the icons – along with their text labels – will remain highlighted at all times.
- Using text labels with icons – Text labels are important, for helping the users understand what each of the icons present on the bottom navigation bar would do, when tapped upon. However, Google has cautioned Android app developers against using long text labels, since they would not get automatically wrapped or truncated (and a portion would remain unviewable). The colour and tint of the current icon and text label should be the same as the primary colour of the concerned app. In cases where developers have gone with a coloured navigation bar, the highlighted icon and text should be in white or black. Developers must not put the different icons in different colours.
- Using tabs for apps with lesser number of top-level destinations – While creating Android applications with less than three primary screens/destinations, developers need not go for the bottom navigation bar. Instead, having tabs for those destinations would be a smarter and much more user-friendly option. App-makers can also, of course, have tabs as well as navigation bar in their apps. In such cases, they have to make sure that users do not face any problems while interacting with the tap targets.
- Size specifications of the navigation bar – Google has also spelt out size specs of the bottom navigation bar that will soon be seen in most new Android apps as well. With padding, the minimum and maximum permissible width are 120dp and 168dp. Ideally, app designers should divide the total width of the bar by the number of icons placed on it. That would give a clear idea as to how much space needs to be allotted to each icon/text label.
- Will be adopted gradually by developers – Using the bottom navigation bar is (at least not yet) not mandatory for Android app developers. Most of Google’s own applications still do not have this navigational scheme. Only after this year’s Google I/O event (May 18-20) happens, can we expect developers to start using the bottom bar in their apps more regularly.
While the multi-window feature in the upcoming Android N platform is probably the bigger update in Google’s Material Design, the arrival of bottom navigation bar on Android has also generated quite a bit of buzz amongst developers worldwide. iOS has played the catch-up game to Android regarding many features, but on this one – it seems that Android is the ‘inspired one’!
Latest posts by Hussain Fakhruddin (see all)
- Hiring React Native Developers: 6 Skills To Look For - April 30, 2019
- Is Your ‘Great’ App Failing? These Might Be The Reasons! - April 25, 2019
- The Rise & Rise Of The Popularity Of React Native - April 18, 2019