Designing For Successful Android Tablets (Part 2)

Much more than ever, designers are asked today to create experiences for a variety of different mobile devices. With tablet adoption increasing and we move into the post-PC world, companies are now competing for user attention with the quality of their experience. Designing successful apps for Android tablets requires a great concept that encourages downloads, additional usage and retention. But it also requires that Android users enjoy an experience that is intuitive and native to the environment.

The following will help designers become more familiar with Android tablet app design by explaining some of the differences between the iPad iOS user interface and Android’s 3.x “Honeycomb” UI conventions.

SETTINGS

Access to settings in an iPad app usually are presented in a pop-over that’s triggered by an “i” button; while settings categories are usually broken up into tables for easy visual identification. Honeycomb has a different convention. As a matter of fact, It looks more like the iOS’ “General Settings” screen, where the user navigates categories on the left and can view details on the right. This is the preferred, and much more elegant way to present multiple settings in Honeycomb.

UI ELEMENTS

As you might imagine, Android goes to great lengths to do everything completely different from its competitor. Honeycomb, therefore, has its own UI conventions, and it now has an unusually unique “holographic UI” visual language, making such routine actions as picking a time and date, selecting an option or setting the volume easier to navigate. Understanding this UI language is very important to building screen flows and creating layouts.

FONTS

The iPad 4.3 makes a total of 57 fonts available for you to use in your design. Android employs just three, but while only these three actually ship with the platform, developers can bundle any other fonts they like with their apps. Luckily for designers who are already familiar with the iPad, the two platforms do have a few similarities.

TOUCH GESTURES

Here they are: Tap, Double-Tap, Flick, Drag, Pinch, Rotate and Scroll all you like.

SPLIT VIEW AND A MULTI-PANE UI

Split view is one of the most common layouts for Mobile website. You can have two side-by-side panes and add many more if you like for more complex layouts.

EMBEDDED MULTIMEDIA

Both platforms allow embedded maps, audio and video.

CLIPBOARD

Clipboard is available for both apps for copying and pasting data in and out of applications.

DRAG AND DROP

Both platforms have capabilities for drag-and-drop.

Android’s Honeycomb continues many of the design patterns that were introduced in Android 2.0, and even expands on them. In case you’re not familiar with design patterns, Android defines them as a “general solution to a recurring problem.” Design patterns are KEY UI convention designed by Android to help unify the user experience, and also to give designers and developers a template to work from, and they’re also customizable.

ICON OR LOGO

The action bar starts with an icon or logo on the far left. It’s actionable by simply tapping on it and the user is directed immediately to the app’s home screen.

NAVIGATION

For navigation, Honeycomb uses a triangle graphic to indicate a drop-down menu, and a series of underlines for tabs. These typically take up most of the action bar’s real estate. Sometimes a left arrow button will also appear to the left of the icon or logo, or the label, to navigate back or cancel a primary action.

COMMON ACTIONS

Common Actions gives users such things as search, share and an overflow menu. They’re always positioned to the right of the action bar, and away from any tabs.

This concludes Part 2 of our 3-part series, Designing for Successful Android Tablets. In Part 3, we will continue our discussion on Android design with the Overflow menu, Search, and Contextual actions.