Android UI Design Patterns at Droidcon Paris 2013

Android UI Design Patterns at Droidcon Paris 2013

A mobile application is not only a code story !

Beyond the design, it's important to think about organizing its information which is displayed and its interaction with the user.
To solve the problems which are raised by this analysis, some solution already exists : UI Design Patterns.

Like to GitHub corresponding app : https://github.com/MathieuCalba/android-ui-design-pattern

9949dfe0542bd0fd32676d63c97a625f?s=128

Mathieu Calba

June 17, 2013
Tweet

Transcript

  1. UI Design Patterns DROIDCON - 17/06/2013 in practice Android

  2. @Mathieu_Calba http://bit.ly/11FFK9z http://bit.ly/Y7wFiU

  3. None
  4. What is a Design Pattern ?

  5. What is a UI Design Pattern ?

  6. What is a Android UI Design Pattern ?

  7. Why should you use them ? The best solution to

    solve your problem Mental Model Homogeneity Libraries Do not reinvent the wheel
  8. Why should not you use them ? Trendy solution To

    solve a nonexistant problem Copy a competitor
  9. What is the best way to learn ? Practice

  10. YANA IT News Website News Briefs Tests Reports Accounts Categories

    Favorites Yet Another News Application
  11. Identify the Minimal Viable Product Article’s Consultation V1 Community V2

  12. Articles List About Article Details Login Account Create Home Comments

    V1 V2 Organization
  13. How does the user find its way through the application

    ? ActionBar
  14. None
  15. None
  16. None
  17. Why you should use it Locate / Navigate Contextual Actions

    Branding
  18. Why you should not use it Immersion in a universe

    Maximizing space for content
  19. Variations Split Contextual

  20. How to implement it ? SDK since API level 11

    ActionBarSherlock from Jake Wharton - Backport to API Level 7 http://actionbarsherlock.com/ http://developer.android.com/ guide/topics/ui/actionbar.html
  21. https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-1

  22. Navigation ? Categories Kind of articles (News, Briefs...)

  23. Dashboard • Slowing the access to information • Access to

    6 to 9 sections • Landing Page
  24. Menu Drawer • Responsive • Dynamic • Quick access •

    Not easy to discover / use Usefull when there is a complex navigation aka Fly In App Menu or Sliding Menu... https://speakerdeck.com/cyrilmottier/the-fly-in- app-menu-for-designers-and-developers Cyril Mottier’s slides
  25. ActionBar’s Spinner • Easy access • Filter or tab substitute

    to gain screen space • Standard • Can be confusing if used with 2 kind of data (like changing account and categories) http://developer.android.com/guide/ topics/ui/actionbar.html#Dropdown Technically :
  26. Tabs • Simple • Quick access 5 Sections/Categories max •

    Not very extensible
  27. Variation Scrollable Sliding

  28. How to implement it ? SDK with ActionBar API since

    API Level 11 ViewPagerIndicator from Jake Wharton - Different Styles from API Level 7 http://developer.android.com/guide/topics/ui/actionbar.html#Tabs http://viewpagerindicator.com/ PagerSlidingTabStrip from Andreas Stuetz - Play Store style from API Level 8 https://github.com/astuetz/PagerSlidingTabStrip
  29. Solution ? Spinner for categories Tabs for article kinds

  30. https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-2

  31. Article details Fast article switch ViewPager Read mode ActionBar hiding

  32. https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-4

  33. Basic finished version

  34. None
  35. Additional features

  36. Notifying the user No internet connectivity No data Loading

  37. Dialog • Never read • Force user interaction • Interrupt

    the user For irreversible actions Technically ? SDK : http://developer.android.com/guide/topics/ui/dialogs.html
  38. Toast • Customizable • No user interaction • Not intrusive

    • Not contextual (with a screen) Technically ? SDK : http://developer.android.com/guide/topics/ui/notifiers/toasts.html
  39. • Contextual to screen • Basic styles with different levels

    of importance Based on Toast Defined par Cyril Mottier Crouton Technically ? Library by Benjamin Weiss : https://github.com/keyboardsurfer/Crouton
  40. Basic style Many extended styles Big Text Inbox Big Image

    Possibility to add actions System Notifications & Technically : http://developer.android.com/guide/topics/ui/notifiers/notifications.html
  41. • Select an article on the left list • There

    is no favorite items yet First use Empty View
  42. Error(s) Empty View • Allow to retry the download •

    No internet connectivity
  43. https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-5

  44. Tablet adaptation

  45. How to adapt the design to screen diversity ?

  46. How to do it ?

  47. Small Normal Large XLarge 426 x 320 dp 470 x

    320 dp 640 x 480 dp 960 x 720 dp
  48. sw320 dp sw600 dp sw720 dp The Responsive Design Android

    way Gathering by bucket
  49. How to adapt it ?

  50. View re-use

  51. View re-organization

  52. Content re-organization

  53. For YANA ?

  54. None
  55. None
  56. https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-6

  57. Conclusion

  58. Identify the problem

  59. Identify possible solutions

  60. Weigh and

  61. Choose the right Design Pattern to be consistent with the

    platform and the app
  62. Use Android SDK and existing libraries !

  63. Thanks/Credits • Cyril Mottier for Photoshop templates for screenshots and

    other blog posts http://android.cyrilmottier.com/ • Juhani Lehtimaëki - Book Smashing Android UI • Kirill Grouchnikov - http://www.pushing-pixels.org/ • Guillaume Berry for up/down icons • YANA - Code available on GitHub : https://github.com/ MathieuCalba/android-ui-design-pattern
  64. Questions ? @Mathieu_Calba