1.
HelloProduct Camp!
Łukasz Przywarty
@LukaszPrzywarty
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…
17Instagram

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

20.
FLAT NAVIGATION
‣ Snapchat, Tinder, Swarm…
20Tinder

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

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

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

25.
25
GESTURES
‣ Discoverability
‣ Accuracy
DISADVANTAGES
Wire

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

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

28.
SPRINGBOARD
‣ Nesting views (you need to
tap a few times to go back)
‣ Table is not appealing
DISADVANTAGES
28iOS 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
@LukaszPrzywarty
Thank you!