Exploring Android’s action bar guidelines

Being a designer with an Android phone, I try my best to find the best designed apps on the market. That can be more difficult than it sounds, with majority of app designs on dribbble being iOS and also partly due to Android’s notoriety for being flooded with poorly designed apps owing to the low entry barrier.

In this article, I’d like to explore Android’s design guidelines for the Action bar or the top bar and the contrast with its iOS counterparts.



Left Alignment #

While not specifically mentioned in their guidelines, it is standard practice to left align text or logo. The reason for this is two-fold.

Better discoverability of navigation drawer #

se_cwbank_actionbars_2.jpg

The action to open the Navigation drawer aka the side menu is either a swipe or tap on the top left. Placing logo and text here increases tappable area, thus making it less likely that users will ignore it altogether.

Better utilization of limited space #

nav_bars_android_ios.jpg

On an Android app, long text would simply be cut off past the mid point, leaving the entire right area for actions. On iOS, this might be solved by scrolling text, but yet lesser room for more actions. This can be seen in the pic, with Android equivalents having more buttons on top.

Overflow button #

Another item seen almost exclusively in Android apps is the distinction between the overflow menu and navigation drawer menu.
The overflow menu holds less often used actions, and the navigation drawer menu is used to contain top level views. Often you see an app with everything contained in the nav drawer, which goes quite against guidelines and more so, clutters the drawer.

adia_navdrawer_guidelines.jpg


Up and Back button #

back_button.jpg
A key difference in apps on the two platforms arises as a result of hardware. Android devices typically have soft keys to navigate back to the previous page, while iPhone’s single button makes it necessary for every screen to include a back button.
This introduces the confusion of two back buttons in Android, often with confusion on what each does. The guidelines say that the bottom button should be used to go back one screen, while the one in the action bar should go up one level. While you should follow guidelines as much as possible, I’ve read about user tests where this causes a lot of confusion.


While I could talk on about beautiful action bars and practices, I’ll reserve that for a later post. Hope you found value in this article. Help abolish bad Android apps!

Tweet to me at @AbhinavChhikara, I’d love to hear your opinion on the matter!

 
212
Kudos
 
212
Kudos

Now read this

Designing a system you know nothing about

I find myself coming back to Paul Graham’s article about how to come up with ideas for startups. As a result, my rule for personal projects at the moment is to work on something I have experience in, or a problem I’ve faced personally... Continue →