Facebook Does It So Shouldn't I? π Should You Use the Hamburger π Menu/Icon For Mobile Navigation
Last Updated -
A few year ago I was able to attend the Philly bar camp and was able to attend a cool session on mobile navigation and user experience by Amber DeRosa and Alicia Hatter. Unfortunately I was a little tardy arriving at the event, but made about half of the talk and was extremely impressed with what I saw and learned.
They were sharing their findings doing actual usability studies for Vangaurd titled Death to the Hamburger Icon. For those of you who do not know what the heck the Hamburger Icon is I am sure you have probably used it. The question is did you know what to do?
The Hamburger Icon is typically three stacked horizontal lines located in the header of a SmartPhone application user interface. You have probably seen them used in native and HTML5 applications if you spend time on your phone not talking and texting. They are very common and employed by many of the top apps and online properties. They are a way to suppress navigation to preserve screen real estate without making it completely inaccessible.
One of the main points in the presentation, as you may have guessed is this user experience metaphor may not be as useful as you think. In their research they found users were the least successful finding the application's navigation when the menu was activated by the Hamburger icon alone. This sentiment seems to be share by others that have done research, like Erick ArbΓ©. Instead they found a higher success rate when the icon was paired with the word 'menu'. Why? It took the guess work out for many users.
As I was getting settled Amber was reviewing this part of their research and how they brought it to their stakeholders, designers and developers. She said a response they received was how can this be true because Facebook uses it so everyone should just know what to do? Like Amber and Alicia I have experienced this scenario numerous times in my career. There are always large, well funded companies that have fairly popular web sites or applications, but that does not mean their user interface is perfect. In fact they make all sorts of errors. When Mark Zuckerberg stated HTML5 was not ready yet, I did a little evaluation of the Facebook's web site, what a mess! Please do not do what they do, if you do you will feel confident in saying HTML5 is not ready, instead of owning your own mistakes.
But back to the point, have you been told by a stakeholder to do something either in the front-end or back-end you absolutely knew was wrong with the reasoning company XYZ does it why shouldn't we? If you have any experience my guess is absolutely. For me I have tried to explain as much of the science behind my reason or how the choice falls in the technical debt bucket and they will pay for it more in the long run. Its a tough battle to win many times because they pay you and look at us more as assemblers of their dreams. They also have egos and like you and I can become fixated on a solution or answer even when the numbers show us it is just wrong.
I continually fight for High Performance HTML5 best practices and the financial and physiological reasons behind fast web application and great user experiences and sadly win far fewer than I would like. Stay true to what you know is right, as long as you have proper research behind your side. But at the same time be ready to change your position when the data changes.
Amber and Alecia do user experience testing all the time and from what I saw have it down to a very good science. The great thing is it does not take a lot to replicate their efforts. You really only need 4 or 5 different users to get a decent sample size. Of course more is better, but too many is probably too time consuming. If nothing else get your spouse and family to try your application out and LISTEN to what they say. Watch what they do, have empathy for them and adjust your experience to make them happier and more successful.
I am trying to get a book wrapped up on modern single page web applications that use responsive design. The Hamburger is one of the tools I have used to make my site more responsive. I don't use it in the 'phone' form factor, but actually when the application in in the 7 inch tablet widths because I opt for a toolbar at smaller dimensions (and yes there is some science to that choice). I decided to come home and adjust my icon to use the word menu and see if it felt awkward or not. Here is what the before and after look like. What do you think?
Just because a high profile web site, application or person does something does not mean you have to follow suit. Just like your mother said, if they jump off a bridge are you going to do it too? Try things out, sometimes they do know what they are doing because they have folks like Amber and Alicia, sometimes they ignore them.
You wont really know if something works till you try, test, fail and adjust. And maybe what works for them wont be what works for you, again test your application. If you want to learn how to setup a user experience test lab or environment Amber has written a pair of articles for UXMag to help get you started, Mobile Testing Toolbox Part 1 & Part 2.
I also encourage you as a web developer to seek out resources like the talk I attended this weekend, read user experience blogs and books. There is actually quite a bit of great research around good user experience and it is not as difficult as you think to execute.
