Ziel: Definition eines Designkonzepts um Interaktionsmuster, Benutzerpfade und Schnittstellen aufeinander abzustimmen.

 

In dieser Phase unseres Designprozesses verwenden wir eine Vielzahl von Methoden, um ein Konzept zu definieren, das die gesamten Designelemente prägt: Interaktionen, die Beziehung zwischen den Elementen, Tonfall und Text, Übergänge, Animationen usw. Im Grunde alles, was notwendig ist, um die Produktvision mit der Realität in Einklang zu bringen. So gehen wir vor:

  • Informationsarchitektur
  • Benutzerfluss
  • Low-fi Wireframes
  • Hi-fi Wireframes
  • Interaktiver Prototyp
  • Benutzertests

Informationsarchitektur

Wir nehmen alle gesammelten Daten aus der Forschungsphase um eine Informationsarchitektur fĂĽr das Produkt zu erstellen. Wie der Name schon sagt, geht es bei der Informationsarchitektur darum, Informationen auf klare und logische Weise zu organisieren.

In der Regel stellen wir die Informationsarchitektur mit Hilfe einer Mind Map dar, die das System aus der Vogelperspektive zeigt und die Beziehungen zwischen den einzelnen Teilen verdeutlicht, um den Benutzern die Navigation in komplexen Informationsmengen zu erleichtern. Unserer Erfahrung nach ist dieser Mind-Mapping-Prozess besonders effektiv, wenn er in Zusammenarbeit mit den Beteiligten durchgefĂĽhrt wird.

Informationsarchitektur@2X

Durch die Visualisierung der gesamten Projektstruktur ist es einfacher, den Umfang des Projekts zu verstehen und Prioritäten für die Funktionen festzulegen. Damit soll sichergestellt werden, dass die Nutzer das Produkt benutzerfreundlicher und intuitiver finden.


User Flow (Benutzerfluss)

User Flows sind eine Visualisierung der Schritte, die ein Benutzer unternehmen muss, um eine bestimmte Aufgabe zu erledigen. Das Ziel von User Flows ist es, Seiten, Logik und Aktionen abzubilden, die nötig sind um das Ziel zu erreichen. Gleichzeitig erhalten die Entwickler eine Beschreibung aller möglichen Benutzerabläufe, alternativen Auslöser und Fehler.

Wir stellen den Beteiligten ein Benutzerflussdokument zur Verfügung, das in einem Design-Spezifikationsformat erstellt wurde, das Bildschirmlayout-Entwürfe mit Flussdiagrammähnlichen Darstellungen von Benutzerinteraktionen innerhalb des Systems zusammenführt.

User Flow@2X

Im Laufe des Projekts aktualisieren wir dieses Dokument immer wieder, wenn der Entwurf fortschreitet. Auf diese Weise können wir die Benutzerabläufe effizienter gestalten und etwaige Probleme frühzeitig im Designprozess erkennen.


Low-Fidelity Wireframes

Low-Fidelity Wireframes sind die grundlegendsten visuellen Darstellungen des Design-Layouts und der Funktionen des Produkts. Sie sind in der Regel statisch und dienen dazu, das Grundgerüst der Benutzeroberfläche, der Bildschirme, des Benutzerflusses und der Informationsarchitektur darzustellen.

Lofi Wireframes@2X

Mit Hilfe von Low-Fi-Wireframes können wir den Beteiligten visuelle Ideen vermitteln, sodass das Designkonzept leichter zu verstehen ist und wir schnell auf das Feedback der Beteiligten und Nutzer reagieren können. So können wir Änderungen vornehmen, bevor die weitere Gestaltung und Entwicklung erfolgt.


High-Fidelity Wireframes

High Fidelity Wireframes sind wesentlich realistischere Darstellungen des endgĂĽltigen Designs als Low-Fidelity Wireframes. Sie werden in den fortgeschrittenen Phasen des UX-Designprozesses erstellt und sind in der Regel interaktiv, um eine authentische Schnittstelleninteraktion nachzuahmen.

Hifi Wireframes@2X

In dieser Phase werden letzte Iterationen vorgenommen, wobei der Schwerpunkt auf der Verfeinerung von Layout, Grafiken und Abständen liegt. Unserer Erfahrung nach sind High-Fidelity Wireframes nützlich, um eine genauere Vorstellung davon zu bekommen, wie das Endprodukt aussehen und sich anfühlen wird, bevor es fertiggestellt wird.


Interaktiver Prototyp

Um unseren Stakeholdern eine noch realistischere Visualisierung des entstehenden Produkts zu geben, erstellen wir im Rahmen des Wireframing- und Designprozesses interaktive Prototypen. Dabei setzen wir verschiedene Tools ein, je nachdem ob wir einfachere oder komplexere Funktionalitäten testen wollen.

Ein interaktiver Prototyp ist fĂĽr den gesamten Designprozess in vielerlei Hinsicht von Vorteil:

  • Erweckt das Design zum Leben
  • Generiert Feedback aus dem richtigen Kontext
  • VerkĂĽrzt die gesamte Entwicklungszeit
  • Dient als Referenzwerkzeug fĂĽr Entwickler
  • Bestätigt die gemeinsame Vision von Benutzern und Interessengruppen
  • Validiert Annahmen und testet Hypothesen

User Testing Report

Wir halten es fĂĽr konstruktiv, von Zeit zu Zeit einen Schritt zurĂĽckzutreten und unsere Annahmen und Designentscheidungen zu ĂĽberprĂĽfen, indem wir eine Reihe von Benutzertests mit einem interaktiven Prototyp durchfĂĽhren.

Nach Abschluss der Benutzertests erstellen wir einen Benutzertestbericht, der eine Zusammenfassung unserer Ergebnisse sowie Vorschläge zur Verbesserung des Designs enthält. Dieses Dokument gibt Aufschluss über die Erwartungen der Benutzer und ist wichtig für die Bewertung des Erfolgs eines Produkts.

Der Benutzertestbericht liefert auch den Kontext fĂĽr den Test, da er die Testziele, den Testaufbau und die Benutzerdemografie beschreibt.

Design Methoden

Phase 5
Visuelles- und UI-Design

Cookies

Wir verwenden Cookies zur Bereitstellung von Webseiten-Funktionen und zu Analysezwecken.Mehr Informationen