On the Bottom Navigation Bar
Android bottom tabs, I mean Bottom Navigation, is here to stay. I have to admit that I wasn’t overly happy when this was added to the Material Guidelines. But hey, times change. In the end this addition makes sense and for me, as a business owner, this makes even financial sense. By utilising bottom navigation we can make Android apps take one steps closer towards iOS app design. It’s one step less we need to take into account when designing apps targeting multiple platforms. Note however, that I’m still not advocating 1-to-1 iOS-Android design. The platforms are different and need different designs!
Now, the reason I had anxiety over introducing Bottom Navigation to Android is the thing that keeps causing most of Android navigation problems: the back button.
On iOS back is always contextual as it is rendered in the UI. Not so on Android. The Android back button is outside your app’s UI. It’s a platform control without any visual hints of what it might or might not do. This is why on Android it is easy to make a UI design mistakes leading into a conflicting navigation state.
Also, on Android tabs are swipeable, on iOS they’re not. Fortunately, the Material Design guidelines propose bottom navigation not to behave like Android tabs but instead like iOS tabs. i.e. you tap, don’t swipe between the navigation views. This solves yet another platform navigation issue. Swiping tabs are still reserved for the Android top tabs. Like they’ve been so far.
All of this to work and to be understandable to our users we need to be consistent and careful. When implementing bottom navigation make sure to pay attention to details. Pay attention to the animation you play when switching views and make sure your back button management is spot on.
To not make your user confused with the combination of bottom navigation and Android back button there are few simple guidelines you should follow:
- Whenever user navigates deeper into the app hierarchy make sure that the bottom navigation bar is not visible
- Back button does not take user back to the previous bottom navigation view when moving in the top app hierarchy (with the possible exception of taking the user back to the first entry point before exiting the app)
- Bottom navigation is not swipeable. Users will have to tap the tab icons to navigate between the views.
- Read the Material Design Guidelines and divert from them only if you have a good reason to do so.
With Google we’ve long been in the situation of “do what we say, not what we do”. With the bottom navigation we’re here again.. I wish that one day we could use Google’s apps as examples of correct implementation of the patterns.
Let’s look at the recently updated YouTube app:
What happens when you press the back button now?
What about now? Where does the back button take you?
If you have the app installed you can give it a try but maybe when you’re reading this Google has already patched this behaviour so let me record the what actually happens at the time of writing this:
In the situation A the app will go back to the Subscriptions view with the search still being open. In the situation B the app will stay on the subscriptions view but close the search.
Well.. that behaviour is clearly wrong. Back button becomes unpredictable and confusing. A simple fix would be to make sure that when I perform a search the bottom navigation bar disappears. The conflict between Android back button and the bottom navigation only arises if the user is able to navigate in two directions at once.
There are few other apps, mostly 3rd party apps, that have a wonky bottom bar behaviour but I think the YouTube example is is where the problems culminate. Back button navigates between bottom navigation views and the bottom navigation bar stays visible even when user moves deeper into the app hierarchy (search). With the few simple fixes, mentioned above, the YouTube app would be just fine. Please don’t make the same mistakes in your app.
