Android Design
Sankalp is an User Experience Designer at Mutual Mobile,
Inc. At Mutual Mobile, he has build mobile solutions for
finding ...
ANDROID, PURELY BY STATS!
Market share in Q2, 2013
80%
Distinct Android devices seen this year
11,868
Versions of Android ...
ANDROID, OVER THE YEARS
2009 2009 2009 2010 2010 2011 2011 2012
Cupcake
Donut
Eclair
Froyo
Gingerbread
Honeycomb
Icecream
...
FRAGMENTATION
OS Based
Source: Open Signal, July 2013
iOS
iOS 6 (95%)
iOS 5 (5%)
Earlier Version (1%)
Android
Jelly Bean (...
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 ...
MYTH #1
DESIGN FOR EVERY POSSIBLE DEVICE
Android’s flexible design framework allows us to
build across all modern devices ...
MYTH #2
LONGER DEVELOPMENT TIME
iOSANDROID
But today...
• Android provides have a very strong visual
design guidelines
In ...
Android isn’t constrained to phones and tablets it can power
everything from consumer electronics to satellites.
THINK OUT...
ANDROID IS MORE THAN MOBILE
Flexibility
Designing for Android requires that you’re flexible and
think beyond the immediate...
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 app...
NAVIGATION
Dashboard
Dashboards cant scroll. So
there can be limited items that
can be added to navigation.
Navigation Dra...
TABS
Static Tabs
Limited filters
Scrolling Tabs
Can accommodate as
many filters as you want
Stacked Tabs
On changing orien...
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...
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
...
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.and...
THANK YOU
sankalpjoshi@gmail.com
Questions
Android Design
Upcoming SlideShare
Loading in …5
×

Android Design

1,127 views

Published on

Published in: Mobile, Technology

Android Design

  1. 1. Android Design
  2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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%)
  6. 6. FRAGMENTATION Devices Source: Open Signal, July 2013
  7. 7. FRAGMENTATION AndroidiOS Screen Sizes Source: Open Signal, July 2013
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Android isn’t constrained to phones and tablets it can power everything from consumer electronics to satellites. THINK OUTSIDE THE POCKET
  12. 12. 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
  13. 13. JELLY BEAN Design Language
  14. 14. ACTION BAR 1 1 App Icon 2 2 View Control 3 3 Action Items 4 4 Action Overflow
  15. 15. 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
  16. 16. 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.
  17. 17. 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.
  18. 18. LISTS & GRIDS Lists Search results Feeds Timeline Settings Navigation Grids Images Icons Accessibility
  19. 19. 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
  20. 20. GOING THAT EXTRA MILE
  21. 21. EMPHASIZE ON CONTENT
  22. 22. AVOID REDUNDANCY
  23. 23. DONT OVERWHELM THE USER
  24. 24. BE CONSISTENT
  25. 25. DIGITAL OVER SKEUOMORPHIC
  26. 26. FEEDBACK WITH ANIMATIONS Google Now Facebook Chatheads
  27. 27. 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
  28. 28. DONT BE AFRAID OF THAT EMPTY SCREEN
  29. 29. SURPRISE USER IN A PLEASANT WAY
  30. 30. EXAMPLES
  31. 31. EXAMPLES
  32. 32. EXAMPLES
  33. 33. RESOURCES http://www.android-app-patterns.com http://androidniceties.tumblr.com http://mobile-patterns.com/ http://www.androiduipatterns.com/
  34. 34. THANK YOU sankalpjoshi@gmail.com
  35. 35. Questions

×