Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

  • Be the first to comment


  2. 2. Android’s troubled history is overDesigning for Android used to be a uniquely terrible experience. It meant device fragmentation, a foggy and undefinednavigational structure, and clunky frame rates that crippled the user experience. And it meant sleepless nights rackingyour 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 designand 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.© 2012 Mutual Mobile, Inc. | (512) 615-1800 | 2
  3. 3. How Ice Cream Sandwich changed everythingAndroid’s been rapidly improving from version to version, The Evolution of an Android Application: Evernotebut most of those changes took place under the hood.Gingerbread, for example, introduced NFC. And it madeAndroid faster, smarter, and easier to understand. But likeits predecessors, it suffered from the same stilteduser 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 itsThe first major design shift occurred with Honeycomb, design was based closely on iOS. In 2011 they took a firstan innovative UI built specifically for tablets. It was beautiful, crack at the action bar and reorganizing the data to suitbut it was only for tablets. So they replaced this with Ice the platform. But performance was still an issue, and theCream Sandwich (ICS), the first Android framework built to application’s hierarchy descended screen by screen to createspan all phones and tablets. an overly dense experience. In 2012, they released their latest design. Utilizing Jelly Bean’s speed and patterns ofWhere Honeycomb hinted at the promise of more simplicity, they transformed their complicated program intostandardized 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 cognitiveand consistent experience across all phones and tablets.By introducing the Action Bar, for example, Android took its A note on user distributionfirst step towards consistent navigation. And the Android For the moment, most users are still runningteam even took a firm design stance with their definitive Gingerbread. But that’s not by choice; OS upgradesdesign guideline (Android’s Design Guidelines) complete are unfortunately at the behest of the devicewith an inspiring vision statement and an amazing amount providers. This makes it difficult to predict when weof instruction. will see the massive shift towards the new AndroidAs a result, today’s Android is smooth and graceful. frameworks, but at the very least we can expect aIts navigation is intuitive and wonderfully simplified. constant change as long-time users hit the end ofBut most importantly, it is consistent across all devices. their two-year upgrade cycles. And we can expectAndroid used to be the platform that challenged us an equally massive shift for consumer companiesdesigners to create quality applications. Now it challenges and the enterprise as they race to respond to theus to innovate. huge demand of mainstream Android users. 3
  4. 4. SEVEN THINGS TO KNOW ABOUT DESIGNING FOR THE NEW ANDROID 1Simplify design patterns for a user-centric experienceOne 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 thedirection, simplifying UI patterns, and relying heavier on bottom of the screen. This navigation is so simple that whileimagery than on lengthy text, an Android application can using the application, you’re left thinking purely about thestand 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 toneeds on the very first screen, making every possible action think about how they move between content. They can justclear 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 | 4
  5. 5. 2Create engaging experiences with gestures and transitionsChoppy performance has long been a complaint As mobile design advances, we’ll be able to use this speedagainst Android. 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,” 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.2approximately 60 frames per second, allowing for smoothtransitions and animations to augment the already simplified Feedly’s delightfully simple navigation (Fig. 2) uses almostdesign patterns. By combining this improvement with well nothing but a series of swipes. Their tappable icons havethought-out gestures (such as the Bezel Swipe), we can been whittled down to almost nothing, and you dismisscreate a truly integrated experience for the user that seems side menus by flicking them closed. Tasks such asto 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. 6. 3Use 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 importantyour design. to understand how using intents can make your feature set extraordinarily robust by simply utilizing functionalityIntents are part of an extremely flexible system in which provided by other applications. Here is a great list of all theseparate applications share information and speak to features you can easily utilize from other applications byeach 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 asthey’re both fashioned to utilize intents. This creates a richecosystem of diverse actions and a massive networkof 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. 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 your unique user. Simplify actions using theBut 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 useIf you follow the creative vision provided by Android’s cases than the infinite corner cases. Finally, avoid using iOSguidelines, it is clear that Android benefits from a much visual paradigms (button styles, icons, etc.) to carry yourmore simplified experience. For example, iPhone’s familiar application. It may be intuitive for Apple users, but this isTab 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 | 7
  8. 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. This hasas simplifying design patterns. We develop two flexible fueled efforts such as the Amazon Kindle, but it alsolayouts—tablet and phone—and utilize ICS’s framework for poses development challenges. We’ll discuss whatadapting these to work across all screens. We also follow fragmentation means—and how to manage it—in aAndroid’s qualifying naming conventions (found here) to later piece.isolate assets based on screen size and density, and use9patching to keep asset rendering 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 device 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 lifestyle.become boundless. 8
  9. 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 application Weather Eye is beautiful, minimalistic, and extremely easy to use.© 2012 Mutual Mobile, Inc. | (512) 615-1800 | 9
  10. 10. THE NEW ANDROID HAS FINALLY EMERGEDOver the last couple of years, Android has evolved leaps and We’ll take a closer look at this new Android experience in ourbounds into a fascinating and innovative operating system. ongoing series: the Golden Age of Android.Its start was patchy, but constant iteration and userfeedback have made the Android platform as viable todesign for as iOS, and equally important to consider in anymobile strategy. Look out for our next piece on creating a beautiful experience across devices and screen sizes. 10
  11. 11. ABOUT MUTUAL MOBILEMutual Mobile has delivered over 400 mobile experiences We’ve received numerous awards and accolades, includingacross Android, iOS, Windows 8, and web. Our end-to-end recognition as a Forbes Most Promising Company, a 2012solutions have delighted major clients including Google, Audi, Webby Nomination in the Retail/Tablet category, and a 2011Cisco, and Xerox. We work to bring consumer-grade design ADDY Award from the AAF. Mutual Mobile is experiencedto the enterprise, and in 2011 introduced the first Android at crafting mobile strategy that addresses enterprise-sizedHuman 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.Citations1 Android, Design Principles. Android, Design Principles. Android, Design Principles. T he Economist, Do Android Dream of Electric Cars? June 14, 2012. c net, How camera makers are getting their design groove on. October 1, 2012. C asio, Casio America Releases New Android POS Terminal for the Retail and Hospitality Industry. July 27, 2012. Images sourced from Android’s Design Guidelines.© 2012 Mutual Mobile, Inc. | (512) 615-1800 | 11