[00:00:00]

Hey, check this out. I wanna show you something on our website. If you've been on more than just a few websites in your life, you've come across this ubiquitous icon, and it's called the hamburger icon. You click on it, and more navigation pops up, so you can hopefully see other info that the site makes available.

But look at our icon. I hover over this bad boy, and a burger icon appears, sesame seed bun and all. Ba-da, ba-ba-ba.

Someone at Font Awesome made that decision, and let me just say, what a delicious choice. Today we're going to figure out how a functional UI widget accidentally became a sandwich. Why designers have been arguing about it for like forty years, And why Font Awesome just decided to commit to the entire bit.

Welcome to Podcast [00:01:00] Awesome, where we chat about icons, design, tech, business, and nerdery with members of the Font Awesome team. I'm your host, Matt Johnson. Today we're talking about the hamburger menu, the hamburger icon, where it came from, and why the UX community declared war over it, and why and how it won out anyway.

The hamburger menu didn't start as a design statement. It started as a math problem. There just wasn't enough room on the computer screen. So in 1981, a designer at Xerox PARC named Norm Cox is the guy responsible for this pesky little visual interface for the Xerox Star, which is basically the first commercial computer with a GUI.

I'd like to introduce you to the Xerox eighty-ten Star Information System. This is a new computer designed for office professionals. These three little lines were intended as a desktop metaphor for folders and icons, and Cox built [00:02:00] the entire idea from scratch. So here was Cox's issue. Window headers fill up with command buttons, and when you resize a window, buttons end up falling off the edge and the header can't grow vertically. So something, something had to give,

So the solution, a single button-like container that can contain the overflow like a list. And the simplest way to convey that list is just three simple horizontal lines. You tap it, and the lines open up to more information that had previously made your window cluttered.

So pretty functional. And here's Cox describing his design process on the Mike Product blog

Its graphic design was meant to be very road sign simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct yet simple

road [00:03:00] sign simple. That sounds pretty Susan Kare to me, and she said before that good icons are more akin to road signs than illustrations. And it makes sense since Cox and Kare were working at the same time in the same design space and coming to similar conclusions, but from different directions.

And at that point, the visual language of personal computing was being invented by a small group of folks who all shared the same instinct: keep it simple enough that nobody has to think So back to the Xerox Star computer. It ships in 1981 and sells for $16,000 to corporations and universities, so it's definitely not a consumer product.

And then the hamburger menu disappears into obscurity for 20 years

But we all knew there was another chapter coming, right? The hamburger menu did come back, obviously, but it didn't come back because someone rediscovered [00:04:00] Cox's original work. It came back because the problem came back. with the first iPhone in 2007, the screen real estate had shrunk down, and designers had to deal with the same kinds of constraints that Cox did back in 1981.

So somebody drew three horizontal lines and probably didn't even know who Cox was. Here's Cox again

To be honest, I wasn't aware that it blew up until about two years ago when a guy called to interview me as the designer. I also had no idea it was being called the hamburger icon these days, so I've been amused by all the chatter about its relevance, value, design, et cetera. My guess would be that some UI designer somewhere rendered a symbol with three lines to express a pop-up menu and wasn't even aware of its prior existence on the Xerox Star

So Cox's response shows that great designer minds think alike, or that maybe three lines is the most obvious [00:05:00] solution. He's either showing extreme humility, or he's so enlightened that he recognizes that his creation belongs in a museum, that he doesn't even need to take the credit. By two thousand and nine, Apple and Google are embedding the hamburger icon into iOS and Android, but it doesn't even really have a name yet.

And then somebody somewhere, maybe it was somebody needing to take a lunch break and their tummy is grumbling 'cause they're hungry, uh, they notice that the three lines look a lot like a sandwich, and the name just sticks. And Cox gets clued into this development by two thousand and thirteen.

what a trip it must have been to invent a simple solution to a UI problem, have it disappear for twenty years, and then reemerge and appear on billions, I mean, probably billions of tiny screens worldwide. And it's named after an all-American sandwich, as it should be.

[00:06:00] So far, the story's kind of cute, but in the meantime, it became one of the most argued about icons in modern UX. Not because people are against sandwiches, I mean, and if you are, shame on you

because come on, sandwiches.

And it's not because of what it looks like, but because of what it hides.

And this poses a problem because if something's out of sight, it's out of mind. And if people don't understand the utility of the icon as a navigation option, it's not likely that they're going to use it

So everyone's making this up as they go. What do you do? Well, the Nielsen Norman Group, the most authoritative voice in UX research, swooped in to try and help make sense of how people are interacting with the icon. They ran some numbers, and here's what they found. This comes from uxpin.com, which cites the Nielsen Norman Group research

[00:07:00] usability testing of hidden menus like the burger menu has shown that they cut discoverability almost in half, as well as increased task time and perceived task difficulty

Yikes. It cuts down discoverability in half, and that's not a small thing. That's a top authority saying, "You guys, you know how we're trying to make stuff intuitive for users and help them find what they need? Yeah, this, uh, little icon is making that process a lot harder." And what I love is the hamburger's over here with his feet up watching the whole thing unfold.

The hamburger menu does not give a shit. One of the stats that stands out is that 48% of users over 45, ageist, don't know what the icon means. So unless your audience is all youngsters, you're obscuring navigation from a big portion of the folks who want to use your site, and that's not very [00:08:00] nice.

Here's where the Nielsen Norman Group drops a double zinger into the research. And, uh, I got to say props to all the copywriters out there who know when it's appropriate to add a teeny dash of snark to their copy

Like a cheap fast food chain, it got designers addicted to its convenience and now serves millions each day, both on mobile devices and on desktops

So whether you think Nielsen Norman's flex here is a dunk on lazy-headed designers or not, you've gotta admit that's a pretty sweet line. I wonder if Norm Cox was out there somewhere chuckling to himself

But wait, there's more. The authoritative research said the hamburger icon was broken, and the UX community argued about it for like 10 years, and the hamburger menu won. A full decade after the original critical research [00:09:00] came out, here's what the Nielsen Norman Group found

the hamburger menu has become so ubiquitous that its visual form, the three stacked lines, is now deeply ingrained in users' mental modes. Recent research confirms that the hamburger menu is widely recognizable. Most users interpret this icon as representing a hidden menu or list of categories

So to the likely chagrin of rule-following designers and thinkers everywhere, sorry, man. Sometimes rules are just meant to be broken, and it's true, the numbers don't lie. The hamburger icon was confusing, and it didn't win an argument, but it did win an exposure argument, and once something sticks around long enough, people are just forced to learn something new.

I mean, that may not be good design thinking, but it's just kind of how the Internet works, I guess

And the understated Norm Cox weighs [00:10:00] in at this point in a characteristically measured tone from the same interview.

No symbol will be perfect or intuitive in its early adoptive period. However, with continued use and exposure, it becomes a familiar part of our visual vernacular and improves with time

Ah, good old Norm. He's describing exactly what happened. He just didn't know it would take 40 years and a sandwich nickname, but, uh, here we are. Thanks, Norm. You're the best

Okay, so Font Awesome, a company that makes icons for the masses and whose entire product is the question of how to represent things visually. A company that has a hamburger menu icon in its own library, which is called simply Burger. And when the fateful time came to design the Font Awesome site's [00:11:00] navigation toggle, the moment where most companies would just reach for the safe, conventional three-line icon, someone at Font Awesome and, we're going to say that special person is Brian Talbot

made a different call. And God bless him, he used the actual burger icon as in the food sandwich. not three lines that look like a burger, an illustrated hamburger with a bun covered in sesame seeds. And what I love about this is that it's simultaneously a joke, a design philosophy statement, and a very specific piece of brand personality all wrapped together into one icon decision.

Cox named his widget a container. Well, Mr. Cox, at Font Awesome, we name ours a burger, and we mean it as Norm Cox has been quoted saying, "Why are we still using a floppy disk to represent save or scissors or clipboard?" Ah, [00:12:00] yes, so we've come full circle. The hamburger menu is basically the floppy disk of navigation.

I mean, that's, that's really what I could have just... That could have been the entire podcast. A symbol that outlived the original context and picked up a new identity along the way. And Mr. Talbot took it one step further and made the metaphor the thing by using an actual burger icon instead of three lines.

And here at Font Awesome, we believe in, seriously, almost to a religious level, that you must deliver the punchline,

And deliver Mr. Talbs did. Well done, Mr. Talbot

Cox designed three lines out of necessity, and someone named those three lines after a sandwich. Then researchers spent a decade explaining why the sandwich was bad for you, but users learned to love the sandwich anyway. Because, I mean, sandwich love. And we at Font [00:13:00] Awesome put an actual burger on our website and called it a day, because that's just what you do around here.

And that's the whole story. And it's also, if you squint at it, a pretty good description of how design, how sometimes it just, that's how it works. Not perfectly and not always logically, but sometimes, eventually with enough exposure, even the most argued about icon becomes part of the furniture

And as usual, Podcast Awesome was produced and edited by this guy right here, Matt Johnson. The Podcast Awesome theme song was composed by Ronnie Martin. The music interstitials were composed by Zach Malm, and we got video editing help from Mr. Isaac Chase. And do you know what comes next? Do you know what to do?

Go make something awesome.