Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Android Design patternsGiorgio Venturi
User Experience lead - Closertag
twitter: @gventuri"
Who am I?Information Architecture, UserresearchFounder of Closertag, design agencydesigning for Android since early 2009On...
HOW DO I CREATE A GREATUSER EXPERIENCE?
Five layers of user experience      Value   proposition   Structure                                Behaviour              ...
Five layers of user experience              Value           proposition       Structure                                   ...
WHAT IS A DESIGN PATTERN?
It’s a design solution to a recurringproblem               Giorgio Venturi   twitter: gventuri
It’s a design solution to a recurringproblemCan	  a	  design	  paAern	  help	  us	  designing	  a	  great	  user	  experie...
THINGS CHANGE… ISN’T IT?
The evolution of the Android UIGoogle	  IO	  2009	                       Google	  IO	  2010	                     Google	  ...
The evolution of the Android UIGoogle	  IO	  2009	                       Google	  IO	  2010	               Google	  IO	  2...
UI challengesNavigationInformation visualisationOn screen interactionNotifications & responsivenessEmotion & Expression   ...
NAVIGATION
Naviga?on	  answers	  to	  2	  fundamental	  ques?ons:	  	  •  here	  am	  I?	  	   W•  here	  can	  I	  go?	  	   W
Use shallow structures      /!"0$)..$       %)123&!       %)*+,*-$   0),*$                 0),*$                  0),*$   ...
Use shallow structures                /!"0$)..$                 %)123&!                  %)*+,*-$     0),*$               ...
Shun deep hierarchies                  +,-."((!"*#/0),1                     )23),#"!"((          -4),4%)5            ("&) ...
Shun deep hierarchies                                        +,-."((!"*#/0),1                                           )2...
Up and back in Android         Contacts	                                                       Inbox	       Contact	  deta...
Contacts	                                                            Inbox	                 Back	                         ...
Contacts	                                                            Inbox	                 Back	                         ...
Contacts	                                                                      Inbox	                                     ...
Action bar           Up to           HOME          SCREEN             +         BRANDINGIntroduced	  at	  Google	  Io	  20...
Tabs       Giorgio Venturi   twitter: gventuri
TabsThey	  expose	  main	  func?onality	  &	  views.	  They	  help	  building	  a	  mental	  model	  of	  the	  app.	  The...
Dashboards             Giorgio Venturi   twitter: gventuri
DashboardsEntrypoint	  screen	  into	  the	  main	  views.	  	  It	  was	  made	  popular	  by	  Facebook	  on	  iOS.	  	 ...
Honeycomb action barAction BarGeneral organization๏ App icon๏ View details Home        View                               ...
Action bar on large and small screensAction BarPhones andsmaller screens39                   Giorgio Venturi   twitter: gv...
Carousel tabsAka	  ‘sliding	  tabs’	  	  They	  are	  used	  to	  pivot	  between	  different	  views	  in	  the	  same	  c...
DO NOT USE…
Menu navigationDiscovery	  problem:	  out	  of	  sight,	  out	  of	  mind	   gventuri                                     ...
Custom navigation             Giorgio Venturi   twitter: gventuri
Custom navigationNobody	  is	  going	  to	  give	  you	  a	  prize	  for	  re-­‐inven?ng	  basic	  naviga?on.	  	  	  Link...
Custom navigation - Spotify              Giorgio Venturi   twitter: gventuri
Custom navigation - SpotifySPOTIFY	  is	  using	  a	  naviga?on	  metaphor	  from	  Cupcake,	  the	  ‘tray’.	  	  	  While...
INFORMATION VISUALISATION
Portrait dominant or fluid?                                                ?	                Giorgio Venturi   twitter: gv...
Portrait dominant or fluid?                                                                                      ?	  Un?l	...
Consider the primary use of the app              Giorgio Venturi   twitter: gventuri
Consider the primary use of the appMake	  sure	  you	  understand	  where	  your	  applica?on	  is	  going	  to	  be	  use...
ListsContacts                                   ContactsDisplay options            Header                     Me          ...
2D carousels               Giorgio Venturi   twitter: gventuri
3D carouselsBeyond the ListExamples66                    Giorgio Venturi   twitter: gventuri
Use of fragments             Giorgio Venturi   twitter: gventuri
Use of fragmentsBefore	  the	  release	  of	  honeycomb,	  you	  had	  to	  develop	  completely	  separate	  views	  to	 ...
ON SCREEN INTERACTION
Toolbars & Actions frames             Giorgio Venturi   twitter: gventuri
Toolbars & Actions framesFixed	  ac?ons	  frame	  at	  the	  boAom,	  allows	  users	  to	  quickly	  execute	  an	  ac?on...
Modal dialogues             Giorgio Venturi   twitter: gventuri
Modal dialoguesThere’s	  way	  too	  many	  dialogues	  in	  Android,	  this	  one	  is	  especially	  threatening.	  	  I...
Forms: use tooltips                                     | Enter Username                                i                 ...
Use the appropriate input type for textfield               Giorgio Venturi   twitter: gventuri
NOTIFICATIONS &RESPONSIVENESS
Design for responsiveness, do notinterrupt users or make him wait              Giorgio Venturi   twitter: gventuri
Toast notifications                  from androidpatterns.com               Giorgio Venturi    twitter: gventuri
Toast notifications                                                       from androidpatterns.comWhen	  no	  response	  i...
Status bar notification               Giorgio Venturi   twitter: gventuri
Status bar notificationUse	  this	  when	  ac?on	  is	  applicable	  .	  E.g.	  previewing	  the	  uploaded	  image	      ...
EMOTION & EXPRESSION
Develop a visual language              Giorgio Venturi   twitter: gventuri
Develop a visual languageThe	  quality	  of	  your	  visual	  language	  is	  a	  strong	  cue	  towards	  the	  quality	 ...
Take care in designing your icons              Giorgio Venturi   twitter: gventuri
Take care in designing your iconsPurchase	  decisions	  are	  made	  on	  an	  impulse.	  	  A	  well	  designed	  icon	  ...
Use of splash screens              Giorgio Venturi   twitter: gventuri
Use of splash screensNot	  compulsory,	  but	  it	  is	  especially	  useful	  to	  show	  while	  app	  preloads	  librar...
IN CONCLUSION
Design strategiesUnderstand who’s it for, go and talkto themInvolve a designer (or two)Prototype & testAnalytics          ...
Thank youFollow us on Twitter@gventuri@closertag
Droidcon 2011 - Android Design patterns
Upcoming SlideShare
Loading in …5
×

Droidcon 2011 - Android Design patterns

16,274 views

Published on

Android apps have been heavily criticised in the past due to poor user experience. One of the reasons why this happened is lack of solid & consistent UI patterns.
For example, how do you navigate between the different sections of the app? How do you provide visual feedback avoiding interrupting the user?

The goal of this session is to look at some of the emerging best practices on the Android Market and analyse best practices in navigation, fluid & responsive interaction and information visualisation.

PS. turn speaker notes ON to display more details

Published in: Design, Technology

Droidcon 2011 - Android Design patterns

  1. 1. Android Design patternsGiorgio Venturi
User Experience lead - Closertag
twitter: @gventuri"
  2. 2. Who am I?Information Architecture, UserresearchFounder of Closertag, design agencydesigning for Android since early 2009One of the lead UX architects for theSkype application in 2010 Giorgio Venturi twitter: gventuri
  3. 3. HOW DO I CREATE A GREATUSER EXPERIENCE?
  4. 4. Five layers of user experience Value proposition Structure Behaviour Code Visual design Giorgio Venturi twitter: gventuri
  5. 5. Five layers of user experience Value proposition Structure Behaviour Code Visual designUser  experience  can  be  decomposed  into  its  five  building  components.      However,  users  will  experience  all  those  layers  as  a  whole  –  not  separately.    You  won’t  have  a  great  user  experience  unless  you  address  these  five  layers  holis?cally   Giorgio Venturi twitter: gventuri
  6. 6. WHAT IS A DESIGN PATTERN?
  7. 7. It’s a design solution to a recurringproblem Giorgio Venturi twitter: gventuri
  8. 8. It’s a design solution to a recurringproblemCan  a  design  paAern  help  us  designing  a  great  user  experience?      Yes,  they  can!    It’s  also  about  not  reinven?ng  the  wheel.  People  want  to  use  what  they  have  learnt  already  using  the  phone.      Hence,  know  your  paAerns  and  use  them  to  build  your  applica?ons.      Don’t  use  paAerns  you  have  seen  on  other  plaGorms  like  iOS,  use  Android  paAerns.     Giorgio Venturi twitter: gventuri
  9. 9. THINGS CHANGE… ISN’T IT?
  10. 10. The evolution of the Android UIGoogle  IO  2009   Google  IO  2010   Google  IO  2011  Cupcake   Froyo   Gingerbread/Honeycomb  First  session  at  Google  IO   First  presenta?on  on   Introducing  the  new  on  UI  design   PaAerns  based  on  the   honeycomb  paAerns   TwiAer  app  Hypertext  nav   Ac?on  bar  v1   Ac?on  bar  v2  No?fica?ons   Quick  ac?on/contact   Carousels  Sharing  Intents   Search  filters  Only  normal,  mid-­‐density   Support  for  mul?ple  screen   Fluid  design:  screens   sizes   Fragments   Giorgio Venturi twitter: gventuri
  11. 11. The evolution of the Android UIGoogle  IO  2009   Google  IO  2010   Google  IO  2011  Cupcake   Froyo   Gingerbread/Honeycomb  First  session  at  Google  IO   First  presenta?on  on   Introducing  the  new  on  UI  design   PaAerns  based  on  the   honeycomb  paAerns   TwiAer  app  Hypertext  nfor  Android  back  in  2009  was  very  different  from  war  v2  s  designing  Designing   av   Ac?on  bar  v1   Ac?on  b hat  iNo?fica?ons  in  2011    for  Android   Quick  ac?on/contact   Carousels  Sharing  Intents   Search  filters  The  Google  Android  team  has  been  gradually  addressing  several  design  Only  normal,  mid-­‐density  with  naviga?on.    challenges  –  especially   Support  for  mul?ple  screen   Fluid  design:  screens  formidable  challenge  is  designing  for  a  wide  range  of  form  factors  Also,  a   sizes   Fragments  (candybar,  tablets,  keyboards,  etc)  &  screen  resolu?ons  &  densi?es       Giorgio Venturi twitter: gventuri
  12. 12. UI challengesNavigationInformation visualisationOn screen interactionNotifications & responsivenessEmotion & Expression Giorgio Venturi twitter: gventuri
  13. 13. NAVIGATION
  14. 14. Naviga?on  answers  to  2  fundamental  ques?ons:    •  here  am  I?     W•  here  can  I  go?     W
  15. 15. Use shallow structures /!"0$)..$ %)123&! %)*+,*-$ 0),*$ 0),*$ 0),*$ .)-& ,&4 ,&4 ,&4 !""#$%&&% %&&%$( Giorgio Venturi twitter: gventuri
  16. 16. Use shallow structures /!"0$)..$ %)123&! %)*+,*-$ 0),*$ 0),*$ 0),*$ .)-& ,&4 ,&4 ,&4 !""#$%&&% %&&%$(General  rule:    Mobile  applica?ons  should  have  a  shallow  hierarchy  &  be  light  on  func?onality.      If  possible,  try  simplifying  &  reducing  the  amount  of  func?on  the  app  has;  don’t  try  adding  several  nested  features.   Giorgio Venturi twitter: gventuri
  17. 17. Shun deep hierarchies +,-."((!"*#/0),1 )23),#"!"(( -4),4%)5 ("&) ,--3!)4)! *( !"#$%#& ("&) !)4)!6 !)4)!7 Giorgio Venturi twitter: gventuri
  18. 18. Shun deep hierarchies +,-."((!"*#/0),1 )23),#"!"(( -4),4%)5 ("&) ,--3!)4)! *( !"#$%#& ("&) !)4)!6 !)4)!7Some?mes  this  is  just  not  possible  (e.g.  Facebook,  Linkedin,  etc).    In  these  case,  consider  the  most  important  view  or  feature  in  your  app  (e.g.  contacts  view  in  Skype,  Feed  for  Facebook,  etc)  and  make  user  land  on  that  screen.    Allow  then  people  can  go  to  the  overview  screen,  by  using  the  ac?on  bar  (see  next  slides)   Giorgio Venturi twitter: gventuri
  19. 19. Up and back in Android Contacts   Inbox   Contact  details   Compose  email   Giorgio Venturi twitter: gventuri
  20. 20. Contacts   Inbox   Back   Back  Contact  details   Compose  email   Giorgio Venturi twitter: gventuri
  21. 21. Contacts   Inbox   Back   Up   Back  Contact  details   Compose  email   Giorgio Venturi twitter: gventuri
  22. 22. Contacts   Inbox   Back   Up   Back  From  Honeycomb  moving  forward:  -­‐  SYSTEM  BACK  navigates  history  between  related  screens      -­‐  APPLICATION  UP  navigates  hierarchy  within  a  single  app   Contact  details   Compose  email  This  issue  has  been  discussed  at  length  in:    Designing  and  ImplemenIng  Android  UIs  for  Phones  and  Tablets,  Google  IO  2011  This  has  been  a  great  area  of  concern  as  the  back  buAon  brings  you  back  in  the  history  stack   Giorgio Venturi twitter: gventuri
  23. 23. Action bar Up to HOME SCREEN + BRANDINGIntroduced  at  Google  Io  2010  with  the  TwiAer  app,  it  quickly  spread  to  other  apps  (but  it  is  far  from  being  ubiquitous)   Giorgio Venturi twitter: gventuri
  24. 24. Tabs Giorgio Venturi twitter: gventuri
  25. 25. TabsThey  expose  main  func?onality  &  views.  They  help  building  a  mental  model  of  the  app.  They  show  you  where  you  are  and  where  you  can  go.      You  can  use  icons,  labels  or  a  mix  of  both  according  to  screen  sizes.    You  can’t  go  wrong  with  tabs  really,  they  have  been  here  since  1996  and  they  are  here  to  stay.     Giorgio Venturi twitter: gventuri
  26. 26. Dashboards Giorgio Venturi twitter: gventuri
  27. 27. DashboardsEntrypoint  screen  into  the  main  views.    It  was  made  popular  by  Facebook  on  iOS.    We  don’t  par?cularly  like  this  approach,  it’s  a  bit  lazy  &  it  is  also  an  excuse  for  feature  bloat.      The  main  problem  is  that  if  your  app  has  a  dominant  view  (e.g.  contacts)  it  will  make  it  one  step  further  &  it  adds  an  extra  level  in  the  naviga?on.  It  hides  informa?on.    In  fact  twiAer  has  recently  removed  the  dashboard  and  gone  back  to  tabs  view  –  for  good.     Giorgio Venturi twitter: gventuri
  28. 28. Honeycomb action barAction BarGeneral organization๏ App icon๏ View details Home View Action๏icon Action buttons details buttons WHERE WHAT CAN I WHAT CAN I I AM? SEE? DO HERE? It  works  par?cularly  well  with  large  screens  &  tablets  -­‐    as  you  can  imagine.  This   approach  is  discussed  in    31 Designing  and  ImplemenIng  Android  UIs  for  Phones  and  Tablets,   Google  IO  2011     Giorgio Venturi twitter: gventuri
  29. 29. Action bar on large and small screensAction BarPhones andsmaller screens39 Giorgio Venturi twitter: gventuri
  30. 30. Carousel tabsAka  ‘sliding  tabs’    They  are  used  to  pivot  between  different  views  in  the  same  category  –  for  example  browsing  your  circles,  or  filtering  between  different  sec?ons  in  the  market  –  featured,  top  paid,  free,  etc.    The  beauty  is  that  users  can  either  tap  or  swipe  (on  any  part  of  the  screen)    Recent  research  from  N&N  Group  claims  that  people  DO  GET  swiping.   Giorgio Venturi twitter: gventuri
  31. 31. DO NOT USE…
  32. 32. Menu navigationDiscovery  problem:  out  of  sight,  out  of  mind   gventuri Giorgio Venturi twitter:
  33. 33. Custom navigation Giorgio Venturi twitter: gventuri
  34. 34. Custom navigationNobody  is  going  to  give  you  a  prize  for  re-­‐inven?ng  basic  naviga?on.      Linkedin  for  example  is  trying  to  reinvent  the  wheel  by  having  a  custom  swipe  gesture  on  the  ac?on  bar.    There’s  another  problem  with  this  screen:  the  ?les  beneath  seem  a  image  carousel  –  but  they  are  not.   Giorgio Venturi twitter: gventuri
  35. 35. Custom navigation - Spotify Giorgio Venturi twitter: gventuri
  36. 36. Custom navigation - SpotifySPOTIFY  is  using  a  naviga?on  metaphor  from  Cupcake,  the  ‘tray’.      While  the  tray  used  to  be  part  of  the  framework,  it  has  now  become  obsolete  from  2.1+  onwards    Avoid  using  the  tray  from  now  on   Venturi Giorgio twitter: gventuri
  37. 37. INFORMATION VISUALISATION
  38. 38. Portrait dominant or fluid? ?   Giorgio Venturi twitter: gventuri
  39. 39. Portrait dominant or fluid? ?  Un?l  Android  1.6,  OS  had  a  fluid  behaviour.    Unfortunately,  it  is  not  very  efficient  &  to  design  the  app  twice.    If  you  have  a  limited  set  of  resources,  to  design  the  app  for  one  orienta?on  only     Giorgio Venturi twitter: gventuri
  40. 40. Consider the primary use of the app Giorgio Venturi twitter: gventuri
  41. 41. Consider the primary use of the appMake  sure  you  understand  where  your  applica?on  is  going  to  be  used  most  when  deciding  the  primary  orienta?on.    With  laid  back  interac?on,  make  landscape  the  primary  view    With  ‘on  the  move’  interac?on  (e.g.  loca?on  btwitter: gventuri Giorgio Venturi ased  services),  s?ck  to  portrait  orienta?on.    
  42. 42. ListsContacts ContactsDisplay options Header Me +1234567890123Only contacts withphones Toggle ARecent activities Display Name Display Latest activityEnabled status Quick scroll Display Name Should be used toSort list by Latest activity position the userFirst name quickly in a section of Display Name the list.View contact names as Latest activityFirst name, surname Display Name Import/export contactsImport/export contacts Latest activity B Docking headersImport contacts Display Name They can dock at the A Display Name Latest activity top of the viewport Latest activity when scrolling down. BExport contacts Call to Action Display Name Display NameTo local storage Latest activity Latest activity Context Display Name Display Name Latest activity Latest activity Giorgio Venturi twitter: gventuri
  43. 43. 2D carousels Giorgio Venturi twitter: gventuri
  44. 44. 3D carouselsBeyond the ListExamples66 Giorgio Venturi twitter: gventuri
  45. 45. Use of fragments Giorgio Venturi twitter: gventuri
  46. 46. Use of fragmentsBefore  the  release  of  honeycomb,  you  had  to  develop  completely  separate  views  to  take  advantage  of  increased  real  estate  on  tablets.      Now  you  can  use  fragments.    In  general,  fragments  can  be  used  to  have  several  views  into  one  screen  and  it  brings  increased  usability.  Think  Gmail.      –  Combine  a  list  and  a  detail  view  for  browsing  tasks    –  Consolidate  mul?ple  related  phone  screens  into  a  single  compound  view    –  Avoid  excessively  long  line  lengths  Panes  to  the  right  should  generally  present  more  content  or  details  for  items  selected  in  the  panes  on  the  lek.  This  topic  is  a  presenta?on  in  itself,  so  I  won’t  indulge  on  this  topic,  check  the  other  references   Giorgio Venturi twitter: gventuri
  47. 47. ON SCREEN INTERACTION
  48. 48. Toolbars & Actions frames Giorgio Venturi twitter: gventuri
  49. 49. Toolbars & Actions framesFixed  ac?ons  frame  at  the  boAom,  allows  users  to  quickly  execute  an  ac?on  with  no  scrolling.   Giorgio Venturi twitter: gventuri
  50. 50. Modal dialogues Giorgio Venturi twitter: gventuri
  51. 51. Modal dialoguesThere’s  way  too  many  dialogues  in  Android,  this  one  is  especially  threatening.    If  you  have  to  use  them,  the  posi?ve  call  to  ac?on  is  always  on  the  lek   Giorgio Venturi twitter: gventuri
  52. 52. Forms: use tooltips | Enter Username i username must be minimum 6 charactersTool?ps  allow  the  user  to  avoid  making  errors  –  especially  useful  in  registra?on  forms   Giorgio Venturi twitter: gventuri
  53. 53. Use the appropriate input type for textfield Giorgio Venturi twitter: gventuri
  54. 54. NOTIFICATIONS &RESPONSIVENESS
  55. 55. Design for responsiveness, do notinterrupt users or make him wait Giorgio Venturi twitter: gventuri
  56. 56. Toast notifications from androidpatterns.com Giorgio Venturi twitter: gventuri
  57. 57. Toast notifications from androidpatterns.comWhen  no  response  is  required  at  all  from  the  user.    It  can  appear  on  top  of  any  user  ac?vity  or  app  –  not  necessarily  the  app  that  originated  it   Giorgio Venturi twitter: gventuri
  58. 58. Status bar notification Giorgio Venturi twitter: gventuri
  59. 59. Status bar notificationUse  this  when  ac?on  is  applicable  .  E.g.  previewing  the  uploaded  image   Giorgio Venturi twitter: gventuri
  60. 60. EMOTION & EXPRESSION
  61. 61. Develop a visual language Giorgio Venturi twitter: gventuri
  62. 62. Develop a visual languageThe  quality  of  your  visual  language  is  a  strong  cue  towards  the  quality  of  your  applica?on!    Spend  ?me  developing  a  peculiar,  dis?nc?ve  visual  language  including  ?les,   Giorgio Venturi twitter: gventurimarkers,  buAon,  etc.  
  63. 63. Take care in designing your icons Giorgio Venturi twitter: gventuri
  64. 64. Take care in designing your iconsPurchase  decisions  are  made  on  an  impulse.    A  well  designed  icon  &  logo  can  make  the  difference  between  success  and  failure  if  you  are  on  the  market.     Giorgio Venturi twitter: gventuriIt  will  work  also  work  wonders  on  the  ac?on  bar…  
  65. 65. Use of splash screens Giorgio Venturi twitter: gventuri
  66. 66. Use of splash screensNot  compulsory,  but  it  is  especially  useful  to  show  while  app  preloads  libraries,  collec?ons,  caching  loca?on  etc.  –  beAer  having  users  wait  in  the  first  seconds,  rather  than  once  they  start  interac?ng.     Giorgio Venturi twitter: gventuriIt’s  also  a  good  opportunity  to  reinforce  your  branding  
  67. 67. IN CONCLUSION
  68. 68. Design strategiesUnderstand who’s it for, go and talkto themInvolve a designer (or two)Prototype & testAnalytics Giorgio Venturi twitter: gventuri
  69. 69. Thank youFollow us on Twitter@gventuri@closertag

×