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
Mike Ryan @ryaninteractive
#HamburgerWarsWhat is a hamburger menu?
A menu using a
three line icon.
Kindle
#HamburgerWarsWhy are people using them?
Rdio
● Space is scarce on mobile
● Minimal navigation gives a clean look.
#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...
#HamburgerWarsWorkarounds
#HamburgerWars
1. The 3-line icon doesn’t have a clear metaphor & is used
inconsistently.
Why shouldn’t you use a hamburge...
#HamburgerWars
Feedly: Menu & All Music: Reorder Various: Scroll Instagram: List
Chrome: Options GoodReads: List GMaps: Sc...
#HamburgerWarsInconsistent use
Google Material Guidelines (Hamburger Overload Edition)
https://www.google.com/design/icons/
#HamburgerWarsTesting the hamburger icon
Exis Web A/B tests
http://exisweb.net/mobile-menu-icons http://exisweb.net/mobile...
#HamburgerWars
1. Many users don’t know what to expect. The 3-line icon doesn’t have
a clear metaphor & is used inconsiste...
#HamburgerWars
Open the
menu and
scan down.
Glance up.
iBooks
Hamburger menus require you to recall what is in them.
Visib...
#HamburgerWarsNavigation removed from content
Menu is
integrated with
content
Menu is
separated from
content
Twitter MyDis...
#HamburgerWars
1. Many users don’t know what to expect. The 3-line icon doesn’t have
a clear metaphor & is used inconsiste...
#HamburgerWarsVertical menus are infinite.
Three and a half
screen lengths on
an iPhone 5.
#HamburgerWarsEffects of switching to a tab menu
Redbooth (January 2015)
Switched to a tab menu
● Number of sessions doubl...
#HamburgerWarsEffects of switching to a tab menu
Zeebox (April 2014)
http://thenextweb.com/dd/2014/04/08/ux-designers-side...
#HamburgerWarsSome are removing it after testing
http://www.engadget.com/2013/09/18/facebook-ios-app-update/
2010 Septembe...
#HamburgerWars
http://www.comscore.com/Insights/Market-Rankings/comScore-Reports-March-2015-US-
Smartphone-Subscriber-Mark...
#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 Ignite UXPA International 2015

2,154 views

Published on

The responsive age has brought many challenges to the UX world. One of the biggest challenges is mobile navigation. Enter the hamburger icon (☰)! Many mobile apps and sites today use this design pattern. But, is hamburger navigation our responsive savior or does it introduce additional problems? This session will look at the current use of hamburger navigation and summarize qualitative and quantitative studies of it's efficacy.

Published in: Design

#HamburgerWars Ignite UXPA International 2015

  1. 1. #HamburgerWars Mike Ryan @ryaninteractive
  2. 2. #HamburgerWarsWhat is a hamburger menu? A 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.
  4. 4. #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.
  5. 5. #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) Six Usability Tests (December 2013 – June 2014, 138 Ps) 71/75 Failed
  6. 6. #HamburgerWarsWorkarounds
  7. 7. #HamburgerWars 1. The 3-line icon doesn’t have a clear metaphor & is used inconsistently. Why shouldn’t you use a hamburger menu?
  8. 8. #HamburgerWars Feedly: Menu & All Music: Reorder Various: Scroll Instagram: List Chrome: Options GoodReads: List GMaps: Schedule View LinkedIn: Search Photos: Reorder Pintrest: Filter Amazon: Menu & List Stocks: Reorder Inconsistent use The three line icon is used for many things.
  9. 9. #HamburgerWarsInconsistent use Google Material Guidelines (Hamburger Overload Edition) https://www.google.com/design/icons/
  10. 10. #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%
  11. 11. #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. Why shouldn’t you use a hamburger menu?
  12. 12. #HamburgerWars Open the menu and scan down. Glance up. iBooks Hamburger menus require you to recall what is in them. Visible navigation requires a glance, and retains context. Hamburger Menus: Recall Over Recognition
  13. 13. #HamburgerWarsNavigation removed from content Menu is integrated with content Menu is separated from content Twitter MyDisneyExperience When menus are integrated with content, they are mentally connected.
  14. 14. #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?
  15. 15. #HamburgerWarsVertical menus are infinite. Three and a half screen lengths on an iPhone 5.
  16. 16. #HamburgerWarsEffects of switching to a tab menu 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
  17. 17. #HamburgerWarsEffects of switching to a tab menu Zeebox (April 2014) 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
  18. 18. #HamburgerWarsSome are removing it after testing http://www.engadget.com/2013/09/18/facebook-ios-app-update/ 2010 September 2013 February 2014 July 2014 (removed from iPad, May 2015) May 2015
  19. 19. #HamburgerWars http://www.comscore.com/Insights/Market-Rankings/comScore-Reports-March-2015-US- Smartphone-Subscriber-Market-Share Most of the top apps use horizontal menus. Top 15 Smartphone Apps (March 2015) ● 9/15 use a Horizontal Nav ● 6/15 use a Hamburger (5/6 are Google)
  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. Trim content on mobile 3. If you are going to use a hamburger menu, label it and make it stand out. Recommendations
  21. 21. #HamburgerWarsQuestions? Thanks! Mike Ryan @ryaninteractive

×