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
2. @cyrilmottier
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
21. A panel that “slides out” from underneath the left of the main content area, revealing a vertically independent scroll view VISUALLY SPEAKING:
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
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