ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Android Design

•
•
Sankalp Joshi
Sankalp Joshi

Sankalp is a user experience designer at Mutual Mobile who has built mobile solutions for finding local businesses and restaurants. He believes in simplicity and minimalism in design. His interests include traveling, reading, photography and typography. The document then provides statistics on Android's market share and version fragmentation over time, debunks myths about developing for Android, and outlines Google's visual design guidelines for Jelly Bean, including the action bar, navigation patterns, lists and grids, alerts and feedback. It emphasizes best practices like focusing on content, avoiding redundancy and overwhelming the user, being consistent, preferring digital over skeuomorphic design, using animations and scaling interfaces for different devices.

1 of 36
Android Design
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
Android Design
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
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
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%)
FRAGMENTATION Devices Source: Open Signal, July 2013
FRAGMENTATION AndroidiOS Screen Sizes Source: Open Signal, July 2013
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
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
MYTH #2 LONGER DEVELOPMENT TIME iOSANDROID 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
Android isn’t constrained to phones and tablets it can power everything from consumer electronics to satellites. THINK OUTSIDE THE POCKET
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
JELLY BEAN Design Language
ACTION BAR 1 1 App Icon 2 2 View Control 3 3 Action Items 4 4 Action Overflow
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
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.
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.
LISTS & GRIDS Lists Search results Feeds Timeline Settings Navigation Grids Images Icons Accessibility
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
GOING THAT EXTRA MILE
EMPHASIZE ON CONTENT
AVOID REDUNDANCY
DONT OVERWHELM THE USER
BE CONSISTENT
DIGITAL OVER SKEUOMORPHIC
FEEDBACK WITH ANIMATIONS Google Now Facebook Chatheads
SCALABLE TO VARIOUS FORM FACTORS Mobile TabletChromebook 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
DONT BE AFRAID OF THAT EMPTY SCREEN
SURPRISE USER IN A PLEASANT WAY
EXAMPLES
EXAMPLES
EXAMPLES
RESOURCES http://www.android-app-patterns.com http://androidniceties.tumblr.com http://mobile-patterns.com/ http://www.androiduipatterns.com/
THANK YOU sankalpjoshi@gmail.com
Questions

More Related Content

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%)
  • 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 iOSANDROID 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
  • 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
  • 27. FEEDBACK WITH ANIMATIONS Google Now Facebook Chatheads
  • 28. SCALABLE TO VARIOUS FORM FACTORS Mobile TabletChromebook 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