Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#HamburgerWars
#HamburgerWars
Mike Ryan
@ryaninteractive
UXPA Boston 15 - 10-minute talks
#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.
● Many fai...
#HamburgerWarsHave others had similar findings?
http://www.exquisitetweets.com/collection/lukew/2919 https://twitter.com/j...
#HamburgerWarsWorkarounds
#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...
#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...
#HamburgerWars
I wonder who won the game? Do
these guys have a sports
section? I don’t remember.
Open the
menu and
scan do...
#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...
#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...
#HamburgerWarsQuestions?
Thanks!
Mike Ryan
@ryaninteractive
Upcoming SlideShare
Loading in …5
×

#HamburgerWars UXPA Boston 15 (10 Minute Talk)

2,627 views

Published on

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.

Published in: Design

#HamburgerWars UXPA Boston 15 (10 Minute Talk)

  1. 1. #HamburgerWars #HamburgerWars Mike Ryan @ryaninteractive UXPA Boston 15 - 10-minute talks
  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. ● 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. 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. #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?
  8. 8. #HamburgerWarsWhat does this icon represent? No clear metaphor.
  9. 9. #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
  10. 10. #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 There are many icons similar to the hamburger. Some are menus and some aren’t.
  11. 11. #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%
  12. 12. #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/
  13. 13. #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 only requires a glance retaining context. Hamburger Menus use Recall Over Recognition
  14. 14. #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
  15. 15. #HamburgerWarsDoesn’t it make responsive easier? Yes, but... https://twitter.com/lukew/status/443763299784482816
  16. 16. #HamburgerWarsVertical menus are infinite. Three and a half screen lengths on an iPhone 5.
  17. 17. #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
  18. 18. #HamburgerWarsFacebook & NBC removed it http://www.engadget.com/2013/09/18/facebook-ios-app-update/ 2010 September 2013 February 2014 July 2014
  19. 19. #HamburgerWarsMany apps use horizontal menus.
  20. 20. #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
  21. 21. #HamburgerWarsQuestions? Thanks! Mike Ryan @ryaninteractive

×