A Conversation with Norm Cox, Creator of the Hamburger Menu
Introduction from Norm Cox
The 1980-ish “hamburger” widget was designed out of pure necessity; for a singular purpose; to meet a specific need within the visual and interactive interface paradigm of the Xerox Star; and (graphically) constrained by the limits of the display at the time (black and white, 72 dpi).
While I would like to say that it was a perfect widget, we (the designers of the Star) recognized that every design decision came with pros and cons, tradeoffs and consequences, trial and error, and all sorts of usability surprises. But, at the end of the day, we still had to deliver an interface with widgets and mechanisms that enabled users to complete tasks. We tried to ensure that every widget was the best it could be, but we were also realistic. We knew that we were breaking new ground, and that some things were just going to have to be learned.
Though we quickly found out that there was not perfect widget or interface, the Xerox Star still managed to revolutionize the way we work and communicate with computers. And the “hamburger” widget simply became another mechanism in our Star design toolbox, along with buttons, scrollbars, menus, icons, check boxes and other design bricks to build future interfaces.
For the past 35 years since that simple hamburger design made its debut, interfaces have naturally and organically evolved, along with technology, display capabilities, user evolution and behaviors, utilization, relevance and application. The tools of the designer have also evolved and multiplied, giving them more choices for designing an interface. As such, the potential success (or failure) of an interface design is not derived from the widgets themselves, but in the successful (compatible, usable, efficient) implementation of those available widgets within the context of the problem space. The interface derived by the cumulative effect of those widgets creates an overall experience — the sum of its parts.
The Conversation
Tri Vo: Since you only use the hamburger menu on the mobile version of your own site, do you think the hamburger menu is only suitable for mobile? Why do you think people started using them on desktop?
Norm Cox: It is simply another widget in a designer’s toolbox. Its suitability within an interface — whether mobile or desktop — is a result of a well-thought-out and comprehensive UI design. Whether or not it’s an appropriate tool is a judgment call from the UI designer in the context of its application.
TV: What was your thought process behind this UX? Why did you decide that a menu was to be hidden behind an icon?
NC: There are always design tradeoffs. In the original Star window header, it became obvious that all of the possible command buttons wouldn’t fit (especially when resizing the window), and expanding the header vertically wasn’t an option. We needed a place to both (a) offload excess command buttons and/or (b) gather buttons together that were related to the context of the cursor or selection. Again, the least evil solution was to add a target button that contained a list of “more” or “other” or “additional” buttons. This resulted in the hamburger widget with the three lines that represented a drop-down menu.
TV: What do you think are the strengths and weaknesses of the hamburger menu? From design and user experience perspectives?
NC: As you might expect, it’s a two-edged sword. As a positive (to some users), it helps to hide clutter and unnecessary actions. As a negative (to some users), it hides actions that they may deem necessary.
TV: Was there a product or website that you think made this icon blow up and become so ubiquitous? Or do you think it just gradually took off since when it was created?
NC: 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, etc. My guess would be that some UI designer somewhere rendered a symbol with 3 lines to represent a popup menu, and wasn’t even aware of its prior existence on the Xerox Star.
TV: From a UX perspective, many websites have different ways for the menu to come in after users click on this icon: fading in and taking over the whole page, sliding in from the left, dropping down from the top, etc. All of these different motions from one simple three-bar icon. What do you think is the proper way for the menu to appear? Do you think since the icon is so universal, users should have a universal experience from it?
NC: Potato, potahto. Its behavior and visual style should be compatible with the design language of the application in which it appears.
TV: “What’s out of sight is out of mind.” Many argue that while the hamburger menu was created for users to access additional content, it has become a mask that tends to hide the content from users, which alienates users and reduces interaction. What are your thoughts on that?
NC: It’s a two-edged sword with pros and cons for each argument. Again, it depends on context, and a judgment call on the tradeoffs.
TV: Some companies have been using different icons for the same user experience: Google uses a three-dot icon, the Atlantic adds the word “menu” to the icon, etc. Do you think those attempts are successful?
NC: “Success” is determined by the tenets of compatibility, usability, effectiveness and efficiency within the context of the application. What may work for one class of user, may not work for another.
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. For example, why are we still using a floppy disk to represent SAVE? Or “scissors”? Or a “clipboard”?
TV: I think when something is popular, people either go along with it or fight it. What are your advices for the designers who are using the hamburger menu because everyone is doing it, and the designers who wants to challenge it, also because everyone is doing it?
NC: My advice is to arm yourselves with deep working knowledge of the arts and sciences of UI design, and not be swayed by design fads and uneducated opinions. Every design decision is measurably more effective when filtered through the heuristics, principles and guidelines of visual communication design, cognitive sciences, psychology, human factors, journalism, computer sciences, anthropologies, etc. Good design is about good solutions. The more your design can be evaluated, tested and iterated through the lens of scholarship, the more timeless it becomes.
As an example, the Xerox Star icons were designed with purposeful simplicity of line and image. It is interesting that 30 years later, the trend in icon design is again toward a purposeful simplicity of line and image. (re: Windows 10 and Apple iPhone). Powerful evidence in the timelessness of simplicity.
tFollow Mic Product (@micproduct) for future updates.
