UX- und UI-Design
User Experience Design und User Interface Design sind zwei der bedeutendsten Faktoren beim Erfolg eines digitalen Produktes. Nicht umsonst ist Apple eine der erfolgreichsten Marken der Welt, welche einen starken Fokus auf die User Experience und das Interface- bzw. Anwendungsdesign setzt. Durch die simpel aufgebaute Logik und die klare Struktur eines Apple-Produkts kann jeder User mühelos sein iPhone einrichten und bedienen. So verbinden sich zum Beispiel die AirPods direkt beim Öffnen der Case-Klappe automatisch mit dem Handy, während bei Konkurrenz-Produkten erst einmal durch das Menü navigiert werden muss, bis eine Verbindung der Kopfhörer erfolgt. Genau diese Kleinigkeiten machen den großen Unterschied aus in der Erfahrung, die der Nutzer im Zusammenhang mit dem Produkt erlebt.
Vorab kurz zur Grunddefinition der zwei Bereiche, da diese oftmals miteinander vermischt werden. Während sich die User Experience mehr auf das „Look and Feel“ des Produkts und das Erlebnis dessen bezieht, beschreibt das User Interface Design die generelle Anwendungs- und Aufbaulogik.
User Experience Design
Die User Experience bildet die Schnittstelle zwischen dem Menschen und dem Computer bzw. der Website oder dem Produkt. Die Erfahrung und die Abfolge auf der Website sollten daher so eindeutig wie möglich sein, damit der User einen klar definierten Weg hat und stets im Bilde ist, was er gerade zu tun hat. Der Besucher sucht sich immer den einfachsten Weg zum Erreichen des Ziels, sei es auf einer Website oder im realen Leben. Sobald er demnach beim Prozess nicht versteht, was er machen muss oder dieser zu kompliziert erscheint, wird der User entweder eine Abkürzung nehmen oder den Prozess verlassen. Aufgrund dessen sollte der Ablauf so simpel wie möglich und mit wenig bis keinen Hürden gestaltet sein. Dieses Bild beschreibt die User Experience perfekt: Der Architekt hat sich einen schönen Weg inklusive Hürde ausgedacht – und alle laufen daran vorbei.
Bild Quelle: tumblr Dirks Blog
User Interface Design
Das User Interface ist der Umkehrschluss der User Experience. Hier geht es um die Definition, welche Optionen dem Nutzer gegeben werden müssen, damit er das Ziel möglichst ohne Nachdenken erreichen kann. Um folglich ein gutes und klares Interface Design zu generieren, sollte dieses in einer reduzierten Form dargestellt werden und im Idealfall auf bekannte Elemente setzen. So ist z. B. der klassische Papierkorb am Computer ein perfektes Interface Design-Element. Er übersetzt die reale Welt 1 zu 1 in die digitale Welt, sodass jeder User direkt versteht, was er mit dem Papierkorb machen kann: nämlich Daten „wegwerfen“ bzw. „löschen“ – wie in der analogen Welt. In den nachfolgenden Bildern sehen Sie Beispiele eines schlechten Interface Designs. So wurden beispielsweise im Lift eines Hotels nachträglich Tasten mit Blindenschrift erweitert, ohne dass hierfür ursprünglich Platz eingeplant wurde. Dadurch muss jeder Hotel-Gast nun intensiv hinsehen, bis er die richtige Taste findet.
Bild Quelle: Facebook / The Interaction Design Foundation
Grundlegende Design-Richtlinien
Beide Design-Bereiche zusammen bedingen somit die Erfahrung und Qualität, welche der Nutzer beim Besuch der Website erlebt und letztendlich direkt in Verbindung mit dem Unternehmen bringt. Um hierbei etwaige Diskrepanzen zu vermeiden, gibt es folgende acht grundlegende Design-Richtlinien, welche beim Erstellen oder Überarbeiten einer Website beachtet werden sollten.
Re-Use
Verwenden Sie Text- und Element-Konventionen, die der Nutzer bereits kennt und dadurch die Funktionsweise logisch beschreiben. Hierdurch sparen Sie sich Erklärungen innerhalb des Prozesses. So ist zum Beispiel jedem User bekannt, welche Funktion hinter dem Button „Senden“ steckt, wenn dieser bei einem Formular platziert wird.
Aktives Feedback
Informieren Sie den User stets darüber, was aktuell passiert und was als Nächstes folgt. Hierdurch ist er immer im Bilde und verliert nicht den Überblick. Das ist besonders wichtig für Prozesse, die etwas Zeit benötigen, wie beispielsweise der Upload eines Dokuments auf eine Website. Hier sollte zwischenzeitlich eine Ladeanimation angezeigt werden.
Support Undo & Redo
Sollte sich der User verklicken ist es unerlässlich, dass er immer die Möglichkeit hat, schnell den Prozess verlassen zu können bzw. zu dem Ort zurückzukehren, an dem er vorher war. Ein nachträglicher Wiedereinstieg hat ebenfalls gut zu funktionieren und der Besucher sollte seinen Prozess jederzeit ohne große Mühe wieder aufnehmen können.
Simples Wording
Wenn die Website auf bekannte Begriffe für Interaktionen setzt, weiß der User ohne viel nachdenken zu müssen, was er mit der jeweiligen Option erreichen kann. Zum Beispiel sind Bezeichnungen wie „Kopieren“ oder „Speichern“ gängige Beschreibungen, die jeder kennt. Sie müssen somit nie erklärt werden bzw. der User muss nicht erst herausfinden, was hinter diesen Funktionen steckt.
Geringe Fehlerquote
Gerade beim ersten Besuch einer Website sollten möglichst keine Fehler eingebaut sein, um den potenziellen Kunden zu überzeugen. Daher ist es wichtig, den Prozess so zu definieren, dass jegliche Fehlermeldungen vermieden werden. Dies kann meist mit simplen Definitionen erzielt werden, wie z. B. mit dem Markieren der erforderlichen Felder als „Pflichtfelder“.
Newbies und Pros
Wir unterscheiden verschiedene User-Gruppen, denn es gibt in jedem Bereich Einsteiger und Fortgeschrittene. Der fortgeschrittene User möchte im Normalfall nicht den Weg des Neueinsteigers nehmen, da er das System bereits kennt. Stellen wir wieder den Vergleich zum Computer her, so ist hier ein Tastenkürzel das ideale Beispiel dafür. Ein neuer Besucher kann eine Datei mittels Rechtsklick kopieren und anschließend einfügen, ein fortgeschrittener User hingegen kann direkt mittels Tastaturkürzel die Datei kopieren und einfügen.
Minimal Design
Der Aufbau sollte klar und verständlich definiert werden, damit sich jeder zurechtfinden kann, ohne erst aktiv viel über den Aufbau nachdenken zu müssen. Die Interaktionsflächen bleiben dabei kompakt und reduziert, um eine ideale Abfolge zu definieren. Wir gehen vom Minimal-Ansatz aus gemäß der Fragestellung „Was ist das Mindestset, das der User zur Erfüllung seiner Ziele braucht?“ Nachdem die Mindestanforderungen definiert sind, können weitere Elemente zur Gestaltung hinzugezogen werden – diese sollten jedoch eine deutlich geringere Präsenz haben.
To-dos definieren
Die zu erledigenden Punkte müssen klar und verständlich angezeigt werden, um das Ziel zu erreichen. Damit der User den Prozess erfüllen kann, sollte er so hindurchgeführt werden, dass keine Unklarheiten auftreten. Als simples Beispiel eignet sich hier besonders der Check-out. In diesem wird dem User stets der nächste Schritt angezeigt, sodass er sich nie die Frage stellen muss, was jetzt zu tun ist.
