Jun 24, 2020
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
Students traditionally learn art and design by studying the masters, analysing, sketching and interpreting the grand visions of the past. In doing this, they get to understand the ideas, concepts and motivations behind the visual form.
In user interface design, this practice is curiously absent. Not only do we — as professional user interface designers — lack historical awareness, but we also arrogantly assume that, with every new technology, old designs become obsolete. This is not the case.
When we think about old computers (‘old’ meaning older than two years nowadays), we usually think of constraints and limitations. Smaller screens, less resolution, slower computing power. But the ideas that guided the designs of their user interfaces were often independent from technical limitations. They can still provide us with important and relevant insights today.
For many years, user interface design was simply too new to have any historical references. In the early days, practitioners came from other disciplines like industrial design, typography or communication design and brought design references from their respective fields.
User interface design gradually became more established, yet it never developed an awareness of its own achievements and historical masterpieces. Everything is contemporary, state-of-the-art, forward-looking. Designs are constantly replaced and updated. Because the technology gets better with each iteration, it is only logical to assume that the design also gets better.
This — as already mentioned — is not true. Great designs are sometimes replaced by bland ideas. Wonderful interfaces are forgotten or made obsolete — sometimes with a single update. This is regrettable as user interfaces are not only ‘functional’ entities but also cultural ones.
User Interfaces Are Cultural Artefacts
In our understanding, graphical user interfaces are design objects. They are a visual and cultural force that is both dominant and overlooked. Whenever Facebook changes its interface, it has an impact on how millions of people communicate. In this sense, user interfaces are cultural artefacts. Furthermore, we believe that when you’re learning how to design an interface, you should study not only the most recent human interface guidelines but also the history and the highlights of user interface design.
Compared to other design disciplines, interface design is ephemeral. You can still buy the Lounge Chair that was designed by Ray and Charles Eames in 1956. But we cannot enjoy the beautiful Calcbot app from 2010 on a current iPhone because the latest version of the operating system simply won’t run older apps.
Designing screens and interactions is designing for fleeting moments. Let’s compare interface design to staging an opera: once the season is over, you can appreciate the performance only in a reproduction. The reproduction itself is just a pale imitation of the real experience — but it makes it possible to remember, document and replay it. And, after all, opera is widely considered to be the queen of the dramatic arts.
In any case, user interface design has reached a point where looking at the past can provide inspiration and insights for our design activities. We can learn from the past — from mistakes but also from achievements. This awareness of past accomplishments should be part of both the teaching curriculum and the design practice.
Industrial designers are aware of the work by Dieter Rams, Ray Eames and Ettore Sottsass. Communication designers are aware of the work by Paula Scher, Otl Aicher and April Greiman. So it only makes sense that user interface designers should be aware of the work by Cordell Ratzlaff, Susan Kare and Kai Krause.
Our Editorial Process
In order to contribute to historical awareness in our field, we have compiled a list of interaction design classics. Our aim was to include examples that we find inspiring and insightful — which led to our greatest challenge, keeping in mind that we wanted to create a concise list — leaving things out. So, we decided to focus on productivity software — in a very broad sense — and to order the projects chronologically. We didn’t address user interfaces from games, websites or artistic projects; that really would have been too much.
Before we dive into our list of interface design classics, let us make a few remarks on our choices:
- 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.
So, while a lot of the examples below are visually and conceptually stunning, we also very consciously included some projects that look weird and even absurd to contemporary eyes. Controversial and unusual designs are part of the design discourse and often have a greater impact than bland and boring ones.
The aim of this list is to demonstrate that the short history of user interface design is full of amazing visual ideas, intriguing concepts and remarkable designs that are still relevant today.
Without further ado — here is our list of user interface design classics!
NLS / oN-Line System (1968)
This is where everything starts — the ‘Mother of All Demos’ by Douglas Engelbart and his team in 1968.
There is something decidedly odd about watching the demo of the NLS or ‘oN-Line System’. It feels both incredibly old and incredibly contemporary. Fifty-two years ago, in this brief demo, Douglas Engelbart postulated and predicted the way we spend our days in the quarantine home office of 2020. Individuals behind screens and networked computers, using keyboards and mice, writing and organising files and communicating with other human beings through video links. It feels like a prophecy from a retro science fiction movie.
The number of inventions that Engelbart presents is mind-boggling. Mouse, chord keyboard, Hypertext, video conferencing, groupware, version control, view controls — and a consistent, universal user interface. To call the NLS revolutionary and innovative would be a massive understatement.
But the NLS is not only about technological achievements. The amazing thing is that the NLS has a distinct user interface. It is not a jumbled mix of features — it is a consistent and thought-through visual and interactive system. It is an interface that wants to be used. The NLS is already a full productivity suite.
Engelbart understands the importance of design, narrative, use cases — and showmanship. The demo is almost a theatrical piece that brings the software alive through its interface.
And it contains the best Freudian slip in the history of computing (2:18):
‘What if […] you as an intellectual worker were supplied with a computer display and a computer that was alive for you all day and that was instantly responsible — um — responsive…?’
Xerox Star (1981)
The user interface of the Xerox Star is one of the most dramatic, influential and yet overlooked designs of the 20th century. Conceived by David Canfield Smith and his team, it defined and still defines how millions of people imagine how computers work. And with the concept of the ‘desktop metaphor’, the Xerox Star single-handedly established what we now call user interface design.
While NLS seems to be slightly archaic, the interface of the Xerox Star is very contemporary. Even if you’re not acquainted with the system, it’s easy to understand what the interface elements mean. You can immediately identify the desktop, windows, icons, buttons, menus and desktop apps. With the Xerox Star, the computer became the interface and the interface became the computer.
One of the fundamental premises of the Xerox Star interface was the notion that users deal with data files, not with applications. The idea of a ‘document’ was essential to the design of the Star. Documents are visually and conceptually very prominent and are displayed as iconic symbols.
In the following years, more successful operating systems like Windows and macOS have moved away from this strict document-centric approach. But the influence of the Xerox Star is still visible on millions of desktop PCs today.
Apple Macintosh / MacOS (1984)
There is a good chance that you’re reading this text on a computer running the latest version of macOS. Thirty-six years after its first introduction, the Macintosh from 1984 is still very much alive.
The first Macintosh was strongly inspired by the Xerox Star. However, while the Star was intended for the serious business user — and priced accordingly — the Macintosh was a true personal computer. Smaller, cheaper, simpler — and yet more versatile, it became the first commercially successful computer with a graphical user interface. The many concepts and ideas behind the NLS and the Star were finally reaching a large audience.
While Larry Tesler and Bill Atkinson developed the interaction design, Susan Kare was responsible for the design of the icons, fonts and many interface elements — notably the Control Panel which is on many levels an exceptional user interface.
The Control Panel of the first Macintosh is dense; it has a fixed layout with no text labels; it visually represents language (turning volume up and down); and it uses tiny icons of a hare and a tortoise to indicate speed. Every aspect of the panel is carefully designed and crafted. The size of the Control Panel is just 315 by 158 pixels, but it sums up the aesthetic qualities and the overall design attitude of the Macintosh.
The level of visual and conceptual consistency of the first Macintosh is still unmatched today. This is not a coincidence. The Macintosh User Interface Guidelines, initially written and compiled by Joanna Hoffman, were the first systematic description of a user interface and instrumental for the success of the Macintosh.
MacPaint (1984)
Contemporary graphic design wouldn’t be the same without computers. The digital design tools we use today follow interaction principles that can be traced back to MacPaint, a tool palette that puts the cursor into different interaction modes and a palette that has settings for the currently selected tool — like the patterns picker in MacPaint. It allows zooming in for more precise image editing, too.
These workflows didn’t emerge by accident, they were carefully crafted by designer Susan Kare and developer Bill Atkinson. The technological achievements (MacPaint was incredibly fast for the modest computing power) were just as innovative as the aesthetics and ergonomics of the on-screen graphics and interactions.
Kai’s Power Tools and Other Interfaces from Kai Krause (1992–1999)
Weird and wonderful. To modern eyes, everything looks unfamiliar and unconventional. But at the same time, the user interfaces by Kai Krause are unique in the history of interface design. They happily ignored rules, standards and UI guidelines — and they were based on a simple premise: Don’t separate tools and image.
Below the quirky and playful interfaces lies an idea that should be rediscovered: Kai Krause understood that a graphical user interface is basically just an image. A pixel is a pixel; it’s just the semiotics that change.
Kai questions the conceptual division between input and output, between tool and medium, between brush and canvas. In this sense, the screen is an open and fluid space for manipulation and interaction. Having tools in a toolbar is just a social convention, an imaginary division that limits your freedom.
Interface and medium should not be separated. When a brush touches the canvas in the physical world, they interact in a very material sense. When you paint, they become one. The interfaces of Kai Krause want to convey the same experience when you interact with a computer.
Right now, skeuomorphism is out of fashion, but we’re sure it will be back. And hopefully with a good dose of the exuberance and joy that Kai Krause introduced to the world of software.
Magic Cap (1994)
Magic Cap was a mobile computing platform created by two of the original Macintosh engineers, Andy Hertzfeld and Bill Atkinson. The platform consisted of two parts: (i) an operating system intended to run on pocket-sized devices with monochrome displays and (ii) a server infrastructure to coordinate software ‘agents’ that could be sent out to the network to perform a task and return to the device with the results.
The Magic Cap operating system was the most literal take on the desktop metaphor, featuring detailed illustrations of an actual desktop. It even stepped back from the desktop, metaphorically, with ‘rooms’ similar to those in Microsoft Bob. There was office around the virtual desktop, and even a hallway and other rooms. Magic Cap was not commercially successful, but many of the ideas were visionary and many of the suggested use cases spot-on. The iPhone proved, 15 years later, that the basic principle of a pocket computer was not only viable but world-changing.
Information Landscapes (1994)
In 1994, Muriel Cooper presented a radical view of the future. A year before Windows 95 was launched, she completely and utterly questioned fundamental rules of user interface design. In her presentation ‘Information Landscapes’, she and her team of graduate students proposed radical open spaces, dynamic and fluid information systems, transparency, simultaneity, beauty and expressiveness. Typography was no longer locked up in a rectangle; it was floating in a multi-dimensional, interactive space. Her vision is incredibly suggestive. It’s not about solving specific UI problems; it’s about escaping flatland and challenging the replication of analogue rules on screen.
So far, Muriel Cooper’s vision has never translated into a real product. But, in the backs of our minds, we all know that this is how computer interfaces should actually look. Someday they will.
BeOS (1995)
BeOS was never a commercial success and, in terms of its user interface, it was not a radical departure from predecessors like Windows 3.0 and Mac OS 7, but it was visually very well organised and made good use of different greys for indicating focus and structure.
And then there were the icons — they really stood out. They were incredibly crisp and clean and brought post-modern design style of the late ’80s and early ’90s to the computer. What Alessi was to kitchenware, the BeOS icons were to interface design. According to Jean-Louis Gassée, they were created in 1991 by a fairly unknown and now defunct design company called Palo Alto Design.
The BeOS icons are based on an isometric grid and a highly consistent colour palette. A dominant blue (the same colour as the BeOS hardware), different shades of orange as a complementary contrast, lively greys and strong reds. There have been icons in faux 3D in the past (notably on NeXTSTEP) but never before with this degree of consistency and elegance.
Mac OS 8 followed suit with stronger colours and faux 3D. Irix added dimensions and had floating icons. Windows XP had strong colours. But the overall design quality of BeOS’s icons is still superior by far. A true design classic.
Microsoft Bob (1995)
When Microsoft Bob was released in 1995, it was met with excitement; it wanted to be a radical departure from all the computing philosophies that had been before it. Bob greeted the user in a friendly virtual home, used familiar real-world metaphors, and had a personality. (Actually, it had multiple personalities that you could choose from.)
Bob suffered from several problems though, both on the conceptual level and in the implementation. The concept of an assistant didn’t work very well because there was no simulation of intelligence whatsoever: the virtual assistant character merely showed multiple-choice selection sheets wrapped in a speech bubble. The graphics were childish and patronising, and the clunky workflows felt condescending. It wasn’t part of the plan that novice ‘non-technical’ people could become more proficient — a huge oversight! After only a year, Microsoft Bob was discontinued. The notorious Clippy character and colleagues survived as nagging assistant mascots in Microsoft Office, being ridiculed by the audience and eventually killed off, too.
Despite its flaws, however, it was important that this concept was released as a real product. It showed that something that seems to make sense in theory can manifest as something that nobody wants or needs. The only true way to find out is to ship it.
Windows 95 (1995)
Windows 95 was probably the most-hyped and most-anticipated operating system release in computing history. Even without widespread internet access and long before social media, a worldwide marketing campaign put Windows 95 on every front page and even on the evening news. Its signature user interface control, the Start button, was at the centre of the marketing campaign, together with the Rolling Stones track ‘Start Me Up’.
Beyond all the hype, Windows 95 was indeed a step up in usability over older Windows versions. Not everything worked as advertised, though (Plug & Play anyone?). Windows 95 had a reputation for crashing quite often, and sure, the technology wasn’t as advanced as OS/2 — but who remembers OS/2? Everyone used Windows 95, and that determined how desktop software looked for the rest of the 1990s: bevelled grey boxes, light source on the top left. Even the classic Mac OS adopted the grey and bevelled look when the Platinum colour scheme was introduced for Version 8 in 1997.
Macromedia Director (1996)
Before Macromedia Director, there was Apple HyperCard. The idea that novice users can create their own interactive hypermedia applications goes back to 1987 — three years before the invention of the World Wide Web. The developer behind HyperCard was no other than Bill Atkinson, the creator of MacPaint.
The HyperCard’s interface was already quite visual for its time, but Macromedia Director took the idea of authoring interactive applications to a new level. There was something decidedly charming about Macromedia Director’s interface. Names and interface elements were evocative and visual. You had a cast, a stage, a score and a script. It wasn’t a trivial task to produce interactive content — but the interface already told you what to do. Enabling everyone to create interactive applications on their own, just with guidance from the interface, was a great achievement of Director.
Winamp (1997)
The story of Winamp starts with a new file format: the MP3 standard. It was created to compress high-quality audio into manageable file sizes. Together with growing hard drive capacities and affordable CD-ROM drives, ‘ripping’ CDs and transferring complete music collections to one’s personal computer became attractive, with illegal peer-to-peer file sharing soon becoming popular. Winamp was built to play these compressed audio files that were suddenly on every computer.
Winamp’s user interface design has shaped how digital music players look and feel. With the release of Version 2 in 1998, Winamp became a playground for experimenting with music player user interfaces. It popularised a nerdy hobby: skinning. Everything about Winamp’s looks was highly customisable, and so was the feature set. A plug-in interface allowed experimenting with generative music visualisations.
Music Software: ReBirth (1998) and Reason (2019)
Music software is one of the last strongholds of skeuomorphic design: the interfaces are mimicking the appearance of analogue buttons, sliders and cables. Even Apple’s own Logic Pro X still uses a lot of skeuomorphism in 2020 — singular in the Apple software landscape. The examples shown here are ReBirth (1998) and Reason (2019), both designed and developed by Reason Studios (formerly known as Propellerhead).
The use of skeuomorphism in music software has sometimes been criticised; but it’s kind of a testimony to the love that musicians still have for racks, sliders, switches and cables. Traditions are kept alive by emulating hardware interfaces. An instrument must be seen in order to be heard.
In a way, music software is one of the few examples in user interface design where visual style is more important than usability. It’s an expression of love — and we should cherish the fact that software like Reason exists. Music is an emotional business, so it’s good to see that emotions still shape user interfaces.
Transmit (1998–2020)
Among the indie developer companies, Panic is one of the oldest, most successful and most beloved. Their flagship product, Transmit, is two things: a solid piece of technology and a lesson in marketing for digital products. First released in 1998, it has remained the quasi-standard file transfer program for the Mac. In these 22 years, the iconic truck logo in its many iterations has always felt fresh. The proven UI was originally designed by Cabel Sasser (Versions 1 to 3) and refreshed by Neven Mrgan since Version 4.
The storytelling around the product and the company have made Transmit an impulse buy for generations of web designers and developers. A commodity application with ingenious branding.
iPod Classic (2001)
In 2001, MP3 players were nerdy and hard to use. They had little storage and many buttons. Then came the original iPod. Its key ingredients were a compact hard-drive, a touch-sensitive wheel with clicky feedback, and horizontally arranged hierarchical lists. This combination made it possible to navigate huge music libraries with very little friction.
The spatial lists layout (‘Miller Columns’) had been in use for file management in NeXTSTEP and later in its successor, the Mac OS X Finder. Their small-screen adaption, the original iPod’s one-list-at-a-time drilldown principle, can be found in almost every iPhone app today.
Mac OS X (2001)
The original 1998 iMac was revolutionary on the outside, influencing industrial design beyond the computer industry. But the software it came with — Mac OS 8 — was 1980s technology behind mid-’90s UI veneer. The discrepancy between the physical outside and the virtual inside of the product was begging for a redesign.
Apple had bought NeXT in 1997 to adapt the NeXTSTEP operating system as the future Mac OS. (The deal also brought Steve Jobs back to Apple, likely more than a lucky coincidence.) Its proven technology lived on under the hood, and the user interface was completely overhauled for what became Mac OS X.
The new look and feel, designed by Cordell Ratzlaff and Bas Ording among others, was clearly infused with Mac DNA but with a brand-new spin, mirroring the aesthetics of the hardware that the OS ran on in an almost photorealistic way, with heavy gloss, translucency, pinstripes and shadows everywhere. The menu bar was at its familiar position at the top of the screen, but windows looked and worked quite differently from the classic Mac OS. The new Dock at the bottom of the screen served as a futuristic demo, magnifying the photorealistic icons smoothly and effortlessly.
Mac OS X fit in perfectly with the predominant popular design style around the year 2000, the Y2K aesthetic that fused futuristic glossy plastic, glass, whitespace, metallic reflections, 3D renderings and pastel-coloured accents.
iOS / iPhoneOS 1.0 (2007)
iPhoneOS, the operating system that we know as iOS today, was the first full desktop-class operating system that could run on a pocketable computer. It was the first consumer product that used multi-touch and swipe gestures to navigate the virtual space. It was the first mainstream product that had two-finger pinching for zooming and natural swiping to flip through virtual pages. There were many small inventions, like drill-down list hierarchies with a labelled back button in the upper left corner, rubber-banding at the end of lists to feel the end of a list, and many other small details we take for granted in smartphones today.
iPhone OS 1.0 did not run any third-party apps, so everything was curated by Apple’s designers and developers, resulting in a highly consistent, opinionated and polished experience.
Tapbots Weightbot and Convertbot (2008)
Tapbots released their first apps not long after the iOS App Store was opened in 2008. Weightbot was a body weight tracker and Convertbot was a unit converter. The number of competing apps in these genres grew quickly, but the Tapbots products didn’t lose their appeal. They embraced craftsmanship in both design and implementation. The cute-but-not-too-cute marketing scheme of friendly helper robots was well executed, from the robot face on the app icons to the promotional website copy.
Designer Mark Jardine combined skeuomorphic metaphors to resemble mechanical robots or retro-futuristic gadgets, with sliding panels and bleeping and chirping computer sounds. The app icons were miniature representations of the apps’ main interfaces.
There was so much personality in these simple tools. A utility app that creates such an instant emotional connection mostly through its look and feel has become hard to find.
Tweetdeck (2008)
It’s surprising — to say the least — that, in the year 2020, the vastness and the dynamics of social networks are still represented with a boring sequence of text-and-image containers. We always assumed that, at some point or other, there would be a visual representation and an amazing interface for the endless streams and networks, for information overload and for the sheer speed and volumes of human communication on social media.
Since such an application does not exist, however, we have to make do with Tweetdeck. It’s far away from being perfect; it’s now 12 years old and it hasn’t changed much since its first launch. But at least it dares to be a bit disturbing and overwhelming.
Its main feature is its ability to create an endless number of columns with different Twitter streams. You can view any number of feeds, notifications, activities, lists, collections, or trends. It’s still based on columns with text-and-image containers — but the interface allows you to get a glimpse of the synchronous, networked and chaotic nature of social media.
Tweetdeck provides us with a small instance of peripheral vision for the virtual world around us.
Path (Social Network, 2010)
Path was one of the first social networks that were only available on mobile phones. The aim of Path was to create a more personal and intimate app for staying in touch with friends and family. Initially, you were allowed only to add 50 people to your network; you couldn’t post links or include web references, so you had to create the content yourself.
Path was a very beautiful app with an incredible attention to detail. The lead designer, Dustin Mierau, created an interface that was playful, innovative and truly delightful. Path used the idea of a timeline in a very literal sense. A delicate line was always visible in the background, dots indicating postings or status updates. When you scrolled through the events, a charming little clock next to the scrollbar indicated the time frame you were looking at. Path also pioneered the use of sticker-style emojis — something we nowadays take for granted.
The main menu was designed along the same ideas. It was an early example of a radial popup menu on a mobile phone. The animation of the menu was spot on and just fun to use.
Path shut down in 2018. They had a couple of data scandals — although today those seem trivial compared to Cambridge Analytica. In a better world, Path would still exist, not only for its considerate approach to social networking but especially for its beautiful user interface.
Windows Phone (2010)
For many years, Microsoft had a bad reputation for design. Windows 3.0 was visually a joke, Windows 95 a grey wasteland, Bob infantile and XP a pick & mix candy box. Microsoft is responsible for Arial, Comic Sans and Trebuchet, too. So it’s very, very difficult to convey the wonder and astonishment in the design world when Windows Phone 7 and the Metro design language were launched in 2010.
While Apple was still celebrating faux leather and 3D icons, Metro was the first truly graphic and typographic design language for a mobile phone. Years before ‘flat design’ became the de facto standard for user interfaces, Microsoft’s design team under the leadership of Jeff Fong presented their radical vision of mobile computing interfaces: a geometric but flexible grid system, a cool colour scheme, Swiss typography, fluid animations and transitions, live tiles, minimalist and beautiful interface design patterns.
Microsoft had already experimented with Metro on the Zune media player, but by applying it to Windows Phone 7, it turned it into a complex design system.
It is deeply regrettable that Windows Phone wasn’t a commercial success. The reasons for this are manifold: it wasn’t the right visual language for the regular Windows XP user; it was three years too late; third-party application development never took off; integration with the Windows desktop version was weak; and the transfer of Metro UI ideas to Windows 8 was a failure.
But Metro and Windows Phone 7 were great contributions to user interface design and we believe that they deeply changed the design culture within Microsoft itself. Ever since Windows Phone 7, Microsoft has constantly improved its design reputation.
iA writer (2011)
Before iA Writer, the default application for writers and journalists was Microsoft Word. For years, it had suffered from feature creep, worsening latency and overwhelming visual clutter.
Between amateur plain text editors like Notepad on Windows, hacker plain text editors and LaTeX for mathematicians, InDesign for graphic designers, and anxiety-inducing Microsoft Word for everyone else, Oliver Reichenstein of Information Architects (iA) saw an opportunity: to create an opinionated tool to distil one’s thoughts. That tool, iA Writer, promised radical simplicity. There was no cryptic icon toolbar; there were no settings. Just a well-balanced typographic layout and a blue cursor. One could focus on the current sentence, and there was a distraction-free full-screen mode. iA Writer has taught writers to use Markdown, prioritising semantics over rich-text formatting.
Android 5.0 / Material Design (2014)
Google is getting better at design — but you can feel that their heart isn’t really in it. In the early years, the Android user interface was bordering on dysfunctional; then it started to imitate iOS before it finally found its own voice in 2014 with Material Design — conceived by Matías Duarte and his team.
Material Design itself is a good visual language, but the lack of design ambition shows when you compare the concept and ideas in the guidelines with the apps they’re shipping. The Google design portal presents lots of interesting ideas that somehow never translate into a great product.
It’s a shame, as Material Design does one thing really well: defining and utilising elevation levels. This sounds like a fairly obscure issue, but it’s fundamental to the way interfaces on Android work. Furthermore, it’s something that many other design groups — including Apple Design — haven’t really grasped.
Organising user interface elements along a virtual z-axis and using light and shadows to precisely indicate the position of each element is one of Android’s strongest design aspects.
Apple watchOS 1.0 Home Screen (2014)
The first Apple Watch hit the market slightly too early: Most applications felt unusably slow, with many user interfaces coming across as unresponsive. Processor and battery technology did not quite allow for the experience that Apple had set out to create — and it showed!
They nailed one thing in the very first watchOS release though: the home screen with its circular app icons that shrank until they disappeared at the screen edges as if the glass were a magic lens. They were arranged like pollen around the clock icon, which transitioned beautifully into the full-screen watch face.
Things 3 (iOS / Mac)
Things has been popular in the iOS and macOS app stores for over 10 years. It’s a premium product at a premium price point — at least when compared to most other apps in its category.
Things is just a to-do list — but it’s a very good to-do list! It’s well-engineered and cleverly marketed. And, of course, it has a fabulously crafted user interface, designed by Christian Krämer.
App designers admired the Things 3 update when it was released in 2017. Still simple and approachable, it took attention to detail to a new level. It had happy springy UI animations, but without being annoying. It had a stark white interface with large soft shadows, but without looking blunt. It contained bold and unconventional design decisions like the inverted dark context menus.
And, despite the heavily customised user interface, the experience felt familiar and honoured operating system conventions on both iOS and macOS. At that time, Things 3 felt like a preview of a future, better version of iOS.
Panic Code Editor (2019)
Traditional software development — writing code to build computer programs — is still done mostly on Macs and PCs these days. Writing complex algorithms simply isn’t feasible on smartphones. Most ‘real’ programming is tied to devices with physical keyboards and large screens because they provide a much more comfortable environment in which to interact with text.
But this doesn’t mean that small fixes to existing code or websites can’t be done on mobile devices. That’s precisely where the Panic Code Editor for iOS (formerly known as Coda iOS 1.5, released in 2015) comes in. It’s a mobile text editor that doesn’t feel like a compromise or workaround; rather it embraces the possibilities of a handheld touch screen device. It’s a well-designed, astonishingly efficient and pleasant tool. Code Editor was designed by Neven Mrgan. The desktop counterpart, Coda for Mac, was designed by Cabel Sasser.
References and further reading
- Bill Moggridge: Designing Interactions, MIT Press, 2007
- Bill Moggridge: Designing Media, MIT Press, 2010
- Andy Hertzfeld: Revolution in The Valley: The Insanely Great Story of How the Mac Was Made, O’Reilly & Associates, 2004
- Christian Wurster: Computer — Eine illustrierte Geschichte, Taschen, 2002
- Jan Distelmeyer: Machtzeichen: Anordnungen des Computers. Berlin, Bertz + Fischer, 2017
- guidebookgallery.org
- computerhistory.org
- DigiBarn Computer Museum
- folklore.org
- webdesignmuseum.org (also covers software)
- twitter.com/WebDesignMuseum
About the authors
Boris Müller is a professor of interaction design in Potsdam, Germany and co-director of the Urban Complexity Lab — a research space at the intersection of design, science and the humanities. His award-winning work focuses on generative design, data visualisation and science communication.
Frank Rausch is a user interface designer, app developer and typographer. He is co-founder and managing partner at Raureif, an interaction design consultancy based in Berlin. In his work, Frank explores how technology and code can shape high-quality digital reading experiences. He teaches app design and typography at design schools in Austria, Denmark, Germany, and Switzerland.
