Slide 1

Slide 1 text

The FLY-IN APP MENU designers & developers for

Slide 2

Slide 2 text

@cyrilmottier

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ONCE UPON A TIME... An interesting story

Slide 5

Slide 5 text

... THERE WAS A FAMOUS COMPANY

Slide 6

Slide 6 text

REFERENCE They wanted to be a true in the mobile world

Slide 7

Slide 7 text

They developed an ANDROID APP

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

SLIDING ? What about a PANEL

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Introducing the fly-in app menu 1

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

NO TRUE DOCUMENTATION DEFINITION IN THE ANDROID DESIGN GUIDELINES

Slide 26

Slide 26 text

RESPONSIVE DYNAMIC QUICK ACCESS SIDE MENU: 3 MAINS ADVANTAGES

Slide 27

Slide 27 text

RESPONSIVE The fly-in app menu runs great on phones

Slide 28

Slide 28 text

RESPONSIVE The fly-in app menu runs great on tablets

Slide 29

Slide 29 text

RESPONSIVE The fly-in app menu runs great on desktop

Slide 30

Slide 30 text

RESPONSIVE

Slide 31

Slide 31 text

RESPONSIVE

Slide 32

Slide 32 text

RESPONSIVE

Slide 33

Slide 33 text

DYNAMIC Content can grow dynamically grow grow grow grow grow grow grow grow grow grow grow

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

NO Fuck

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Always weigh the pros & cons

Slide 42

Slide 42 text

Deep dive into the fly-in app menu 2

Slide 43

Slide 43 text

FLY-IN APP MENU

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

VS The sliding ActionBar debate fixed Sliding

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

RULE #1 Give an hint of its existence

Slide 50

Slide 50 text

MAKE IT OBVIOUS

Slide 51

Slide 51 text

{ CUSTOM application-specific

Slide 52

Slide 52 text

{ STANDARD similar to the ‘up’ button

Slide 53

Slide 53 text

{ UNCLEAR design VS controls

Slide 54

Slide 54 text

bezel swiping tutorial + +

Slide 55

Slide 55 text

bezel swiping tutorial + +

Slide 56

Slide 56 text

bounce at initial startup + bezel swiping tutorial + +

Slide 57

Slide 57 text

RULE #2 Show the selected app feature

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

RULE #3 Make it natural to use and doable

Slide 63

Slide 63 text

smooth etc. perspective parallax diming physically doable DELIGHTFUL responsive

Slide 64

Slide 64 text

RULE #4 Do not mess with the back stack!

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

The SETUP

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

C1 B1 B2 A1 A2

Slide 69

Slide 69 text

C1 B1 B2 A1 A2

Slide 70

Slide 70 text

C1 B1 B2 A1 A2

Slide 71

Slide 71 text

C1 B1 B2 A1 A2

Slide 72

Slide 72 text

C1 B1 B2 A1 A2

Slide 73

Slide 73 text

C1 B1 B2 A1 A2

Slide 74

Slide 74 text

C1 B1 B2 A1 A2

Slide 75

Slide 75 text

CYCLES LIKE THE PLAGUE AVOID

Slide 76

Slide 76 text

C1 B1 B2 A1 A2

Slide 77

Slide 77 text

C1 B1 B2 A1 A2

Slide 78

Slide 78 text

fragment C1 fragment B1 B2 fragment A1 A2 main activity

Slide 79

Slide 79 text

C1 B1 B2 A1 A2

Slide 80

Slide 80 text

C1 B1 B2 A1 A2

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Implementing a fly-in app menu 3

Slide 87

Slide 87 text

2options librairies custom implementation ‛

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

YOU CAN ALSO CREATE A CUSTOM IMPLEMENTATION

Slide 90

Slide 90 text

CUSTOM VIEW VIEWGROUP &

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Conclusion 4

Slide 93

Slide 93 text

USE THE SIDE NAVIGATION PATTERN CLEVERLY

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

DO NOT FRUSTRATE USERS WITH A MESSED BACK STACK

Slide 96

Slide 96 text

CYRIL MOTTIER @cyrilmottier android.cyrilmottier.com