#FeatureCrushFriday: Android Navigation

It’s important to use platform specific conventions users are comfortable with on cross platform apps. However, having a consistent experience across platforms can be great for user experience. Normally, one clear difference in cross platform apps is navigation. While the bottom navigation bar has been a part of material design since 2016, most Android apps are still using a hamburger icon and navigation drawer for their main navigation even if their iOS counterparts use a bottom navigation bar. This is especially interesting to me since the hamburger icon and navigation drawer are a controversial UX topic, and there’s been a lot of research done on why hidden navigation like navigation drawers don’t work:

• They are less convenient. The top of the screen is often harder to reach on a mobile device.
• They are less efficient. Waiting for the navigation drawer to open or close takes time and adds extra taps. Neilsen Norman Group found that “task time is longer and perceived task difficulty increases” with navigation drawers.
• They are less accessible. Unlike the bottom navigation bar, the navigation drawer is normally replaced by a back arrow once the user taps away from the main screen. Because users cannot access the menu from most app screens, they have to do more work to move between sections of the app.
• They have lower discoverability. The default state of a navigation drawer is closed, i.e. hidden. This hides the menu items from both existing and new users, and will lead to lower engagement. As Luke W. says, “Obvious always wins.”
• They are less recognizable. Despite it being an Android standard, not all users understand that the hamburger icon is a menu, and may not know that there are other menu items and screens except for the one they started from and are currently looking at.

Regardless of bottom navigation bars being seen as something belonging only to iOS apps, Google+, Google Photos, Google Maps, and Youtube have recently implemented bottom navigation bars in their designs. For the third edition of #FeatureCrushFriday I’m exploring Android navigation drawer alternatives including bottom navigation bars, fixed tab bars, FABs, and action icons.

Bottom navigation bar

iOS parity

Unlike any other Android app, Instagram has had a bottom navigation bar on Android since it’s Android launch in 2012. Using the app on either platform is virtually identical despite subtle platform differences like title alignment and the style of modal views/dialogs. The app is minimal, simple, and easy to use no matter which platform you’re on.

Interestingly, Facebook switched to a bottom navigation bar earlier this year after A/B testing different types of navigation.

While the app had a navigation drawer after its rebrand in 2014, Airbnb switched to a fixed tab bar in 2015, finally switching to a bottom navigation bar in 2016; after making the switch, Airbnb received a Material Design Award for focused efficiency.

“It’s important to create an app that is clearly recognizable as Airbnb, no matter the platform. We look for design solutions that feel at home across platforms and follow conventions on important elements like navigation, system iconography, contextual actions, and interactions.” -Karri Saarinen, Design Lead, Airbnb

One less tab

Hulu switched from a navigation drawer to a bottom navigation bar after its redesign in May 2017. Since then, Hulu has gone from having a 5 tab bottom navigation bar that includes search (similar to the iOS counterpart) to a 4 tab navigation bar, with search as an action icon in the app bar at the top right of the screen. However, they don’t seem to have updated their screenshots in the Google Play store to reflect this, so it could be an A/B test.

While I’m a fan of the new bottom navigation bar, I have a long list of UX complaints for the app otherwise. As one user commented, “While it’s certainly pretty, it has lost almost all basic functionality…the new Hulu “experience” is not intuitive, not particularly attractive, and is actually making me think about cancelling the service.”

Tumblr switched from a fixed tab bar to a bottom navigation bar in July 2017 as part of their effort to improve the posting and reblogging experience for users. While the Tumblr iOS app has a 5 tab bottom navigation bar that includes an icon to create a post, the Tumblr Android app has a 4 tab navigation with a FAB to create a post. While some users had adverse reactions to the change (“Put them back up top what the fuck is wrong with your designers”), others are enjoying the new bottom navigation bar.

Color usage

Seamless and Grubhub recently made the switch to bottom navigation drawer in October 2017. Unlike most other Android bottom navigation bars, they highlight the selected tab with a different background color.

“We decided to switch to bottom navigation. This would help us present more important information to diners front and center. To a diner, the most important destinations in the app are search results to find food, my account to access orders and account information, and the bag to place an order. With bottom navigation, we can provide easy access to each of these destinations without the clutter of the navigation drawer.”

Top Navigation

Fixed Tab Bar

Soundcloud switched from a navigation drawer to a fixed tab bar in late 2015 after the release of their creator app.

In September 2016, Stubhub launched a redesign of their Android app with a fixed tab bar in an effort to give the app a more clear and organized user experience.

App bar with action icons

Pinterest switched from a fixed tab bar to an app bar with icons in 2014 in an effort to simplify the navigation and make the app easier to use.

Bottom navigation bar & navigation drawer

During the redesign of their navigation in 2015, Yelp added both a bottom navigation bar and a navigation drawer. Since then, they have updated their bottom navigation bar from 3 tabs to 5 tabs, including “Me” and “Bookmarks”.

“This impactful persistent navigation creates both an easier path to the most essential features while also representing the core value of Yelp. We think this will lead to greater retention of new users, but we also believe it’s just a better experience that’s more engaging for all users.”

Bottom navigation bar & action icons

In September 2016 YouTube began testing a new layout with a bottom navigation bar. With a few minor tweaks along the way, the new design was officially launched in May 2017.

#FeatureCrushFriday Standout

Meetup

Since its rebrand and relaunch in 2016, Meetup has switched from an app bar with action icons and a FAB to a bottom navigation bar. I think their bottom navigation bars is one of the prettiest I’ve seen on Android, and I particularly like the red ripples animation they’ve added on tap. Their bottom navigation bar feels branded, unique, and intuitive in a really refreshing way, and it goes to show how subtle motion and animation can bring a design to life.

FeatureCrushFriday will be a recurring blog series highlighting my thoughts, obsessions, and crushes on mobile app features. How did you like this post? Do you have a favorite Android navigation convention? What’s your #FeatureCrushFriday? I’d love to hear from you!

Versett is a product design and engineering studio. If you like this post, you’d love working with us. See where you’d fit in at http://versett.com/