An oral history of the hamburger icon (by the people who were there)

When UX and product designer Geoff Alday got curious about who was responsible for the hamburger menu a few years ago, he did a little digging. He unearthed a video on Vimeo from a 1990 conference that demo-ed the history of widgets. In a segment about menus, the narrator describes how, on the title bars of windows in the Xerox Star, you find menu buttons, three little lines stacked in a square.

Hamburger menus… in 1981: Alday had struck gold.

He went looking for the lead graphics guy on the Xerox Star, and found Norm Cox. “You’ve done your homework,” Norm Cox emailed back. “You’ve found the right guy.”

The hamburger is ubiquitous. And last December, Cox got an unusual 67th birthday present when Reddit and McDonald’s teamed up to make the hamburger menus on both mobile sites look like actual burgers (if you clicked on it, you could place an order for a Big Mac). Which is to say, interest in the history of this little symbol with the satisfying name hasn’t waned, mostly because neither has its popularity.

Everyone who’s ever scrambled to make a basic mobile-friendly website in recent times (i.e. me, literally doing exactly that on the day I was asked to write this piece) has probably used one. And every UX specialist worth their salt has also probably wondered when the big shots designing such big things as Chrome or Amazon will stop using them.

If detractors see in this undying love a plague of bad information architecture (low engagement, inefficiency), others say the symbol’s very ubiquity is exactly what makes it good. “Through sheer force, usage, and designer-laziness,” software engineer and UX designer Michael J. Fordham wrote on Medium earlier this month, the hamburger has become a good option. Users the world over know what those three little lines mean. 

What many don’t know, however, is how this tiny symbol is a direct portal into the beginnings of personal computing, the place where it all started. I spoke with three of the people who were there—Cox, David Canfield Smith, and Ralph Kimball—about how the hamburger came to be, the heady days of the Xerox Star’s inception and what the best design thinking (the kind that yields 40-year old symbols still going strong) looks like.

Norm Cox, lead visual designer, Xerox Systems Development Division: When Geoff Alday tracked me down and said, “Oh, our entire industry is up in arms about how to use this little menu, and I understand you designed it.” I looked at it, and thought, “Gosh, I probably did that at 8:30 at night on a Tuesday and never thought twice about it.”

Dave Canfield Smith, principal designer, Xerox SDD: It was so trivial. One of the things I am most proud of is that Star had far fewer commands than other computers of the day, and yet it could do everything, in fact, it could more than they could do. This hamburger menu was a way to include a few leftover commands that we couldn’t figure out a way to do better.

(Curious? Download a sample hamburger icon animation for use in InVision Studio here. Dont have Studio? Get started today)

Cox: It is sort of absurd that of the revolution that the Star represents, it is this little symbol—probably the least thought out part of the whole thing—that has become such a ubiquitous feature.

Ralph Kimball, principal designer, Xerox SDD: I worked at Xerox from 1972-1982, first a research scientist at the Xerox Palo Alto Research Centre—or PARC—focusing on user interface design, then on the Star workstation. Our job with Star was to integrate and make consistent many creative graphical approaches that had been developed prior to 1976 at Xerox PARC, and even earlier at SRI, and the University of Utah (Alan Kay’s Dynabook).

Smith: SRI had hired me right out of Stanford in 1975, and that is where I met Charles Irby. He was the lead designer on the UI team, working with Doug Englebart. Within a year he left to work at PARC, and he casually mentioned how it would be great if I could come too. Now I had interned at PARC, with Kay as my thesis supervisor. There I’d used the Alto (the first real personal computer) and Small Talk (Kay’s newly designed programming language) to write my thesis, Pygmalion. So when Irby said I should come to PARC with him, I jumped at the chance. Xerox PARC wasn’t as big as SRI, but it was far more accomplished: you couldn’t get in the door unless you had a Ph.D.

Cox: When I went out to PARC for the first time, I was wearing a brand new three-piece polyester suit. The receptionist calls Charles Irby, who was heading up the user interface and functionality design group for the Xerox Star product. He walks down the stairs in his cut-off cargo shorts and Birkenstock sandals, and tie-dyed t-shirt. He had a ponytail down to the back of his waist, a scraggly beard; this skinny, small guy. I felt so out of place. I learned very quickly that I don’t wear a three-piece suit to PARC: it was t-shirts and shorts, kilts … one guy walked around with a parrot on his shoulder. Everyone had bean-bags in their office, and neon signs, and incense. Think California in the 1970s.

Smith: When PARC built the Alto (it was a development tool; they only made a couple hundred of them)—suddenly there was this bitmap screen, 700 x 1000 dots, each dot could be individually turned on and off. It caused an explosion of creativity.

Cox: Before the Star came out, I was managing a design team to develop fonts for the electronic typewriters Xerox was producing at the time. Then an Alto showed up in our office—with this mouse, and a black and white pixel display. I was always enamored by new things: paintings, watercolors, carpentry, anything creative, any new medium. So I started playing around with it.

Smith: When I joined SDD in 1976, they put me in a corner of the basement. We were going to try to sell this computer—the Star—into offices. Office workers didn’t know squat about computers, and besides, the conventional wisdom at the time was that managers don’t type, secretaries do. So my idea was to take the office things (file cabinets, wastebaskets, documents, folders) into the computer world, rather than giving office workers a computer interface with a manual to learn. And icons, which I’d invented at PARC for my thesis, were the perfect vehicle.

Kimball: It was the use of graphics in Star, rather than keyboard commands, that was the revolutionary advance.

Smith: I remember filling the walls of my cubicle with printouts: I wrote on each what the attributes of the icon were and what you could with it. We had a document, a file cabinet, a printer, a clock, a mailbox, a library (this was basically an information retrieval interface, just like Google, only I wasn’t smart enough to invent Google) …. The printer used laser printing and the mailbox used the ethernet—both PARC inventions. We were using all this PARC tech to make an integrated office system.

Kimball: Norm Cox was a lucky find for the Star Development team because he captured the power of the medium so effectively. Charles Irby and I had interviewed some leading graphic designers in San Francisco before we met Norm, and those designers didn’t have a clue.

Smith: I did the first set of drawings for the icons (Figure 3, below). They were crap. Really ugly. Thank God for Norm Cox. Charles was very tactful, though. He never said, “Dave these pictures suck.” Instead, he came into my office one day, and said, “We’re thinking it’d be nice to have a little design competition for the icons.”

Cox: Bill Bowman wrote programs. He had written some very crude graphic programs that allowed graphics to be created on the displays. Wallace Judd was a human factors person, he did usability testing. Dave wrote his thesis on these ideas, but he was not a visual person. So I was invited in to take my cut at it. We each designed a set, then all sat around arguing about whose was better.

Smith: When we put all the designs up and stepped back to look at them, it was as clear as the nose on my face which was better.

Cox: It was the beginning of design thinking, you know. We were learning that something that looks good must also function. Going through useability testing opened our eyes to a lot of things. And after that, Bowman, Dave and Wallace said, “Ok, Norm, you go do it.” So I became the official designer. But it was very much a team effort.

Smith: I don’t understand the fascination with the hamburger menu symbol, because it’s not even an icon—it’s just a symbol. Icons had both visual and machine semantics, whereas this menu button had only the former. You don’t do anything with a menu. It just sits there on the screen. You poke at it and a menu pops up, you move the cursor away and the menu goes away. That’s all it does. An icon is an object in a metaphoric world that you can do things with in the real world, the world that is being modeled.

Cox: There were only 72 dots per inch to work with on the Star display and with that, you had to communicate ideas. We got a lot of inspiration from existing symbology on the printers and copiers that Xerox made, as well as road signs …

Smith: Most of the commands, we figured out a good way of doing them. Sometimes though you just needed a few additional commands, because our brains got tired of trying to think of a clever way to do things. So we would just stick them in a pop-down menu, which is where the hamburger menu came in.

Cox: In your garage organization, there’s always a bucket for miscellaneous. You’ve got nuts and bolts and screws and nails, and then, stuff, miscellaneous stuff. That’s kind of what the hamburger menu button was. Just as there are no perfect systems, there are no perfect interfaces. Occasionally you come across things that, as Dave said, don’t fit.

Smith: A typical command that we stuck in there was “paginate.” For a document window, the computer we had wasn’t fast enough to keep up with pagination (justified paragraphs, text flowing around a picture, etc.) on the fly, in real time. So after you got done entering the info you wanted in your document, you would hit paginate, and it would go lay out your whole doc. But you know, it was a stupid command; it was only there because the computer wasn’t powerful enough to keep up. None of us liked it, so we stuck it in an out-of-the-way menu so people wouldn’t have it in their faces the whole time. The things we wanted in front of people’s faces were the important commands.

Cox: We considered several other symbols for this button—the plus symbol, the ellipsis, the drop-down arrow. You’re trying to think what symbol means “miscellaneous”, or “other”, or “additional”: you’re trying to find things that are either intuitive or are easily explained and memorable.

Smith: The three lines were an abstract image of what would come up if you clicked on the button—a pop-down menu.

Cox: The other symbol you see used a lot today—the vertical ellipsis—is kind of like a shortened version of the same thing.

Smith: In design terms, it is international, non-linguistic. You didn’t want to have to translate things for the international version of the product, and you didn’t want to take up a lot of screen space or for it to be just a blob because no one would understand that.

Cox: We started figuring out that there was a hierarchy of recognition: when someone looked at the screen they would scan it for a particular shape and then hone in on details of that shape—much like seeing a diamond shape road sign before you see the symbol within it. We wanted to make sure you had a limited number of objects to search for. Every pixel mattered. There was no extraneous information, no decoration, everything had a purpose. And those limitations meant that we had to design something as elegant as it as simple: a timeless design style.

Smith: We didn’t want clutter. We wanted it to be visually appealing: we felt people would spend more time with it if they enjoyed the experience.

Cox: If you track how icon design has evolved from those Star days through Apple and Microsoft, it has gone from simple lines to photorealism with shadows, highlights and all sorts of things and back to very simple lines and shapes again. And there’s a reason for that. It is simple; it communicates well. People get tired of too much decoration, they just want the facts.

Smith: Today the Mac uses menus everywhere. In the Star, we had a pull-down menu, but the items in the menu were single commands. It wasn’t that we didn’t have the functions: we had multimedia documents with text, fonts, layout, pictures, embedded audio—with tremendous content. Yet, we didn’t have a need for menus. Doesn’t that strike you as rather marvelous? The way we did it was not by eliminating commands but by generalizing commands: the notion of universal commands, I invented that. The people at Apple used cut, copy, paste, undo and a few others. Before that, Star used move, copy, delete, undo, show properties, copy properties and a few others.

Kimball: We struggled with whether to build a user interface that was ultra simple with no advanced commands that could “confuse” the user, or allow special escapes enabling higher productivity for experienced users. In the Star development, we had to choose very specific answers to many of these questions.

Smith: We wanted people to be able to do useful things with Star but we didn’t want it to seem complicated. It’s not easy to make complicated things easy. The simpler we made the interface, the harder we had to work to do it.

Cox: I don’t think we realized what a special time it was at the time. You’re just a bunch of hippies doing your thing that sort of sets the world of technology on its ear and changes everything.

[Note: Our conversation with Ralph Kimball took place over email]