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
   

   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. 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. 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
    

    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 Sliding
    

    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/
    PagerSlidingTabStrip from Andreas Stuetz -
    Play Store style from API Level 8
    https://github.com/astuetz/PagerSlidingTabStrip
    

    View Slide

29. Solution ?
    Spinner for categories
    Tabs for article kinds
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. Basic finished
    version
    

    View Slide

34. View Slide

35. Additional
    features
    

    View Slide

36. Notifying the user
    No internet connectivity
    No data Loading
    

    View Slide

37. 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

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. Tablet adaptation
    

    View Slide

45. How to adapt the
    design to screen
    diversity ?
    

    View Slide

46. How to do it ?
    

    View Slide

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

    View Slide

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

    View Slide

49. How to adapt it ?
    

    View Slide

50. View re-use
    

    View Slide

51. View re-organization
    

    View Slide

52. Content re-organization
    

    View Slide

53. For YANA ?
    

    View Slide

54. View Slide

55. View Slide

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

    View Slide

57. Conclusion
    

    View Slide

58. Identify the problem
    

    View Slide

59. Identify possible
    solutions
    

    View Slide

60. Weigh and
    

    View Slide

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

    View Slide

62. Use Android SDK and
    existing libraries !
    

    View Slide

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
    

    View Slide

64. Questions ?
    @Mathieu_Calba
    

    View Slide