Rosetta User Research recently noticed many examples of desktop sites adopting mobile and tablet design patterns—cleaner homepage designs (such as flat design), removal of navigational options, elimination of promotions and ads, consolidation of HTML, inclusion of icons formerly reserved for mobile, use of larger fonts and infinite scrolling. Understanding the user’s experience is our job, so we naturally start asking questions like, ‘How do these mobile design themes translate onto desktop from the user’s perspective?’ and ‘Does this trend have a good, bad or other effect on the user experience?’ To help answer these questions, we focused on one example of a mobile pattern we see moving over to desktop, the “Hamburger” menu icon. The ‘hamburger’ icon is simply three or four horizontal lines stacked up, and is an icon often used on mobile sites to reveal a global menu. But now, it is showing up on many desktop sites, such as Pinterest, NBC News, Slate, SquareSpace, New York Times, Time, Today and more.
We selected a sample of desktop sites using the hamburger navigation and tested them using a few research techniques including online click tests, navigation flow tests and un-moderated usability studies. We provided two types of tasks, some which required the user to consult the global nav behind the hamburger and others that included navigational options on-page as well as behind the hamburger. We found that in most tests, only one-third of participants opted to use the hamburger nav. Most users preferred sticking with other navigation items if available.
While most users preferred other navigational techniques to revealing the nav behind the hamburger, there are a few things you can do to increase its usability. Here are a few key takeaways that we find helpful:
- Be Consistent: The “hamburger” icon should always remain in the same place, carrying the same options.
- Include Some Crutches Just in Case: Pull key user tasks (sign in, reservations etc.) out of the hamburger nav and allow for quick access in the utility navigation.
- Right Place, Right Time: Use it in the right site for the right audience. Use it only if it matches the simplicity of the design.
- Don’t Get Lazy: Do not make it the junk drawer of the site. Avoid hiding the sign in, as it seems unnecessary. Remember, you want to encourage users to sign in.
- Test with Users: The best way to ensure you haven’t created roadblocks with your new design is to test it with users.
If you would like to learn more about the testing we did, please see the slideshow we presented at Cleveland UXPA in March 2014 below: