UI Pattern Evolution — FAB-in-Bottom-Nav
I’ve been writing about Android UI Patterns now for nearly 10 years. In the Android ecosystem existing patterns evolve and new patterns emerge from the work designers and developers do on the platform. Established pattern evolution is one of the most fascinating things to follow for couple of reasons:
- It points out that design patterns are not design rules. Patterns are solutions to problems. Solutions are not absolute.
- You are free to think what you can do with an established pattern to better solve your specific issue. You don’t need to stop where the Material Design Guidelines end.
However, to break the rules you should know the rules. Break them when you have a reason to. A designer proposing an alternative to an established pattern should be able to answer the question “why?”. So before you decide to throw out the conventional FAB, take a look at what the FAB actually is and where it’s meant to be used.
FAB in Bottom Navigation
FAB is the main action on the current screen. The default positioning to the bottom right enforces this thinking with users. But what if you have an action that you want to be reachable from anywhere from your top level screens?
One option would be to repeat the button on each screen. In these cases you should make sure to keep the FAB constantly visible to indicate that it has not changed.
But there’s another option. Place the FAB on the bottom navigation bar.
The bottom navigation pattern is also very well defined in the Material Design guidelines. It’s worth taking a look before diving in.
The bottom navigation is used to navigate between your top-level content. Your main action might logically feel to be on the same level than the other top-level content. However, making one of the navigation items an action does not feel right. All content accessible from the bottom navigation should be on the same level in your app hierarchy.
FAB is already a well-established pattern and users can be expected to understand it. FAB triggers an action. Combining FAB visuals with bottom navigation placement should give you best of both worlds. It’s clear that you’re triggering an action and not a navigation action when hitting the FAB.
If you want to try how the FAB in the nav bar feels like give a try to Spendee app.
Anti-patterns
The patterns isn’t new. Many might recognise it from the old Instagram app implementation. Instagram has, however, moved on and now embed the action to navigation without clearly differentiating between action and navigation.
I’d encourage everyone to avoid mixing navigations and actions in the same navigation widget with unified style. Users are likely expecting same interaction from same looking buttons. Don’t surprise your users.
Revolut recently updated their app by removing the FAB from their toolbar. The change seems strange to me. The payments action takes you out from the main navigation into a separate payment type selection screen. Making the action into a navigation item doesn’t feel like the right change to make. It would be interesting to hear the reasoning behind the change? Maybe users weren’t finding the transfer action without label? If anyone knows and can talk about it please ping me! :-)
TL;DR
I like the FAB on bottom navigation when it makes clear sense from information hierarchy point of view. I’m sure there’s a lot of opinions out there. I’d love to hear what you think and if you have arguments for or against FAB-in-bottom-nav.
