Tag Archives: Icons

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.

The Role of Text in UX

As software and apps become more user-friendly and commonly-used icons become universally understood, there is a growing tendency to scrap text.

Microsoft experimented with the minimalist icons-over-text approach in their release of Outlook 1997. As you can see from the toolbar, they left out the text descriptions and as a result non-experienced Outlook users apparently stopped using the toolbar altogether:

2016-07-06 16_01_02-ToolbarCompare-11-1-2005.png (590×113)
Microsoft Outlook 1997
Several designs later, with Outlook 2000, they had a rethink and text was added back in:

2016-07-06 16_06_09-outlook01.gif (768×537)
Microsoft Outlook 2000
While more recent designs are less icon-assisted and text has even clearer prominence:

2016-07-06 16_09_20-Inbox - james.scott@hoistgroup.com - Outlook.jpg
Microsoft Outlook 2013

Digital designer Thomas Byttebier makes some excellent points about the importance of using text in his blog here, with the concluding statement being “when in doubt, the best icon is a text label.” He lists a number of extremely popular apps and sites where icons are pretty ambiguous. Take Instagram and Spotify for example. Are people aware of what this icon actually does?

2016-07-06 17_13_37-Start

2016-07-06 17_12_09-Spotify

In both cases this in-tray icon is for accessing your inbox and sending direct messages but I think the messaging feature is clearly overlooked in both applications. When I asked friends who have been using the applications for several years whether they were aware of the messaging feature they just looked at me blankly. One said “Oh, that bikini thing”, the other thought it was a basket. So there’s clearly a lack of clarity over the  purpose of the icon but whether that’s due to the ambiguous design or a lack of need, I’m not sure. It’s probably a bit of both.

Twitter have also had some issues with ambiguous and non-universal icons, often presuming that users will just intuitively understand what the icons do and sometimes getting it wrong. As a result Twitter’s user growth has actually slowed as new users that are attracted to the site often have a hard time catching on to how it works.

pict--iphone-screen-template---messages--messages---templatepict--iphone-screen-template---messages--messages---template2

The arrow icon for ‘Reply’, the envelope icon for ‘Message’ and the ellipsis (three dots) ‘More Options’ icon are recognisable but the heart icon for ‘Like’ will only be familiar with people who have used Instagram and other social media. A new user is unlikely to know what the ‘Retweet’ icon does unless they are familiar with Twitter’s basic concepts. It is interesting to note that Twitter have added text labels to the bottom five icons (highlighted in green in the image above) because other than perhaps ‘Messages’ their function is not obvious to the user.

While documentation is sometimes seen as an afterthought in the development process, in my opinion the text and written content is an inherent part of user experience for all software, no matter how intuitive the UI designer thinks his icons are or user-friendly the product is. If you want to avoid ambiguity, text will always be the best way to get the message across to the user.