id="info"

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...

Editor's Picks