Successfully reported this slideshow.
Your SlideShare is downloading. ×

Droidcon 2011 - Android Design patterns

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 70 Ad

Droidcon 2011 - Android Design patterns

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Advertisement

Droidcon 2011 - Android Design patterns

  1. 1. Android Design patterns Giorgio Venturi
 User Experience lead - Closertag
 twitter: @gventuri"
  2. 2. Who am I? Information Architecture, User research Founder of Closertag, design agency designing for Android since early 2009 One of the lead UX architects for the Skype application in 2010 Giorgio Venturi twitter: gventuri
  3. 3. HOW DO I CREATE A GREAT USER 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 design 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  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 recurring problem Giorgio Venturi twitter: gventuri
  8. 8. It’s a design solution to a recurring problem Can  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 UI Google  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 UI Google  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  i No?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 challenges Navigation Information visualisation On screen interaction Notifications & responsiveness Emotion & 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)!'7 Some?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 + BRANDING Introduced  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. Tabs They  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. Dashboards Entrypoint  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 bar Action Bar General 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 screens Action Bar Phones and smaller screens 39 Giorgio Venturi twitter: gventuri
  30. 30. Carousel tabs Aka  ‘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 navigation Discovery  problem:  out  of  sight,  out  of  mind   gventuri Giorgio Venturi twitter:
  33. 33. Custom navigation Giorgio Venturi twitter: gventuri
  34. 34. Custom navigation Nobody  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 - Spotify SPOTIFY  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 app Make  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. Lists Contacts Contacts Display options Header Me +1234567890123 Only contacts with phones Toggle A Recent activities Display Name Display Latest activity Enabled status Quick scroll Display Name Should be used to Sort list by Latest activity position the user First name quickly in a section of Display Name the list. View contact names as Latest activity First name, surname Display Name Import/export contacts Import/export contacts Latest activity B Docking headers Import contacts Display Name They can dock at the A Display Name Latest activity top of the viewport Latest activity when scrolling down. B Export contacts Call to Action Display Name Display Name To 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 carousels Beyond the List Examples 66 Giorgio Venturi twitter: gventuri
  45. 45. Use of fragments Giorgio Venturi twitter: gventuri
  46. 46. Use of fragments 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  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 frames Fixed  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 dialogues There’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 characters Tool?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 text field Giorgio Venturi twitter: gventuri
  54. 54. NOTIFICATIONS & RESPONSIVENESS
  55. 55. Design for responsiveness, do not interrupt 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.com When  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 notification Use  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 language The  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: gventuri markers,  buAon,  etc.  
  63. 63. Take care in designing your icons Giorgio Venturi twitter: gventuri
  64. 64. Take care in designing your icons 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.     Giorgio Venturi twitter: gventuri It  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 screens Not  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: gventuri It’s  also  a  good  opportunity  to  reinforce  your  branding  
  67. 67. IN CONCLUSION
  68. 68. Design strategies Understand who’s it for, go and talk to them Involve a designer (or two) Prototype & test Analytics Giorgio Venturi twitter: gventuri
  69. 69. Thank you Follow us on Twitter @gventuri @closertag

Editor's Notes

  • 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:

×