Entschuldigung – Wie komme ich zum Eingang?
User Interfaces sind die Schnittstellen zwischen Mensch und Computersystemen. Ohne eine grafische Oberfläche würden viele Nutzer nicht in der Lage sein ein Computerprogramm zu bedienen.
Mittlerweile gibt es Bibliotheken mit grafischen Elementen, die das Anwendungserlebnis von Nutzern zielführend und zeitsparend gestalten. Diese Elemente können bedürfnisorientiert angepasst und in verschiedenen Szenarien eingesetzt werden. Gestalter von User Interfaces kombinieren technische Voraussetzungen und menschliche Anforderungen an das jeweilige System. Das Rad muss dabei in den meisten Fällen nicht immer neu erfunden werden. Ein Button auf dem Zur Anmeldung steht, wird in der Regel schnell gefunden und verstanden.
Wireframes & Prototypen
Am schnellsten lassen sich Wireframes mit Papier und Stift darstellen. Wie eine Art Brainstorming können mehrere Lösungsansätzen und Varianten ausprobiert und besprochen werden. Sie visualisieren Sitemaps, die nicht auf Anhieb für alle Beteiligten klar und deutlich den Funktionsumfang verdeutlichen. Damit das Team eine genauere Vorstellungen vom interaktiven Verhalten bekommt, können aus den Wireframes auf Papier jederzeit einfache Prototypen erstellt werden. Die Teammitglieder können in der Form erste Nutzertests durchführen und erkennen durch den haptischen Eindruck, an welchen Stellen der Benutzerführung Interaktionen mit dem Interface eventuell missverstanden werden könnten. Es lohnt sich nicht Wireframes aufwändig auszuarbeiten, idealerweise entstehen sie innerhalb einer Stunde, sie werden dabei diskutiert und es wird ein gemeinsames technisches Verständnis entwickelt. Prototypen können hingegen mit mehr Detailarbeit gebaut werden, da sie mehrmals mit unterschiedlichen Zielgruppen getestet werden können.
Es gibt verschiedene Arten von Prototypen. Der einfachste Prototyp ist ein Papier-Prototyp, der mit ein wenig Geschick, einfache Interaktionen wie Schieben oder Aufziehen suggerieren kann. Entscheidet sich das Team für einen digitalen Prototypen, in Form von einem Click-Dummy, dann können dafür Grafikprogramme wie Invision Studio, Figma oder Sketch frühzeitig zum Einsatz kommen. Hat das Team bereits eine genauere Vorstellung von den einzelnen Komponenten und deren Gestaltung, dann können User Interface Symbole verwendet werden, die erste Entwurfsarbeiten ermöglichen.
Interaktionen können dann in Form von Verlinkungen zwischen einzelnen Screens und den User Interface Elementen wie Eingabefelder oder Buttons angelegt werden. Die Funktionen stehen beim Prototyping immer an vorderster Stelle und die Gestaltung folgt entweder einem bereits entwickelten Corporate Design oder entwickelt sich in iterativen Schritten. In dem Design Ratgeber The Human Interface beschreibt Jef Raskin, was menschengerechte Interfaces sind:
An interface is humane if it is responsive to human needs and considerate of human frailties. If you want to create a human interface, you must have an understanding of the relevant information on how both humans and machines operate. In addition, you must cultivate in yourself a sensitivity to the difficulties that people experience. Jef Raskin – The Humane Interface
Branded Interaction Design
Der Automobilhersteller Audi hat für seine Designer und Entwickler einen ausführlichen digitalen Styleguide veröffentlicht, der dafür sorgt, dass verschiedene Teams in der Lage sind eine konsistente Sprache zu entwickeln, die die Marke Audi erkennen lässt. Konsistenz spielt bei der Gestaltung von Interfaces eine sehr entscheidende Rolle, denn kommen verschiedene Stilrichtungen zum Einsatz, wie abgerundete Ecken und kantige Ecken bei Buttons oder Farben, die sich nicht wiederholt wiederfinden lassen, dann wird es Nutzern schwer fallen, sich vertraut in einer Anwendung zurecht zu finden und Aktionen zielführend auszuführen. Die Verteilung von Interface Elementen, sowie von Text und Bild ist ebenfalls entscheidend für den Gesamtaufbau und Wiedererkennung von digitalen Anwendungen.
Component Libraries werden standardmäßig von den meisten Interface Frameworks wie Angular JS oder React JS mitgeliefert, sie sind sich sehr ähnlich im Aufbau und vom Informationsgehalt. Diese Bibliotheken unterstützen Entwickler dabei Anwendungenszenarien zusammen mit dem geeigneten Interface umzusetzen, sodass nicht alle Anforderungen grundlegend neu entwickelt werden müssen. Zudem berücksichtigen die Komponenten das responsive Verhalten auf verschiedenen Ausgabemedien, indem sie sich an der Spaltigkeit des Layouts orientieren.
Die Konsistenz der Interface Elemente ist mit Component Libraries von vornherein gegeben, jedoch müssen Interfaces mit der Zeit erweitert werden. Neue Funktionen benötigen neue Anwendungsmuster. An dieser Stelle kann es helfen mit einem Design System zu arbeiten, das dafür sorgt, dass zum einen ein Überblick an bereits entwickelten Interface Elementen vorhanden ist und zum anderen dafür sorgt, dass diese in ihrem Aussehen voneinander abgeleitet sind und dem Nutzer eine visuelle Zusammengehörigkeit vermitteln. Interaktive Animationen können mit Hilfe von einem Design System ebenfalls kommuniziert, gepflegt und erweitert werden.
Grafikprogramme wie Adobe XD, Figma oder Sketch ermöglichen es den Projektteams und Designern die Angaben für die Komponenten in einer Bibliothek aus Symbolen abzuspeichern. Die Arbeit mit Symbolen erleichtert Designern Anpassungen an den Mockups. Der Designer muss nicht jede Komponente in den Entwürfen zeitaufwändig einzeln abändern. Soll eine Anpassung global vorgenommen werden, dann passiert das auf der Masterebene.
Orientierungshilfen im Interface
Die Informationsarchitektur wird in der Entwicklung der User Experience festgelegt. Navigationspunkte und Unterbereiche werden hierarchisch und leicht auffindbar geplant. Gestalterisch gibt es im Zusammenhang mit der Navigation ein paar Regeln zu beachten. Handelt es sich um eine horizontale Navigation, dann sollten nicht zu viele Hauptmenüpunkte angeboten werden. Per Hover und On-Click lassen sich Untermenüpunkte übersichtlich auflisten. Dabei muss das responsive Verhalten auf mobilen Endgeräten mitgeplant werden. Vertikale Navigationssysteme lassen sich am besten nach dem Mobile First Prinzip entwickeln, was auf schmalen Bildschirmformaten funktioniert, wird auch auf dem Desktop funktionieren. Was soll passieren, wenn der Nutzer auf eine Unterkategorie klickt?
Zum Interface gehören ebenfalls kurze Nachrichten oder Meldungen, die den Nutzer darüber informieren, was im Moment vorsich geht und weshalb eine Anwendung eventuell nicht ausgeführt werden konnte. Diese Nachrichten können dezent angezeigt werden oder den Nutzer aus einer Anwendung heraus Hilfestellung geben. Beliebt sind ebenfalls kurze Einführungen in ein System, das sogenannte User Onboarding, das optional aufgerufen werden kann. Der Nutzer sollte jederzeit die Möglichkeit haben eine Anwendung ohne Verluste zu unterbrechen.
Weißraum im Interface unterstützt den Nutzer dabei, wesentliche Elemente konzentriert wahrzunehmen. Ein Gleichgewicht zwischen freien Flächen und Inhalten vermittelt dem Besucher ein ruhiges Bild. Ist ein Interface zu überladen, dann ist es zunehmend fehleranfällig. Werden zum Beispiel Buttons zu dicht nebeneinander oder untereinander platziert, dann kann es passieren, dass versehentlich falsche Prozesse ausgelöst werden. Genügend Abstand und auch die Größe der Elemente helfen dabei Anwendungen angenehm in ihrer Benutzung zu gestalten.
Zusammenfassung
User Experience und User Interface werden zusammen entwickelt. In beiden Bereichen gibt es jeweilige Gesetzmäßigkeiten, die miteinander im Einklang sein müssen. Wireframes und Prototypen helfen dabei vor allem am Anfang allen Beteiligten ein gemeinsames Verständnis von den geplanten Interaktionen zu vermitteln. Die Ausarbeitung beginnt in den Mockups, die visuelle Informationen enthalten und das interaktive Markenbild konsistent kommunizieren. Eine Anwendung wird leicht bedienbar, wenn die visuellen Orientierungshilfen wie eine klare Navigation oder dezente Hinweise, die den Nutzer durch das Interface leiten.