Droidcon 2011 - Android Design patterns


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
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • I started using Android in 2008, and the apps were jus terrible. But still you can find a high percentage very solid apps with poor design in it.
  • User 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 all these five layers holistically
  • Can a design pattern help us designing a great user experience? Yes, they can! It’s also about not reinventing the wheel. People want to use what they have learnt already using the phone. Hence, know your patterns and use them to build your applications. Don’t use patterns you have seen on other platforms like iOS, use Android patterns.
  • Designing for Android back in 2009 was very different from what is designing for Android in 2011 The Google Android team has been gradually addressing several design challenges – especially with navigation. Also, a formidable challenge is designing for a wide range of form factors (candybar, tablets, keyboards, etc) & screen resolutions & densities
  • Navigation answers to 2 fundamental questions: Where am I? Where can I go?
  • General rule: Mobile applications should have a shallow hierarchy & be light on functionality. If possible, try simplifying & reducing the amount of function the app has, and don’t try adding several nested features.
  • Sometimes 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 action bar (see next slides)
  • This issue has been discussed at length in: Designing and Implementing Android UIs for Phones and Tablets,Google IO 2011This has been a great area of concern as the back button brings you back in the history stack
  • A typical usability problem: You had to go back to the homescreen, then tap on email, then where do you go? To the root view or to the last opened screen?
  • From Honeycomb moving forward:๏ SYSTEM BACK navigates history between related screens ๏ APPLICATION UP navigates hierarchy within a single app
  • Introduced at Google Io 2010 with the Twitter app, it has quickly spread to other apps (but it is far from being ubiquitous)
  • They expose main functionality & 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.
  • Entrypoint screen into the main views. It was made popular by Facebook on iOS. We don’t particularly 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 navigation. It hides information. In fact twitter has recently removed the dashboard and gone back to tabs view – for good.
  • It works particularly well with large screens & tablets - as you can imagine. This approach is discussed in Designing and Implementing Android UIs for Phones and Tablets,Google IO 2011
  • Honeycomb (& Ice cream sandwich?)
  • Aka ‘slidingtabs’ They are used to pivot between different views in the same category – for example browsing your circles, or filtering between different sections 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.
  • Raise your hand who has used tabs at least once Raise your hand who has placed navigation options in the Menu
  • Discovery problem: out of sight, out of mind
  • Nobody is going to give you a prize for re-inventing basic navigation. Linkedin for example is trying to reinvent the wheel by having a custom swipe gesture on the action bar. There’s another problem with this screen: the tiles beneath seem a image carousel – but they are not.
  • SPOTIFY is using a navigation 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
  • Until 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 orientation only
  • Make sure you understand where your application is going to be used most when deciding the primary orientation. With laid back interaction, make landscape the primary view With ‘on the move’ interaction (e.g. location based services), stick to portrait orientation.
  • Pulse, it has two column layout and works incredibly well on handsets as well. I am also looking forward to have Flipboard & Twitter and see if they use progressive disclosure
  • Before 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 multiple 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 left.This topic is a presentation in itself, so I won’t indulge on this topic, I will point to other references
  • Fixed actions frame at the bottom, allows users to quickly execute an action with no scrolling.
  • There’s way too many dialogues in Android, this one is especially threatening. If you have to use them, the positive action is always on theleft
  • Tooltips allow the user to avoid making errors – especially useful in registration forms
  • (e.g. URL vs numeric vs textual)
  • I am sure you have all seen this… and you all hate it. Sometimes it can be a necessary evil, but sometimes it is just plain bad design
  • When no response is required at all from the user. It can appear on top of any user activity or app – not necessarily the app that originated it
  • Use this when action is applicable . E.g. previewing the uploaded image
  • This is by itself the topic of a presentation, this is just a quick overview
  • The quality of your visual language is a strong cue towards the quality of your application! Spend time developing a peculiar, distinctive visual language including tiles, markers, button, etc.
  • Purchase 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. It will work also work wonders on the action bar…
  • Not compulsory, but it is especially useful to show while apppreloads libraries, collections, caching location etc. – better having users wait in the first seconds, rather than once they start interacting. It’s also a good opportunity to reinforce your branding
  • Even if design patterns will put you on a good start, there are four strategies you should consider to design great user experiences:
  • 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
    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
    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
    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
    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
    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
    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
    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