The fly-in app menu for designers and developers

E9bf8f6d5480ea2a2623df7dccfd1f70?s=47 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.

E9bf8f6d5480ea2a2623df7dccfd1f70?s=128

Cyril Mottier

October 26, 2012
Tweet

Transcript

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

  2. @cyrilmottier

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

  5. ... THERE WAS A FAMOUS COMPANY

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

    world
  7. They developed an ANDROID APP

  8. WHICH PRETTY MUCH LOOKED LIKE THIS COMPANY Feature 1 Feature

    2 Feature 3 Feature 4 Feature 6 Feature 5
  9. Two winters later... The overall app layout doesn’t fit our

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

    doesn’t fit our needs anymore. Let’s think about something new! „ „
  11. SLIDING ? What about a PANEL

  12. They COMP Feature 1 Feature 2 Feature 3 Feature 4

    Feature 5 Feature 6 Feature 7 Feature 8 COMPLETELY redesigned the app
  13. Introducing the fly-in app menu 1

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

    side navigation navigation drawer slide menu
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. A panel that “slides out” from underneath the left of

    the main content area, revealing a vertically independent scroll view VISUALLY SPEAKING:
  22. None
  23. None
  24. ‘UI-LY’ SPEAKING: A UI pattern made for direct navigation to

    independant views of your application.
  25. NO TRUE DOCUMENTATION DEFINITION IN THE ANDROID DESIGN GUIDELINES

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

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

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

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

  30. RESPONSIVE

  31. RESPONSIVE

  32. RESPONSIVE

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

    grow grow grow grow grow grow
  34. QUICK ACCESS Opens more rapidly than a dashboard no Activity

    transition/creation ‛
  35. I use the fly-in app menu in my application because

    it’s the navigation pattern à la mode „ „
  36. NO Fuck

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

    patterns
  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
  39. 1 tabs 2 dashboard 3 side menu VISUALLY APPEALING landing

    page of your app UP TO 6-9 ITEMS great features playground
  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
  41. Always weigh the pros & cons

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

  43. FLY-IN APP MENU

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

    app +
  45. 2 3 1APP FEATURES main features of an app USER

    STATUS location, login state, etc. NOTIFICATIONS profile notifications
  46. VS The sliding ActionBar debate fixed Sliding

  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
  48. ActionBar is attached to an app screen not to the

    app itself MY POINT OF VIEW VS The sliding ActionBar debate fixed Sliding
  49. RULE #1 Give an hint of its existence

  50. MAKE IT OBVIOUS

  51. { CUSTOM application-specific

  52. { STANDARD similar to the ‘up’ button

  53. { UNCLEAR design VS controls

  54. bezel swiping tutorial + +

  55. bezel swiping tutorial + +

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

  57. RULE #2 Show the selected app feature

  58. None
  59. None
  60. None
  61. None
  62. RULE #3 Make it natural to use and doable

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

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

  65. A TASK WITH NO MORE THAN 4 FINISH A USER

    SHOULD BACK-KEY PRESSES
  66. The SETUP

  67. Feature A Feature B Feature C C1 B1 B2 A1

    A2 The SETUP
  68. C1 B1 B2 A1 A2

  69. C1 B1 B2 A1 A2

  70. C1 B1 B2 A1 A2

  71. C1 B1 B2 A1 A2

  72. C1 B1 B2 A1 A2

  73. C1 B1 B2 A1 A2

  74. C1 B1 B2 A1 A2

  75. CYCLES LIKE THE PLAGUE AVOID

  76. C1 B1 B2 A1 A2

  77. C1 B1 B2 A1 A2

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

  79. C1 B1 B2 A1 A2

  80. C1 B1 B2 A1 A2

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

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

    using FLAG_ACTIVITY_CLEAR_TASK API 11 and above only
  83. SOLUTION Get rid of the system back stack & manage

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

    everything on your own at the Fragment level Good luck !!!
  85. SOLUTION Use the side navigation only at the root level

    of your app
  86. Implementing a fly-in app menu 3

  87. 2options librairies custom implementation ‛

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

  89. YOU CAN ALSO CREATE A CUSTOM IMPLEMENTATION

  90. CUSTOM VIEW VIEWGROUP &

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

  92. Conclusion 4

  93. USE THE SIDE NAVIGATION PATTERN CLEVERLY

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

  95. DO NOT FRUSTRATE USERS WITH A MESSED BACK STACK

  96. CYRIL MOTTIER @cyrilmottier android.cyrilmottier.com