Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
5 alternatives to the Hamburger menu, mobile UI's most controversial pattern
Next
Download to read offline and view in fullscreen.

32

Share

Hamburgerless. On creative mobile navigation – Product Camp 2015

Download to read offline

My talk from Product Camp 2015.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Hamburgerless. On creative mobile navigation – Product Camp 2015

  1. 1. HelloProduct Camp! Łukasz Przywarty @LukaszPrzywarty Product Camp 2015 - May 30
  2. 2. I’M A DESIGNER ‣ Infermedica - UX Designer ‣ Pilot - Designer
  3. 3. HAMBURGERLESS On creative mobile navigation
  4. 4. I HAVE SINNED ‣ Not once, not even twice… GiveMeTap 4
  5. 5. WHAT’S THE PROBLEM?
  6. 6. IS NOT UNDERSTANDABLE LOGICAL EQUIVALENCE TRIGRAM FOR HEAVEN/SKY (1, 2) SEPHORA? p∨p≡p 乾 Qián ☰ 6
  7. 7. ‣ Icon is easy to oversee ‣ Menu items are hidden Spotify IS NOT VISIBLE 7
  8. 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. 9. SUPPORTS LOUSY IA Menu usually contains too many elements Youtube 9
  10. 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. 11. SLOWS YOU DOWN Animations take time Days 11
  12. 12. OVERWRITES
 BACK BUTTON Hamburgers don’t play nice with back buttons Google Drive 12
  13. 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. 14. Users are still unfamiliar with newer icons, including the three-line menu icon and the map-marker icon. 
 — KATIE SHERWIN “
  15. 15. CREATIVE NAVIGATION
  16. 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. 17. TAB BAR ‣ Facebook, Twitter, Imgur, Flickr, Instagram, Periscope… 17Instagram
  18. 18. TAB BAR ‣ iOS/Android pattern ‣ Visible right away, always ‣ Highlights the most important things ‣ Thumb-friendly ‣ Doesn’t compete with
 back button ADVANTAGES 18Airbnb
  19. 19. TAB BAR ‣ 4-5 elements (not always) ‣ Unrecognisable (If we’re using icons only) ‣ Takes valuable space DISADVANTAGES 19Elevate
  20. 20. FLAT NAVIGATION ‣ Snapchat, Tinder, Swarm… 20Tinder
  21. 21. FLAT NAVIGATION ‣ Visible right away ‣ Encourages to discover ‣ Keeps IA simple ADVANTAGES 21Duolingo
  22. 22. FLAT NAVIGATION ‣ Doesn’t make sense with more than 4-5 elements ‣ Some pages are available through other pages ‣ Sometimes: not understandable DISADVANTAGES 22Swarm
  23. 23. GESTURES ‣ Paper, Clear, Kickstarter, Wire… 23Paper
  24. 24. GESTURES ‣ Saves space on the screen ‣ People say: it’s natural! ‣ Spark of mystery ‣ Creative, fresh ADVANTAGES 24Kickstarter
  25. 25. 25 GESTURES ‣ Discoverability ‣ Accuracy DISADVANTAGES Wire
  26. 26. SPRINGBOARD ‣ YPlan, iOS/Android Settings, Dropbox 26YPlan
  27. 27. SPRINGBOARD ‣ All elements remain visible ‣ No additional elements on the screen ‣ Creates natural hierarchy ADVANTAGES 27GoPro
  28. 28. SPRINGBOARD ‣ Nesting views (you need to tap a few times to go back) ‣ Table is not appealing DISADVANTAGES 28iOS Settings
  29. 29. OK, OK, BUT…
  30. 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. 31. WELL-DESIGNED HAMBURGER
  32. 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. 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. 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. 35. FOLLOW UP
  36. 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. 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. 38. Łukasz Przywarty lukasz@przywarty.com @LukaszPrzywarty Thank you!
  • YunJaeKang

    Sep. 16, 2019
  • JoanaCerejo

    Jul. 24, 2019
  • jomonteiro

    Jul. 5, 2019
  • gstocker

    Sep. 30, 2018
  • LukeMorey

    Sep. 26, 2018
  • RobertaPorqueddu

    Jun. 29, 2018
  • HelenBradley6

    Jun. 29, 2017
  • JadersonNascimento

    Jun. 22, 2017
  • FilipeLosoft

    Mar. 16, 2017
  • KAZAKY999

    Aug. 29, 2016
  • SunminLim1

    Aug. 10, 2016
  • vitaliyvborodin

    Aug. 2, 2016
  • kaustubh222

    Jun. 7, 2016
  • MarkTraynor3

    Mar. 20, 2016
  • ndoedo

    Mar. 14, 2016
  • lubeld

    Mar. 7, 2016
  • visualbyte

    Feb. 17, 2016
  • haraldf

    Jan. 25, 2016
  • jeetendrapal

    Jan. 21, 2016
  • MusicMarketing

    Jan. 20, 2016

My talk from Product Camp 2015.

Views

Total views

8,651

On Slideshare

0

From embeds

0

Number of embeds

201

Actions

Downloads

58

Shares

0

Comments

0

Likes

32

×