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)

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

--

--

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