Design ist mehr als „schnell mal schön“

Design fängt bei der Sammlung und Strukturierung von Informationen an, macht sie zugänglich in organisierten Informationsarchitekturen und bildet Interaktionsmodelle in intuitiv bedienbaren Benutzeroberflächen ab, die abschließend getestet werden. Am Beispiel einer Fahrzeug-Konfiguration in unserem Forschungsprojekt d-E-mand zeigen wir, mit welchen Methoden ein User Interface schrittweise entsteht.

1. Die Informationsarchitektur

Die Informationsarchitektur ist die Grundlage der Interaktionsgestaltung. Bevor man eine Informationsarchitektur konzipieren kann, müssen alle relevanten Informationen erfasst werden:

• Welche Informationen soll die App zur Verfügung stellen? (z. B. für angebotene Auswahlmöglichkeiten)
• Welche Informationen stellt das jeweilige System zur Verfügung? (z. B. GPS-Daten des Smartphones oder Informationen durch Bluetooth-Verbindungen)
• Welche individuellen Informationen benötigen wir von Nutzenden? (z. B. Modell des Fahrzeugs)

Die Datengrundlage wird in enger Abstimmung mit dem Entwicklungs-Team erarbeitet, um das UX-Konzept mit dem technischen Konzept abzustimmen. Sobald alle relevanten Informationen evaluiert wurden, können sie in einer Informationsarchitektur geordnet werden. Ziel ist es, Übersicht und Struktur zu schaffen, um Komplexität zu reduzieren. Informationsarchitekturen helfen z. B., um das Navigationskonzept der Anwendung oder einzelner User Stories zu gestalten.

2. Informationen in Interaktion übersetzen

Im nächsten Schritt werden aus den Anforderungen der User Story Interaktionen abgeleitet. Dabei steht die User Experience im Fokus: Wie werden Nutzende möglichst einfach und verständlich durch die Interaktion geführt? Um diese Frage zu klären, helfen die UX Design Methoden Task Flows und User Flows. Während Task Flows eher reduzierte Flussdiagramme sind, die nur nötigen Schritte erfassen, um eine Interaktion erfolgreich auszuführen, zeigen User Flows alle Möglichkeiten auf, die Nutzende in den einzelnen Screens wählen können. Der User Flow zeigt, ob die geplante Interaktionskette funktioniert und Nutzende beim gewünschten Ziel enden oder ob sich ungewollte Sackgassen ergeben.

3. Ausgestaltung des User Interface Designs

Erst jetzt startet die Übersetzung der Informationen und Interaktionen in visuelle Interfaces. Zunächst muss geklärt werden, wie die Interaktionen in Screens aufgeteilt werden und wie viele konkrete Screens benötigt werden. Nutzende sollen sich weder durch zu viele Screens klicken müssen, noch sollen sie von überladenen Inhalten erschlagen werden. Hier gilt es eine ausgeglichene Lösung zu finden, um ein optimales Nutzungserlebnis zu schaffen: je unkomplizierter, übersichtlicher und intuitiver, desto besser.

Bei der Ausarbeitung der Screens muss entschieden werden, welche Komponente an welcher Position benötigt wird, um die Interaktionen verständlich zu visualisieren. Falls es ein Design System wie im Beispiel von d-E-mand gibt, können die Screens relativ einfach aus vorhandenen UI Komponenten zusammengebaut werden. UI Komponenten können z. B. Eingabefelder, Slider oder Buttons sein. Hier gilt abzuwägen, ob vorhandene User Interface Komponenten die gewünschte Interaktion gut abbilden können oder ob es notwendig, ist eine neue, eventuell passendere Komponente für die Anforderung zu entwickeln.

4. Testen des Click Dummys

Der letzte wichtige Schritt ist die Überprüfung, ob der Ablauf funktioniert und die Interaktion Sinn macht. Dafür macht es immer Sinn, andere Personen testen zu lassen, da diese einen unvoreingenommenen Blick auf die Anforderung haben. Ergeben sich im Test Schwachstellen, können diese iterativ angepasst werden, bis alles final funktioniert.

Das Beispiel zeigt, dass selbst in scheinbar simplen Nutzerinteraktion wie der Konfiguration eines Fahrzeugs eine ganze Menge Denk- und Tüftelarbeit steckt, die bestenfalls im interdisziplinären Team bewerkstelligt wird. Design ist eben nicht nur Aussehen, sondern zu einem großen Teil methodisches, funktionsorientiertes Konzipieren.