Android

The Android UI's Back button vs. Up button demystified

Confused by Google's documentation about when to use Android's Up button vs. when to use the Back button when developing your app? William Francis is here to help.

 

android-logo-generic-hai.jpg
 

With each release of Android, Google's user interface (UI) team continues to differentiate the user experience from iOS while attempting to refine and simplify navigation. However, because of the platform's open nature and Google's non-existent app review process, it falls on developers to insure a consistent and intuitive navigation paradigm across the platform.

Standard navigation is good for Android and good for your app. When you present the user with a familiar way to get around in your app, it frees the user to spend more time exploring and using the functionality that makes your app unique.

Back button vs. Up button: What's the difference?

Since Android 3.1 (Honeycomb), the action bar (Figure A) has become a standard UI design pattern.

Figure A

 

Android_UpBackButtons_FigA_021214.png
 

The standard action bar as seen in Google Play.

Android has always provided a Back button (Figure B) for navigation. This can either be a hard key or a soft key.

Figure B

 

Android_UpBackButtons_FigB_021214.png
 

Android's standard soft navigation keys, from left to right: Back, Home, and Multi-task.

The introduction of the Up button within the action bar (Figure C) caused me some confusion.

Figure C

 

Android_UpBackButtons_FigC_021214.png
 

The action bar with the Up chevron to the far left.

When do I present the Up button vs. just letting the system Back button handle the navigation? And where does Up take the user in my app's hierarchy vs. the Back button?

According to Google's design pattern guidelines: "The Up button is used to navigate within an app based on the hierarchical relationships between screens." 

And later in the same documentation: "The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with."

To make matters worse: "When the previously viewed screen is also the hierarchical parent of the current screen, pressing the Back button has the same result as pressing an Up button—this is a common occurrence."

Is your head spinning yet? The first time I read the design pattern guidelines concerning Back vs. Up navigation, I felt more confused than when I sought out the information. It all started to come together when I began navigating some of the stock Android apps, such as the Google Play app.

Basically, I found the Back key to be historical, like the Back button on a web browser. In fact, pressing the Back key can even exit the current app and drop you into another app altogether. Developers can override the default behavior of the Back key, but you should do it sparingly and for good reason.

The Up button should appear only when you have drilled into a particular item within an app and should never take the user out of the current app. The sequence of screenshots that follow illustrate the correct usage of the Up button. 

Figure D

 

Android_UpBackButtons_FigD_021214.png
 

Here's the Google Play list view of my installed apps. There is no Up button in the action bar because this is a "top" level screen in the app hierarchy.

Figure E

 

Android_UpBackButtons_FigE_021214.png
 

Now I have tapped on an item in the list. This will take me to the line item's detail view.

 

Figure F

 

Android_UpBackButtons_FigF_021214.png
 

Now that we have drilled down into the details, the Up button makes an appearance to the left of the app icon in the action bar.

A caveat: When implementing your application navigation, the Back button has some behaviors on Android that do not relate directly to navigation. These behaviors include: dismissing popup dialogs, hiding the soft keyboard, and dismissing a contextual menu.
  

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

3 comments
Tony__89
Tony__89

I still think Android's back vs. up is confusing and maybe even wrongly implemented, and your article doesn't really address this.  Take either the Gmail or Play Store app.  From a screen which has a list of emails or apps, tapping on one takes you to that specific email or app detail.  Then tapping the up button takes you to the list screen again.  But now, if you then tap the back button, what happens?  Android documentation says that the back button is "temporal", so shouldn't this take you to the previous screen, which is the specific email or app detail screen?  But that's not what happens, and I think this is wrong.  Why does clicking "up" clear something from the back stack?


On a separate note, I think Windows Explorer for Vista and some other versions also had an "up" button in addition to "back".  And if you navigate through folders doing something analogous to the above, then you end up at the deepest folder.  So while I think the back vs. up buttons for Windows Explorer and Android should be conceptually the same, they are implemented differently -- and I think Windows Explorer has it right, whereas Google's implementation of the Gmail and Play Store apps are wrong.

n.smutz
n.smutz

The navigation key back button has seemed broken since around gingerbread. With a lot of applications (notably Currents) the back key exits the application from some screens instead of reverting to the previous location. Is this programmer error?

Maybe developers commonly pay too little attention to the hierarchy issue.

LedLincoln
LedLincoln

I get around in Android pretty well, but what confused me about your article was all the references to an up button, when I saw no icon that even faintly made me think of the direction, "up".  Not your fault; I guess in Android, up means to the left.