Daniel McKenzie

digital product design

MUSINGS ON DESIGN, TECHNOLOGY AND CULTURE {STUDIO NOTES}

This article first appeared on Smashing Magazine, August 9, 2011.

More than ever, designers are being asked to create experiences for a variety of mobile devices. As tablet adoption increases and we move into the post-PC world, companies will compete for users’ attention with the quality of their experience. Part of designing successful apps for Android tablets requires not only a great concept that will encourage downloads, usage and retention, but also an experience that Android users will find intuitive and native to the Android environment.

The following will help designers become familiar with Android tablet app design by understanding the differences between the iPad iOS user interface and Android 3.x “Honeycomb” UI conventions and elements. We will also take a look at Honeycomb design patterns and layout strategies, and review some of the best Android tablet apps already out there.

Note: While Android 2.x apps for smartphones can run on tablets, Android 3.0 Honeycomb was designed and launched specifically for tablets. Future updates promise to bring Honeycomb features to smartphone devices in addition to making it easier to design and build for multiple screen types.

For most of us, our first exposure to tablets was via the iPad. For this reason, it’s reasonable to begin comparing the two user interfaces. By comparing, we can align what we’ve already learned about tablets and begin to focus on what important differences there are to meet the unique UI needs of Android users. This not only helps us get up to speed, but becomes especially important when designing an Android tablet app from an existing iPad one.

It’s just like the iPad, right?

While the Android tablet and iPad experience share many similarities (touch gestures, app launch icons, modals, etc) there are also many differences that designers need to be aware of before making assumptions and drawing-up screens.

Screen Size and Orientation

The biggest difference between the two platforms is the form factor. Layouts for the iPad are measured at 768 x 1024 physical pixels and the iPad uses portrait mode as its default viewing orientation.

With Android tablets it gets a bit more complicated due to multiple device makers. In general, there are 7” and 10” Android tablets screen sizes (measured diagonally from top left corner to bottom right corner) and sizes in between. However, most tablets are sized at around 10”.

What does this mean in pixels? A good baseline for your layouts is 1280 x 752 (excluding the System Bar) based on a 10” screen size using landscape—not portrait—as the default orientation. Like the iPad, content on Android tablets may be viewed in both landscape or portrait view, but landscape mode is how it’s generally used.

Viewing a web page on both Android Tablet and iPad in portrait mode

Viewing a web page on both Android Tablet and iPad in landscape mode

However, for Android screen size is only half of it. Android tablets also come in different ‘screen densities‘ — that is the number of pixels within a physical area of the screen. Without going into too much detail, designers must prepare all production-ready bitmaps for three different screen densities by scaling each bitmap 1.5x and 2x its original size so that a bitmap originally set at 100 x 100 pixels also has copies at 150 x 150 and 200 x 200. By making three batches of graphics scaled at these different sizes, you will be able to provide any necessary bitmaps for medium, high and extra high density tablet screens without losing image quality.

Note: For more information on screen densities and graphics preparation for Android devices, refer to my previous article on Designing for Android.

System Bar

While iOS makes minimal use of the System Bar, Android Honeycomb expands its size to include notifications and soft navigation buttons. There is a Back button, Home button and a Recent Apps button.

The Android Honeycomb System Bar and buttons are always present and appear at the bottom of the screen regardless of which app is open. Think of it as a permanent UI fixture. The only exception is a ‘Lights Out Mode’ which dims the system bar for showing immersive content such as when playing a video or game.

Back Button

While the bulkiness and permanence of the Honeycomb System Bar might appear as an obstacle to designers, it has the advantage of freeing-up real estate typically taken by a ‘Back’ button in apps for the iPad. The Honeycomb System Bar has a ‘Back’ button that works globally across all apps.

Action Bar

The bulk of the UI differences between platforms is concentrated in the top action bar. Android suggests a specific arrangement of elements and visual format for the tablet Action Bar that includes placement of an icon/logo, navigation (e.g. drop-down menu or tabs), and common actions. This is one of the most unifying design patterns between different Android Honeycomb apps and worth taking the time to familiarize yourself with before attempting customization or something iPad-like. More on the pervasive Action Bar later.

Widgets

New to iPad users will be Android’s widgets. As the name describes, they are small notification and shortcuts systems users can set to appear on their launch screen. Widgets can be designed to show stack views, grid views, list views and with Android 3.1, are now re-sizable.

Notifications

While iOS’s notifications push simple alerts to your launch screen, Honeycomb offers rich notifications that pop up (“toast” we used to call it) at the bottom right area of the screen much like Growl on Mac OS X. Custom layouts for notifications may include anything from icons to ticker text and actionable buttons.

Settings

Most often, any settings within an iPad app are presented from a popover triggered by an ‘i’ button. Settings categories are broken up into tables for easy visual separation. Honeycomb has a different convention that looks more like the iOS General Settings screen with the ability to navigate categories on the left and view detail on the right. This is the preferred (and more elegant) way of presenting multiple settings in Honeycomb.

UI Elements

As you can imagine, Android goes to great lengths to do everything opposite its competitor (that’s called differentiation!). Honeycomb has its own UI conventions and new ‘Holographic UI’ visual language for such mundane actions as picking a time/date, selecting an option, setting volume, etc. It’s important you understand this UI language for building screen flows and creating layouts.

Fonts

Question: How many fonts does iPad 4.3 allow you to use?

Answer: 57

Question: How many does Android?

Answer: 3

Yep, that’s Droid Sans, Droid Serif and Droid Sans Mono. However, there is an upside: While that’s all you get with the platform, designers and developers are free to bundle any extra fonts with their app.

Anything the same?

Luckily for designers already familiar with the iPad, there are some similarities between the two platforms:

Touch Gestures

Tap, double tap, flick, drag, pinch, rotate and scroll at will.

Split View and Multi-pane UI

Split View is one of the most commonly used layouts for tablets consisting of two side-by-side panes. Of course, you can design additional panes for more complexity.

Embedded Multi-Media

Both platforms allow embedded audio, video and maps.

Clipboard

For copying and pasting data in and out of separate applications.

Drag-and-Drop

Both platforms have drag-and-drop capabilities.

Design Patterns

Honeycomb carries over many of the same design patterns introduced in Android 2.0 and 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 important UI conventions designed by Android to help unify the user experience and provide designers and developers a template to work from. They are also customizable, so no need to fret!

As mentioned before, the Action Bar is the most prominent Android UI component and the one we’ll focus on.

Icon/Logo

The Action Bar begins with an icon or logo on the far left and is actionable. By tapping on it the user will be directed to the app’s home screen.

Navigation

Next, we typically find some mode of navigation in the form of a drop-down or tab menu. Honeycomb uses a triangle visual to indicate a drop-down and a series of underlines for tabs which typically take up the majority of the Action Bar real estate.

A left arrow button may also appear to the left of the icon/logo or label for navigating back or canceling a primary action.

Common Actions

Common Actions are as their name implies providing the user with such things as search, share and an overflow menu. They are always placed on the right side of the Action Bar away from any tabs.

Overflow Menu

The Overflow Menu is part of the Common Actions group and is sometimes separated by a vertical rule. The purpose of the Overflow Menu is to provide a place for miscellaneous menu items such settings, help, feedback, etc.

Search

Search is also a part of the Common Actions set. Unique to Search is its expand/collapse action. Tap on the Search icon and a search box expands out for entering your query. Tap the ‘x’ button to cancel and it collapses to its single button state. This is a space saver when you already have many actions or tabs you need to show.

Contextual Actions

Contextual Actions change the format of the Action Bar when an item is selected to reveal actions unique to that selection. For example, a photo app’s screen of image thumbnails might have an Action Bar that changes once an image is selected. In this case, the Action Bar might change to show contextual actions for editing that particular image.

To exit the Contextual Action Bar, users can tap either ‘Cancel’ or ‘Done’ appearing in the far right area of the bar.

Tablet Layout Strategies

Using Fragments and Multi-Pane Views

The building blocks of Honeycomb design are Fragments. A Fragment is a self-containing layout component that can change size or layout position depending on the screen orientation or size. This further addresses the problem of designing for multiple form factors by providing designers and developers a way to make their screen layout components elastic and stackable depending on what screen restraints the app is working with. Screen components can be stretched, stacked, expanded or collapsed and shown or hidden.

What makes Fragments so special? With a compatibility library, developers can bring this functionality to Android smartphones back to Android 1.6, giving designers and developers the option of building an app using a one-size-fits-all strategy. In short, this will allow designers and developers to build one app for everything.

While Fragments may be a term used more by developers than designers, it’s good for designers to adopt the perspective that capsules of content can be stretched, stacked, expanded and hidden at will.

The most common arrangement of Fragments is the split view. This layout is common for news apps and email clients where a list is presented in a narrow column and a detailed view in a larger one.

Another way of presenting a split view is to turn it on its side. In this case, the sideways list Fragment becomes a carousel, navigating horizontally instead of vertically.

Orientation Strategies

While use of Fragments is great for applying one design to multiple screen sizes, they are also useful for setting orientation strategies. Your screen design might look great in landscape but what are you going to do with three columns in a narrow portrait view? Again, we have the option to stretch, stack or hide content. Think of Fragments like a bunch of stretchy puzzle pieces that you can move around, shape or eliminate as needed.

A Word About Animation

The Honeycomb framework allows designers and developers to use a variety of animation effects such as “fades or movement between states, loop and animated image or an existing animation, change colors, and much more.” Honeycomb also boasts high-performance mechanisms for presenting 2-D and 3-D graphics. For a good overview of what Honeycomb is capable of, check out this video.

Learning from Example

Designing apps for Android tablets is still relatively a new space with some brands beginning to test the waters. Below is a list of apps for inspiration. You can download any of the apps from Android Market or Amazon.com.

YouTube

Naturally, Google’s YouTube for Honeycomb is an exemplar app showcasing all the design patterns and UI elements discussed above. To get a real feel for Honeycomb, download this app first and take it for a spin.

CNN

The CNN app makes good use of touch gestures (flicking to view additional content), split view and fonts! In this case, they’re using a custom font (Rockwell) for news headlines.

CNBC

Another good news app with examples of animation (stock ticker tape) and rich graphics and gradients. CNBC has one of the most visually compelling apps.

Plume

With it’s three column layout, Plum is a good example showing how layouts may need to change dramatically from landscape to portrait views.

FlightTrack

A data-heavy app done elegantly. Includes nice examples of maps, subtle use of animation, and standard Honeycomb UI elements.

Pulse

What else can you say…it’s Pulse for Android tablets! It’s still fun to compare the Android tablet version with the iPad one which is identical in almost every way.

WeatherBug

This was one of the first Honeycomb apps in Android Market and makes good use of maps and the Holographic UI for showing pictures from weather cams.

Kindle

Kindle pretty much sticks to the books when it comes to using design patterns and Honeycomb UI elements. Nevertheless, the outcome is very elegant while staying true to Android’s best practices.

Honorable Mention

IMDb
News360
USAToday
AccuWeather
Ustream
Google Earth
Think Space
Gmail

Online Resources

Videos

Designing and Implementing Android UIs for Phones and Tablets (Google I/O 2011)

Android 3.0 Honeycomb Animation Demo

Presentations

Designing and Implementing Android UIs for Phones and Tablets (Google I/O 2011)

Blogs

Tablet UI Patterns

Android Developers

Supporting Multiple Screens
Icon Design
Android 3.0 Platform Highlights



 

2 Comment


  1. 1 Morphy Richards breadmaker

    Great post! So many new things to learn, just as you thought you had got the hang of one thing along comes something completely new.

    Apps? Who´d have thought of them a couple of years ago?

  1. 1 What are some of the nicest designed Android tablet apps? - Quora
 
Leave a comment

Leave a Comment Here

Email address required (others will not be able to see it)