ANDROID UX          & DESIGN                  ICE CREAM SANDWICH                          & JELLY BEANPresented byANDY FIT...
WHY ANDROID?  2008   first commercial Android devices released  2009   2.8% market share   12,000 activations daily  2010  ...
UX & DESIGN    Navigation & User Interface    Visual Design    The Android Ecosphere    Case Studies
NAVIGATION &USER INTERFACE
UP & BACK
UP & BACK: SIBLING SCREENS
UP & BACK: LINKED SCREENS
IntentA mechanism for one app to signal itwould like another apps assistance inperforming an action.
SHARING WITH INTENTS
SHARING WITH INTENTS
SHARING WITH INTENTS
ACTION BAR Top Level   Category View                             GMail
ACTION BAR Pageview Spinner                    GMail
ACTION BAR Google Play Books   Google Play Music                                         GMail
SCROLLABLE TABS Tab View         Horizontal Scrolling                              Google Play Music
FIXED TABS Tab View (Fixed)   Scrolling                                YouTube
FIXED TABS Tab View (Scrolled)   Landscape                       Tabs Nested in Action Bar                                ...
DRAWERS Top level view   Drawer                           YouTube
DRAWERS Drawer menu   Category menu                               YouTube
DRAWERS Detail view   Tabbed navigation                                   YouTube
VISUAL DESIGN
WHAT DOES ANDROID “LOOK” LIKE?
HOME SCREEN Android      iPhone
NOTIFICATIONS Android    iPhone
CALLS Android   iPhone
SETTINGS Android   iPhone
CALENDAR Android   iPhone
SHARING Android   iPhone
KEY DESIGN PRINCIPLES
“PURE ANDROID” Flat, but not 2D Elements glow Understated fields and elements Subtle top-light                     http://d...
TYPOGRAPHY
COLOR
ICONOGRAPHY
METRICS & GRID
Devices by Screen size & density as of Aug 1, 2012
SUPPORTING MULTIPLERESOLUTIONS  Example of app without support for different densities.  Example of app with that supports ...
SCALING
THE ANDROID ECOSPHERE
NOTIFICATIONS Expanded layouts
NOTIFICATIONS Actions Grouping
WIDGETS Information Widgets Collection Widgets Control Widgets
WIDGETS YouTube, AnyDO, BBC   YouTube
WIDGETS HTC Sense Email   Epicurious & Flipboard
WIDGETS Any.DO   Traffic Widget
OPEN SIGNAL MAPS              h"p://opensignalmaps.com/reports/fragmenta4on.php
MULTIPLE VIEWS
SINGLE VIEW WITHMULTIPLE PANES
STRETCH/COMPRESS
STACK
EXPAND & COLLAPSE
SHOW & HIDE
TRANSLATION:A BAD EXAMPLE
EPICURIOUSiPhone
EPICURIOUSAndroid
PORTING PITFALLS Ugly user interface Poor use of “Knowledge in the Head” Shortchanges device capabilities Require “hacks” ...
TRANSLATION:A GOOD EXAMPLE
EVERNOTE
EVERNOTE
DELIBERATE DESIGN Facilitates architectural parity across multiple contexts Leverages device specific “knowledge in the hea...
THANK YOU!
Android UX & Design
Upcoming SlideShare
Loading in …5
×

Android UX & Design

629 views
546 views

Published on

A talk I gave with Andy Fitzgerald on Android UX and Design patterns, practices, and trends. Presented at Übermind (in Seattle) on September 29th.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
629
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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!

×