Responsive Design

The Genius—and Potential Dangers—of the Hamburger Icon (Flyout Menu)

Written by:

Meet the Hamburger Icon

It’s been waiting for a proper introduction for years now. You’ve seen it. Maybe it was in your Facebook app, or that paleo-vegan-kale-smoothie recipe site you visit every morning — you can’t quite pinpoint where, but you’ve seen it.

If you work with Vital, there’s a 90% chance that the term “hamburger nav,” or “flyout menu” will be mentioned during your discovery process. This article will give you a quick glimpse into what it is, why to use it, and the controversy surrounding it.

A Quick History Lesson

norm-cox-hamburger-icon-creator
Originally created by then Xerox product designer Norm Cox waaay back in 1981, the hamburger icon was originally designed to simply indicate a list within the Xerox “Star” system.

For years the hamburger icon lay mostly dormant, emerging randomly in various interfaces.

Then came the smartphone. Saving screen real estate was the cause, and flyout menus—triggered by the hamburger icon—was the effect. With the whole world moving to smaller-screened devices, the need slowly arose to get as many menu items on the screen as possible. First came the tabbed navigation from the native iOS apps—typically four to five icons anchored to the bottom of the screen. These were your primary menu items and they did the trick for a time.

Then Mr. Ethan Marcotte came along in 2010 and turned the industry on its head with responsive design. No longer did you need to double tap for content; the content could be hierarchically architected within a single full width column. This also meant you needed to account for that 15-item horizontal navigation you had on the desktop. In swoops the hamburger nav. Pushing the navigation up into some unseen oblivion only to be revealed when the user is actively looking for the navigation.

Enter 2012, the hamburger menu, having been firmly established within responsive design as the go-to for navigation consolidation, started creeping into desktop layouts. These layouts were gorgeous, and designers saw how clean and simple their sites could be without the clutter of a three-tiered navigation filled with drop-downs, social icons, search bars and utility links. For a time, this trend was joyously embraced. Then something happened.

What was once an elegant and functional design solution seemingly crossed the rubicon and broke some kind of Dieter Rams commandment…

Fast Food Functionality

fast-food-functionalityThe name has become a bit of a double entendre since it’s inception. The title obviously refers to the shape literally looking like two buns and a slab of meat. However in the past couple of years it’s come under fire within the UI/UX community due to its use on desktop designs. It tastes good, but it’s bad for you, they say. The hamburger’s public image went from grass-fed hipster beef to a slimy Big Mac hiding behind the glossy veneer of a plastic & glue-filled model burger photoshopped to look like Pixar food.

Hiding your navigation on desktop has sparked quite the debate in the UX community.

Misusing the hamburger (as with any UI element on your site) can be damaging to your user experience, much like a Big Mac can send you straight into a vomit-laden food coma. The temptation is there when a designer is presented with an overly complex navigation and utility bar and they just want to make the site look clean, so they deploy the hamburger. This is where the term “basement” comes from when UX designers talk about off-canvas navigations. It’s under the page and filled with crap. So why would you hide navigation items? That’s a valid question, one that needs to be explored and tested during the prototyping phase of a site build.


pattern-discovery

Power in the Pattern

Some things just feel right, and anyone that has opened up an off canvas navigation can tell you it just works. The tactile feel of content sliding to the side in order to refocus your attention while maintaining your current place on the site is rewarding. It also allows for that focus to be placed on the actual page content, unhindered by extraneous clutter caused by a navigation.

We love to discover things, it’s within our nature. Because of this, we are driven by a curiosity that almost forces us to explore and examine anything we might deem “hidden” or “mysterious.” Of course this isn’t to say your navigation needs to be hidden. The beauty of the hamburger is that it just indicates that there’s SOMETHING you are not seeing right now. So what happens when you can see a navigation on your desktop site, but there is still a hamburger up in the corner? The true power of the hamburger is that it has no boundaries. It can go far beyond simply revealing your navigation. The entire viewport is at your disposal, want to go full page — fill it with products: calls to action, a search box, a slider of featured blog posts or resources? Why the hell not.

The hamburger is ever-present and indicates that there are important items just within reach that can enhance your current browsing experience. That’s the key, determining if the hamburger is truly enhancing your user experience.


is-a-hamburger-nav-for-me

Is the Hamburger Icon Right for Your Website?

During those crucial early months of planning, researching, site mapping and prototyping, your creative team will need to break down the multitude of interface variables that your project presents in order to make that ever-important decision. Do I need a hamburger icon on my desktop site? (It isn’t even a question on a mobile viewport.)

Let’s explore some of the biggest questions that help steer the decision making process.

How many menu items do you have?

In a perfect world, all sites would be as simple as an agency site (Work, Services, Team, Blog) — chances are you need more than that. So ask yourselves, can I pull out the bare essentials and add the rest to an off-canvas panel, or flyout menu? If your current traffic patterns prove that 80% of traffic is flowing to your Products page, why feature your Company page just as prominently, cluttering the page? Caution: Blanket Statement—none of this is black and white; it’s all about context.

Are you building a web app or a simple responsive website?

Apples and oranges I know, but the functionality is beginning to merge between native apps and responsive layouts. Typically a web app will have a small set of interactions the user wants to repeat over and over again. Because of this, the user interface needs to reflect the repetition of the usage patterns, so having the link to a frequently-used feature hidden off-canvas would be a frustrating experience. However, if you have user profile settings or lists you want to access like on Twitter, the off-canvas basement is the perfect spot to store them (note to Twitter!).

What features need to be ever-present?

eCommerce sites are unique in that they add a second level of interaction by giving the user a profile, cart, wishlist, product search, etc. These become navigation items, as each item has a page dedicated to it. Typically, these items end up in a utility bar which can add unnecessary bloat to an otherwise clean UI. Adding these to a flyout menu is a great option.

Have I structured my content with a solid conversion strategy?

If you work with an agency using inbound marketing best practices, then the answer is yes. Without clear calls to action and an expertly laid out conversion strategy, you should likely avoid an off-canvas navigation. Oftentimes a website requires the navigation to be present at all times because the content is not built around conversions and education, resulting in content dead zones that rely on using the primary navigation to continue exploring. Inbound marketing best practices allow for the freedom to stay on-canvas or venture off-canvas.


It’s all about context.

“There is no more dubious phrase than ‘studies have shown’. Five minutes from now, studies will show something different.”

-Randy Cohen, New York Times

Ten minutes worth of Googling around and you can find numerous case studies highlighting just how much positive impact the use of a hamburger icon can have on your site ROI. You can also dig around and find just as many instances of the icon being used poorly and actually hurting the UI of the site. ConversionXL ran a test on an eCommerce site that definitively showed an increase (+6%) in revenue. Yet the crew over at ExisWeb ran a very similar test that yielded very different results (+12%) when the hamburger icon was replaced with the word “Menu”.

hamburger-nav-conversion-stats

This is not intended to be a sales piece, merely an educational reference hell-bent on showing how powerful the underlying pattern of off-canvas content can be. The hamburger icon is simply a conduit that triggers the needed receptors to clue your brain in that there is more to see. It really is up to the strategy team in charge of the user experience (UX) of your site to weigh the unique pros and cons objectively and come to an informed conclusion.

We fully support and actively perform A/B testing on our inbound client projects to constantly evaluate all buyer journeys and improve conversions. It’s amazing what you can learn in a short amount of time. That giant navigation that you decided you ABSOLUTELY must show at all  times, just might perform better off canvas.

So this begs the question, should I use a hamburger icon nav on my next site?

You won’t know until you test.

 

In closing, please enjoy this gallery of hamburger-icon/flyout-menu-triggered awesomeness.

chrome-hamburger

 

megafood-hamburger

scripted-hamburger

newton-hamburger

 

See the Pen Hamburger Menu? No Thanks, I Prefer Hot Dogs. by Sean Dempsey (@seanseansean) on CodePen.

10 Questions to Ask About Your Web Design Project

Join the Conversation

    Author’s gravatar

    I’m pretty sure that the 3 lines are to signify a list (of options) – and then someone must have had a weird parent who made weird hamburgers ~ and they were like, “Hamburger.”

    Reply
    Author’s gravatar

    Looks like a muffin sandwich to me.

    Reply
    Author’s gravatar

    Mmm—muffin sandwich! That’s a genius idea, right there… like a breakfast hamburger?

    Reply
    Author’s gravatar

    Well, these totally remind me of a Egg McMuffin instead of a hamburger. McMenu :-)

    Reply
    Author’s gravatar

    What about a grilled cheese?

    Reply
    Author’s gravatar

    By the way, these hamburger transformations are relevant: http://sarasoueidan.com/demos/navicon-transformicons/

    Reply
    Author’s gravatar

    Great find! Sara Soudeidan is a genius css/svg developer. I look at her work for inspiration all the time.

    Reply
Related Posts

4 Steps to Creating a Successful Site Mapping Strategy

Read More

Website Design & Development -

The site mapping phase of a website project is a strategic process that if done correctly, will set the tone for your entire website.

Read More

Written by:


Website Color Schemes & Web Fonts — Two Key Factors in Effective Web Design

Read More

Web Design -

The Institute for Color Research says that the average person makes a judgment about a product or brand within 90 seconds — which is why the initial first impression you give som…

Read More

Written by: