Tag Archives: Susan Kare

The Origin of the Hamburger and Other Icons

The emergence of the three-lined “Hamburger” menu icon in modern interface design was so fast I had just assumed it was a relatively new creation. However, after a bit of research I discovered its origins were far more rooted in the history of technology than I first thought. It was software designer Geoff Alday who made the discovery, which he wrote about in this blog post, learning that icon was first used back in the early 1980s on the interface of the Xerox Star work-machine, one of the grandfathers of the modern personal computer. You can see it shown in the middle of the screenshot from 1981 below:

2016-07-07 16_19_22-Start
A bit-mapped screenshot from the Xerox Star workstation released in 1981.

Norman Cox, the designer behind the icon, said its design was meant to be “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. Cox later told the BBC it was jokingly referred to as the “air vent” icon. He said: “At Xerox we used to joke with our initial users that it was an ‘air vent to keep the window cool’. This usually got a chuckle, and made the symbol more memorable and friendly.”

“At Xerox we used to joke with our initial users that it was an ‘air vent to keep the window cool’. This usually got a chuckle, and made the symbol more memorable and friendly” – Norm Cox, former Xerox designer

The icon didn’t really appear for nearly 30 years until it was adopted as a menu icon by social networking site Path, which launched in 2010, and then later Facebook and Apple iOS applications, meeting a growing need for more content to fit onto smaller smartphone screens via the use of menus. It has since become widely-accepted as a menu icon by UI designers and can found everywhere from web browsers Google Chrome and Mozilla Firefox, to news websites such as the BBC and others.

2016-07-08 13_46_49-Photos-firefox

2016-07-08 13_47_24-Chrome

2016-07-08 13_51_08-Home - BBC News

2016-07-15 14_53_20-News, sport and opinion from the Guardian's UK edition _ The Guardian

After some more research I soon discovered that there were a number of other prominent icons and symbols still used today that first emerged in the 1980s. Apart from the ‘Hamburger’ icon, Norman Cox is also attributed with creating the document icon, which was another part of the Xerox Star interface. This image here shows the design development. After Cox, one of the most prolific designers of the 1980s was Susan Kare who worked for Apple Macintosh. Descendants of her early designs that still exist today include icons such as the lasso, the grabber, and the paint bucket. You can see some other the examples of her work in the screenshot below:

02_macicons
A selection of designs by Apple Macintosh designer Susan Kare.

She also came up with the command key design (⌘) that still appears today on most Apple keyboards. Kare apparently discovered it while browsing through a symbol dictionary and found it was commonly used on signposts in Scandinavian countries to mark places of interest. When asked by MacFormat magazine about the longevity of her icons she said: “I am very grateful and appreciative that some images I designed almost 30 years ago are still in use. I believe that symbols that are simple – not too many extraneous details – and meaningful can have a long life span.”

Other icons that have survived since the 1980s are shown in the table below:

  Icon  Name  Designer/Creator
menu-alt-512 Hamburger icon Norm Cox for Xerox Star.
ios7-document-icon Document icon Norm Cox for Xerox Star.
command-symbol_318-74882 Command icon Susan Kare for Apple Macintosh.
Susan-Kare-fill-icon-660x660 Fill icon Susan Kare for Apple Macintosh.
mouse-cursor-icon Mouse icon* Douglas Englebart for Xerox PARC
common-search-lookup-glyph-128 Search icon  Keith Ohlfs for NeXT Inc.

*The mouse cursor arrow originally pointed upwards but because resolution was so low it was easier to draw an arrow at a 45 degree angle.