Android UX & Design

1,941 views

Published on

A talk I gave with designer Jesse Weed on Android UX and Design patterns, practices, and trends. Presented at Übermind (in Seattle) on August 29th.

[Originally uploaded to Slideshare August 29, 2012]

Published in: Design, Technology, Business

Android UX & Design

  1. 1. ANDROID UX & DESIGN ICE CREAM SANDWICH & JELLY BEANPresented byANDY FITZGERALDJESSE WEED
  2. 2. WHY ANDROID? 2008 first commercial Android devices released 2009 2.8% market share 12,000 activations daily 2010 32% market share 362,000 activations daily 2012 59% market share over 1 million activations daily
  3. 3. UX & DESIGN Navigation & User Interface Visual Design The Android Ecosphere Case Studies
  4. 4. NAVIGATION &USER INTERFACE
  5. 5. UP & BACK
  6. 6. UP & BACK: SIBLING SCREENS
  7. 7. UP & BACK: LINKED SCREENS
  8. 8. IntentA mechanism for one app to signal itwould like another apps assistance inperforming an action.
  9. 9. SHARING WITH INTENTS
  10. 10. SHARING WITH INTENTS
  11. 11. SHARING WITH INTENTS
  12. 12. ACTION BAR Top Level Category View GMail
  13. 13. ACTION BAR Pageview Spinner GMail
  14. 14. ACTION BAR Google Play Books Google Play Music GMail
  15. 15. SCROLLABLE TABS Tab View Horizontal Scrolling Google Play Music
  16. 16. FIXED TABS Tab View (Fixed) Scrolling YouTube
  17. 17. FIXED TABS Tab View (Scrolled) Landscape Tabs Nested in Action Bar YouTube
  18. 18. DRAWERS Top level view Drawer YouTube
  19. 19. DRAWERS Drawer menu Category menu YouTube
  20. 20. DRAWERS Detail view Tabbed navigation YouTube
  21. 21. VISUAL DESIGN
  22. 22. WHAT DOES ANDROID “LOOK” LIKE?
  23. 23. HOME SCREEN Android iPhone
  24. 24. NOTIFICATIONS Android iPhone
  25. 25. CALLS Android iPhone
  26. 26. SETTINGS Android iPhone
  27. 27. CALENDAR Android iPhone
  28. 28. SHARING Android iPhone
  29. 29. KEY DESIGN PRINCIPLES
  30. 30. “PURE ANDROID” Flat, but not 2D Elements glow Understated fields and elements Subtle top-light http://developer.android.com/design
  31. 31. TYPOGRAPHY
  32. 32. COLOR
  33. 33. ICONOGRAPHY
  34. 34. METRICS & GRID
  35. 35. Devices by Screen size & density as of Aug 1, 2012
  36. 36. SUPPORTING MULTIPLERESOLUTIONS Example of app without support for different densities. Example of app with that supports different densities.
  37. 37. SCALING
  38. 38. THE ANDROID ECOSPHERE
  39. 39. NOTIFICATIONS Expanded layouts
  40. 40. NOTIFICATIONS Actions Grouping
  41. 41. WIDGETS Information Widgets Collection Widgets Control Widgets
  42. 42. WIDGETS YouTube, AnyDO, BBC YouTube
  43. 43. WIDGETS HTC Sense Email Epicurious & Flipboard
  44. 44. WIDGETS Any.DO Traffic Widget
  45. 45. OPEN SIGNAL MAPS h"p://opensignalmaps.com/reports/fragmenta4on.php
  46. 46. MULTIPLE VIEWS
  47. 47. SINGLE VIEW WITHMULTIPLE PANES
  48. 48. STRETCH/COMPRESS
  49. 49. STACK
  50. 50. EXPAND & COLLAPSE
  51. 51. SHOW & HIDE
  52. 52. TRANSLATION:A BAD EXAMPLE
  53. 53. EPICURIOUSiPhone
  54. 54. EPICURIOUSAndroid
  55. 55. PORTING PITFALLS Ugly user interface Poor use of “Knowledge in the Head” Shortchanges device capabilities Require “hacks” that lead to poor performance and unreliability Create poor forward compatibility of design work Generate aggravating user experiences (& resulting negative feedback and brand damage)
  56. 56. TRANSLATION:A GOOD EXAMPLE
  57. 57. EVERNOTE
  58. 58. EVERNOTE
  59. 59. DELIBERATE DESIGN Facilitates architectural parity across multiple contexts Leverages device specific “knowledge in the head” Leverages device and context specific capabilities Is future friendly Fits naturally into device ecosystems
  60. 60. THANK YOU!

×