Menus, Metaphors and Materials: Milestones of User Interface Design

Why It Is Important to Understand and Appreciate Historic User Interface Designs. By Boris Müller and Frank Rausch

MacPaint by Apple Computer, 1984 (Source: Wikipedia)

User Interfaces Are Cultural Artefacts

Our Editorial Process

  • Our list includes significant contributions to user interface design. We’re explicitly not talking about ‘beautiful software’. If you ask a programmer about beautiful software, they’ll inevitably come up with examples like TeX, Git or the C compiler, but that’s not what we’re doing here.
  • We believe that attribution is important. In most creative disciplines, it’s customary to mention a project’s design team or design lead. The same rules should apply to user interface design. If we understand user interfaces as cultural artefacts, we have to acknowledge the designers who created them. So, wherever possible, we have given credit to the individual interface designers. If we got something wrong or you’d like to suggest more names — let us know!
  • You’ll notice that a lot of the designers we mention are white men. This lack of diversity is frustrating; but it’s important to point out that the community is changing! There are many women who had and have a strong and innovative impact on developments in the world of interaction design and user interface design: Joy Mountford, Brenda Laurel, Terry Irwin, Gillian Crampton Smith, Fiona Raby, Gesche Joost, Lisa Strausfeld, Heather Martin, Irene Au, Simona Maschi, Wendy March, Cathy Pearl, Elizabeth Churchill, Christina Wodtke, Julie Zhuo, Catherine Courage — to name but a few. If you feel that important design contributions by women are missing, we welcome your feedback!
  • Last but not least: the examples in our list are meant to be appreciated, analysed and interpreted — not imitated. It wouldn’t make a lot of sense to imitate Microsoft Bob — but we believe you can still derive many insights from the design decisions that led to the creation of Bob.

NLS / oN-Line System (1968)

Source: YouTube

Xerox Star (1981)

The Xerox Star User Interface — also called ViewPoint (Source: The Xerox ‘Star’: A Retrospective)

Apple Macintosh / MacOS (1984)

Icon set for the first Macintosh (Source: Susan Kare)

MacPaint (1984)

MacPaint by Apple Computer, 1984 (Source: Wikipedia)

Kai’s Power Tools and Other Interfaces from Kai Krause (1992–1999)

Kai’s Photo Soap (1997) It should be noted that the interface is initially almost empty. The state you see in this image it the result of numerous interactions.

Magic Cap (1994)

Information Landscapes (1994)

“Financial Viewpoints” by Lisa Strausfeld (Image was scaled up; Source: ACM and YouTube)

BeOS (1995)

Source: IconArchive, Wikipedia and guidebookgallery.org

Microsoft Bob (1995)

Source: Microsoft

Windows 95 (1995)

Source: guidebookgallery.org

Macromedia Director (1996)

For this essay, we selected Macromedia Director 6.0 as it had the most polished user interface. (Screenshots created by the authors)

Winamp (1997)

Music Software: ReBirth (1998) and Reason (2019)

ReBirth (released 1998) and The back of the rack in Reason 9 (released 2016) — Source: Reason Studios

Transmit (1998–2020)

Source: Twitter

iPod Classic (2001)

iPod from 2001 and 2005 (Source: Apple)

Mac OS X (2001)

Left: Mac OS X Developer Preview 3 (2000). Note the Apple logo in the centre of the menu bar. (Source of all images: guidebookgallery)

iOS / iPhoneOS 1.0 (2007)

Source: Apple

Tapbots Weightbot and Convertbot (2008)

Source: Cult of Mac

Tweetdeck (2008)

Screenshot created by authors

Path (Social Network, 2010)

Source: YouTube

Windows Phone (2010)

Source: Microsoft

iA writer (2011)

Source: ia.net

Android 5.0 / Material Design (2014)

Source: Google

Apple watchOS 1.0 Home Screen (2014)

Source: Apple (left), Screenshot created by authors (right)

Things 3 (iOS / Mac)

Source: Things Website

Panic Code Editor (2019)

References and further reading

About the authors

--

--

Professor for Interaction Design at FH Potsdam, co-director of Urban Complexity Lab | http://uclab.fh-potsdam.de | http://esono.com | https://vis.social/@boris

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store