Android UI Design Pattern in practice (English version)

Transcript

1. UI Design Patterns
   LYAUG - 07/02/2013
   in practice
   Android
   

   View Slide

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

   View Slide

3. View Slide

4. What is a
   Design Pattern ?
   

   View Slide

5. What is a
   UI Design Pattern ?
   

   View Slide

6. What is a
   Android UI Design
   Pattern ?
   

   View Slide

7. Why should you use
   them ?
   The best solution to
   solve your problem Mental Model
   Homogeneity
   Libraries
   Do not reinvent the
   wheel
   

   View Slide

8. Why should not you
   use them ?
   Trendy solution
   To solve a nonexistant
   problem
   Copy a competitor
   

   View Slide

9. What is the best way
   to learn ?
   Practice
   

   View Slide

10. YANA
    IT News Website
    News
    Briefs
    Tests
    Reports
    Accounts
    Categories
    Favorites
    Yet Another News Application
    

    View Slide

11. Identify the Minimal
    Viable Product
    Article’s
    Consultation
    V1
    Community
    V2
    

    View Slide

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

    View Slide

13. How does the user find its
    way through the
    application ?
    ActionBar
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. Why you should use it
    Locate /
    Navigate
    Contextual
    Actions
    Branding
    

    View Slide

18. Why you should not use it
    Immersion
    in a universe
    Maximizing space
    for content
    

    View Slide

19. Variations
    Split Contextual
    

    View Slide

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
    

    View Slide

21. Demo
    https://github.com/MathieuCalba/android-ui-design-pattern/tree/step-1
    

    View Slide

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

    View Slide

23. Dashboard
    • Slowing the access to
    information
    • Access to 6 to 9
    sections
    • Landing Page
    

    View Slide

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
    

    View Slide

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 :
    

    View Slide

26. Tabs
    • Simple
    • Quick access
    5 Sections/Categories max
    • Not very extensible
    

    View Slide

27. Variation
    Scrollable
    

    View Slide

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/
    

    View Slide

29. Solution ?
    Spinner for categories
    Tabs for article kinds
    

    View Slide

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

    View Slide

31. Article listing
    News :
    Image + Title
    Briefs :
    Title + Date/Hour
    Reports & Tests :
    Image + Title
    

    View Slide

32. Card Double columns
    Mix big image or
    image and title
    

    View Slide

33. Big image With highlight
    Image + title
    

    View Slide

34. Carousel
    Big image +
    double columns
    

    View Slide

35. Brief
    News
    Test & Report
    Solution ?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. Basic finished
    version
    

    View Slide

40. View Slide

41. Additional
    features
    

    View Slide

42. Notifying the user
    No internet connectivity
    No data Loading
    

    View Slide

43. Dialog
    • Never read
    • Force user interaction
    • Interrupt the user
    For irreversible actions
    Technically ? SDK :
    http://developer.android.com/guide/topics/ui/dialogs.html
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

47. • Select an article on the left
    list
    • There is no favorite items
    yet
    First use
    Empty View
    

    View Slide

48. Error(s)
    Empty View
    • Allow to retry the download
    • No internet connectivity
    

    View Slide

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

    View Slide

50. Tablet adaptation
    

    View Slide

51. How to adapt the
    design to screen
    diversity ?
    

    View Slide

52. How to do it ?
    

    View Slide

53. Small Normal Large XLarge
    426 x 320 dp 470 x 320 dp 640 x 480 dp 960 x 720 dp
    

    View Slide

54. sw320 dp sw600 dp sw720 dp
    The Responsive Design Android way
    Gathering by bucket
    

    View Slide

55. How to adapt it ?
    

    View Slide

56. View re-use
    

    View Slide

57. View re-organization
    

    View Slide

58. Content re-organization
    

    View Slide

59. For YANA ?
    

    View Slide

60. View Slide

61. View Slide

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

    View Slide

63. Conclusion
    

    View Slide

64. Identify the problem
    

    View Slide

65. Identify possible
    solutions
    

    View Slide

66. Weigh and
    

    View Slide

67. Choose the right
    Design Pattern to be
    consistent with the
    platform and the app
    

    View Slide

68. Use Android SDK and
    existing libraries !
    

    View Slide

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
    

    View Slide

70. Questions ?
    @Mathieu_Calba
    

    View Slide