Deconstructing the Hamburger (Menu)
My favorite articles on how those three horizontal lines are poor usability practice (As of August 2016)
It’s already 2016, and just to educate people — findings still show that the elegant and popular hamburger button is not immediately understandable, nor as effective as other executions of a menu on mobile.
From my own work, I’ve ran over 20 usability tests here in the Philippines, and those that had hamburger menus were only effective when testing with users up to around a certain age group.
But, if you won’t take my word for it, here is the literature (as of 2016*) about making mobile menus more effective:
*Because design patterns change over time, depending on platform developments and user adoption (case in point: hover states)
From Luke Wroblewski, one of the most established bloggers and speakers about web design
A clear, layman-ized explanation from BBC
Brad Frost gave a great one-day workshop here, on Atomic Design, with some of the best slides explaining how to make menu icons work for mobile-responsive sites.
I can’t find the full talk online, but he does have a post about navigation for mobile here.
A non-partisan analysis by designer, speaker and author Jeremy Keith — not berating the hamburger button, but berating misused design clichés like the hamburger button:
Lastly, an entertaining, but useful read (it’s actually about the role of usability in design, but told in the best way), by Nina Geometrieva
Bonus: a summary of others’ and their own tests:
http://conversionxl.com/testing-hamburger-icon-revenue/#/
An A/B test ran on the designers’ own website, in case you want to see quantitative impact:
I’m not a hater of the hamburger menu, just to make it clear. I just wish more people tested options before settling into a long-term relationship with an icon.
