• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing the New Android Experience - The Golden Age of Android
 

Designing the New Android Experience - The Golden Age of Android

on

  • 1,238 views

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 ...

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

Statistics

Views

Total Views
1,238
Views on SlideShare
1,202
Embed Views
36

Actions

Likes
4
Downloads
2
Comments
0

1 Embed 36

http://insightmm.tumblr.com 36

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing the New Android Experience - The Golden Age of Android Designing the New Android Experience - The Golden Age of Android Document Transcript

    • The Golden Age of AndroidDesigning the NewAndroid Experience
    • A new Android has emergedDesigning for Android used to be a uniquely challenging experience. It meant managing device fragmentation, maneuveringa foggy navigational structure, and dealing with clunky frame rates that limited the user experience. And it meant sleeplessnights 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 performanceand 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 beforeIce 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
    • How Ice Cream Sandwich changed everythingAndroid’s been rapidly improving from version to version, By introducing the Action Bar, for example, Android took itsbut most of those changes took place under the hood. first step towards consistent navigation. And the AndroidGingerbread, for example, made Android faster, smarter, and team even took a firm design stance with their definitiveeasier to understand. But like its predecessors, it suffered design guidelines (Android’s Design Guidelines) completefrom 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 verboseThe first major design shift occurred in 2011 withHoneycomb, an innovative UI built specifically for tablets. Itwas beautiful, but it was only for tablets. So they replaced itwith Ice Cream Sandwich (ICS), the first Android frameworkto 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 usand consistent experience across all phones and tablets. designers to create quality applications. Now it challenges us to innovate. 3
    • The evolution of an Android application: EvernoteEvernote released their first Android application in 2010. application’s hierarchy descended screen by screen to createIt suffered from jerky performance, lacked polish, and its an overly dense experience. In 2012, they released theirdesign was based closely on iOS. In 2011 they took a first latest design. Utilizing Jelly Bean’s speed and patterns ofcrack at the action bar and reorganizing the data to suit simplicity, they transformed their complicated program intothe 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
    • SIX TIPS FOR THE NEW ANDROID EXPERIENCE 1Design for your users’ immediate needsNavigational structure is important, but so is presentation. Google Current (Fig. 1) is a perfect example of theseWhen the two work together, the user shouldn’t even have to principles in practice. It visually presents everything the userthink about how they move between content. They should just needs on the very first screen, making every possible actionenjoy the experience. clear and easy to follow across both the Action Bar and Side Drawer. When reading a blog, the action bar disappears toGreat Android design should never be a burden to the user, allow for a comfortable reading environment and can easilybut instead act as a guide that shows only the most relevant be brought back by the unassuming navigation options at theinformation at any given time. By using animation and bottom of the screen. This navigation is so simple that whiletransitions as direction, simplifying UI patterns, and relying using the application, you’re left thinking purely about theheavier 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 ofuser-centered design. Fig. 1: Google Current makes use of an extremely simple design pattern. 5
    • 2Create engaging experiences with gestures and transitionsChoppy performance has long been a complaint against As mobile design advances, we’ll be able to use this speedAndroid. But no more. to create even more tactile and cognitive experiences. Google states that “real objects are more fun that buttonsAt the unveiling of Jelly Bean, Google revealed the suitably and menus,”1 and we’re now seeing designers forgo heavynamed “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 smoothtransitions and animations to augment the alreadysimplified design patterns. By combining this improvementwith well thought-out gestures, we can create a trulyintegrated experience for the user that seems to transcendsoftware 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
    • 3Tear down the walls between applicationsOn iOS, you have to hard code an application’s separate applications share information and speak tocommunication with other applications such as Facebook each other. They’re not new, but should certainly work theiror 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 extraordinarilywork together. This creates a rich ecosystem of diverse robust by simply utilizing functionality provided byactions and a massive network of sharing. other applications. Here is a great list of all the featuresThe system that makes this work is called intents. you can easily utilize from other applications byIntents 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
    • 4Porting 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 clearmany early applications pulled heavily from iOS patterns. hierarchy. Android, however, abides by the philosophy ofSure, this didn’t create the best Android experience, but it “only show me what I need when I need it,” meaning even ifcreated 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 refinedAndroid 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 differentplatforms’ 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-likeIf you follow the creative vision provided by Android’s buckets. Finally, avoid using iOS visual paradigms (buttonguidelines, it is clear that Android benefits from a much styles, icons, etc.) to carry your application. It may bemore simplified experience. For example, iPhone’s familiar intuitive for Apple users, but this is likely not the case withTab 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
    • 5Design with flexibility in mindAndroid is an open OS. This has helped Android’s quick riseto 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, ICShas helped reign in the problem of developing across screen Fragmentation goes well beyond designing forsizes, devices, and resolutions. different devices and screen sizes. It refers to how manufacturers actually customize and releaseToday, overcoming Android’s device diversity is as simple distinct versions of the Android framework. Thisas simplifying design patterns. We develop just a few has fueled efforts such as the Amazon Kindle, but itflexible layouts—across tablet and phone—and utilize ICS’s also poses development challenges that Android isframework for adapting these to work across any screen actively working to eliminate.size. We also follow Android’s qualifying naming conventionsto isolate assets based on screen size and density, and makesure to keep assets global and flexible.We’ll explore how to develop across device sizes in muchgreater detail in our next piece, but it’s helpful to know thatthis is a well-documented, manageable task. 6Think outside the pocketThe Android framework isn’t limited to mobile devices, So the true conversation of Android design lies beyondand 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 allcar with an Android console4, Nokia and Nikon have released others—from mobile to household appliances to industrialAndroid-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 notbe using the same code, the possibilities for design just a series of applications, but as an entire ecosystem.become boundless. 9
    • 7Android applications can be beautiful tooAndroid’s been treated as the ugly mobile OS for too However, considering what we know today about designinglong now. This is no surprise, considering the difficult for Android, beautiful design is absolutely obtainable forlearning curve to handling design assets and building the platform. By following Android’s creative vision andacross a fragmented device landscape with no universal being conscious of fragmentation and the limitations thatdesign 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
    • THE NEW ANDROID HAS FINALLY EMERGEDOver the last couple of years, Android has evolved leaps andbounds into a fascinating and innovative operating system.Its start was patchy, but constant iteration and user feedbackhave made the Android platform as viable to design for asiOS and equally essential in any mobile strategy. Up next: learn what it takes to create beautiful experiences across all devices and screen sizes. 11
    • ABOUT MUTUAL MOBILEMutual Mobile comprises over 300 mobile specialists across We’ve received numerous awards and accolades, including aAndroid, iOS, Windows 8, and web. Our end-to-end solutions CES Innovations Award for creating an Android-enabled radarhave 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 strategyInterface Guidelines to encourage design consistency that addresses enterprise-sized concerns and challengesacross Android. to create efficiency, engagement, and measurable value for users—whether those users are employees or consumers.Citations1 Android, Design Principles. http://developer.android.com/design/get-started/creative-vision.html2 Android, Design Principles. http://developer.android.com/design/get-started/principles.html3 Android, Design Principles. http://developer.android.com/design/get-started/principles.html4 T  he Economist, Do Android Dream of Electric Cars? June 14, 2012. http://www.economist.com/blogs/babbage/2012/06/car-infotainment5 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