Embed Size (px)
Citation preview
HelloProduct Camp!
Łukasz Przywarty @przywarty
Product Camp 2015 - May 30
I’M A DESIGNER
‣ Infermedica - UX Designer
‣ Pilot - Designer
HAMBURGERLESSOn creative mobile navigation
I HAVE SINNED
‣ Not once, not even twice…
GiveMeTap 4
WHAT’S THE PROBLEM?
IS NOT UNDERSTANDABLE
LOGICAL EQUIVALENCE
TRIGRAM FOR HEAVEN/SKY (1, 2)
SEPHORA?
p∨p≡p
乾 Qián ☰
6
‣ Icon is easy to oversee
‣ Menu items are hidden
Spotify
IS NOT VISIBLE
7
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
“
SUPPORTS LOUSY IA
Menu usually contains too
many elements
Youtube 9
“ 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
SLOWS YOU DOWN
Animations take time
Days 11
OVERWRITESBACK BUTTON
Hamburgers don’t play nice
with back buttons
Google Drive 12
TESTED, DOESN’T WORK
ZEEBOX APP - Source
2.5
3.9
2.3
2.5
Avg weekly frequency
Avg daily frequency
Hamburger Tabs
13
Users are still unfamiliar with newer icons, including the three-line menu icon and the map-marker icon. — KATIE SHERWIN
“
CREATIVE NAVIGATION
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
TAB BAR
‣ Facebook, Twitter, Imgur,
Flickr, Instagram, Periscope…
17Instagram
TAB BAR
‣ iOS/Android pattern
‣ Visible right away, always
‣ Highlights the most
important things
‣ Thumb-friendly
‣ Doesn’t compete withback button
ADVANTAGES
18Airbnb
TAB BAR
‣ 4-5 elements (not always)
‣ Unrecognisable (If we’re
using icons only)
‣ Takes valuable space
DISADVANTAGES
19Elevate
FLAT NAVIGATION
‣ Snapchat, Tinder, Swarm…
20Tinder
FLAT NAVIGATION
‣ Visible right away
‣ Encourages to discover
‣ Keeps IA simple
ADVANTAGES
21Duolingo
FLAT NAVIGATION
‣ Doesn’t make sense with
more than 4-5 elements
‣ Some pages are available
through other pages
‣ Sometimes: not
understandable
DISADVANTAGES
22Swarm
GESTURES
‣ Paper, Clear, Kickstarter,
Wire…
23Paper
GESTURES
‣ Saves space on the screen
‣ People say: it’s natural!
‣ Spark of mystery
‣ Creative, fresh
ADVANTAGES
24Kickstarter
25
GESTURES
‣ Discoverability
‣ Accuracy
DISADVANTAGES
Wire
SPRINGBOARD
‣ YPlan, iOS/Android Settings,
Dropbox
26YPlan
SPRINGBOARD
‣ All elements remain visible
‣ No additional elements on
the screen
‣ Creates natural hierarchy
ADVANTAGES
27GoPro
SPRINGBOARD
‣ Nesting views (you need to
tap a few times to go back)
‣ Table is not appealing
DISADVANTAGES
28iOS Settings
OK, OK, BUT…
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
WELL-DESIGNED HAMBURGER
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
HOW
‣ Consider different
appearance: menu, border…
‣ Use the bottom of the screen
‣ Make sure that primary
elements are visible
Nat Geo Atlas
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
FOLLOW UP
PLEASE
‣ Don’t go the easy way
‣ Remember about architecture: what we need isa 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
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
