Analysis of the Bottom navigation behavior in the Android Netflix app

Jolanda Verhoef
3 min readFeb 26, 2018

Recently Netflix released an update of their app where they ditched the hamburger menu and used bottom navigation instead. However, the app doesn’t follow Google’s Material Design Guidelines in two ways. The guidelines state:

  1. Navigation through the bottom navigation bar should reset the task
  2. The back button does not navigate between bottom navigation bar views

Netflix chooses a different approach. This article will analyse in what ways they deviate from the standards.

Different tabs in Netflix App

Navigation

The tabs behave differently when tapped:

  1. Home: remembers the currently active view.
  2. Search: remembers the currently active view.
  3. Downloads: visibly resets to top view.
  4. My profile: opens all child views without persisting bottom navigation.

It’s especially interesting to see the different behavior for Home & Search vs. Downloads. It seems that Netflix has made a conscious decision to explicitly and visually reset the history stack for the Downloads tab only. I can’t really imagine what the reasoning behind it would be.

Back button behavior

Some of the tabs remember their state, which makes back button behavior more complex. Some even say that this behavior should be discouraged, as it makes the back button behave in unpredictable ways:

I disagree, arguing that the way they implemented it works predictable and is more user-friendly than resetting the stack on every tab switch. Let’s take a look at the logic behind the behavior:

  1. If the current tab has a “previous page”, navigate to that.
  2. If the user visited other tabs; go to the previous one.
  3. While navigating back to the different tabs, don’t visit any tab more than once.
  4. When all previous tabs have been visited, close the app

Here’s an example:

Sample tapping behavior

With this sample, when the user starts pressing back, the following happens:

  • There’s no current stack for the Downloads tab, so the app looks for the previous tab.
  • The previous tab is Search, so the app shows this tab with the remembered active view (the Seven Seconds detail screen).
  • Press back again, and the app moves back to the previous screen in the search stack, which is the Netflix Originals list.
  • Again, previous screen is in the current stack, so app navigates back to the search home screen.
  • Then the stack of the Search tab is empty, so the app looks for the previous tab.
  • The previous tab is Home, so the app shows this tab with the remembered active view (the Everything Sucks detail screen)
  • Press back again, and the app moves back to the previous screen in the home stack, which is the User’s home page.
  • The last back press will close the app, since there’s no screens left in the home stack, and there’s no previous tabs anymore.

Using the app this feels pretty natural. I love that the app remembers the page I was on when I quickly change between tabs. It helps that the navigation back stack in the app can’t get too large. E.g. there is no way to move from series detail page to another series detail page, so you can’t get lost in a very long stack.

What do you think? Like this approach, or do you feel the Google guidelines should be followed instead? Let me know in the comments :)

If you like the article, remember to clap. Note that if you hold the clap button, you can leave more claps.

To stay in touch with my articles, follow me on Twitter, where my handle is @lojanda 🎉

--

--

Jolanda Verhoef

Lead Android Developer @ Coolblue. Opinions are my own.