- 22
- March
Usability design for Android Honeycomb (OS 3.0)
Android Honeycomb release has stirred much excitement in the developer community, primarily in comparison with iPad’s iOS. I was lucky enough to be able to develop UX for a real application to be released on Android 3.0. While there are many similar interface elements with iPad, Honeycomb offers a unique and comfortable UI environment.
Apart from improvements to the OS itself (like System Bar, advanced widgets, richer notifications, etc), there are a number of UI tools that allow developers to create aesthetic and intuitive apps. In this article, I’m covering elements I have used in the design, you can see the complete list of improvements on Android Developers portal.
Two-pane mode.
It is possible to place two or more panes (fragments) on one screen, which can work independently to create an efficient work flow for publication-based apps. In my case, I used left pane to list publications and the one on the right to view the full article. Another cool thing you can do with this mode (which differs it from similar iPad functionality) is slide the entire view to reveal/conceal panes. While, panes can be operated autonomously, a good UX decision would be lining fragments up (if you have more than 3 levels hierarchy) and slide them to the left going down the hierarchy and slide right going up. This is neatly illustrated in the default Gmail application: first when you open the application you see folders on the left and message list on the right. When you tap a message, the view slides placing list of messages on the left and displaying email body in the fragment on the right.
Fragments can change size for each view if need be.
Action bar.
Besides the System Bar, which is visible in all applications and gives system-wide controls (home, back and recent apps), developers can add “Action bar” which will always be present on top of the screen and provides contextual options.
You can define contextual actions for each view. In case there are too many action items to fit into the bar, they are moved into the “overflow menu”. App icon on the left acts as “level up” by default.
In my case, I’ve put article categories selection in the Action Bar on home screen. As you go down into the articles, action bar contains proper actions (like share on twitter, facebook, email to friend, etc) and user can get back to the main category selection by clicking the logo on the left. What I love about the Action Bar is that you can place all the actions in one place and update them dynamically, depending to the view. There’s no need to create custom bars all over the place.
Summary
Built from the ground up just for tablets, Honeycomb provides tools to built native and highly usable apps. Besides the ones I’ve mentioned, Honeycomb also has improved notification system and widgets. I will blog about that when I get my hands on those 