A conversation with the world’s early UI designers: We created more than just the hamburger icon

Editor's note: The hamburger icon has always been popular. The question is, who created the hamburger icon? Here's where things get interesting: the person who created the hamburger icon was not some unknown person. On the contrary, its creator was the creator of the graphical interface, the world's early UI designers, a group of people who are now far less famous than those tech giants, but who truly changed the world.

User experience and product designer Geoff Alday began to wonder a few years ago about how the hamburger icon came about, and then he did some in-depth "archaeological work," and some very interesting things gradually emerged before his eyes. He traced the earliest traces of the hamburger icon in a Vimeo video, which was a video of a design conference in 1990, in which one of the sharers was demonstrating how to find the menu button in the window title bar of a Xerox Star computer. And this button is composed of three rectangles stacked together.

The Xerox Star carried the earliest graphical interface, which is the ancestor of the UI interface that is now ubiquitous. Therefore, Geoff found Norm Cox, one of the persons in charge at that time.

“You definitely did your homework,” Norm Cox wrote in an email to Geoff. “You found the right person.”

The hamburger icon is everywhere. Last December, Reddit and McDonald's teamed up to redesign the hamburger icon on both websites to make it look like a real hamburger, and at the same time, the creator of the hamburger icon, Norm Cox, celebrated his 67th birthday and received a special birthday gift: a Big Mac. People's interest in the history of the origin of the name of this little icon has not diminished, mainly because no one expected it to become so popular decades after its creation.

Almost everyone who is developing a mobile website or app these days uses the hamburger icon in their product, and every UX designer worth their salt will wonder why products of the size of Chrome and Amazon don’t use the hamburger icon.

Some critics believe that the hamburger icon makes the product less engaging and efficient, but in the eyes of more people, the ubiquity of the hamburger icon is an important sign that things are getting better. Michael J. Fordham, a well-known software developer and UX educator, wrote on Medium: "(The hamburger icon) is becoming pure power, pure function and gives designers a reason to be lazy on this design." The hamburger icon is definitely a good choice because people all over the world know what these three horizontal lines mean.

But many people still don’t know how these three horizontal lines entered the digital world. Everything has a beginning. If the hamburger icon was born in a delivery room, then I should have a good chat with the doctor who delivered it. So I found three people who were there at the time, Norm Cox, David Canfield Smith, and Ralph Kimball, and talked to them about how the hamburger icon was born, the history of the birth of the Xerox Star (it’s been more than 40 years), and what they think the latest design concept is.

Norm Cox, senior visual designer, was part of Xerox's Systems Development Division, while David Canfield Smith and Ralph Kimball were the two lead designers in the division.

Norm Cox: When Geoff Alday came to me, the first thing he said was, “The whole design industry was focusing on this little menu icon, and I realized you created it.” And I was looking at it and thinking, “Oh my god, I probably created this at 8:30 on a Tuesday and never thought about how it would work.”

Dave Canfield Smith: The hamburger icon is so trivial. One of the things we're most proud of is the Xerox Star, which required far fewer commands to operate than any other computer of its time, but could do almost anything, far more than what we had presented at the time. The hamburger menu was a vehicle and a method for us to carry the extra commands and operations at the time, and we couldn't find a better way at the time.

• Hell, I probably created this thing on a Tuesday at 8:30, but never thought about how it would turn out. --Norm Cox

Norm Cox: Compared to the revolutionary nature of the Xerox Star itself, the popularity and popularity of the hamburger icon seems a little ridiculous. It is actually the most insignificant part of the entire product, but it has now become an ubiquitous symbol.

Ralph Kimball: I worked for Xerox from 1972 to 1982. First as a research scientist at Xerox's Palo Alto Research Center (the famous PARC, where graphical interfaces and the Xerox Star were born), focusing on user interface design, and then participating in the development of Xerox Star workers. Our work there was to integrate and produce consistent and creative graphical interface solutions and solutions, which were mainly done at the Palo Alto Research Center before 1976, and in the early stages were developed at SRI and the University of Utah (Alan Kay's Dynabook project).

Dave Canfield Smith: In 1975, SRI hired me while I was still at Stanford University, and this was the first time I met Charles Irby. Charles was later the top designer of the UI team, working with Doug Englebart. Less than a year after working at SRI, Charles left to work at PARC, and told me how good the job was there, and hoped that I would go there. So I then went to PARC for an internship, and Alan Kay was my supervisor. There, I used the first real personal computer, Alto, and used Small Talk (a programming language designed by Kay) to write my thesis. Compared to SRI, PARC was not that big, but its threshold was actually higher. Unless you had a Ph.D., you would not be invited or hired at all.

Norm Cox: The first time I went to PARC, I was wearing a brand new three-piece polyester suit, and the receptionist called Charles Irby, who was then leading the user interface and functional design group for the Xerox Star. He came down the stairs to greet me in non-slip shorts and sandals and a hand-dyed T-shirt. I noticed then that he had a waist-length ponytail, a scruffy beard, and a slight build. I quickly realized that I shouldn't wear a suit to PARC. There was a guy in the office park who walked around the campus with a real parrot on his shoulder. In the office, everyone had a beanbag, and some brought neon lights and incense. Think California in the 1970s.

• There was a guy in the office park with a real parrot on his shoulder, wandering around the park. -- Norm Cox and PARC's corporate culture

Dave Canfield Smith: We were developing the Alto computer at PARC (it was primarily used for research and development, and only a few hundred were built), and suddenly our team had this bitmap screen with a resolution of 700×1000 pixels, and each pixel could be turned off and on individually. This display ignited our imagination and creativity.

Norm Cox: Before the Xerox Star, I was managing another design team developing fonts for the electronic typewriters that Xerox was producing at the time. Then, a mouse and a black and white pixel monitor showed up in our office. I had always been fascinated by new things, painting, watercolor, woodworking, any creative design and new media. So I started playing with it nonstop.

Dave Canfield Smith: When I joined Xerox's system design and development team in 1976, my workstation was in a very remote corner of the office. At that time, the company planned to bring the Xerox Star to the market, and the target use scenario was the office. In traditional offices at that time, most people did not understand computers, and management did not need to type, but secretaries did. So, my idea was to gradually integrate many elements of office scenes into the entire computer's visual system, including filing cabinets, trash cans, documents, and folders, which would be easier to learn and understand, instead of just providing a simple instruction manual as before. We use all the technology at PARC to create these things.

Ralph Kimball: The most revolutionary aspect of the Xerox Star was that it no longer relied on a keyboard to issue operating instructions, but instead used a graphical interface for intuitive operation.

Dave Canfield Smith: The walls of my cubicle were covered with printed documents with all the properties of the icons and what they could do. This included documents, filing cabinets, printers, clocks, mailboxes, libraries (this was a search interface similar to Google, but I was not smart enough to invent Google)... laser printers and e-mail using the Internet, both of which were inventions of PARC, and I would use PARC's technology as much as possible to make a comprehensive office system.

Ralph Kimball: Norm Cox was truly a gem for the Xerox Star development team because he was able to so effectively harness the power of media into effective design. Before meeting Norm, Charles Irby and I had met with many well-known graphic designers in San Francisco, but they had no idea how to design graphical interfaces.

Dave Canfield Smith: I once drew the first version of the design (Figure 3), which I thought was really rubbish. Thank God we have Norm Cox, so we can have a set of graphical interfaces that are still very pleasant to look at today. Charles was really tolerant of my design. He never said "Dave's design is really bad", instead he pushed things in a more subtle way. One day he came to my office and said to me "I think it would be nice to have a design competition for designing icons."

Norm Cox: Bowman was in charge of the program development. He wrote a very crude graphical program that allowed us to create graphics on the display. Wallace Judd was an expert in human factors engineering (closer to today's interactive design field). He wrote many papers on this subject, but he didn't have much knowledge in visual design. So, in the end, I was invited to participate in the icon design "pitch". Each of us designed a set, and then everyone gathered around to argue about which one was better.

△ The earliest UI icon design competition

Dave Canfield Smith: When my design draft was returned, when I looked at it again, it felt like someone was pointing at my nose and accusing me. It was clear and impressive.

Norm Cox: You have to know that this incident was actually the enlightenment of our design thinking. We learned an important lesson at that moment: what we make should not only look good, but also ensure functionality. Through usability testing, we began to pay attention to more things. After that, Bowman, Dave and Wallace said to me, "Okay, Norm, you go do it." So I became the official lead designer, but we all knew that the whole thing was always the result of team efforts.

Dave Canfield Smith: Actually, I still don't understand the charm of the hamburger icon, because in my opinion, it's not even an icon, it's just a symbol. Icons should have both visual expressiveness and functional machine semantics, and this menu icon only has the former. It doesn't imply any other information related to the menu, it just sits quietly on the screen. You poke it, and then a menu pops up, the cursor moves away, and the menu disappears, that's it. Icons should contain metaphors, and they should map to an objectively existing and operable object in the world.

• This incident actually enlightened us about design thinking. ——Norm Cox

Norm Cox: On the Xerox Star, you have 72 pixels per inch, and that's the range you need to be able to communicate your ideas. We drew a lot of inspiration from the existing symbology of printers and copiers made by Xerox, and from various road signs...

Dave Canfield Smith: Before, most of the commands and operations that computers need to perform were manually typed into the command line, but we thought of a better way to present them. Although our brains are smart, they are inherently tired of spending a lot of time picking the best execution plan. So, we put most of the functions directly on the screen in the form of icons, and the additional operations were hidden in the drop-down menu. You only need to click an extra button to trigger them, and this is the origin of the hamburger icon.

Norm Cox: In any garage, there's always a bucket of miscellaneous items, nuts and bolts, nails and rags, and some of the things that are hard to categorize. That's the metaphor for the hamburger menu icon. Just like there's no perfect system, there's no perfect interface, and like Dave just said, you're always going to have all kinds of things that don't fit.

Dave Canfield Smith: At that time, there was a typical operation command called "Paginate". Due to the insufficient speed and capacity of computers at that time, the computer could not display the text and image layout in real time in the document interface, so you needed to preview the entire document by clicking "Paginate". This is an operation command that is obviously limited by the times and functions, and you should be able to feel how stupid it is. We don't like it, but it must exist, so we hide it in a remote menu so that users don't have to see it on the main interface all the time. We want to show really useful and important commands in front of users.

Norm Cox: I thought a lot about what symbol to use for this menu symbol, including a plus sign, an ellipsis, and a drop-down arrow. But if you think about it, the meaning we want to express is "miscellaneous", or "other" and "extra", and the above three symbols themselves are far from this meaning. I want to find something intuitive, easy to explain, and memorable to be the symbol of this menu.

Dave Canfield Smith: The three horizontal lines represent an abstract image, and the image it corresponds to is the image of what you see when you click on it: a menu.

Norm Cox: Another symbol you see used a lot today is three little dots in a vertical row, which is more like a shortened version of the hamburger icon.

Dave Canfield Smith: From a design perspective, it is very international because it is non-semantic. You don't want your product to need additional language translation for this icon in other countries and regions, because translation requires additional space because others don't understand it.

Norm Cox: We began to realize that users recognize information in layers. When users look at the screen, they quickly scan to find a specific shape, and then look at the details relatively carefully when the shape matches. Just like when you notice a diamond-shaped road sign, you first see the road sign itself, and then you notice the detailed text. So, we need to make sure that when you scan in the interface, you don’t have to scan too much content. Every pixel on the screen is important, and irrelevant information should not be placed on it. Everything should have a clear purpose, and extra decoration is unnecessary. These restrictions mean that we have to design something elegant and simple: a timeless and classic design style.

Dave Canfield Smith: We're trying to avoid clutter as much as possible. We want it to have a unique visual appeal so people spend more time in the interface.

Norm Cox: If you've ever paid attention to the entire process of icon design, especially in the user interfaces of Apple and Microsoft, you will find that icons have evolved from simple lines at the beginning, as the pixel density increases, they gradually evolve into super-realistic photo-realistic icons with shadows, highlights and all kinds of things, and then return to very simple lines and shapes. The reason behind this is actually the same as what we said before.

Dave Canfield Smith: Today, the Mac system is full of menus. But in the original Xerox Star, we only had a drop-down menu, and most of the menus were single commands. It's not that we designed too few functions at the time. Our media document software at the time included text editing, font selection, layout tools, pictures and even embedded audio. The content was very rich (think about it. This was the mid-1970s). However, we didn't need so many menus for a long time. Don't you think it's a very wonderful thing? Why? Because we are doing our best to "generalize" and integrate commands, not eliminate functions. Using button commands to complete tasks is my invention! Apple users can use functions such as cut, copy, paste, and undo to complete tasks. Before that, on the Xerox Star, there were already a series of basic core operations such as move, copy, delete, undo, show properties, and copy properties.

• You will find that icons have evolved from simple lines at the beginning, to realistic photo-like icons with shadows, highlights and all kinds of things as the pixel density increases, and then back to extremely simple lines and shapes. The reason behind this is actually the same as what we said before. ──Norm Cox

Ralph Kimball: We have been working hard to build a very simple user interface, trying not to confuse users with so-called advanced commands, so that experienced users can be more efficient. During the development of the Xerox Star, we needed to make very specific decisions for a variety of problems.

Dave Canfield Smith: We wanted people to do useful things with the Xerox Star, not to make it a complicated thing. It's not easy to make complex things simple, and we did our best to create a simpler interface.

Norm Cox: I don't think we realized at the time what a unique moment it was. We thought we were a bunch of hippies doing something that interested us, but now it seems like we were using the power of technology to whisper in the ear of the world and completely change the world.

Conclusion

The story behind the Xerox Star is the dispute between Steve Jobs and Bill Gates over the graphical interface operating system. You can read about this historical story in many places, but it has nothing to do with the content of today's interview.

We should pay tribute to these earliest creators of graphical interfaces and these earliest UI designers – if an industry needs to have a clear and definite ancestor, then the three people interviewed should be the earliest UI designers, the ones who created the profession of UI designer (and should also be the “victims” of design competitions).