Unser prozess
Wireframe
UX Wireframe, ein UX Mockup ist kein Mockup eines digitalen Produkts. Es handelt sich auch nicht um einen Prototyp.
Ein Wireframe ist ein Skelett einer Website, Webanwendung oder mobilen Anwendung, ihre vereinfachte, konzeptionelle Version.
Im Gegensatz zu einem Mockup (visuelles Mockup) enthält ein Wireframe nur die grundlegendsten, entscheidenden Elemente:
- Wichtige Funktionalitäten
- Methoden der Navigation
- Arten von Menüs
- Informationsarchitektur.
Ein Mockup dient dazu, eine grafische Ebene zu visualisieren, während ein Prototyp es Ihnen ermöglicht, ein Produkt zu testen und sich mit seiner Funktionsweise vertraut zu machen.
Im Folgenden werden die Unterschiede zwischen Wireframes, Mockups und Prototypen näher erläutert.
Möchten Sie ein Wireframe erstellen?
Low-fidelity Wireframe vs. High-fidelity Wireframe
Low-fidelity Wireframe wird in Graustufen erstellt, normalerweise auf einem weißen Blatt Papier. Die Zeichnungen werden mit geometrischen Grundfiguren wie Rechtecken, Quadraten, Kreisen und Platzhaltersymbolen erstellt.
Das Wireframe ist frei von Farben, Symbolen, Fotos und Text (selbst in Form von Standard "lorem ipsum"). Eine hohe Designtreue und -genauigkeit ist weder wünschenswert noch ratsam.
Beim Wireframing wird ein allgemeines Layout von Elementen (Text, Grafiken, Video, Menüs, Schaltflächen) erstellt.
Indem wir uns auf die allgemeinsten Elemente beschränken, konzentrieren wir uns auf die Struktur, die Funktionalitäten und die Arbeitsweise. Wir denken an die optimale Nutzung des Raums, nicht an die Ästhetik, die zwar wichtig ist, aber nicht die Benutzerfreundlichkeit und das Benutzererlebnis bestimmt.
Mit Wireframe können Sie auch die Pfade vorhersagen und planen, die die Benutzer benutzen werden. Und was am wichtigsten ist: Selbst in diesem frühen Stadium der Arbeit haben wir die Möglichkeit, die Erfahrung und die Benutzerfreundlichkeit zu verbessern.
Ein High-Fidelity Wireframe ist viel komplexer, detaillierter, raffinierter und ähnelt dem Aussehen des Endprodukts. Realistische Farbschemata, Text und bestimmte Abstandsverhältnisse zwischen den Elementen ermöglichen auch eine Bewertung der ästhetischen Ebene.
Seine Relevanz für den Inhalt einer Website, eines Produkts oder einer Branche. Auch seine Komplementarität mit dem Designsystem (falls die Organisation eines hat).
Während Low-Fidelity Modelle in einem frühen Stadium der Arbeit erstellt werden, werden High-Fidelity Modelle in einem sehr fortgeschrittenen Stadium vor der Codierung präsentiert.
Mit ihrer Hilfe ist es möglich, Benutzertests durchzuführen und viel wertvolleres Feedback zu sammeln.
Wireframing - Vorbereitungsphase
Auch wenn die Wireframes den Eindruck erwecken, dass sie "spontan" erstellt werden, muss ihrer Erstellung eine Analyse des Auftrags und der Erwartungen vorausgehen.
Umfassende funktionale Richtlinien für die Informationsarchitektur, den Schnittstellentyp und den Navigationspfad ermöglichen es Ihnen, einzelne Elemente zu bewerten.
Bestimmen Sie ihre Rolle, Funktion und Bedeutung in der Struktur der gesamten Website oder Webanwendung.
Wenn Sie planen, wie sie funktionieren und wo sie sich befinden (z. B. Homepage, Unterseiten), können Sie auch die Design- und Programmierarbeit erheblich beschleunigen und rationalisieren.
Wireframes - Informationsarchitektur
Der größte Vorteil von Wireframes ist ihre Fähigkeit, die Informationsarchitektur zu verbessern, deren Bedeutung mit der Größe und Komplexität des Projekts zunimmt.
Der Entwurf einer Informationsarchitektur ist zeitaufwändig. Fehler, die in der Konzeptionsphase gemacht werden, verursachen oft hohe Kosten (für ihre Behebung) in späteren Phasen der Arbeit, weshalb es so wichtig ist, sie zu vermeiden.
Bei der Planung der Informationsarchitektur muss sorgfältig überlegt werden, wie die Inhalte so präsentiert werden, dass ihre Inhalte und ihre Platzierung der Zugänglichkeit und Eindeutigkeit am besten dienen.
Mit dem Wireframe können Sie auch machbare Aktionen entwerfen und den Grad der Klarheit der digitalen Produktstruktur beurteilen.
Mit dieser Methode können wir mögliche Wege und Navigationsmöglichkeiten ermitteln. Wenn man die Schnittstelle (Options- und Auswahlschaltflächen, Menütypen usw.) im Wireframe betrachtet, kann man sich schon zu Beginn der Entwicklung Gedanken über die Benutzerfreundlichkeit der Website machen.
Was sind die Vorteile von UX Wireframe?
Die Erstellung von Wireframes ermöglicht Ihnen eine Einschätzung und Planung:
- Zeitpunkt der Projektdurchführung
- Kosten
- Iterationen (zyklisch wiederholte Überarbeitungen des Projekts).
Wireframe, Prototyp und UX Mockups einer Website oder Anwendung sollten als wesentlicher Bestandteil der Dokumentation und Organisation der Arbeit betrachtet werden.
Der weit verbreitete Einsatz von Wireframes (unabhängig von der Projektgröße) ist auf ihre vielen Vorteile zurückzuführen.
Mit diesem einfachen Tool können Sie:
- Ideen, Varianten, Versionen dokumentieren
- Struktur visualisieren
- Usability Test
- Feedback sammeln - Kunden-, Projektteam- und Benutzerfeedback
- Testen wichtiger Entwurfsannahmen (geschäftlich und funktional)
- Informationen über Abstände, Funktionen und Werkzeuge organisieren
- Wählen Sie den besten Weg, um verschiedene Arten von Informationen zu präsentieren
- Konstruktionsfehler erkennen
- Test und Vergleich von Lösungen, die typisch sind, Standardlösungen und solche, die von den Gewohnheiten und Erwartungen der Benutzer abweichen
- Wege und Strömungen simulieren
- Konzepte, Ideen und Lösungen (intern und extern) kommunizieren.
Wie macht man ein Mockup? UX Wireframe Design
Der Erstellung eines Wireframe Modells für ein digitales Produkt sollte ein Verständnis für die geschäftlichen Anforderungen des Kunden und die Bedürfnisse der Zielnutzer vorausgehen.
Die zukünftige Website oder Anwendung sollte ein Produkt aus diesen beiden Erwartungen sein.
Dank der vereinfachten Form und der Konzentration auf die "Mechanik" des Werkzeugs können wir sehen, wie schnell und effektiv der Kunde und Benutzer seine Ziele erreichen kann.
Wir können das Potenzial des Produkts in seiner offensichtlichsten und wichtigsten Schicht erkennen - der Usability.
Die Produktskizzen sollten so einfach wie möglich und gleichzeitig so kommunikativ wie möglich sein. Ihre visuelle Ausschmückung ist unnötig, sollte aber nicht auf Kosten der Lesbarkeit der Zeichnung gehen. Ein Wireframe (Website Mockup) vermittelt allgemeine Ideen, keine Details.
Wenn die Konzepte nicht sofort und auf offensichtliche Weise verstanden werden, bedeutet dies in der Regel, dass sie auf einem Blatt Papier schlecht dargestellt wurden.
Fürs Protokoll: Konzepte (z. B. ein Website Mockup) können gut oder schlecht sein, aber sie dürfen nicht unverständlich sein.
Zumal die einfache und schnelle Erstellung eines Wireframes die Möglichkeit bietet, Ideen zu multiplizieren und verschiedene Lösungen mit den Erwartungen der Beteiligten zu konfrontieren.