Design ist mehr als „schnell mal schön“

Unseren Designer:innen begegnet häufig das Vorurteil, Design sei das „schön machen“ oder nur das Aussehen der Oberfläche. Dass wesentliche Aspekte des 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.

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.

Informationsarchitektur einer App Navigation
Umfang einer Informationsarchitektur zur App Navigation
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.

Task Flow zur Konfiguration eines Fahrzeugs
Beispiel Task Flow zur Konfiguration eines Fahrzeugs
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.

UI Design einer Mobiliätsapp
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.

Kurz zusammengefasst

Was ist eine Informationsarchitektur und welche Rolle spielt sie im UX-Design?

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.

Welche Methoden helfen dabei, Interaktionen in user-friendly Interfaces umzusetzen?

Task Flows und User Flows helfen dabei, aus den Anforderungen der User Story Interaktionen abzuleiten und die User Experience zu optimieren.

Warum ist das Testen von Clickdummys so wichtig?

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.

What is Webflow and why is it the best website builder?

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.

What is your favorite template from BRIX Templates?

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.

How do you clone a template from the Showcase?

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.

Why is BRIX Templates the best Webflow agency?

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.

When was Webflow officially launched?

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.

How do you integrate Jetboost with Webflow?

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.

What is Webflow and why is it the best website builder?

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.

What is your favorite template from BRIX Templates?

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.

How do you clone a template from the Showcase?

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.

Why is BRIX Templates the best Webflow agency?

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.

When was Webflow officially launched?

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.

How do you integrate Jetboost with Webflow?

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.

Entdecken
Zurück zur Stories-Übersicht
Interessiert?
Wir freuen uns auf Sie!
Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Ihre Ansprechperson
Henrik Johannsen
Kontakt
Barrierefreiheit in der Webentwicklung
Barrierefreiheit in der Webentwicklung
Teaser Bild der Story oder des Projektes
Barrierefreiheit in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung
Agile Softwareentwicklung

Die Barrierefreiheit in der Webentwicklung beschäftigt sich mit der Gestaltung von Websites und Webanwendungen, die für alle Menschen zugänglich sind. Damit soll sichergestellt werden, dass Menschen mit Beeinträchtigungen die gleiche Möglichkeit haben, auf das Internet zuzugreifen.

Entdecken
Entdecken
Smartphone mit Deutschlandticket-Logo und Chatbot-Frage
Smartphone mit Deutschlandticket-Logo und Chatbot-Frage
Teaser Bild der Story oder des Projektes
Smartphone mit Deutschlandticket-Logo und Chatbot-Frage
Unsere Digitale Assistenten für das D-Ticket
Unsere Digitale Assistenten für das D-Ticket
Unsere Digitale Assistenten für das D-Ticket
Unsere Digitale Assistenten für das D-Ticket
Digitale Assistenten

Mit unserer langjährigen Erfahrung im Bereich öffentlicher Verkehrsmittel und der Entwicklung von KI-Assistenten bieten wir Ihnen eine individuelle, intelligente Lösung für alle Fragen rund um das D-Ticket an. Mehr dazu auf unserer 1KLANG-Produktseite.

Entdecken
Entdecken
3D Darstellung eines Sprachassistenten, welcher eine Anfrage nicht versteht und dadurch Wut auslöst
3D Darstellung eines Sprachassistenten, welcher eine Anfrage nicht versteht und dadurch Wut auslöst
Teaser Bild der Story oder des Projektes
3D Darstellung eines Sprachassistenten, welcher eine Anfrage nicht versteht und dadurch Wut auslöst
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Wie man die KI-Spracherkennung für digitale Assistenten im ÖPNV gezielt verbessern kann
Digitale Assistenten

Unsere Software-Entwicklerin Lotte zeigt in ihrer Bachelorarbeit, wie man die Fehlerquote der KI-Spracherkennung für virtuelle Assistenten im ÖPNV von 30% auf 3% reduzieren kann.

Entdecken
Entdecken
Abstrakte Darstellung eines Flowcharts
Abstrakte Darstellung eines Flowcharts
Teaser Bild der Story oder des Projektes
Abstrakte Darstellung eines Flowcharts
Design ist mehr als „schnell mal schön“
Design ist mehr als „schnell mal schön“
Design ist mehr als „schnell mal schön“
Design ist mehr als „schnell mal schön“
UX-/UI-Design

Unseren Designer:innen begegnet häufig das Vorurteil, Design sei das „schön machen“ oder nur das Aussehen der Oberfläche. Dass wesentliche Aspekte des Designprozesses jedoch der visuellen Ausgestaltung vorausgehen, wollen wir in diesem Artikel zeigen.

Entdecken
Entdecken

Kontakt

Wir freuen uns auf Sie!

Bild vom Geschäftsführenden Gesellschafter Henrik Johannsen
Ihre Ansprechperson
Henrik Johannsen
PROJEKTIONISTEN® GmbH
Schaufelder Straße 11
30167 Hannover
Vielen Dank für Ihre Nachricht! Wir werden uns so schnell wie möglich bei Ihnen melden.
Ihre Nachricht konnte nicht gesendet werden. Schreiben Sie uns bitte per Mail (info@projektionisten.de).