Android Design

I spoke recently at the Google Developers Group (GDG) Hyderabad at the Devfest 2013.

Transcript

1. Android Design
2. Sankalp is an User Experience Designer at Mutual Mobile, Inc. At Mutual Mobile, he has build mobile solutions for finding businesses, people and restaurants in the neighborhood, to creating sales tools for selling hi-tech products and building banking & financial services solutions among a few. As a designer he has always been intrigued by the man - machine interaction which drove him into the world of designing experiences for apps that are engaging and exciting for the user. He believes in simplicity and minimalism which reflects in his work. He has a Masters in Industrial Design from IIT Delhi. His other interests include traveling, reading, photography and typography. ABOUT ME
4. ANDROID, PURELY BY STATS! Market share in Q2, 2013 80% Distinct Android devices seen this year 11,868 Versions of Android still in use. 8 Android devices run Jelly Bean 37.9% Source: Open Signal, July 2013
5. ANDROID, OVER THE YEARS 2009 2009 2009 2010 2010 2011 2011 2012 Cupcake Donut Eclair Froyo Gingerbread Honeycomb Icecream Sandwich Jelly Bean KitKat 2013 Dark Ages Coming Of The Age
6. FRAGMENTATION OS Based Source: Open Signal, July 2013 iOS iOS 6 (95%) iOS 5 (5%) Earlier Version (1%) Android Jelly Bean (37.9%) Ice Cream Sandwich (23.3%) Honeycomb (0.1%) Gingerbread (34.1%) Froyo (3.1%) Eclair (3.1%) Donut (0.1%)
7. FRAGMENTATION Devices Source: Open Signal, July 2013
8. FRAGMENTATION Android iOS Screen Sizes Source: Open Signal, July 2013
9. MYTHS ABOUT ANDROID Myth 1 Android solutions must be designed for every possible device and form factor Myth 2 An Android solution takes longer to develop than an iOS solution
10. MYTH #1 DESIGN FOR EVERY POSSIBLE DEVICE Android’s flexible design framework allows us to build across all modern devices with just two optimized layouts — tablets and handhelds — that adjust to their surroundings 9-patch assets optimize images for any screen density
11. MYTH #2 LONGER DEVELOPMENT TIME iOS ANDROID But today... • Android provides have a very strong visual design guidelines In the Dark Days of Android: • Android visual design guidelines didn't exist • General approach for designing screens for Android was to mimic iOS • Screens were designed with widgets that needed to be customized so that they functioned like they would on the iOS platform
12. Android isn’t constrained to phones and tablets it can power everything from consumer electronics to satellites. THINK OUTSIDE THE POCKET
13. ANDROID IS MORE THAN MOBILE Flexibility Designing for Android requires that you’re flexible and think beyond the immediate device interface Android has been used to power TVs, cars, satellites, consumer devices, household electronics, and more Android now supports multiple user logins on the same tablet Connected Android can fuel a range of devices across a massive ecosystem Seamless Fluid experience across devices
14. JELLY BEAN Design Language
15. ACTION BAR 1 1 App Icon 2 2 View Control 3 3 Action Items 4 4 Action Overflow
16. ACTION BAR Split Action Items are moved to the bottom action bar which behaves like a Tool bar Contextual Action Items appear at the bottom as the user selects items on the list view
17. NAVIGATION Dashboard Dashboards cant scroll. So there can be limited items that can be added to navigation. Navigation Drawer Drawer can scroll. Also it uses Accordion Menu / List View of items.
18. TABS Static Tabs Limited filters Scrolling Tabs Can accommodate as many filters as you want Stacked Tabs On changing orientation to landscape the Tabs become integral part of the action bar.
19. LISTS & GRIDS Lists Search results Feeds Timeline Settings Navigation Grids Images Icons Accessibility
20. ALERTS & FEEDBACK Dialog Boxes Takes feedback from the user Alert Views Alerts the user in advance about possible outcomes of any action Pop Ups Provides user with various Share options Toasts Provides the user with Feedback about the completion of an Action
21. GOING THAT EXTRA MILE
22. EMPHASIZE ON CONTENT
23. AVOID REDUNDANCY
24. DONT OVERWHELM THE USER
25. BE CONSISTENT
26. DIGITAL OVER SKEUOMORPHIC
27. FEEDBACK WITH ANIMATIONS Google Now Facebook Chatheads
28. SCALABLE TO VARIOUS FORM FACTORS Mobile Tablet Chromebook Don’ts Tablet Apps are not scaled up versions of Phone apps Do’s Design Tablet app as per the available real estate on the tablet screen Use Grid System Arrange data in the form of information cards which can be arranged as per the form factor
29. DONT BE AFRAID OF THAT EMPTY SCREEN
30. SURPRISE USER IN A PLEASANT WAY
31. EXAMPLES
32. EXAMPLES
33. EXAMPLES
34. RESOURCES http://www.android-app-patterns.com http://androidniceties.tumblr.com http://mobile-patterns.com/ http://www.androiduipatterns.com/
35. THANK YOU sankalpjoshi@gmail.com
36. Questions