Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The fly-in app menu for designers and developers

Cyril Mottier
October 26, 2012

The fly-in app menu for designers and developers

On using the fly-in app menu/side navigation in your Android applications. Presented at DroidconUK 2012 in London, England.

If you didn't [hear|see] the talk, these slides probably won't make sense.

Software: Keynote, Illustrator, Photoshop
Font: Exo (http://www.fontsquirrel.com/fonts/exo) & Panefresco (http://www.fontsquirrel.com/fonts/panefresco)
Colors: #edefe6, #666666, #f91b22, #597313 & #81a735, #3699bd & #3fc8ec.

Cyril Mottier

October 26, 2012
Tweet

More Decks by Cyril Mottier

Other Decks in Design

Transcript

  1. The
    FLY-IN APP MENU
    designers & developers
    for

    View Slide

  2. @cyrilmottier

    View Slide

  3. View Slide

  4. ONCE UPON A TIME...
    An interesting story

    View Slide

  5. ... THERE WAS A
    FAMOUS
    COMPANY

    View Slide

  6. REFERENCE
    They wanted to be a true
    in the mobile
    world

    View Slide

  7. They developed an
    ANDROID
    APP

    View Slide

  8. WHICH
    PRETTY
    MUCH
    LOOKED
    LIKE
    THIS
    COMPANY
    Feature 1 Feature 2
    Feature 3
    Feature 4
    Feature 6
    Feature 5

    View Slide

  9. Two winters later...
    The overall app layout
    doesn’t fit our needs
    anymore. Let’s think about
    something new!


    View Slide

  10. ?
    ? ?
    Two winters later...
    The overall app layout
    doesn’t fit our needs
    anymore. Let’s think about
    something new!


    View Slide

  11. SLIDING ?
    What about a
    PANEL

    View Slide

  12. They
    COMP
    Feature 1
    Feature 2
    Feature 3
    Feature 4
    Feature 5
    Feature 6
    Feature 7
    Feature 8
    COMPLETELY
    redesigned the app

    View Slide

  13. Introducing the
    fly-in app menu
    1

    View Slide

  14. Fly-in app menu
    Slide-out menu
    hidden side menu
    ribbon menu
    side navigation
    navigation drawer
    slide menu

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. A panel that “slides out” from
    underneath the left of the main
    content area, revealing a vertically
    independent scroll view
    VISUALLY SPEAKING:

    View Slide

  22. View Slide

  23. View Slide

  24. ‘UI-LY’ SPEAKING:
    A UI pattern made for direct
    navigation to independant views of
    your application.

    View Slide

  25. NO TRUE
    DOCUMENTATION
    DEFINITION
    IN THE ANDROID
    DESIGN GUIDELINES

    View Slide

  26. RESPONSIVE DYNAMIC QUICK ACCESS
    SIDE MENU: 3 MAINS ADVANTAGES

    View Slide

  27. RESPONSIVE
    The fly-in app menu
    runs great on
    phones

    View Slide

  28. RESPONSIVE
    The fly-in app menu
    runs great on
    tablets

    View Slide

  29. RESPONSIVE
    The fly-in app menu
    runs great on
    desktop

    View Slide

  30. RESPONSIVE

    View Slide

  31. RESPONSIVE

    View Slide

  32. RESPONSIVE

    View Slide

  33. DYNAMIC
    Content can grow dynamically
    grow
    grow
    grow
    grow
    grow
    grow
    grow
    grow
    grow
    grow
    grow

    View Slide

  34. QUICK ACCESS
    Opens more rapidly
    than a dashboard
    no Activity transition/creation

    View Slide

  35. I use the fly-in app menu
    in my application because
    it’s the navigation pattern
    à la mode


    View Slide

  36. NO
    Fuck

    View Slide

  37. 1
    tabs
    2
    dashboard
    3
    side menu
    3main primary
    navigation patterns

    View Slide

  38. 1
    tabs
    2
    dashboard
    3
    side menu
    SIMPLE
    extremely quick learning curve
    EASY ACCESS
    a feature is one click away
    UP TO 4 FEATURES
    made for apps with a simple hierarchy

    View Slide

  39. 1
    tabs
    2
    dashboard
    3
    side menu
    VISUALLY APPEALING
    landing page of your app
    UP TO 6-9 ITEMS
    great features playground

    View Slide

  40. 1
    tabs
    2
    dashboard
    3
    side menu
    NOT EASY TO USE
    average joe doesn’t understand it at first glance
    DYNAMIC
    content can increase seamlessly
    RESPONSIVE
    scales up greatly to fit all supports

    View Slide

  41. Always weigh the
    pros &
    cons

    View Slide

  42. Deep dive into the
    fly-in app menu
    2

    View Slide

  43. FLY-IN APP MENU

    View Slide

  44. FLY-IN APP MENU
    has a global state
    lives into the app
    +

    View Slide

  45. 2
    3
    1APP FEATURES
    main features of an app
    USER STATUS
    location, login state, etc.
    NOTIFICATIONS
    profile notifications

    View Slide

  46. VS
    The sliding ActionBar debate
    fixed
    Sliding

    View Slide

  47. VS
    The sliding ActionBar debate
    fixed
    Sliding
    ActionBar is a part of the UI
    users need to identify to
    GOOGLE’S POINT OF VIEW

    View Slide

  48. ActionBar is attached to an app
    screen not to the app itself
    MY POINT OF VIEW
    VS
    The sliding ActionBar debate
    fixed
    Sliding

    View Slide

  49. RULE #1
    Give an hint of its
    existence

    View Slide

  50. MAKE IT
    OBVIOUS

    View Slide

  51. {
    CUSTOM
    application-specific

    View Slide

  52. {
    STANDARD
    similar to the ‘up’ button

    View Slide

  53. {
    UNCLEAR
    design VS controls

    View Slide

  54. bezel swiping
    tutorial
    +
    +

    View Slide

  55. bezel swiping
    tutorial
    +
    +

    View Slide

  56. bounce at initial startup
    +
    bezel swiping
    tutorial
    +
    +

    View Slide

  57. RULE #2
    Show the selected app
    feature

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. RULE #3
    Make it natural to use
    and doable

    View Slide

  63. smooth
    etc.
    perspective
    parallax
    diming
    physically doable
    DELIGHTFUL
    responsive

    View Slide

  64. RULE #4
    Do not mess with
    the back stack!

    View Slide

  65. A TASK WITH NO MORE THAN
    4
    FINISH
    A USER SHOULD
    BACK-KEY
    PRESSES

    View Slide

  66. The
    SETUP

    View Slide

  67. Feature A
    Feature B
    Feature C C1
    B1 B2
    A1 A2
    The
    SETUP

    View Slide

  68. C1
    B1 B2
    A1
    A2

    View Slide

  69. C1
    B1 B2
    A1
    A2

    View Slide

  70. C1
    B1 B2
    A1
    A2

    View Slide

  71. C1
    B1 B2
    A1
    A2

    View Slide

  72. C1
    B1 B2
    A1
    A2

    View Slide

  73. C1
    B1 B2
    A1
    A2

    View Slide

  74. C1
    B1 B2
    A1
    A2

    View Slide

  75. CYCLES
    LIKE THE
    PLAGUE
    AVOID

    View Slide

  76. C1
    B1 B2
    A1
    A2

    View Slide

  77. C1
    B1 B2
    A1
    A2

    View Slide

  78. fragment C1
    fragment B1
    B2
    fragment A1
    A2
    main activity

    View Slide

  79. C1
    B1 B2
    A1
    A2

    View Slide

  80. C1
    B1 B2
    A1
    A2

    View Slide

  81. SOLUTION
    Clear the stack when a root
    Activity is traversed using
    FLAG_ACTIVITY_CLEAR_TASK

    View Slide

  82. SOLUTION
    Clear the stack when a root
    Activity is traversed using
    FLAG_ACTIVITY_CLEAR_TASK
    API 11 and above only

    View Slide

  83. SOLUTION
    Get rid of the system back stack &
    manage everything on your own at
    the Fragment level

    View Slide

  84. SOLUTION
    Get rid of the system back stack &
    manage everything on your own at
    the Fragment level
    Good luck !!!

    View Slide

  85. SOLUTION
    Use the side navigation only at the
    root level of your app

    View Slide

  86. Implementing a
    fly-in app menu
    3

    View Slide

  87. 2options
    librairies
    custom implementation

    View Slide

  88. ANDROID-UNDERGARMENT
    github.com/eddieringle/android-undergarment
    SLIDINGMENU
    github.com/jfeinstein10/SlidingMenu
    ANDROID-MENUDRAWER
    github.com/SimonVT/android-menudrawer

    View Slide

  89. YOU CAN ALSO CREATE A CUSTOM
    IMPLEMENTATION

    View Slide

  90. CUSTOM
    VIEW VIEWGROUP
    &

    View Slide

  91. THE MAKING OF
    PRIXING
    658
    701
    717
    android.cyrilmottier.com?p=

    View Slide

  92. Conclusion
    4

    View Slide

  93. USE THE SIDE NAVIGATION
    PATTERN CLEVERLY

    View Slide

  94. MAKE IT NATURAL I. E. EASY
    TO USE, SMOOTH, INTUITIVE

    View Slide

  95. DO NOT FRUSTRATE USERS
    WITH A MESSED BACK STACK

    View Slide

  96. CYRIL MOTTIER
    @cyrilmottier
    android.cyrilmottier.com

    View Slide