Partner von
Partner von

Interface Design

Vom Fahrkartenautomaten bis zur Smartphone-App: Interfaces machen Komplexität beherrschbar – mal besser, mal schlechter. Der Fachmann Torsten Stapelkamp erklärt, worauf es bei der Gestaltung der Schnittstellen zwischen Mensch und Maschine ankommt.





brand eins: Herr Stapelkamp, wir denken bei einem Interface – auf Deutsch: Schnittstelle – schnell an ein Computerprogramm mit Menüs und Schaltflächen. Sie sagen, Interfaces sind überall – wo denn?

Torsten Stapelkamp: Zum Beispiel an Mineralwasserflaschen. Deren Schraubverschlüsse sind fast immer senkrecht geriffelt. Das erleichtert das Aufschrauben, es signalisiert aber auch, dass ich den Verschluss waagerecht drehen muss, statt ihn zum Beispiel senkrecht abzuziehen wie einen Korken. Wenn man sich vorstellt, man könnte jemanden zum Leben erwecken, der noch nie in seinem Leben einen Schraubverschluss in der Hand hatte: Er würde es relativ schnell kapieren – weil das System über das Interface Riffelung mit ihm kommuniziert. Ein anderes Beispiel sind Farben. Telefonzellen waren in England traditionell rot, in Deutschland gelb, damit man sie auch aus der Ferne schnell finden konnte.

So gut werden Nutzer allerdings häufig nicht geführt.

In Leipzig sind die Ticket-Automaten des ÖPNV gelb, die der Deutschen Bahn rot. Das ist hilfreich, wenn man es verstanden hat – aber für alle Besucher ist es erst einmal verwirrend. Die New Yorker Fahrscheinautomaten sind wiederum ein Musterbeispiel für gutes Interfacedesign: Hier besteht die Herausforderung darin, dass täglich Millionen von Fahrgästen unterschiedlicher Herkunft das System nutzen.

Durch ausführliche Usability-Tests wurde sichergestellt, dass die Benutzerführung für alle verständlich ist. Die Hardware der Automaten und die Software der Bildschirmmenüs wurde aufeinander abgestimmt: Die Aufforderung, Geld ein- zuwerfen, hat auf dem Bildschirm dieselbe Farbe wie der Münz- und Geldscheinschlitz des Geräts. Das geht nur, wenn das Grafik- und Screendesign, das Interfacedesign und das Gerätedesign zusammengedacht und im Idealfall wie hier von derselben Agentur entwickelt werden.

In der digitalen Welt nimmt die Menge an Informationen exponentiell zu. Werden dadurch auch Interfaces wichtiger?

Auf jeden Fall. Sie sind immer wichtig, aber in der digitalen Welt sind sie die einzige Möglichkeit, die gigantische Zahl an Möglichkeiten herunterzubrechen, sodass man nicht überfordert wird. Fast jeder hat mindestens 50 Apps auf seinem Smartphone, und jede App hat leicht 50 verschiedene Funktionen. Würde man diese 2500 Funktionen als Liste in einer Exceltabelle darstellen, würde sich niemand dafür interessieren. Schon die Erfindung der App, der Umstand also, dass verschiedene Funktionen des Telefons auf diese Weise zugänglich gemacht werden, ist eine herausragende Strategie. Wenn ich meine Wecker-App aufmache, sehe ich nur die Weckerfunktion – und nicht auch noch den Kompass oder den Taschenrechner.

Welche Rolle spielt die Intuition?

Eines der wichtigsten Handbücher für Interface-Design heißt „Don’t make me think“, zwing mich nicht zum Denken. Grundsätzlich ist Denken natürlich eine sehr lobenswerte Tätigkeit, und wir sollten eher mehr denken als weniger. Aber wenn ich bei der Benutzung einer Website, einer App oder eines Automaten nachdenken muss, wie ich mein Ziel erreiche, dann ist bei der Gestaltung des Interfaces schon etwas schiefgelaufen.

Wie erreicht man ein intuitives Design?

Zum einen durch frühe Usability-Tests. Indem ich also – immer wieder und nicht nur einmal ganz am Ende – schaue, wie Menschen mit dem umgehen, was ich ihnen vorsetze. Wo geraten sie ins Stocken? Wo treffen sie Entscheidungen, die sie anschließend sofort wieder rückgängig machen? Wo brechen sie die Benutzung vielleicht sogar ab, bevor sie etwas erreicht haben? Ein zweiter wichtiger Punkt sind Standards. Wenn sich einmal etwas etabliert hat, ist es nicht nutzerfreundlich, es zu ändern. Wir haben uns inzwischen daran gewöhnt, dass auf einer Website der Log-in-Button oben rechts ist. Wenn ich ihn als Gestalter unten links platziere, weil ich das schöner finde, dann ist dies nicht hilfreich. Auch grafisch bilden sich Standards heraus. Inzwischen weiß beinahe jeder, wenn er drei kurze waagerechte Linien sieht, dass es sich um das Symbol für „Menü“ handelt. Oder bei einem Pfeil nach links um das Symbol für „zurück“.

Website-Betreiber und App-Entwickler kön- nen exakt nachverfolgen, wie sich Nutzer auf ihrer Seite bewegen, etwa durch das Tracken von Mausbewegungen. Schlechte Interfaces müssten folglich ein Problem vergangener Zeiten sein, oder?

Viele Anbieter tracken aber nicht genau genug. Das kann zum einen Datenschutzgründe haben, teilweise ist es auch mangelndes Interesse. Hier wird am falschen Ende gespart. Und es gibt auch die Fälle, in denen Interfaces absichtlich so gestaltet werden, dass sie für den Nutzer nicht ideal sind. Dass er eben nicht frei entscheiden kann, sondern in eine bestimmte Richtung gedrängt wird.

Zum Beispiel?

Ich habe neulich auf einer Website etwas gekauft, und bei den Bezahlmöglichkeiten war der Zahlungsabwickler Klarna sehr prominent dargestellt. Ich wollte aber mit Paypal bezahlen und musste sehr lange suchen und mehrmals klicken, bis ich endlich irgendwo versteckt die Möglichkeit dazu fand. Ich bin ziemlich sicher, dass für den Shopbetreiber die Gebühren von Klarna niedriger sind und er deshalb die Kunden in diese Richtung schubsen will.

Ein ähnliches Phänomen finden Sie in vielen Apps: Wenn Sie sich registrieren, werden Sie gefragt, ob Sie Ihr Adressbuch hochladen wollen, um gleich zu sehen, wer noch alles in der App aktiv ist. Der „weiter“-Button ist prominent und signalisiert Ihnen nicht, dass Sie eine Entscheidung treffen. „Überspringen“ steht derweil nur ganz klein und hellgrau oben in der Ecke.

Was ist einer der klassischen unabsichtlichen Fehler im Interfacedesign?

Laien denken, wenn man auf einen Bildschirm schaut, würde man ihn komplett erfassen. Er nimmt ja nicht unser gesamtes Sichtfeld ein. Aber in Wirklichkeit fokussieren wir nur einen Punkt mit etwa zwei Zentimeter Durchmesser. Klar, der wandert blitzschnell über den Bildschirm, aber trotzdem nehmen wir nur sehr selektiv wahr. Eine der größten Herausforderungen in der Branche ist es deshalb, Interfaces zu entwickeln, die man beim Autofahren bedienen kann. Hier ist unsere Aufmerksamkeit noch eingeschränkter.

Sind Sprachassistenten nicht die elegantere Lösung?

Im Auto sind diese praktisch, weil ich nicht auf ein Display schauen muss und dadurch abgelenkt bin. Für einfache Dinge funktionieren sie auch gut. Alexa, wie wird das Wetter morgen? Siri, stell einen Timer auf 15 Minuten – solche Sachen. Aber wenn man beispielsweise versucht, seinen Wocheneinkauf mithilfe Alexa zu machen, ist man schnell genervt. Das funktioniert nicht befriedigend.

Weil die Aufgabe zu komplex ist?

Grundsätzlich helfen Interfaces fast immer, Komplexität zu reduzieren. Aber manchmal ist Komplexität auch erwünscht. Ein Anbieter wie Netflix oder ein Supermarkt will ja zeigen, was er alles zu bieten hat. Gleichzeitig muss eine Überforderung des Kunden vermieden werden. Online kann das zum Beispiel durch Empfehlungen passieren, das Nutzungs- oder Einkaufsverhalten ist ja bekannt. Bei regelmäßigen Wiederholungskäufen, wie sie gerade im Supermarkt oft vorkommen, hat Amazon mit dem Dash-Button die maximale Vereinfachung erreicht: Ich muss einmal festlegen, mit welchem Produkt er verknüpft sein soll, danach löst jeder Druck auf den Knopf eine Bestellung aus. Für viele Unternehmen ist das ein Albtraum: Wenn ich nur noch den Knopf drücke oder sage: „Alexa, bestelle Toilettenpapier“, dann ist meine Markenentscheidung schon getroffen, dann bin ich für Werbung nicht mehr empfänglich (siehe brand eins 06/2018 „Würde Alexa Rotkäppchen trinken?“).

Gibt es Firmen, denen es egal sein kann, wie gut oder schlecht ihre Interfaces sind?

Bei Ebay dachte man es lange Zeit. Das Online-Auktionshaus hat die wahrscheinlich am schlechtesten gestaltete Internetseite überhaupt, im Laufe der Jahre sind immer neue Funktionen dazugekommen. Anfangs war es noch einfach, einen Gegenstand zu verkaufen, nach und nach musste man sich durch immer mehr Formulare klicken, alles wurde immer umständlicher und mühsamer.

Was ist dann passiert?

Zum einen kamen solche Programme wie GarageSale auf, die es erlaubten, Verkaufsangebote mit einem angenehmeren Interface zu erstellen und dann per Knopfdruck bei Ebay einzustellen. Die Leute bezahlen für diese Programme, geben also Geld aus, nur um nicht das Interface von Ebay nutzen zu müssen. Das konnte Ebay noch egal sein, weil die Verkaufsgebühren trotzdem an sie gingen. Aber dann kamen Smartphone-Apps wie Shpock oder Kleiderkreisel, die ein radikal neues Erlebnis anboten: Statt sich eine halbe Stunde vor den Computer zu setzen, um den alten Trenchcoat loszuwerden, waren plötzlich nur noch zwei Handyfotos nötig, durch ein paar Menüs klicken, fertig.

In der Gründerszene gibt es den Begriff vom Minimal Viable Product (MVP), der gerade eben funktionsfähigen Erstversion eines Produktes, mit der man testet, ob es einen Markt gibt. Apps wie Shpock sind gewissermaßen das MVP von Ebay. Ich kenne die genauen Zahlen nicht, und für professionelle Händler ist Ebay sicher nach wie vor eine wichtige Verkaufsplattform – aber bei den Privatverkäufern konnten diese kleinen Apps dem Platzhirsch sicher Marktanteile abjagen – oder ihn zumindest dazu bringen, das eigene Interface doch nutzerfreundlicher zu gestalten. Ein wunderbarer Beleg für die These: Das Interface siegt immer. ---

Torsten Stapelkamp, 52, studierte Industrial Design an der Universität Wuppertal und Mediendesign an der Kunsthochschule für Medien Köln. Nach Lehraufträgen in Bielefeld, Konstanz und Köln unterrichtet und forscht er seit 2009 als Professor zu Themen wie Interfacedesign und Service Design an der Hochschule Hof. Bis zum Jahr 2009 war er darüber hinaus Partner der Agentur Maas & Co. in Köln.

Stapelkamp hat mehrere Bücher zum Thema verfasst, darunter „Screen- und Interfacedesign – Gestaltung und Usability für Hard- und Software“, „Interaction- und Interfacedesign“ und „Informationsvisualisierung – Web, Print, Signaletik“ (alle Springer Verlag, Heidelberg).


Vorbildliches Interfacedesign: die Ticket-Automaten der New Yorker Subway Fotos: © ddp images; Michael Krinke / Getty Images (S. 43)


Erleichtert das Aufschrauben und signalisiert die Drehrichtung: senkrechte Riffelung des Schraubdeckels