Hamburgerless. On creative mobile navigation.

My talk from Product Camp 2015.

Transcript

1. Hello Product Camp! Łukasz Przywarty @przywarty Product Camp 2015 - May 30
2. I’M A DESIGNER ‣ Infermedica - UX Designer ‣ Pilot - Designer
3. HAMBURGERLESS On creative mobile navigation
4. I HAVE SINNED ‣ Not once, not even twice… GiveMeTap 4
5. WHAT’S THE PROBLEM?
6. IS NOT UNDERSTANDABLE LOGICAL EQUIVALENCE TRIGRAM FOR HEAVEN/SKY (1, 2) SEPHORA? p∨p≡p 乾 Qián ☰ 6
7. ‣ Icon is easy to oversee ‣ Menu items are hidden Spotify IS NOT VISIBLE 7
8. 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 “
9. SUPPORTS LOUSY IA Menu usually contains too many elements Youtube 9
10. “ And finally, 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
11. SLOWS YOU DOWN Animations take time Days 11
12. OVERWRITES
 BACK BUTTON Hamburgers don’t play nice with back buttons Google Drive 12
13. TESTED, DOESN’T WORK ZEEBOX APP - Source 2.5 3.9 2.3 2.5 Avg weekly frequency Avg daily frequency Hamburger Tabs 13
14. Users are still unfamiliar with newer icons, including the three-line menu icon and the map-marker icon. 
 — KATIE SHERWIN “
15. CREATIVE NAVIGATION
16. 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
17. TAB BAR ‣ Facebook, Twitter, Imgur, Flickr, Instagram, Periscope… 17 Instagram
18. 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
19. TAB BAR ‣ 4-5 elements (not always) ‣ Unrecognisable (If we’re using icons only) ‣ Takes valuable space DISADVANTAGES 19 Elevate
20. FLAT NAVIGATION ‣ Snapchat, Tinder, Swarm… 20 Tinder
21. FLAT NAVIGATION ‣ Visible right away ‣ Encourages to discover ‣ Keeps IA simple ADVANTAGES 21 Duolingo
22. 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
23. GESTURES ‣ Paper, Clear, Kickstarter, Wire… 23 Paper
24. GESTURES ‣ Saves space on the screen ‣ People say: it’s natural! ‣ Spark of mystery ‣ Creative, fresh ADVANTAGES 24 Kickstarter
25. 25 GESTURES ‣ Discoverability ‣ Accuracy DISADVANTAGES Wire
26. SPRINGBOARD ‣ YPlan, iOS/Android Settings, Dropbox 26 YPlan
27. SPRINGBOARD ‣ All elements remain visible ‣ No additional elements on the screen ‣ Creates natural hierarchy ADVANTAGES 27 GoPro
28. SPRINGBOARD ‣ Nesting views (you need to tap a few times to go back) ‣ Table is not appealing DISADVANTAGES 28 iOS Settings
29. OK, OK, BUT…
30. 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
31. WELL-DESIGNED HAMBURGER
32. 32 WHEN ‣ App has one main view ‣ Important content is available on the fly ‣ Menu contains dynamic quantity of elements ‣ We are sure that our user is able to us it Feedly
33. 33 HOW ‣ Consider different appearance: menu, border… ‣ Use the bottom of the screen ‣ Make sure that primary elements are visible Nat Geo Atlas
34. 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
35. FOLLOW UP
36. 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
37. 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
38. Łukasz Przywarty lukasz@przywarty.com @przywarty Thank you!