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

Transcript

1. UI Design Patterns DROIDCON - 17/06/2013 in practice Android
2. @Mathieu_Calba http://bit.ly/11FFK9z http://bit.ly/Y7wFiU
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
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
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 ?
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