Interface paradigms – Geschichte des Interfacedesigns, Teil 1

Interaktive, digitale Produkte sind heutzutage stärker in die alltäglichen Praktiken der meisten Menschen verwoben als früher. Computer, Smartphones und andere technische Geräte sind nicht mehr nur Arbeitsgerät, sondern auch Werkzeuge zur Strukturierung und Gestaltung des Privatlebens. Als Besitzer*innen von Smartphones, Tablets, Laptops und Wearables kommen die meisten Menschen heute ständig mit digitalen Benutzeroberflächen als Schnittstelle zu komplexen technischen Systemen in Berührung, indem sie diese für Kommunikation, Information, Unterhaltung und Konsum nutzen. Die Gestaltung dieser Benutzeroberflächen gewinnt damit zunehmend an Bedeutung.

Als Lehrbeauftragter an der Rheinischen Fachhochschule in Köln stand ich vor der Aufgabe, ein Seminar im Bereich Interfacedesign für den Masterstudiengang User Experience Design zu konzipieren. Dabei stellte sich für mich die Frage, wie sich zum einen die erforderlichen fachlichen und handwerklichen Fähigkeiten zur Gestaltung benutzerfreundlicher Schnittstellen und zum anderen die Kompetenz zur Analyse und Bewertung gestalterischer Lösungen bestmöglich vermitteln lassen. In den meisten Curricula für die akademische Ausbildung von Designer*innen ist die Vermittlung von designhistorischen Kenntnissen vorgesehen. Denn die Auseinandersetzung mit historischen Entwicklungen ermöglicht die Einordnung gestalterischer Lösungen in technik- und kulturgeschichtliche Kontexte und damit deren Analyse und Bewertung. Auch für den Bereich Interfacedesign ist deswegen eine Auseinandersetzung mit historischen Phänomenen aus einer ästhetischen Perspektive unabdingbar.

Historische Paradigmen

Die Geburtsstunde der Interfacegestaltung ist nur schwierig eindeutig festzumachen. Als Vorläufer von Benutzeroberflächen im heutigen Verständnis können die Bedieneinrichtungen früher Rechenmaschine des beginnenden 20. Jahrhunderts betrachtet werden. Die ersten Computer der 1950er und 1960er Jahre sind mit frühen Formen von Benutzeroberflächen ausgestattet, die aber aufgrund der zunächst relativ beschränkten Funktionen des Computers – wie Sortieren, Klassifizieren und Rechnen – vor allem über mechanische Elemente wie Schalter, Knöpfe und Schieberegler zu bedienen sind. Die ersten Produkte, die mit digitalen Benutzeroberflächen im heutigen Verständnis vergleichbar sind, kommen zunächst aus der institutionellen Forschung an Einrichtungen wie dem Stanford Research Laboratory (SRI) und dem Xerox PARC und werden in den späten 1970er, aber vor allem in den 1980er Jahren, kommerziell zunehmend von Unternehmen wie Microsoft und Apple über Produkte und Betriebssysteme verbreitet. Dabei haben sich vor allem grafische Benutzeroberflächen als dominante Form der Interaktion mit technischen Systemen hervorgetan. Dieser Entwicklung schließen sich jüngere Unternehmen, allen voran Google, an, indem sie die Gestaltung von Benutzeroberflächen zum Teil ihrer Corporate Identity machen. Damit prägen sie maßgeblich Trends und visuelle Sehgewohnheiten.

In den 1970er Jahren wird am Xerox Palo Alto Research Center (PARC) mit dem Xerox Alto der erste – zu dieser Zeit noch als „Workstation“ bezeichnete – Computer mit einer grafischen Benutzeroberfläche entwickelt. Mit diesem ersten Graphical User Interface (GUI) werden die bis dahin vorherrschenden Modi der Interaktion mit Maschinen – die entweder über mechanische Bedienelemente oder sprachliche Kommandos, die mithilfe einer Tastatur eingegeben werden – im Jahr 1973 abgelöst. Damit beginnt eine Ära, in der die Interaktion zwischen Mensch und Maschine, genau genommen Mensch und Software, vornehmliche über grafische Benutzeroberflächen stattfindet. Zentrales Element für die Ausgabe dieser Oberflächen sind Bildschirme, die die virtuelle Welt, mit der der Mensch interagiert, in zweidimensionaler Form abbilden. Neben der Eingabe von sprachlichen Informationen über eine Tastatur werden Systeme seitdem zunächst durch die Verwendung einer Computermaus gesteuert.

Bitmaps

Die erste Phase der frühen grafischen Benutzeroberflächen lässt sich unter dem Schlagwort Bitmaps zusammenfassen. Denn die Oberflächen des Xerox Alto und derer, die in den nächsten Jahren folgen, sind vor allem dadurch gekennzeichnet, dass die Ausgabe am Bildschirm durch niedrige Auflösung und die Verwendung von Schwarz und Weiß als einzige Farben eingeschränkt sind. Durch die niedrige Auflösung sind die Bildpunkte (oder Pixel) am Bildschirm mit bloßem Auge deutlich erkennbar, was die Darstellungsmöglichkeiten nicht nur stark einschränkt, sondern sie als Anordnung von Punkten in einem quadratischen Raster (Bitmap) erkennbar macht.

Die Interaktion mit Computern ist zu dieser Zeit für die meisten Menschen etwas Neues. Die Entwicklung grafischer Benutzeroberflächen soll deshalb dazu beitragen, die Möglichkeiten der Interaktion verständlich zu machen. Als Instrument dafür nutzen die Forscher am Xerox PARC eine bekannte Technik aus der Sprache: die Metapher. In der Sprache sind Metaphern bildhafte Darstellungen, die dem Rezipienten das Verständnis komplexer oder abstrakter Zusammenhänge durch das Angebot bekannter Bilder erleichtern. Da der Computer zunächst ein Hilfsmittel ist, das in professionellen Kontexten Aufgaben wie Rechnen, Sortieren und Verwalten – also bürokratische Aufgaben – zum Einsatz kommt und um diese Funktionen des Computers dessen Anwendern verständlich zu machen, hält der Schreibtisch als zentrales Element bürokratischer Tätigkeiten als globale Metapher Einzug in grafische Benutzeroberflächen. Mit dem Schreibtisch verlagern sich außerdem die restlichen Gegenstände des Büroinventars – wie der Papierkorb, Ordner und Dokumente – in die virtuelle Welt. In grafischen Benutzeroberflächen werden diese in bildhafter Form durch Piktogramme repräsentiert. Auf grafischer Ebene stellen diese Piktogramme – oder Icons – zweidimensionale Repräsentationen physischer Objekte wie Ordner, Dokumente und Drucker dar, während sie auf systemischer Ebene eine Verknüpfung zu einem Programm, einer Funktion oder einem Speicherort ermöglichen. Hierin liegt die große Stärke grafischer Benutzeroberflächen, die sie bis heute zum vorherrschenden Paradigma in der Interfacegestaltung machen: Programme und Funktionen können durch einfaches Auswählen gestartet werden und Benutzer müssen keine komplexen Befehle oder Eingabekombinationen lernen. Aus diesem Grund übernehmen die Computerhersteller in den 1980er Jahren die im Xerox PARC gemachten Erkenntnisse in die Entwicklung und Gestaltung ihrer Produkte, allen voran Microsoft mit seinem Betriebssystem Windows und Apple mit seinem Betriebssystem (Classic) Mac Operating System (OS). Ähnlich wie die Oberfläche des Xerox Alto sind sie geprägt durch die Verwendung von Icons, Fenstern und Menüs. Diese Elemente bilden zusammen mit dem Mauszeiger das Interaktionsparadigma, das bis heute die Gestaltung grafischer Benutzeroberflächen für Betriebssysteme auf Computern beherrscht und unter der Abkürzung WIMP (für Windows, Icons, Menus, Pointers) bekannt geworden ist.

Nachdem in den 1970er Jahren die Grundsteine für erfolgreiche grafische Benutzeroberflächen gelegt worden sind, erfahren sie vor allem in den 1980er Jahren große Verbreitung durch die zunehmende Verwendung von (Personal) Computern – zunächst nur in professionellen, später auch in privaten Kontexten. Mit dem Mac OS (1983/4), Amiga OS (1985) und Windows (1985) etablieren sich grafische Benutzeroberflächen zunehmend. Durch verbesserte Darstellungsmöglichkeiten an Bildschirmen werden die Verwendung von Farbe und die Anzeige in höheren Auflösungen möglich. Die Oberflächen werden insgesamt bunter, die Darstellung von Icons und anderen Interface-Elementen weniger abstrakt.

Skeuomorphismus

In den 1990er Jahren entwickeln sich die Betriebssysteme und die Technologien, mit denen sie verwendet werden, vor allem bezüglich ihrer Darstellungsmöglichkeiten weiter: Speicherkapazitäten werden erhöht und Bildschirme erhalten mehr Farben und höhere Auflösungen. Dadurch wird es möglich, dass die visuelle Darstellung der virtuellen Welt immer weniger abstrakt wird. Fenster, Menüleisten und andere Interface-Elemente werden in ihrer zweidimensionalen Darstellung durch die Verwendung von Körperschatten, Schlagschatten und perspektivischer Darstellung immer körperlicher.

Diese Entwicklung, die sich an Betriebssystemen wie beispielsweise Windows 95 (1995), Windows 98 (1998) und Mac OS 8 (1997) gut nachvollziehen lässt, stellt den Übergang zum nächsten Paradigma dar: der Skeuomorphismus versucht, in der Darstellung visueller Elemente Eigenschaften realer Objekte zu imitieren. Dazu gehören Körper- und Schlagschatten ebenso wie die Simulation von Lichtreflexen durch Farbverläufe. Außerdem werden Materialien wie Metall, Leder und Holz aus der realen Welt imitiert, was bei den Betriebssystemen von Apple ab der Version 10 (Mac OS X) seit dem Jahr 2000 besonders deutlich wird. Die frühen 2000er Jahre werden durch dieses Paradigma maßgeblich geprägt, sodass auch die Oberflächen der ab den späten 2000er Jahren stärker verbreiteten Betriebssysteme auf mobilen Endgeräten davon beeinflusst sind. So werden die in den 1980er Jahren etablierten Metaphern des virtuellen Raums in ihrer visuellen Darstellung immer weniger abstrakt.

Flat Design

Gegen Ende der 2000er Jahre lässt sich dann eine Abkehr von simulierten körperlichen Darstellungen durch radikale Abstraktion feststellen. Einen zentralen Meilenstein dieser Entwicklung stellt die Veröffentlichung von Microsofts Betriebssystem in der Version 8 im Jahr 2013 dar.

Hier wird nahezu komplett auf die Simulation körperlicher Darstellungen verzichtet. Icons und Interface-Elemente werden eindimensional und einfarbig dargestellt, wodurch sie flach erscheinen. Für dieses Paradigma etabliert sich deshalb der Begriff Flat Design. Interaktionsflächen werden durch einfache, farbige Rechtecke – die häufig als Kacheln bezeichnet werden – gekennzeichnet und durch schriftliche oder ikonische Informationen ergänzt. Körperschatten, Schlagschatten und die Darstellung von Lichtreflexen durch Farbverläufe werden nahezu komplett verbannt. Diesen Trend übernehmen in der Nachfolge von Microsoft auch andere Betriebssysteme, darunter auch die am weitesten verbreiteten mobilen Betriebssysteme iOS und Android.

Der ideologische Hintergedanke des Flat Design, der auf eine Abkehr von redundanten Gestaltungsmitteln setzt, stellt damit eine interessante Parallele zu historischen Entwicklungen dar – denn ähnlich wie die Künstler und Gestalter der abstrakten Moderne und der Avantgarden zu Beginn des 20. Jahrhunderts verabschieden sich die Interface Designer hier von dekorativen Elementen und verfolgen damit das Ziel, Benutzeroberflächen zu entwerfen, die ihrer digitalen Realität gerecht werden. Einen wichtigen Beitrag zur Prägung von Trends und Sehgewohnheiten leistet auch die zunehmende Verbreitung von internetbasierten Anwendungen, in denen die Darstellungsmöglichkeiten im Vergleich zu nativer Software technologisch eingeschränkt. So lässt sich beispielsweise auch Bootstrap – das stark verbreitete Framework zur (Frontend-)Entwicklung von Webseiten, das im Jahr 2011 von Twitter entwickelt und veröffentlicht wird – in das Paradigma Flat Design einordnen. Als quelloffene Bibliothek zur schnellen Entwicklung von Webseiten prägt Bootstrap maßgeblich das Erscheinungsbild zahlreicher Webseiten in den frühen 2010er Jahren.

Status Quo

Heutzutage haben sich grafische Benutzeroberflächen durch die stärkere Verbreitung stationärer und mobiler Endgeräte sowie ein starkes Wachstum im Bereich von digitalen und internetbasierten Dienstleistungen und Produkten als allgegenwärtiges Medium im Alltag vieler Menschen etabliert. Die Erscheinungsform dieser Oberflächen ist heutzutage nicht nur von den verbesserten technischen Möglichkeiten, sondern auch von unternehmenspolitischen Einflüssen geprägt. Nachdem in den frühen 2000er Jahren durch Flat Design die Oberflächen radikal abstrahiert wurden, bewegen sich heutige digitale Produkte wieder mehr in Richtung materieller und körperlicher Darstellungen – allerdings in deutlich reduzierterer Form als zuvor.

Material Design

Mit Material Design führt Google im Jahr 2014 eine Designphilosophie ein, die sich zwar zunächst auf die Gestaltung der unternehmenseigenen Produkte beschränkt, in den Folgejahren aber eine deutlich weiter reichende Wirkung entfaltet. Nachdem Google über mehrere Jahre verschiedene Produkte (z. B. Google Calendar, Google Maps, Google Mail sowie das Betriebssystem Android) eingeführt hat, die unterschiedlich gestaltet waren, verfolgt das Unternehmen mit der Einführung der neuen Designsprache das Ziel, das Nutzungserlebnis bei allen Berührungspunkten innerhalb der Produktwelt zu vereinheitlichen.

Im Zentrum von Material Design steht – wie der Name ankündigt – das Material, ein virtueller Werkstoff, aus dem alle Elemente einer Benutzeroberfläche hergestellt sind. Dieses ist inspiriert von Papier und verhält sich ähnlich: es ist flach, aber dimensional. Deshalb erscheinen alle Elemente einer Oberfläche durch Verwendung einfacher Farbflächen flach – durch die Verwendung weicher Schlagschatten wird aber auch der Eindruck von Tiefe erzeugt, wodurch es so scheint, als würden Elemente im virtuellen Raum übereinander liegen.

Aufgrund der konsistenten Gestaltung und der hohen Verbreitung von Google-Produkten entfaltet Material Design in den Jahren nach der Einführung eine starke Wirkung auf Sehgewohnheiten im Bereich digitaler Produkte – nicht zuletzt auch deshalb, weil Google sowohl die Designrichtlinien als auch die Komponenten für die technische Umsetzung quelloffen anbietet. Im Jahr 2018 erhält Material Design außerdem eine Erweiterung über das Produktportfolio hinaus. Mit Material Theming werden Designer und Entwickler aus aller Welt explizit dazu motiviert, ihre Produkte sowohl gestalterisch als auch technisch im Sinne von Material Design umzusetzen.

Der Gedanke eines Materials als virtueller Werkstoff, aus dem Interface-Elemente gemacht sind, findet sich nicht nur bei Google. Auch in Microsofts Design-System Fluent Design, das eine einheitliche Designrichtlinie für alle digitalen Produkte von Microsoft darstellt, gibt es ein virtuelles Material: hier ist das Vorbild aus der realen Welt allerdings nicht Papier, sondern Acryl. Daraus ergibt sich beispielsweise, dass Interface-Elemente wie Fenster und Menüs durch die Verwendung von Transparenz durchscheinend wirken.

Durch die dominante Stellung der Unternehmen Google und Microsoft sind deren Design-Systeme – die sich insgesamt mit der Phrase Material Design zusammenfassen lassen – sehr stark verbreitet. Durch diese starke Verbreitung prägen sie nicht nur ästhetische Sehgewohnheiten im Bereich digitaler Produkte, sondern auch die Gestaltung von Produkten anderer Unternehmen.

Literatur

Bollini, Letizia: Beautiful interfaces. From user experience to user interface design, in: Design for Next, Proceedings of the 12th EAD Conference, Rom 2017

Clayton, Steve: Modern design at Microsoft – Going beyond flat design, abgerufen am 10.03.2016 von https://www.microsoft.com/en-us/stories/design/

Cooper, Alan; Reimann, Robert; Cronin, David; Noessel, Christopher: About Face. The Essentials of Interaction Design, Indianapolis 2014

Google: Material Design, abgerufen am 18.05.2019 von https://material.io/design/introduction/

Greenfield, Adam: Radical Technologies. The Design of Everyday Life, New York 2017.

Gugerli, David: Wie die Welt in den Computer kam. Zur Entstehung digitaler Wirklichkeit, Frankfurt am Main 2018.

Hassenzahl, Marc; Diefenbach, Sarah: Psychologie in der nutzerzentrierten Produktgestaltung, Berlin 2017.

Hauffe, Thomas: Geschichte des Designs, Köln 2014

Meggs, P. B.; Purvis, A. W.: Meggs’ History of Graphic Design, Hoboken 2016

Microsoft: Fluent Design System, abgerufen am 20.05.2019 von https://www.microsoft.com/design/fluent

Microsoft: HoloLens 2. Mixed Reality ist einsatzbereit, abgerufen am 25.05.2019 von https://www.microsoft.com/de-de/hololens

Myers, Brad; Hudson, Scott E.; Pausch, Randy: Past, Present, and Future of User Interface Software Tools, in: ACM Transactions on Computer-Human Interaction, 7 (1), 2000, S. 3–28

Myers, Brad: A Brief History of Human Computer Interaction Technology. In: ACM interactions, 5 (2), 1998, S. 44-54

Po, Roman: A Look at Microsoft, Google and Apple’s Approach to Flat Design, abgerufen am 08.03.2016 von http://www.hongkiat.com/blog/google-apple-microsoft-flat-design/

Samsung (2019): Samsung One UI, abgerufen am 25.05.2019 von https://www.samsung.com/de/apps/one-ui/

Selle, Gert: Geschichte des Design in Deutschland, Frankfurt/New York 2007

Sharp, Helen; Preece, Jenny; Rogers, Yvonne: Interaction Design. Beyond Human-Computer Interaction, New York 2002.

Shneiderman, Ben; Plaisant, Catherine; Cohen, Maxinge; Jacobs, Steven; Elmqvist, Niklas; Diakopoulos, Nicholas: Designing the User Interface. Strategies for Effective Human-Computer Interaction, London 2018

Sinsabaugh, Nathan: What Google’s Material Design is really about, abgerufen am 01.03.2016 von http://www.wired.com/insights/2014/12/google-material-design/

Stückler, Moritz: Material Design: Google enthüllt neue Designsprache für Andro-id, Chrome und das Web, abgerufen am 23.02.2016 von: http://t3n.de/news/material-design-google-enthuellt-553560/ Weiser, M. (1991) The Computer fort he 21st Century. Scientific American 265 (3), 94–104.