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.

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