#HamburgerWars
#HamburgerWars
Mike Ryan
@ryaninteractive
#HamburgerWarsWhat is a hamburger menu?
A slide-in menu using
a three line icon.
Kindle
#HamburgerWarsWhy are people using them?
Rdio
● Space is scarce on mobile
● Minimal navigation gives a clean look.
● In a ...
#HamburgerWarsWhat I have seen in usability tests
● Most participants did not notice or use
the hamburger menu.
● Several ...
#HamburgerWarsHave others had similar findings?
http://www.exquisitetweets.com/collection/lukew/2919 https://twitter.com/j...
#HamburgerWarsWorkarounds
#HamburgerWarsHow did we get here?
Jennifer Aldrich @jma245https://userexperiencerocks.wordpress.com/2014/05/12/hamburger-...
#HamburgerWarsFacebook? (2010)
HAMBURGER!
#HamburgerWarsTweetie? (2009)
http://moovweb.com/blog/hamburger-menu-handy-tool-or-useless-icon/
http://blog.placeit.net/h...
#HamburgerWarsJay-Z - The Blueprint 3 (2009)
http://en.wikipedia.org/wiki/The_Blueprint_3
HAMBURGER!
HAMBURGER!
#HamburgerWarsXerox PARC (1981)
HAMBURGER!
#HamburgerWarsEsprit Logo? (1979)
http://en.wikipedia.org/wiki/Esprit_Holdings
HAMBURGER!
#HamburgerWarsUSAF Imaging Target? (1951)
Used to measure an imaging system's accuracy & performance.
http://www.edmundopt...
#HamburgerWarsAdidas Logo? (1949)
http://reversecommuter.com/tag/addidas/
HAMBURGER!
#HamburgerWarsThe Triple Bar? (1800s?)
http://en.m.wikipedia.org/wiki/Triple_bar
Symbol or operator used in mathematics,
s...
#HamburgerWarsMayan Number System? (250 AD)
http://www.ancient-symbols.com/mayan_symbols.html
HAMBURGER!
#HamburgerWarsTaoist Cosmology? (1,000 BC)
http://en.wikipedia.org/wiki/Bagua http://primaltrek.com/house.html
HAMBURGER!
#HamburgerWars
1. Many users don’t know what to expect. The 3-line icon doesn’t have
a clear metaphor & is used inconsiste...
#HamburgerWarsWhat does this icon represent?
No clear metaphor.
#HamburgerWars
Feedly: Menu & All Music: Reorder Various: Scroll Instagram: List
Chrome: Options GoodReads: List
Docs: Ico...
#HamburgerWars
Soundcloud: Menu GDrive: Menu Gmail: Apps Menu GDocs: App Icon
Word: List GDocs: Line Width Live Nation: Co...
#HamburgerWars
Soundcloud: Menu GDrive: Menu Gmail: Apps Menu GDocs: App Icon
Word: List GDocs: Line Width Live Nation: Co...
#HamburgerWarsTesting the hamburger icon
Exis Web A/B tests
http://exisweb.net/mobile-menu-icons http://exisweb.net/mobile...
#HamburgerWarsIts direct effect on revenue
Diamond Candles (December 2014, sample of 240K)
All variations of the icon impr...
#HamburgerWarsWhat if I label it “menu”?
MobileTravel (April 2015, sample of 300K)
Adding “menu” increased engagement by 6...
#HamburgerWars
“I wonder who won the game? Do
these guys have a sports section?
I don’t remember.”
Open the
menu and
scan ...
#HamburgerWars
“Where am I?
Best sellers?”
Check the
hamburger!
Wiper Blades section.
Back to menu.
Tab bar
Walmart
Wayfin...
#HamburgerWarsNavigation removed from content
Menu is
integrated with
content and is
easy to reach.
Menu is
separated from...
#HamburgerWarsDoesn’t it make responsive easier?
Yes, but...
https://twitter.com/lukew/status/443763299784482816
#HamburgerWarsVertical menus are infinite.
Three and a half
screen lengths on
an iPhone 5.
#HamburgerWarsEffects of switching to a tab bar
Redbooth (January 2015)
Switched to a tab menu
● Number of sessions double...
#HamburgerWarsEffects of switching to a top menu
Zeebox (April 2014, sample of thousands)
http://thenextweb.com/dd/2014/04...
#HamburgerWarsFacebook & NBC removed it
http://www.engadget.com/2013/09/18/facebook-ios-app-update/
2010 September 2013 Fe...
#HamburgerWarsMany apps use horizontal menus.
#HamburgerWars
1. Consider a horizontal menu for
your most important tasks
A tab bar is less than 10% of your total height...
#HamburgerWarsDouble Hamburger Menus?
#HamburgerWarsQuestions?
Thanks!
Mike Ryan
@ryaninteractive
Nächste SlideShare
Wird geladen in …5
×

#HamburgerWars (Full Talk)

14.678 Aufrufe

Veröffentlicht am

This is a lighthearted look at the current user experience of hamburger menu navigation on mobile and desktop platforms. The content will be based upon my observations in user research and additional studies and observations by usability experts.

Veröffentlicht in: Design
4 Kommentare
51 Gefällt mir
Statistik
Notizen
  • the real question is.... whats the risk? Is self-discovery for something this behaviorally trivial, worth more? I would say yes. Late dopters or generational gaps of savvy users is not a good enough argument to dumb-down an experience when the entire industry, is moveing forward at light-speed. I think one of the important things about this slide is "that they will learn"...... and in there lays the rump when assessing if a utility such as a menu, is worth deliberating so much about. From almost all angles of production the hamburger is solid. If we were talking about an unrecognizeable icon for a buy button i think that warrants severity in assessing. Keep in mind that especially for smartphones, we have been dreaming for 20 years about touch screens. Its half the reason why people buy smart phones and dont even make a phone call. The content device of the future actually comes with massive influence of self-discovery, built-in. The medium is mature so people click on less stuff that is less relevant to them, but with that said, when ur in a view on 5 inches and you can touch it, there is little value is spendiongso much time assessing something that eventually every app on the planet will use. Nobody buys a car, and knows what every dial on the radio does the first time they use it, and they are certainty not going to return the car, or crash it, just because the learning curve was more than expected. If your app or website actually involes engagement because of utility or gaming, you do not need to change the menu icon UX. If all you do is deliver someone elses content, then you have bigger fish to fry than worry about a menu icon. In specific sectors like finance - if your markets are generally 45+, then that market didnt grow up with a computer, which justifies a little-dumbing down, but even in that case, it should not be something permanent, just something to pacify until the learning curve has been overcome.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • If used on websites, the problem with a horizontal menu-bar (the solution against Hamburger-Menus) on the bottom of the viewport is, that it gets relocated cause of the browser-controls appearing if taped on the button of the screen — and you therefore have to tap twice…
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Hello Lynn. Thanks for sharing. What I think is really interesting about the hamburger situation is how dismissive people are about these studies, but without much of a counterargument. I think it has a lot to do with responsive and the advantages it brings. Stakeholders are happy because they can fit all their content and have a shorter development cycle. Coders are happy because its efficient and easy. Designers are happy because now they have more space to play with. Then we come in with research findings and crash the party. :) I hope that looking at all of these studies together is helpful. If not, maybe the fact that people are dropping the hamburger will.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Thank you for this, Michael. We recently saw a lot of confusion and 'blindness" to the hamburger icon in our recent iPad app redesign. Your findings corroborate what we saw in a much smaller test. I'm saddened, though, that when sharing your info with our CD, the dismissive response was "well, what was the design like?" implying that the surrounding design may have skewed results negatively against the icon. One would think that 3 A/B tests within one design plus 4 other completely separate designs would be compelling evidence....but, no.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
Keine Downloads
Aufrufe
Aufrufe insgesamt
14.678
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.147
Aktionen
Geteilt
0
Downloads
47
Kommentare
4
Gefällt mir
51
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

#HamburgerWars (Full Talk)

  1. 1. #HamburgerWars #HamburgerWars Mike Ryan @ryaninteractive
  2. 2. #HamburgerWarsWhat is a hamburger menu? A slide-in menu using a three line icon. Kindle
  3. 3. #HamburgerWarsWhy are people using them? Rdio ● Space is scarce on mobile ● Minimal navigation gives a clean look. ● In a responsive design you can have consistent navigation and reuse code. ● It’s on a lot of apps. Users that don’t know what it means yet will learn.
  4. 4. #HamburgerWarsWhat I have seen in usability tests ● Most participants did not notice or use the hamburger menu. ● Several did not know it was an icon. ● Many failed tasks when the hamburger menu was required. (see chart) ● Several participants had seen the icon before but didn’t know what to expect & several had bad experiences with it. Six Usability Tests (December 2013 – June 2014, 138 Ps) 71/75 Failed
  5. 5. #HamburgerWarsHave others had similar findings? http://www.exquisitetweets.com/collection/lukew/2919 https://twitter.com/jmspool/status/441224973047574528
  6. 6. #HamburgerWarsWorkarounds
  7. 7. #HamburgerWarsHow did we get here? Jennifer Aldrich @jma245https://userexperiencerocks.wordpress.com/2014/05/12/hamburger-icon-is-offended/
  8. 8. #HamburgerWarsFacebook? (2010) HAMBURGER!
  9. 9. #HamburgerWarsTweetie? (2009) http://moovweb.com/blog/hamburger-menu-handy-tool-or-useless-icon/ http://blog.placeit.net/history-of-the-hamburger-icon/ HAMBURGER! (Lists, not a menu)
  10. 10. #HamburgerWarsJay-Z - The Blueprint 3 (2009) http://en.wikipedia.org/wiki/The_Blueprint_3 HAMBURGER! HAMBURGER!
  11. 11. #HamburgerWarsXerox PARC (1981) HAMBURGER!
  12. 12. #HamburgerWarsEsprit Logo? (1979) http://en.wikipedia.org/wiki/Esprit_Holdings HAMBURGER!
  13. 13. #HamburgerWarsUSAF Imaging Target? (1951) Used to measure an imaging system's accuracy & performance. http://www.edmundoptics.com/testing-targets/test-targets/ HAMBURGER! HAMBURGER! HAMBURGER!
  14. 14. #HamburgerWarsAdidas Logo? (1949) http://reversecommuter.com/tag/addidas/ HAMBURGER!
  15. 15. #HamburgerWarsThe Triple Bar? (1800s?) http://en.m.wikipedia.org/wiki/Triple_bar Symbol or operator used in mathematics, science & philosophy 1. Logical equivalence (if and only if) 2. Modular congruence 3. Expresses identical equality of functions 4. Triple bond between atoms 5. Homotypic synonyms (for naming plants) 6. To connect objects in a commutative diagram (category theory) p∧T ≡ p 38 ≡ 14 (mod 12) HC ≡ CH HAMBURGER!
  16. 16. #HamburgerWarsMayan Number System? (250 AD) http://www.ancient-symbols.com/mayan_symbols.html HAMBURGER!
  17. 17. #HamburgerWarsTaoist Cosmology? (1,000 BC) http://en.wikipedia.org/wiki/Bagua http://primaltrek.com/house.html HAMBURGER!
  18. 18. #HamburgerWars 1. Many users don’t know what to expect. The 3-line icon doesn’t have a clear metaphor & is used inconsistently. 2. Moving your navigation under an icon has consequences: a. Users have to memorize what is in your menu. b. It provides poor wayfinding. c. Its location is separated from content weakening the mental connection. 3. It encourages us to include everything from desktop in responsive designs. This can create giant and cumbersome menus on mobile. Why shouldn’t you use a hamburger menu?
  19. 19. #HamburgerWarsWhat does this icon represent? No clear metaphor.
  20. 20. #HamburgerWars Feedly: Menu & All Music: Reorder Various: Scroll Instagram: List Chrome: Options GoodReads: List Docs: Icon, Menu & Comment LinkedIn: Search Photos: Reorder Pintrest: Filter Amazon: Menu & List Stocks: Reorder Inconsistent use Three line icons are used for many things. Sometimes in the same application
  21. 21. #HamburgerWars Soundcloud: Menu GDrive: Menu Gmail: Apps Menu GDocs: App Icon Word: List GDocs: Line Width Live Nation: Comment GoodReads: Tile view GDocs: Justify Align Android OS: Filter USAToday: Menu FlipKart: Menu Many similar icons There are many icons similar to the hamburger. Some are menus and some aren’t.
  22. 22. #HamburgerWars Soundcloud: Menu GDrive: Menu Gmail: Apps Menu GDocs: App Icon Word: List GDocs: Line Width Live Nation: Comment GoodReads: Tile view GDocs: Justify Android OS: Filter USAToday: Menu FlipKart: Menu Many similar icons Some have silly names like the hamburger. Let’s come up with some more. Lets talk about burgers Bentokabob side-o-fries SlidersClub sammich Pizza TV DinnerCake Pops Drive-In Burger Layer Cake Meatball
  23. 23. #HamburgerWarsTesting the hamburger icon Exis Web A/B tests http://exisweb.net/mobile-menu-icons http://exisweb.net/mobile-menu-abtest http://exisweb.net/menu-eats-hamburger 1. February 2014 - 20K users. 2. February 2014 - 50K users. 3. March 2014 - 250K users. Won by 20%
  24. 24. #HamburgerWarsIts direct effect on revenue Diamond Candles (December 2014, sample of 240K) All variations of the icon improved revenue by more than 4%. Pink background version with menu label improved it by 6%. http://conversionxl.com/testing-hamburger-icon-revenue/
  25. 25. #HamburgerWarsWhat if I label it “menu”? MobileTravel (April 2015, sample of 300K) Adding “menu” increased engagement by 61% Hamburger alone Hamburger plus “menu” http://www.moovweb.com/blog/hamburger-menu-handy-tool-or-useless-icon/
  26. 26. #HamburgerWars “I wonder who won the game? Do these guys have a sports section? I don’t remember.” Open the menu and scan down until you find sports. “Did I download the new Felicia Day book?” Glance up to Authors. iBooks Hamburger menus force you to remember what is in them. Visible navigation requires only a glance, retaining context. Hamburger Menus: Recall Over Recognition
  27. 27. #HamburgerWars “Where am I? Best sellers?” Check the hamburger! Wiper Blades section. Back to menu. Tab bar Walmart Wayfinding. Where am I? Where can I go?
  28. 28. #HamburgerWarsNavigation removed from content Menu is integrated with content and is easy to reach. Menu is separated from content making it easy to miss. TwitterMyDisneyExperience When menus are close to content and have similar coloring, they are mentally connected. http://www.lukew.com/ff/entry.asp?1927
  29. 29. #HamburgerWarsDoesn’t it make responsive easier? Yes, but... https://twitter.com/lukew/status/443763299784482816
  30. 30. #HamburgerWarsVertical menus are infinite. Three and a half screen lengths on an iPhone 5.
  31. 31. #HamburgerWarsEffects of switching to a tab bar Redbooth (January 2015) Switched to a tab menu ● Number of sessions doubled ● Daily users increased 65% https://redbooth.com/blog/hamburger-menu-iphone-app? utm_campaign=iOS_Dev_Weekly_Issue_181&utm_medium=email&utm_source=iOS%2BDev%2BWeekly
  32. 32. #HamburgerWarsEffects of switching to a top menu Zeebox (April 2014, sample of thousands) http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/ ● Switching to hamburger cut engagement in half ● Tab menu significantly improved weekly and daily frequency Hamburger Tab menu
  33. 33. #HamburgerWarsFacebook & NBC removed it http://www.engadget.com/2013/09/18/facebook-ios-app-update/ 2010 September 2013 February 2014 July 2014
  34. 34. #HamburgerWarsMany apps use horizontal menus.
  35. 35. #HamburgerWars 1. Consider a horizontal menu for your most important tasks A tab bar is less than 10% of your total height. 2. If you are going to use a hamburger menu, label it and make it stand out. Recommendations
  36. 36. #HamburgerWarsDouble Hamburger Menus?
  37. 37. #HamburgerWarsQuestions? Thanks! Mike Ryan @ryaninteractive

×