Hamburgerless. On creative mobile navigation.

Slide 1

Slide 1 text

Hello Product Camp! Łukasz Przywarty @przywarty Product Camp 2015 - May 30

Slide 2

Slide 2 text

I’M A DESIGNER ‣ Infermedica - UX Designer ‣ Pilot - Designer

Slide 3

Slide 3 text

HAMBURGERLESS On creative mobile navigation

Slide 4

Slide 4 text

I HAVE SINNED ‣ Not once, not even twice… GiveMeTap 4

Slide 5

Slide 5 text

WHAT’S THE PROBLEM?

Slide 6

Slide 6 text

IS NOT UNDERSTANDABLE LOGICAL EQUIVALENCE TRIGRAM FOR HEAVEN/SKY (1, 2) SEPHORA? p∨p≡p 乾 Qián ☰ 6

Slide 7

Slide 7 text

‣ Icon is easy to oversee ‣ Menu items are hidden Spotify IS NOT VISIBLE 7

Slide 8

Slide 8 text

Why call it the basement? Because it’s hidden, dark, there’s a ton of crap in it, and, frankly, it’s scary and no one wants to go down there.   — BRENT JACKSON “

Slide 9

Slide 9 text

SUPPORTS LOUSY IA Menu usually contains too many elements Youtube 9

Slide 10

Slide 10 text

“ And ﬁnally, the downside of being able to show a lot of options is that you can show a lot of options. (…) The potential for bloat and misuse is tremendous.   — MIKE STERN

Slide 11

Slide 11 text

SLOWS YOU DOWN Animations take time Days 11

Slide 12

Slide 12 text

OVERWRITES  BACK BUTTON Hamburgers don’t play nice with back buttons Google Drive 12

Slide 13

Slide 13 text

TESTED, DOESN’T WORK ZEEBOX APP - Source 2.5 3.9 2.3 2.5 Avg weekly frequency Avg daily frequency Hamburger Tabs 13

Slide 14

Slide 14 text

Users are still unfamiliar with newer icons, including the three-line menu icon and the map-marker icon.   — KATIE SHERWIN “

Slide 15

Slide 15 text

CREATIVE NAVIGATION

Slide 16

Slide 16 text

Don't ever say you don't have choices on mobile.   — LUKE WROBLEWSKI HAMBURGER MENU KEBAB MENU DÖNER MENU BENTO MENU MEATBALLS MENU DOUBLE HAMBURGER 16

Slide 17

Slide 17 text

TAB BAR ‣ Facebook, Twitter, Imgur, Flickr, Instagram, Periscope… 17 Instagram

Slide 18

Slide 18 text

TAB BAR ‣ iOS/Android pattern ‣ Visible right away, always ‣ Highlights the most important things ‣ Thumb-friendly ‣ Doesn’t compete with  back button ADVANTAGES 18 Airbnb

Slide 19

Slide 19 text

TAB BAR ‣ 4-5 elements (not always) ‣ Unrecognisable (If we’re using icons only) ‣ Takes valuable space DISADVANTAGES 19 Elevate

Slide 20

Slide 20 text

FLAT NAVIGATION ‣ Snapchat, Tinder, Swarm… 20 Tinder

Slide 21

Slide 21 text

FLAT NAVIGATION ‣ Visible right away ‣ Encourages to discover ‣ Keeps IA simple ADVANTAGES 21 Duolingo

Slide 22

Slide 22 text

FLAT NAVIGATION ‣ Doesn’t make sense with more than 4-5 elements ‣ Some pages are available through other pages ‣ Sometimes: not understandable DISADVANTAGES 22 Swarm

Slide 23

Slide 23 text

GESTURES ‣ Paper, Clear, Kickstarter, Wire… 23 Paper

Slide 24

Slide 24 text

GESTURES ‣ Saves space on the screen ‣ People say: it’s natural! ‣ Spark of mystery ‣ Creative, fresh ADVANTAGES 24 Kickstarter

Slide 25

Slide 25 text

25 GESTURES ‣ Discoverability ‣ Accuracy DISADVANTAGES Wire

Slide 26

Slide 26 text

SPRINGBOARD ‣ YPlan, iOS/Android Settings, Dropbox 26 YPlan

Slide 27

Slide 27 text

SPRINGBOARD ‣ All elements remain visible ‣ No additional elements on the screen ‣ Creates natural hierarchy ADVANTAGES 27 GoPro

Slide 28

Slide 28 text

SPRINGBOARD ‣ Nesting views (you need to tap a few times to go back) ‣ Table is not appealing DISADVANTAGES 28 iOS Settings

Slide 29

Slide 29 text

OK, OK, BUT…

Slide 30

Slide 30 text

BUT… • I design an Android app • My menu contains more than 5 elements • Tab bar takes a lot of space • Everyone uses hamburger menu • Your examples are technically complicated • How do I explain it to developers? • I have to, I can’t live without it… because Amazon, Booking… 30

Slide 31

Slide 31 text

WELL-DESIGNED HAMBURGER

Slide 32

Slide 32 text

32 WHEN ‣ App has one main view ‣ Important content is available on the ﬂy ‣ Menu contains dynamic quantity of elements ‣ We are sure that our user is able to us it Feedly

Slide 33

Slide 33 text

33 HOW ‣ Consider different appearance: menu, border… ‣ Use the bottom of the screen ‣ Make sure that primary elements are visible Nat Geo Atlas

Slide 34

Slide 34 text

34 HOW ‣ Think about animation ‣ Keep it open in the beginning ‣ Limit the quantity of menu items (or at least put them into categories) Issuu

Slide 35

Slide 35 text

FOLLOW UP

Slide 36

Slide 36 text

PLEASE ‣ Don’t go the easy way ‣ Remember about architecture: what we need is  a simple and well-considered structure ‣ Always ask yourself: Can I do it the other way? Is it possible to make it easier? What if…? ‣ Validate your solution, always 36

Slide 37

Slide 37 text

Thoughts ‣ An Update on the Hamburger Menu ‣ Basement Menus and Breaking the “Rules” of App Design ‣ Hamburgers & Basements: Why Not to Use Left Nav Flyouts ‣ Hamburger icon: How these three lines mystify most people ‣ Mobile App UX Principles: Improving User Experience and Optimising Conversion ‣ Mobile Navigation ‣ The Hamburger is Bad for You ‣ The Magnifying-Glass Icon in Search Design: Pros and Cons ‣ UX designers: Side drawer navigation could be costing you half your user engagement ‣ Why It’s Totally Okay to Use a Hamburger Icon A/B Tests ‣ Hamburger vs Menu: The Final AB Test ‣ Mobile Menu AB Tested: Hamburger Not the Best Choice? Books ‣ Mobile Design Pattern Gallery, 2nd Edition ‣ Navigation & Interaction ‣ Navigation & Interaction, Vol. 2 SOURCES 37

Slide 38

Slide 38 text

Łukasz Przywarty [email protected] @przywarty Thank you!