Wireframes im UX Prozess
Die 4 W´s (WAS, WANN, WARUM & WIE) über Wireframes im UX Prozess.
Wir helfen Ihnen den Mehrwert von Wireframes zu verstehen.
Wer die Konzeption einer Website oder Softwaresystem schon einmal begleitet hat, dem wird sehr wahrscheinlich das Wort "Wireframe" zu Ohren gekommen sein. Die genaue Bedeutung und welchen Mehrwert ein Wireframe bringt, wollen wir heute genauer durchleuchten.
Das Wort "Wireframe" bedeutet übersetzt soviel wie "Drahtgerüst". Analog zu einem Bauplan, der alle wichtigen Anforderungen und Restriktionen beim Hausbau festlegt, funktioniert ein Wireframe als "Gerüst" oder Plan bei der Entwicklung eines digitalen Produkts. Ein Wireframe ist die schematische Darstellung einer Website / eines Online-Shops / eines Online-Portals usw., in dem alle wichtigen Elemente, Funktionen, Conversion- und Navigationsbereiche dargestellt und platziert werden. Damit der Fokus auf dem Inhalt und dessen Funktionsweise liegt, wird bewusst auf die visuelle Gestaltung, wie z. B. Farb- und Formensprache verzichtet.
Wireframes helfen besonders bei der Planung und Strukturierung von umfangreichen und komplexen digitalen Produkten (hier am Beispiel von OTOBO). Zeitlich betrachtet ist deren Erstellung vor allem zu Beginn eines Projektes sinnvoll, wenn das Konzept für die unterschiedlichen Seiten entwickelt wird.
Wireframes helfen dabei, alle relevanten Elemente zu definieren, Ideen zu konkretisieren und alle Seiten und Bereiche strukturell aufzubauen. Mit dessen Hilfe kann man sich ein gutes Bild über die Vollständigkeit der Inhalte verschaffen und einen ersten Eindruck bekommen, wie die Seite am Ende inhaltlich aussehen und funktionieren können.
Da Fragen nach Formen, Farben und Texten in einem späteren Schritt thematisiert werden, helfen Wireframes dabei, den Fokus gezielt auf die Funktionalität, Struktur und Usability eines Produktes zu legen.
Durch die visuelle Darstellung der Konzeptideen können Inhalte einfach im Team diskutiert oder dem Kunden präsentiert werden und erklärt werden, sodass alle Beteiligten ein gutes Gespür für die Idee dahinter bekommen.
Wer Wireframes in seine Projektarbeit einbezieht spart Zeit, da die Möglichkeiten des Feedbacks auf die wesentliche Inhalte reduziert werden. So ist es nicht nur für die Konzepte sondern auch für die Kunden leichter, den, in diesem Schritt nötigen Fokus zu setzen. Außerdem ist man hinterher in der Anpassung flexibler, da letztendlich „nur“ Boxen verschoben werden müssen.
Durch die Weiterentwicklung von einfachen, reduzierten, sog. Low-Fidelity-Wireframes zu detailreichen, ausgebauten High-Fidelity-Wireframes lässt sich die Verhaltensweise von Elementen (wie z.B. der Navigationsbar, Buttons, usw.) bestimmen und verschiedene Interaktionen können definiert werden.
Mit Hilfe von Wireframes lassen sich die Verständlichkeit, die Einfachheit und die Usability eines Systems ganz leicht testen. In den meisten Fällen hat sich gezeigt, dass Punkte, die in der Konzeptions-Phase schon Fragezeichen aufgeworfen haben, auch durch das Design nicht besser verstanden wurden.
Es gibt eine Vilzahl an unterschiedlichen Wireframe-Tools, wie Figma, Adobe XD, Miro, Sketch usw. Sie haben alle ihre Vor- und Nachteile, am Besten probiert man einige aus und wählt dann eines, das einem am Meisten liegt.
Eine gut durchdachte Informationsarchitektur ist das A und O. Sie befasst sich mit der Organisation und Strukturierung von Inhalten und legt wichtige Navigationspfade zwischen den Seiten fest. Bei der Erstellung sollte man sich fragen, wozu die Website generell dient, welche Seiten benötigt werden, worum es den einzelnen Seiten / Bereichen geht und wohin man von dort gelangt.
Aus der Informationsarchitektur können nun einzelne Bausteine pro Seite abgeleitet werden. Dabei geht es nicht darum, die Einzelheiten zu definieren, sondern, vielmehr grob festzulegen, welche Elemente auf jeder Seite dargestellt werden sollen.
Es kann sehr hilfreich sein, direkt zu Beginn ein Raster zu definieren, auf dem sich das gesamte Layout aufbaut. Ein Raster ist eine Richtlinie, die innerhalb eines Layouts Struktur und Ordnung schafft. Besonders bei der Adaption des Designs kann dadurch viel Arbeit eingespart werden.
Die erstellten Bausteine können nun innerhalb des Rasters als Platzhalter-Kästen platziert werden. Das Raster gilt dabei nicht als Einschränkung, sondern stellt eher eine Unterstützung dar. Man muss sich also nicht in jedem Fall zwangsweise daran halten, kleine Abweichungen lassen Entwürfe manchmal auch lebhaft aufregend wirken.
Nachdem jeder Baustein seinen Platz gefunden hat, können die einzelnen Bereiche verfeinert werden. Die Elemente, die bisher durch einen Platzhalter-Kasten dargestellt wurden, können nun in ihren eigenen Bestandteil aufgedröselt werden.
Um den Abstraktionsgrad der Wireframes zu verringern, kann man verschiedene Grauabstufungen definieren und die einzelnen Bausteine einfärben. So kann man das visuelle Gewicht der Elemente bestimmen, ohne sich direkt Gedanken um das konkrete Design machen zu müssen.
Dieser letzte Schritt ist optimal, vereinfacht jedoch den Sprung auf das Design. Man kann weitere Details hinzufügen, um das Gesamtbild der Wireframes zu verfeinern. Beispielsweise können die Platzhalter-Texte durch die Originalen ersetzt werden oder man kann versuchen, die optimale Schriftgröße für Überschriften und Fließtexte zu bestimmen.
Auf den ersten Blick klingt die Erstellung von Wireframes etwas aufwendig. Es lohnt sich aber zu Beginn des Projekts Zeit in den strukturellen „Bauplan“ zu stecken. Das ist Zeit, die sich im Laufe des Projekts bezahlt macht. Anhand eines leicht modifizierbaren Wireframes können strukturelle Probleme in der Seitenarchitektur frühzeitig aufgedeckt und behoben werden. Gleichzeitig können neue Ideen und Bedürfnisse schnell adaptiert werden.
Durch die Erstellung von Wireframe-Prototypen, im nächsten Schritt, lässt sich das Seitenschema auch interaktiv an Nutzern testen und verbessern.
Im anschließenden Branding verschiebt sich der Fokus dann von der Funktionalität hin zum Design. Da die Struktur bereits feststeht kann sich im nächsten Schritt allein auf Farben, Formen und Typografie konzentriert werden.
Der Prozess wird agiler, effizienter und damit auch kostengünstiger.
TELEFON
+49 89 - 890 819 12
