$30 off During Our Annual Pro Sale. View Details »

Android UI Design Pattern in practice (English version)

Android UI Design Pattern in practice (English version)

Mathieu Calba

February 07, 2013
Tweet

More Decks by Mathieu Calba

Other Decks in Programming

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