Mutual Mobile's Android design tips for the new Android experience. Written by the author of the original Android Human Interface Guidelines, this piece explores how Ice Cream Sandwich and Jelly Bean (Android 4.0 - 4.2) have transformed everything we thought we knew about Android. For more on mobile design, development, and strategy, visit www.mutualmobile.com

1. The Golden Age of Android
Designing the New
Android Experience

2. A new Android has emerged
Designing for Android used to be a uniquely challenging experience. It meant managing device fragmentation, maneuvering
a foggy navigational structure, and dealing with clunky frame rates that limited the user experience. And it meant sleepless
nights racking your brain, trying to figure out where to begin.
But with Ice Cream Sandwich, all that has changed. Today’s Android (4.0+) not only stands toe to toe with iOS in performance
and appeal, but in many ways surpasses Apple in innovative design and providing a seamless user experience.
Today, our Android Design Guidelines for Gingerbread are a remnant of the past. And so is everything else that came before
Ice Cream Sandwich.
We have finally entered the Golden Age of Android.
Ice Cream Sandwich marks Android’s turning point from a
growing framework to a mature, cohesive, and beautiful OS.
Record videos and New Browser UI and
upload on youtube HTML5 support
http://www.gogeeks.tv/wp-content/uploads/2011/02/Android-Evolution.JPG
© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com/resources 2

3. How Ice Cream Sandwich changed everything
Android’s been rapidly improving from version to version, By introducing the Action Bar, for example, Android took its
but most of those changes took place under the hood. first step towards consistent navigation. And the Android
Gingerbread, for example, made Android faster, smarter, and team even took a firm design stance with their definitive
easier to understand. But like its predecessors, it suffered design guidelines (Android’s Design Guidelines) complete
from the same stilted user experience: with an inspiring vision statement and an amazing amount
of instruction.
• Important information was left hidden in frustrating
contextual menus
• Transitions were rigid and clunky
• The architecture as a whole felt dense
and verbose
The first major design shift occurred in 2011 with
Honeycomb, an innovative UI built specifically for tablets. It
was beautiful, but it was only for tablets. So they replaced it
with Ice Cream Sandwich (ICS), the first Android framework
to span all phones and tablets. As a result, today’s Android is smooth and graceful.
Where Honeycomb hinted at the promise of more Its navigation is intuitive and wonderfully simplified.
standardized design, ICS made all devices look and act the But most importantly, it is consistent across all devices.
same. ICS turned the once dense platform into a cognitive Android used to be the platform that challenged us
and consistent experience across all phones and tablets. designers to create quality applications. Now it challenges
us to innovate.
3

4. The evolution of an Android application: Evernote
Evernote released their first Android application in 2010. application’s hierarchy descended screen by screen to create
It suffered from jerky performance, lacked polish, and its an overly dense experience. In 2012, they released their
design was based closely on iOS. In 2011 they took a first latest design. Utilizing Jelly Bean’s speed and patterns of
crack at the action bar and reorganizing the data to suit simplicity, they transformed their complicated program into
the platform. But performance was still an issue, and the an app that is fluid, intuitive, and extremely easy to use.
2010 2011
2012
A note on user distribution
For the moment, most users are still running
Gingerbread. But that’s not by choice; OS upgrades
are unfortunately at the behest of the device
providers. This makes it difficult to predict when we
will see the massive shift towards the new Android
frameworks, but at the very least we can expect a
constant change as long-time users hit the end of
their two-year upgrade cycles. And we can expect
an equally massive shift for consumer companies
and the enterprise as they race to respond to the
huge demand of mainstream Android users.
© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com/resources 4

5. SIX TIPS FOR THE NEW ANDROID EXPERIENCE
1
Design for your users’ immediate needs
Navigational structure is important, but so is presentation. Google Current (Fig. 1) is a perfect example of these
When the two work together, the user shouldn’t even have to principles in practice. It visually presents everything the user
think about how they move between content. They should just needs on the very first screen, making every possible action
enjoy the experience. clear and easy to follow across both the Action Bar and Side
Drawer. When reading a blog, the action bar disappears to
Great Android design should never be a burden to the user,
allow for a comfortable reading environment and can easily
but instead act as a guide that shows only the most relevant
be brought back by the unassuming navigation options at the
information at any given time. By using animation and
bottom of the screen. This navigation is so simple that while
transitions as direction, simplifying UI patterns, and relying
using the application, you’re left thinking purely about the
heavier on imagery than on lengthy text, Android navigation
content and not at all about how you got there.
can fade into the background and stand as the epitome of
user-centered design.
Fig. 1: Google Current makes use of an extremely simple design pattern.
5

6. 2
Create engaging experiences with gestures and transitions
Choppy performance has long been a complaint against As mobile design advances, we’ll be able to use this speed
Android. But no more. to create even more tactile and cognitive experiences.
Google states that “real objects are more fun that buttons
At the unveiling of Jelly Bean, Google revealed the suitably
and menus,”1 and we’re now seeing designers forgo heavy
named “Project Butter” as their major motion to fix all
arrays of buttons and menus for a much more fluid,
performance issues. Project Butter improves speed to
gesture-based experience.
approximately 60 frames per second, allowing for smooth
transitions and animations to augment the already
simplified design patterns. By combining this improvement
with well thought-out gestures, we can create a truly
integrated experience for the user that seems to transcend
software entirely.
Fig. 2: Feedly’s delightfully simple navigation uses almost nothing but a series of swipes.
Their tappable icons have been whittled down to almost nothing, and you dismiss side menus
by flicking them closed. Tasks such as marking, saving, or closing an article are activated by
a series of cognitive gestures that make for a quick and human experience.
© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com/resources 6

7. 3
Tear down the walls between applications
On iOS, you have to hard code an application’s separate applications share information and speak to
communication with other applications such as Facebook each other. They’re not new, but should certainly work their
or Twitter. But with Android, any two applications can way into your design.
share information as long as they’re both fashioned to
Using intents can make your feature set extraordinarily
work together. This creates a rich ecosystem of diverse
robust by simply utilizing functionality provided by
actions and a massive network of sharing.
other applications. Here is a great list of all the features
The system that makes this work is called intents. you can easily utilize from other applications by
Intents are part of an extremely flexible system in which using intents.
Intents in Practice: Android makes it easy to share functionality across all applications on a device. In this example,
you can quickly document an image and notate it using Evernote, pin it to Pinterest, post it to Facebook, geolocate it
with Foursqure, or share it via Skype.
7

8. 4
Porting from iOS used to be a bad idea. Now it’s inexcusable.
When Android lacked a clear vision, it was no surprise that be navigated through. This gives each page a very clear
many early applications pulled heavily from iOS patterns. hierarchy. Android, however, abides by the philosophy of
Sure, this didn’t create the best Android experience, but it “only show me what I need when I need it,” meaning even if
created an experience. And that used to be good enough. all the options are not immediately available, the main user
journey is obvious and clear, making for an extremely refined
Android and iOS devices rely on different UI patterns that
experience for the majority of users.
speak not only to the hardware used, but also to the different
platforms’ user bases. At this point, iOS is a wonderfully Make sure you’re not just copying over iOS design patterns,
worn suit that their users are completely comfortable with. but creating for the modern Android unique user.
But that same suit does not fit your typical Android user. Take advantage of Android’s built-in action bar, and use
simple gesture-based navigation rather than tab-like
If you follow the creative vision provided by Android’s
buckets. Finally, avoid using iOS visual paradigms (button
guidelines, it is clear that Android benefits from a much
styles, icons, etc.) to carry your application. It may be
more simplified experience. For example, iPhone’s familiar
intuitive for Apple users, but this is likely not the case with
Tab Bar shows the user all the key functionality that can
Android users.
Pinterest (Fig. 3) does a phenomenal job adhering
to each platform’s particular user needs.
You can see that iOS presents the same navigation
functionality across the entire application. It does
not prioritize these functionalities depending on the
setting, but always gives each equal importance.
Android, however, focuses the experience to the
primary use case, and makes the secondary
functionality accessible from different, easily
findable locations. On the Android Pinterest, the
user can swipe between their profile, their home
screen, and the category screen with a series of
simple tactile swipes. Also, notice that the camera
on Android is presented as an action and not a
function, only showing up when it’s helpful for
the user.
These subtle differences play to the philosophy of
the different devices: while iOS provides a familiar
experience to long-time iOS users, Android favors
Fig. 3: Pinterest’s mobile experiences recently found patterns of simplicity and cognition.
for iOS and Android.
© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com/resources 8

9. 5
Design with flexibility in mind
Android is an open OS. This has helped Android’s quick rise
to prominence, but it also means there could be any possible Is that all there is to fragmentation?
number of devices to develop and design for. Fortunately, ICS
has helped reign in the problem of developing across screen Fragmentation goes well beyond designing for
sizes, devices, and resolutions. different devices and screen sizes. It refers to how
manufacturers actually customize and release
Today, overcoming Android’s device diversity is as simple distinct versions of the Android framework. This
as simplifying design patterns. We develop just a few has fueled efforts such as the Amazon Kindle, but it
flexible layouts—across tablet and phone—and utilize ICS’s also poses development challenges that Android is
framework for adapting these to work across any screen actively working to eliminate.
size. We also follow Android’s qualifying naming conventions
to isolate assets based on screen size and density, and make
sure to keep assets global and flexible.
We’ll explore how to develop across device sizes in much
greater detail in our next piece, but it’s helpful to know that
this is a well-documented, manageable task.
6
Think outside the pocket
The Android framework isn’t limited to mobile devices, So the true conversation of Android design lies beyond
and it isn’t just the Android-powered Google TV that’s making the app. You need to think about the experience as a whole,
a splash. Chinese car company Roewe recently released a and the way each touch points communicate with all
car with an Android console4, Nokia and Nikon have released others—from mobile to household appliances to industrial
Android-powered cameras5, and Casio utilizes an Android equipment and devices we haven’t even thought of yet.
POS system6. If you consider that all of these devices could It’s time to start thinking about Android design as being not
be using the same code, the possibilities for design just a series of applications, but as an entire ecosystem.
become boundless.
9

10. 7
Android applications can be beautiful too
Android’s been treated as the ugly mobile OS for too However, considering what we know today about designing
long now. This is no surprise, considering the difficult for Android, beautiful design is absolutely obtainable for
learning curve to handling design assets and building the platform. By following Android’s creative vision and
across a fragmented device landscape with no universal being conscious of fragmentation and the limitations that
design standards. it may present, we can create applications that are refined,
graceful, and truly beautiful.
The latest Android applications are beautiful,
minimalistic, and extremely easy to use.
© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com/resources 10

11. THE NEW ANDROID HAS FINALLY EMERGED
Over the last couple of years, Android has evolved leaps and
bounds into a fascinating and innovative operating system.
Its start was patchy, but constant iteration and user feedback
have made the Android platform as viable to design for as
iOS and equally essential in any mobile strategy.
Up next: learn what it takes to create beautiful
experiences across all devices and screen sizes.
11

12. ABOUT MUTUAL MOBILE
Mutual Mobile comprises over 300 mobile specialists across We’ve received numerous awards and accolades, including a
Android, iOS, Windows 8, and web. Our end-to-end solutions CES Innovations Award for creating an Android-enabled radar
have delighted major clients including Google, Audi, Cisco, detector, recognition as a Forbes Most Promising Company,
and Xerox. We work to bring consumer-grade design to the and a 2012 Webby Nomination in the Retail/Tablet category.
enterprise, and in 2011 introduced the first Android Human Mutual Mobile is experienced at crafting mobile strategy
Interface Guidelines to encourage design consistency that addresses enterprise-sized concerns and challenges
across Android. to create efficiency, engagement, and measurable value for
users—whether those users are employees or consumers.
Citations
1
Android, Design Principles. http://developer.android.com/design/get-started/creative-vision.html
2
Android, Design Principles. http://developer.android.com/design/get-started/principles.html
3
Android, Design Principles. http://developer.android.com/design/get-started/principles.html
4
T
he Economist, Do Android Dream of Electric Cars? June 14, 2012.
http://www.economist.com/blogs/babbage/2012/06/car-infotainment
5
c
net, How camera makers are getting their design groove on. October 1, 2012.
http://news.cnet.com/8301-11386_3-57517481-76/how-camera-makers-are-getting-their-design-groove-on/
6
C
asio, Casio America Releases New Android POS Terminal for the Retail and Hospitality Industry. July 27, 2012.
http://www.casio.com/news/content/18A90C33-337F-44A8-8EC0-CF93B115D782/
7
Images sourced from Android’s Design Guidelines. http://developer.android.com/design/style/devices-displays.html
© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com/resources 12