Unseren Designer:innen begegnet häufig das Vorurteil, Design sei das „schön machen“ oder nur das Aussehen der Software Oberfläche. Dass wesentliche Aspekte des UX-Designprozesses jedoch der visuellen Ausgestaltung vorausgehen, wollen wir in diesem Artikel zeigen.
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.
Die Informationsarchitektur ist die Grundlage der Interaktionsgestaltung. Bevor man eine Informationsarchitektur konzipieren kann, müssen alle relevanten Informationen erfasst werden:
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.
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.
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.
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.
Die Informationsarchitektur schafft Übersicht und Struktur, um Komplexität zu reduzieren. Sie erfasst alle relevanten Informationen und ordnet sie in einer strukturierten Form, um das Navigationskonzept der Anwendung zu gestalten.
Task Flows und User Flows helfen dabei, aus den Anforderungen der User Story Interaktionen abzuleiten und die User Experience zu optimieren.
Der letzte Schritt ist das Testen des Clickdummys, um zu überprüfen, ob die Interaktion Sinn macht und iterative Anpassungen vorzunehmen. Andere Personen sollten dazu eingeladen werden, um mit einem unvoreingenommenen Blick konstruktives Feedback zu geben.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Vitae congue eu consequat ac felis placerat vestibulum lectus mauris ultrices. Cursus sit amet dictum sit amet justo donec enim diam porttitor lacus luctus accumsan tortor posuere.
Auf diese Aspekte sind wir in unserem Design-Workflow bei den PROJEKTIONISTEN® besonders stolz:
EntdeckenEntdeckenMit dem Update von südtirolmobil wurde ein neues, digital optimiertes Design System eingeführt. Weshalb es sich immer lohnt, ein printorientiertes Corporate Design für die digitale Anwendung anzupassen, erklären wir in dieser Story.
EntdeckenEntdecken