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
“
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
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
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. TAB BAR
‣ 4-5 elements (not always)
‣ Unrecognisable (If we’re
using icons only)
‣ Takes valuable space
DISADVANTAGES
19Elevate
21. FLAT NAVIGATION
‣ Visible right away
‣ Encourages to discover
‣ Keeps IA simple
ADVANTAGES
21Duolingo
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
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
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
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