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.

1. #HamburgerWars
#HamburgerWars
Mike Ryan
@ryaninteractive

2. #HamburgerWarsWhat is a hamburger menu?
A slide-in menu using
a three line icon.
Kindle

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. #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. #HamburgerWarsHave others had similar findings?
http://www.exquisitetweets.com/collection/lukew/2919 https://twitter.com/jmspool/status/441224973047574528

6. #HamburgerWarsWorkarounds

7. #HamburgerWarsHow did we get here?
Jennifer Aldrich @jma245https://userexperiencerocks.wordpress.com/2014/05/12/hamburger-icon-is-offended/

8. #HamburgerWarsFacebook? (2010)
HAMBURGER!

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. #HamburgerWarsJay-Z - The Blueprint 3 (2009)
http://en.wikipedia.org/wiki/The_Blueprint_3
HAMBURGER!
HAMBURGER!

11. #HamburgerWarsXerox PARC (1981)
HAMBURGER!

12. #HamburgerWarsEsprit Logo? (1979)
http://en.wikipedia.org/wiki/Esprit_Holdings
HAMBURGER!

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. #HamburgerWarsAdidas Logo? (1949)
http://reversecommuter.com/tag/addidas/
HAMBURGER!

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. #HamburgerWarsMayan Number System? (250 AD)
http://www.ancient-symbols.com/mayan_symbols.html
HAMBURGER!

17. #HamburgerWarsTaoist Cosmology? (1,000 BC)
http://en.wikipedia.org/wiki/Bagua http://primaltrek.com/house.html
HAMBURGER!

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. #HamburgerWarsWhat does this icon represent?
No clear metaphor.

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. #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. #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. #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. #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. #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. #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. #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. #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. #HamburgerWarsDoesn’t it make responsive easier?
Yes, but...
https://twitter.com/lukew/status/443763299784482816

30. #HamburgerWarsVertical menus are infinite.
Three and a half
screen lengths on
an iPhone 5.

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. #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. #HamburgerWarsFacebook & NBC removed it
http://www.engadget.com/2013/09/18/facebook-ios-app-update/
2010 September 2013 February 2014
July 2014

34. #HamburgerWarsMany apps use horizontal menus.

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. #HamburgerWarsDouble Hamburger Menus?

37. #HamburgerWarsQuestions?
Thanks!
Mike Ryan
@ryaninteractive