SlideShare a Scribd company logo
1 of 11
THE GOLDEN AGE OF ANDROID
SEVEN TIPS FOR DESIGNING THE NEW ANDROID EXPERIENCE
Android’s troubled history is over
Designing for Android used to be a uniquely terrible experience. It meant device fragmentation, a foggy and undefined
navigational structure, and clunky frame rates that crippled the user experience. And it meant sleepless nights racking
your brain, trying to figure out where to even begin.

But with Ice Cream Sandwich, all that has changed. Today’s Android (which includes Ice Cream Sandwich and Jelly Bean)
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.




© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com						                                                         2
How Ice Cream Sandwich changed everything
Android’s been rapidly improving from version to version,               The Evolution of an Android Application: Evernote
but most of those changes took place under the hood.
Gingerbread, for example, introduced NFC. And it made
Android faster, smarter, and easier to understand. But like
its predecessors, it suffered from the same stilted
user experience:

    •	   Important information was left hidden in frustrating
         contextual menus

    •	   Transitions were rigid and clunky

    •	   The architecture as a whole felt dense
                                                                     Evernote released their first Android application in 2010.
         and verbose
                                                                     It suffered from jerky performance, lacked polish, and its
The first major design shift occurred with Honeycomb,                design was based closely on iOS. In 2011 they took a first
an innovative UI built specifically for tablets. It was beautiful,   crack at the action bar and reorganizing the data to suit
but it was only for tablets. So they replaced this with Ice          the platform. But performance was still an issue, and the
Cream Sandwich (ICS), the first Android framework built to           application’s hierarchy descended screen by screen to create
span all phones and tablets.                                         an overly dense experience. In 2012, they released their
                                                                     latest design. Utilizing Jelly Bean’s speed and patterns of
Where Honeycomb hinted at the promise of more
                                                                     simplicity, they transformed their complicated program into
standardized design, ICS made all devices look and act the
                                                                     an app that is fluid, intuitive, and extremely easy to use.
same. ICS turned the once dense platform into a cognitive
and consistent experience across all phones and tablets.

By introducing the Action Bar, for example, Android took its             A note on user distribution
first step towards consistent navigation. And the Android                For the moment, most users are still running
team even took a firm design stance with their definitive                Gingerbread. But that’s not by choice; OS upgrades
design guideline (Android’s Design Guidelines) complete                  are unfortunately at the behest of the device
with an inspiring vision statement and an amazing amount                 providers. This makes it difficult to predict when we
of instruction.                                                          will see the massive shift towards the new Android
As a result, today’s Android is smooth and graceful.                     frameworks, but at the very least we can expect a
Its navigation is intuitive and wonderfully simplified.                  constant change as long-time users hit the end of
But most importantly, it is consistent across all devices.               their two-year upgrade cycles. And we can expect
Android used to be the platform that challenged us                       an equally massive shift for consumer companies
designers to create quality applications. Now it challenges              and the enterprise as they race to respond to the
us to innovate.                                                          huge demand of mainstream Android users.




                                                                                                                                 3
SEVEN THINGS TO KNOW ABOUT DESIGNING FOR THE NEW ANDROID




  1
Simplify design patterns for a user-centric experience
One of the key principles of Android’s Design Guidelines is        allow for a comfortable reading environment and can easily
“Simplify My Life.” By using animation and transitions as          be brought back by the unassuming navigation options at the
direction, simplifying UI patterns, and relying heavier on         bottom of the screen. This navigation is so simple that while
imagery than on lengthy text, an Android application can           using the application, you’re left thinking purely about the
stand as the epitome of User Centric Design.                       content and not at all about how you got there.

Google Current (Fig. 1) is a perfect example of these              Navigational structure is important, but so is presentation.
principles in practice. It visually presents everything the user   When the two work together, the user shouldn’t even have to
needs on the very first screen, making every possible action       think about how they move between content. They can just
clear and easy to follow across both the Action Bar and Side       enjoy the experience.
Drawer. When reading a blog, the action bar disappears to




                           Fig. 1: Google Current makes use of an extremely simple design pattern




© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com						                                                              4
2
Create engaging experiences with gestures and transitions
Choppy performance has long been a complaint                   As mobile design advances, we’ll be able to use this speed
against 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,” 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.2
approximately 60 frames per second, allowing for smooth
transitions and animations to augment the already simplified   Feedly’s delightfully simple navigation (Fig. 2) uses almost
design patterns. By combining this improvement with well       nothing but a series of swipes. Their tappable icons have
thought-out gestures (such as the Bezel Swipe), we can         been whittled down to almost nothing, and you dismiss
create a truly integrated experience for the user that seems   side menus by flicking them closed. Tasks such as
to transcend software entirely.                                marking, saving, or closing an article are activated by a
                                                               series of cognitive gestures that make for a quick and
                                                               human experience.




                    Fig. 2: Feedly relies more on the user’s tactile expression than on memorizing a
                  button-based navigation. It’s a great example of an application that uses transitions
                                    and gestures to create an immersive experience.




                                                                                                                              5
3
Use intents to build ‘application villages’
Intents are one of Android’s most powerful features.              We’ll discuss intents in more detail later on in this series,
They’re not new, but should certainly work their way into         but when designing an Android application, it is important
your design.                                                      to understand how using intents can make your feature
                                                                  set extraordinarily robust by simply utilizing functionality
Intents are part of an extremely flexible system in which
                                                                  provided by other applications. Here is a great list of all the
separate applications share information and speak to
                                                                  features you can easily utilize from other applications by
each other. On iOS, you have to hard code an application’s
                                                                  using intents.
communication with Facebook or Twitter. But with Android,
any two applications can share information as long as
they’re both fashioned to utilize intents. This creates a rich
ecosystem of diverse actions and a massive network
of sharing.




    Intents in Practice: I decided to take this picture of a Mutual Mobile t-shirt concept. From the gallery, I was able to
    choose from any other application on my device that allowed intents. Though I only wanted to document this image
    and notate it using Evernote, I could have posted it to Facebook, pinned it to Pinterest, geolocated it with Foursquare,
    or sent it to a friend over Skype. Or all of the above. And by combining intents, I could have pinned it to Pinterest and
    then commented about the pin on Facebook with just a few taps.




                                                                                                                                    6
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 your unique user. Simplify actions using the
But that same suit does not fit your typical Android user.       heralded action bar, use gesture-based navigation rather
                                                                 than tab-like buckets, and focus more on the majority use
If you follow the creative vision provided by Android’s
                                                                 cases than the infinite corner cases. Finally, avoid using iOS
guidelines, it is clear that Android benefits from a much
                                                                 visual paradigms (button styles, icons, etc.) to carry your
more simplified experience. For example, iPhone’s familiar
                                                                 application. It may be intuitive for Apple users, but this is
Tab Bar shows the user all the key functionality that can
                                                                 likely not the case with 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. On iOS, the camera is a linear function
                                                                     along the bottom with everything else.

                                                                     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						                                                          7
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 has
as simplifying design patterns. We develop two flexible               fueled efforts such as the Amazon Kindle, but it also
layouts—tablet and phone—and utilize ICS’s framework for              poses development challenges. We’ll discuss what
adapting these to work across all screens. We also follow             fragmentation means—and how to manage it—in a
Android’s qualifying naming conventions (found here) to               later piece.
isolate assets based on screen size and density, and use
9patching to keep asset rendering 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 device 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 lifestyle.
become boundless.




                                                                                                                              8
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 application Weather Eye is beautiful,
                                         minimalistic, and extremely easy to use.




© 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com						                                                      9
THE NEW ANDROID HAS FINALLY EMERGED




Over the last couple of years, Android has evolved leaps and   We’ll take a closer look at this new Android experience in our
bounds into a fascinating and innovative operating system.     ongoing series: the Golden Age of Android.
Its start was patchy, but constant iteration and user
feedback have made the Android platform as viable to
design for as iOS, and equally important to consider in any
mobile strategy.




                                          Look out for our next piece on creating a beautiful
                                                 experience across devices and screen sizes.




                                                                                                                          10
ABOUT MUTUAL MOBILE

Mutual Mobile has delivered over 400 mobile experiences                 We’ve received numerous awards and accolades, including
across Android, iOS, Windows 8, and web. Our end-to-end                 recognition as a Forbes Most Promising Company, a 2012
solutions have delighted major clients including Google, Audi,          Webby Nomination in the Retail/Tablet category, and a 2011
Cisco, and Xerox. We work to bring consumer-grade design                ADDY Award from the AAF. Mutual Mobile is experienced
to the enterprise, and in 2011 introduced the first Android             at crafting mobile strategy that addresses enterprise-sized
Human Interface Guidelines to encourage design consistency              concerns and challenges to create efficiency, engagement,
across Android.                                                         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						                                                                  11

More Related Content

What's hot

2012.09.11 w3 c html5 mobile paradies
2012.09.11 w3 c html5   mobile paradies2012.09.11 w3 c html5   mobile paradies
2012.09.11 w3 c html5 mobile paradiesStephan Haux
 
Coco Reader System for University
Coco Reader System for UniversityCoco Reader System for University
Coco Reader System for UniversityEisho Akiyama
 
Presentation on Android application
Presentation on Android applicationPresentation on Android application
Presentation on Android applicationAtibur Rahman
 
Android presentation
Android presentationAndroid presentation
Android presentationhussainghoto
 
Android evolution george san jose pptx
Android evolution george san jose  pptxAndroid evolution george san jose  pptx
Android evolution george san jose pptxGeorge Jose
 
Android and android phones
Android and android phonesAndroid and android phones
Android and android phonesTasicoPaolo
 
I os human interface guidelines
I os human interface guidelinesI os human interface guidelines
I os human interface guidelinesknottyjung
 
Manifest comprehensive overview
Manifest comprehensive overviewManifest comprehensive overview
Manifest comprehensive overviewTen Times Better
 
Android Development Slides
Android Development SlidesAndroid Development Slides
Android Development SlidesVictor Miclovich
 
iOS 7 UI Transition Guide
iOS 7 UI Transition GuideiOS 7 UI Transition Guide
iOS 7 UI Transition GuideEvgeny Belyaev
 
Mobile User Interface Development Challenges and Trade-offs
Mobile User Interface Development Challenges and Trade-offsMobile User Interface Development Challenges and Trade-offs
Mobile User Interface Development Challenges and Trade-offs JonFerraiolo
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)Mohammad Khalil
 
streetARt case study for ARE2011
streetARt case study for ARE2011streetARt case study for ARE2011
streetARt case study for ARE2011Rob Manson
 

What's hot (20)

Windows phone
Windows phoneWindows phone
Windows phone
 
2012.09.11 w3 c html5 mobile paradies
2012.09.11 w3 c html5   mobile paradies2012.09.11 w3 c html5   mobile paradies
2012.09.11 w3 c html5 mobile paradies
 
Coco Reader System for University
Coco Reader System for UniversityCoco Reader System for University
Coco Reader System for University
 
The Challenge of Touchscreen Clutter - v2 - 9.26.2012
The Challenge of Touchscreen Clutter - v2 - 9.26.2012The Challenge of Touchscreen Clutter - v2 - 9.26.2012
The Challenge of Touchscreen Clutter - v2 - 9.26.2012
 
Android part1
Android part1Android part1
Android part1
 
Metro design language
Metro design languageMetro design language
Metro design language
 
Presentation on Android application
Presentation on Android applicationPresentation on Android application
Presentation on Android application
 
Android presentation
Android presentationAndroid presentation
Android presentation
 
Android evolution george san jose pptx
Android evolution george san jose  pptxAndroid evolution george san jose  pptx
Android evolution george san jose pptx
 
Android and android phones
Android and android phonesAndroid and android phones
Android and android phones
 
I os human interface guidelines
I os human interface guidelinesI os human interface guidelines
I os human interface guidelines
 
Prototyping
PrototypingPrototyping
Prototyping
 
iOS 7 Transition guide
iOS 7 Transition guideiOS 7 Transition guide
iOS 7 Transition guide
 
Manifest comprehensive overview
Manifest comprehensive overviewManifest comprehensive overview
Manifest comprehensive overview
 
Android Development Slides
Android Development SlidesAndroid Development Slides
Android Development Slides
 
iOS 7 UI Transition Guide
iOS 7 UI Transition GuideiOS 7 UI Transition Guide
iOS 7 UI Transition Guide
 
Organic Design UI (2010)
Organic Design UI (2010)Organic Design UI (2010)
Organic Design UI (2010)
 
Mobile User Interface Development Challenges and Trade-offs
Mobile User Interface Development Challenges and Trade-offsMobile User Interface Development Challenges and Trade-offs
Mobile User Interface Development Challenges and Trade-offs
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)
 
streetARt case study for ARE2011
streetARt case study for ARE2011streetARt case study for ARE2011
streetARt case study for ARE2011
 

Similar to The Golden Age of Android: 7 Tips for Designing Fluid Experiences

Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdfTop iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdfTechugo Canada
 
Components of Android
Components of AndroidComponents of Android
Components of AndroidMarie Weaver
 
Material design Android L
Material design Android LMaterial design Android L
Material design Android Luzair khan
 
7 Design Tips for the New Android Experience
7 Design Tips for the New Android Experience7 Design Tips for the New Android Experience
7 Design Tips for the New Android ExperienceMutual Mobile
 
Android and iOS Mobile OS
Android and iOS Mobile OSAndroid and iOS Mobile OS
Android and iOS Mobile OSPaurav Shah
 
Everything you need to know about native application development
Everything you need to know about native application developmentEverything you need to know about native application development
Everything you need to know about native application developmentI-Verve Inc
 
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdfMobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdfWebGuru Infosystems Pvt. Ltd.
 
2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutionsDMI
 
TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019
TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019
TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019upssingh
 
Exploring the Dynamic World of Mobile App Development Software in 2023.pdf
Exploring the Dynamic World of Mobile App Development Software in 2023.pdfExploring the Dynamic World of Mobile App Development Software in 2023.pdf
Exploring the Dynamic World of Mobile App Development Software in 2023.pdfQSS Technosoft Inc.
 
Exploring the Dynamic World of Mobile App Development Software in 2023
Exploring the Dynamic World of Mobile App Development Software in 2023Exploring the Dynamic World of Mobile App Development Software in 2023
Exploring the Dynamic World of Mobile App Development Software in 2023QSS Technosoft Inc.
 
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...Katy Slemon
 
Chrome for android_devfestx
Chrome for android_devfestxChrome for android_devfestx
Chrome for android_devfestxDominic Travers
 

Similar to The Golden Age of Android: 7 Tips for Designing Fluid Experiences (20)

Android Design
Android DesignAndroid Design
Android Design
 
Top 10 Mobile App UI/UX Design Trends in 2022
Top 10 Mobile App UI/UX Design Trends in 2022Top 10 Mobile App UI/UX Design Trends in 2022
Top 10 Mobile App UI/UX Design Trends in 2022
 
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdfTop iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
Top iOS App Development Tools You Should Know to Create Outstanding iOS Apps.pdf
 
Android L
Android LAndroid L
Android L
 
Components of Android
Components of AndroidComponents of Android
Components of Android
 
Material design Android L
Material design Android LMaterial design Android L
Material design Android L
 
7 Design Tips for the New Android Experience
7 Design Tips for the New Android Experience7 Design Tips for the New Android Experience
7 Design Tips for the New Android Experience
 
Android and iOS Mobile OS
Android and iOS Mobile OSAndroid and iOS Mobile OS
Android and iOS Mobile OS
 
Everything you need to know about native application development
Everything you need to know about native application developmentEverything you need to know about native application development
Everything you need to know about native application development
 
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdfMobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
Mobile App UI/UX Design Trends to Flourish in 2021 and Beyond.pdf
 
hema ppt (2).pptx
hema ppt (2).pptxhema ppt (2).pptx
hema ppt (2).pptx
 
Unboxing iOS 7
Unboxing iOS 7Unboxing iOS 7
Unboxing iOS 7
 
Android architecture
Android architectureAndroid architecture
Android architecture
 
2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions2014 UX/UI trends for mobile solutions
2014 UX/UI trends for mobile solutions
 
TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019
TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019
TOP 5 TECHNOLOGIES TO CREATE A COMPETENT ANDROID APP IN 2019
 
Exploring the Dynamic World of Mobile App Development Software in 2023.pdf
Exploring the Dynamic World of Mobile App Development Software in 2023.pdfExploring the Dynamic World of Mobile App Development Software in 2023.pdf
Exploring the Dynamic World of Mobile App Development Software in 2023.pdf
 
Exploring the Dynamic World of Mobile App Development Software in 2023
Exploring the Dynamic World of Mobile App Development Software in 2023Exploring the Dynamic World of Mobile App Development Software in 2023
Exploring the Dynamic World of Mobile App Development Software in 2023
 
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
Hire Ionic Developer to Build Cross-platform, Feature-rich, and most advanced...
 
Chrome for android_devfestx
Chrome for android_devfestxChrome for android_devfestx
Chrome for android_devfestx
 
Presentation
PresentationPresentation
Presentation
 

The Golden Age of Android: 7 Tips for Designing Fluid Experiences

  • 1. THE GOLDEN AGE OF ANDROID SEVEN TIPS FOR DESIGNING THE NEW ANDROID EXPERIENCE
  • 2. Android’s troubled history is over Designing for Android used to be a uniquely terrible experience. It meant device fragmentation, a foggy and undefined navigational structure, and clunky frame rates that crippled the user experience. And it meant sleepless nights racking your brain, trying to figure out where to even begin. But with Ice Cream Sandwich, all that has changed. Today’s Android (which includes Ice Cream Sandwich and Jelly Bean) 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. © 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com 2
  • 3. How Ice Cream Sandwich changed everything Android’s been rapidly improving from version to version, The Evolution of an Android Application: Evernote but most of those changes took place under the hood. Gingerbread, for example, introduced NFC. And it made Android faster, smarter, and easier to understand. But like its predecessors, it suffered from the same stilted user experience: • Important information was left hidden in frustrating contextual menus • Transitions were rigid and clunky • The architecture as a whole felt dense Evernote released their first Android application in 2010. and verbose It suffered from jerky performance, lacked polish, and its The first major design shift occurred with Honeycomb, design was based closely on iOS. In 2011 they took a first an innovative UI built specifically for tablets. It was beautiful, crack at the action bar and reorganizing the data to suit but it was only for tablets. So they replaced this with Ice the platform. But performance was still an issue, and the Cream Sandwich (ICS), the first Android framework built to application’s hierarchy descended screen by screen to create span all phones and tablets. an overly dense experience. In 2012, they released their latest design. Utilizing Jelly Bean’s speed and patterns of Where Honeycomb hinted at the promise of more simplicity, they transformed their complicated program into standardized design, ICS made all devices look and act the an app that is fluid, intuitive, and extremely easy to use. same. ICS turned the once dense platform into a cognitive and consistent experience across all phones and tablets. By introducing the Action Bar, for example, Android took its A note on user distribution first step towards consistent navigation. And the Android For the moment, most users are still running team even took a firm design stance with their definitive Gingerbread. But that’s not by choice; OS upgrades design guideline (Android’s Design Guidelines) complete are unfortunately at the behest of the device with an inspiring vision statement and an amazing amount providers. This makes it difficult to predict when we of instruction. will see the massive shift towards the new Android As a result, today’s Android is smooth and graceful. frameworks, but at the very least we can expect a Its navigation is intuitive and wonderfully simplified. constant change as long-time users hit the end of But most importantly, it is consistent across all devices. their two-year upgrade cycles. And we can expect Android used to be the platform that challenged us an equally massive shift for consumer companies designers to create quality applications. Now it challenges and the enterprise as they race to respond to the us to innovate. huge demand of mainstream Android users. 3
  • 4. SEVEN THINGS TO KNOW ABOUT DESIGNING FOR THE NEW ANDROID 1 Simplify design patterns for a user-centric experience One of the key principles of Android’s Design Guidelines is allow for a comfortable reading environment and can easily “Simplify My Life.” By using animation and transitions as be brought back by the unassuming navigation options at the direction, simplifying UI patterns, and relying heavier on bottom of the screen. This navigation is so simple that while imagery than on lengthy text, an Android application can using the application, you’re left thinking purely about the stand as the epitome of User Centric Design. content and not at all about how you got there. Google Current (Fig. 1) is a perfect example of these Navigational structure is important, but so is presentation. principles in practice. It visually presents everything the user When the two work together, the user shouldn’t even have to needs on the very first screen, making every possible action think about how they move between content. They can just clear and easy to follow across both the Action Bar and Side enjoy the experience. Drawer. When reading a blog, the action bar disappears to Fig. 1: Google Current makes use of an extremely simple design pattern © 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com 4
  • 5. 2 Create engaging experiences with gestures and transitions Choppy performance has long been a complaint As mobile design advances, we’ll be able to use this speed against 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,” 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.2 approximately 60 frames per second, allowing for smooth transitions and animations to augment the already simplified Feedly’s delightfully simple navigation (Fig. 2) uses almost design patterns. By combining this improvement with well nothing but a series of swipes. Their tappable icons have thought-out gestures (such as the Bezel Swipe), we can been whittled down to almost nothing, and you dismiss create a truly integrated experience for the user that seems side menus by flicking them closed. Tasks such as to transcend software entirely. marking, saving, or closing an article are activated by a series of cognitive gestures that make for a quick and human experience. Fig. 2: Feedly relies more on the user’s tactile expression than on memorizing a button-based navigation. It’s a great example of an application that uses transitions and gestures to create an immersive experience. 5
  • 6. 3 Use intents to build ‘application villages’ Intents are one of Android’s most powerful features. We’ll discuss intents in more detail later on in this series, They’re not new, but should certainly work their way into but when designing an Android application, it is important your design. to understand how using intents can make your feature set extraordinarily robust by simply utilizing functionality Intents are part of an extremely flexible system in which provided by other applications. Here is a great list of all the separate applications share information and speak to features you can easily utilize from other applications by each other. On iOS, you have to hard code an application’s using intents. communication with Facebook or Twitter. But with Android, any two applications can share information as long as they’re both fashioned to utilize intents. This creates a rich ecosystem of diverse actions and a massive network of sharing. Intents in Practice: I decided to take this picture of a Mutual Mobile t-shirt concept. From the gallery, I was able to choose from any other application on my device that allowed intents. Though I only wanted to document this image and notate it using Evernote, I could have posted it to Facebook, pinned it to Pinterest, geolocated it with Foursquare, or sent it to a friend over Skype. Or all of the above. And by combining intents, I could have pinned it to Pinterest and then commented about the pin on Facebook with just a few taps. 6
  • 7. 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 your unique user. Simplify actions using the But that same suit does not fit your typical Android user. heralded action bar, use gesture-based navigation rather than tab-like buckets, and focus more on the majority use If you follow the creative vision provided by Android’s cases than the infinite corner cases. Finally, avoid using iOS guidelines, it is clear that Android benefits from a much visual paradigms (button styles, icons, etc.) to carry your more simplified experience. For example, iPhone’s familiar application. It may be intuitive for Apple users, but this is Tab Bar shows the user all the key functionality that can likely not the case with 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. On iOS, the camera is a linear function along the bottom with everything else. 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 7
  • 8. 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 has as simplifying design patterns. We develop two flexible fueled efforts such as the Amazon Kindle, but it also layouts—tablet and phone—and utilize ICS’s framework for poses development challenges. We’ll discuss what adapting these to work across all screens. We also follow fragmentation means—and how to manage it—in a Android’s qualifying naming conventions (found here) to later piece. isolate assets based on screen size and density, and use 9patching to keep asset rendering 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 device 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 lifestyle. become boundless. 8
  • 9. 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 application Weather Eye is beautiful, minimalistic, and extremely easy to use. © 2012 Mutual Mobile, Inc. | (512) 615-1800 | mutualmobile.com 9
  • 10. THE NEW ANDROID HAS FINALLY EMERGED Over the last couple of years, Android has evolved leaps and We’ll take a closer look at this new Android experience in our bounds into a fascinating and innovative operating system. ongoing series: the Golden Age of Android. Its start was patchy, but constant iteration and user feedback have made the Android platform as viable to design for as iOS, and equally important to consider in any mobile strategy. Look out for our next piece on creating a beautiful experience across devices and screen sizes. 10
  • 11. ABOUT MUTUAL MOBILE Mutual Mobile has delivered over 400 mobile experiences We’ve received numerous awards and accolades, including across Android, iOS, Windows 8, and web. Our end-to-end recognition as a Forbes Most Promising Company, a 2012 solutions have delighted major clients including Google, Audi, Webby Nomination in the Retail/Tablet category, and a 2011 Cisco, and Xerox. We work to bring consumer-grade design ADDY Award from the AAF. Mutual Mobile is experienced to the enterprise, and in 2011 introduced the first Android at crafting mobile strategy that addresses enterprise-sized Human Interface Guidelines to encourage design consistency concerns and challenges to create efficiency, engagement, across Android. 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 11