Android UI Design Pattern in practice (English version)

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