← View all blog posts

Hamburger Icons: Well done?

by Mr. Dickerson
September 10, 2014. 5:53 pm

At YDI, we’re not all about EGD and print design — the web is alive and well within our shop. The job of our web team is to find the best visual solutions for the best end-user experience, for all visually-consumed mediums, albeit “real world tactile” or digital proper. We often trip over ourselves trying to find land somewhere in the realm of “best practice” and end up adopting newer, more intuitive approaches as they emerge in our field. The headache we’re constantly trying to accomodate has been evolving ever since the infancy of the handheld/mobile device: the responsive web.

We’ve done everything from providing a separate site for mobile users to developing dynamic content that responds to device limitations. As we’ve learned, no particular strategy or approach has become a concrete “industry standard,” and we’re still slinging ideas back and forth on how to best tackle these varied user experiences. We’re fully-embarked in a messy adventure; that which has become known as the “responsive web design” movement. In this new stage of development, we’re building differently, and making more deliberate design choices at every step, creating universal solutions that work on every device the user can get their hands on.

A key point of discussion that has come into the forefront involves what might be the most important utility within any site/application’s workflow: the navigation, or how you browse deeper into a site’s content.

Obviously, as designers, we’re offered a flexible license to display these options in a variety of ways, and when the window shrinks in width, we’re challenged to display the same list of “next steps” in a functional manner. There’s no right or wrong answer (and it looks it will stay that way in perpetuity), but the ubiquitous means in the web design community is to collapse the navigation, tuck it away and reveal it using a button.

That same button has gone through many makeovers, but the most utilized resolution appears to be the “hamburger icon.”

So what’s a hamburger icon?
Those three damn stripes. I say “three damn stripes,” because those three damn stripes have been a topic of fervent debate in our part of the design community since it’s become a star utility in the world of responsive design. The burger icon is meant to represent a list of options, simplified and streamlined to look like a stack of bars. It’s a visual call out, a label upon a button that reveals the navigation to the site you’re viewing. Simple, sweet, straight to the point, and hell, it’s everywhere.

Sean Monahan and Javi Pérez via Dribbble

That navigation can fold out like a panel, slide out like a board, or drop down like a standard menu we’re used to seeing in most digital contexts. We’ve been using these “burgers” and other icon-meets-button solutions so we can present more information to the user without a slew of options getting in the way the read of the page you’re on.

Why burgers are bad for you.
One argument against the use of hamburger icon: it doesn’t clearly state there’s a menu at work that you can use, and neatly tucking the navigation away from the user is bad.

Hiding the navigation means a couple of things. It takes one more click for you to reveal the information you need to access the rest of the content on the site. For some reason, there’s an aversion to actually using the general utility of the site to access the information you need. I’ll elaborate later on.
Another popular point is that the hamburger stack isn’t necessarily the right iconic representation for a menu to break out from. This argument holds more water, however, the thronged web development pundits abound continue to fail to provide a superior alternative solution.

examples

We’ve seen examples such as the previous out in the wild, but we still haven’t arrived at a solution that has been as universally accepted as the hamburger icon itself. The three-pronged stack has gotten quite the push over the course of the past couple of years, and because of what it’s meant to represent, it isn’t “incorrect” within the context that we’re using it.

Our take.
Billions of test cases from users around the world can’t be wrong. Those involved in the dialogue have to admit — hamburgers and concealed navigations have their function when they’re needed. Between mobile applications and the responsive web, we’ve come to understand that if we want more content, we have the option to reveal a menu to get more out of our browsing experience. In turn, we get more screen real estate to display the content at hand and allow the user to browse without a menu restricting the view.

The average contrarian to the collapsible navigation should also take a deep breath and consider trying this — have a look at your desktop display and try to describe where each of your application’s core options live and have lived for a long, long time, no matter what platform you use.

mac-menu

Apple’s stored most of your prime selections in the top left, and your global functions that work with applications running in the background live at top right. How could such a familiar concept be lost upon the responsive generation? Is it a problem if it’s worked for so long (I’m not saying we can’t eventually do better, I’m saying it works). And worry not, Windows users, you’ve dealt with more of the same in your world, if not with far more cumbersome effort as Microsoft continues to rethink their desktop experience.

live20tiles-11331051

The argument really boils down to what we’re showing the user in the first place. What if a site doesn’t possess a deep navigation within a mobile/tablet view? This eventually leads to a general discussion about content strategy. What content do we choose to deliver to the user that’s optimally operative to their needs when using the site? How do we determine what the user needs to see at bare minimum? When does simplifying become disruptive to the need of the audience trying to access theinformation they want? It’s considered a failure if the user goes to a site and says “I can’t find it on here, I’ll just look it up when I get home.” The client and the designer need to decide what stays and what goes and research against solved concepts with similar goals. We test with general users using click tracking and analytics, and responding by delivering what makes sense, what’s most balanced, what’s most functionally sound for the audience.

This isn’t about the hamburger icon and whether or not it’s the final answer. There is no final answer. The internet will evolve further than a misnomer for mobile web utility button. As long as we continue to consider the audience and our purpose in engaging them, we should be at liberty to select the entreé of our choice.

Related Posts

Copyright © Younts Design Inc., 2017
Let's get social: