SlideShare a Scribd company logo
1 of 38
Download to read offline
HelloProduct Camp!
Łukasz Przywarty
@LukaszPrzywarty
Product Camp 2015 - May 30
I’M A DESIGNER
‣ Infermedica - UX Designer
‣ Pilot - Designer
HAMBURGERLESS
On 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
OVERWRITES

BACK 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 with

back 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 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
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
Łukasz Przywarty
lukasz@przywarty.com
@LukaszPrzywarty
Thank you!

More Related Content

Similar to Hamburgerless. On creative mobile navigation – Product Camp 2015

Project 3 [Adult Swim] Presentation
Project 3 [Adult Swim] PresentationProject 3 [Adult Swim] Presentation
Project 3 [Adult Swim] Presentation
Jenna Fitzpatrick
 
Mobile ideation (for human beings) 4.4.12
Mobile ideation (for human beings) 4.4.12Mobile ideation (for human beings) 4.4.12
Mobile ideation (for human beings) 4.4.12
Joel Lim
 

Similar to Hamburgerless. On creative mobile navigation – Product Camp 2015 (18)

Android android-ui-design-patterns
Android android-ui-design-patternsAndroid android-ui-design-patterns
Android android-ui-design-patterns
 
Android UI design Patter
Android UI design PatterAndroid UI design Patter
Android UI design Patter
 
Mobile Prototyping
Mobile PrototypingMobile Prototyping
Mobile Prototyping
 
UX Bootcamp Fall 2015 General Assembly
UX Bootcamp Fall 2015 General AssemblyUX Bootcamp Fall 2015 General Assembly
UX Bootcamp Fall 2015 General Assembly
 
Exploratory Game Design for New User Interfaces
Exploratory Game Design for New User InterfacesExploratory Game Design for New User Interfaces
Exploratory Game Design for New User Interfaces
 
Project 3 [Adult Swim] Presentation
Project 3 [Adult Swim] PresentationProject 3 [Adult Swim] Presentation
Project 3 [Adult Swim] Presentation
 
How to Land a Job in a Startup (26:02:15)
How to Land a Job in a Startup (26:02:15)How to Land a Job in a Startup (26:02:15)
How to Land a Job in a Startup (26:02:15)
 
Tampa Bay UX - Scary UI 2
Tampa Bay UX - Scary UI 2Tampa Bay UX - Scary UI 2
Tampa Bay UX - Scary UI 2
 
The Hamburger Menu
The Hamburger MenuThe Hamburger Menu
The Hamburger Menu
 
Creative APP-titude: iPad Multimedia Tools for Creativity
Creative APP-titude: iPad Multimedia Tools for CreativityCreative APP-titude: iPad Multimedia Tools for Creativity
Creative APP-titude: iPad Multimedia Tools for Creativity
 
Navigation design notes
Navigation design notesNavigation design notes
Navigation design notes
 
ACTEM Scratch Your Creativity 10/10/13
ACTEM Scratch Your Creativity 10/10/13ACTEM Scratch Your Creativity 10/10/13
ACTEM Scratch Your Creativity 10/10/13
 
'User First, Mobile Second' - UX Camp Brighton 2019
'User First, Mobile Second' - UX Camp Brighton 2019'User First, Mobile Second' - UX Camp Brighton 2019
'User First, Mobile Second' - UX Camp Brighton 2019
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017
 
Mobile ideation (for human beings) 4.4.12
Mobile ideation (for human beings) 4.4.12Mobile ideation (for human beings) 4.4.12
Mobile ideation (for human beings) 4.4.12
 
Boost SharePoint User Adoption Through DIY Usability Testing [workshop] Share...
Boost SharePoint User Adoption Through DIY Usability Testing [workshop] Share...Boost SharePoint User Adoption Through DIY Usability Testing [workshop] Share...
Boost SharePoint User Adoption Through DIY Usability Testing [workshop] Share...
 
Introduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignIntroduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience Design
 
2019-CertiFUNcation-UX-relationship_matters
2019-CertiFUNcation-UX-relationship_matters2019-CertiFUNcation-UX-relationship_matters
2019-CertiFUNcation-UX-relationship_matters
 

Recently uploaded

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
kumaririma588
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
amitlee9823
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
TusharBahuguna2
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
amitlee9823
 

Recently uploaded (20)

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call GirlsBook Paid In Vashi In 8976425520 Navi Mumbai Call Girls
Book Paid In Vashi In 8976425520 Navi Mumbai Call Girls
 
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
❤Personal Whatsapp Number 8617697112 Samba Call Girls 💦✅.
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
Vip Mumbai Call Girls Bandra West Call On 9920725232 With Body to body massag...
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 

Hamburgerless. On creative mobile navigation – Product Camp 2015