Android UI Design Pattern in practice (English version)

Android UI Design Pattern in practice (English version)

9949dfe0542bd0fd32676d63c97a625f?s=128

Mathieu Calba

February 07, 2013
Tweet

Transcript

  1. UI Design Patterns LYAUG - 07/02/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. Demo 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. Fly-in App Menu • Responsive • Dynamic • Quick access

    • Not easy to discover / use Usefull when there is a complex navigation aka Menu Drawer 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

  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/
  29. Solution ? Spinner for categories Tabs for article kinds

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

  31. Article listing News : Image + Title Briefs : Title

    + Date/Hour Reports & Tests : Image + Title
  32. Card Double columns Mix big image or image and title

  33. Big image With highlight Image + title

  34. Carousel Big image + double columns

  35. Brief News Test & Report Solution ?

  36. Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-3

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

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

  39. Basic finished version

  40. None
  41. Additional features

  42. Notifying the user No internet connectivity No data Loading

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

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

    • Not contextual (with a screen) Technically ? SDK : http://developer.android.com/guide/topics/ui/notifiers/toasts.html
  45. • 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
  46. 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
  47. • Select an article on the left list • There

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

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

  50. Tablet adaptation

  51. How to adapt the design to screen diversity ?

  52. How to do it ?

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

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

    way Gathering by bucket
  55. How to adapt it ?

  56. View re-use

  57. View re-organization

  58. Content re-organization

  59. For YANA ?

  60. None
  61. None
  62. Demo https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-6

  63. Conclusion

  64. Identify the problem

  65. Identify possible solutions

  66. Weigh and

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

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

  69. 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
  70. Questions ? @Mathieu_Calba