Wireframing

Das Design von Information, Navigation und Interface per Wireframe

Beim Wireframing geht darum, ein Gerüst – der englische Begriff Wireframe bedeutet in Deutsche übersetzt Drahtgerüst oder Drahtmodell – zu entwerfen, das die Informationsarchitektur, die Navigation und User Interface visualisiert. Es geht also um

• Information Design,
• Navigation Design und
• Interface Design.

Alternative Begriffe für Wireframe sind Page Schematics oder Screen Blueprint bzw. etwas altmodisch Seitenschema bzw. Bildschirmplan.

Abstraktion und Konzeption beim Wireframing

Der Fokus beim Wireframing liegt auf der Struktur der Darstellung und auf der Benutzerführung. Es geht

• um eine Abstraktion von konkreten Inhalten wie Texten oder Bildern.
• um den konzeptionellen Entwurf einer oder mehrerer Oberflächen und damit die generelle Anordnung von Elementen wie bspw. Logo, Header, Überschriften, Textfelder, Suchfelder, Formulare etc.
• um die Navigation, sprich die Verwendung von Menüs bspw. im Header, Footer und per Bread-Crumb, oder den Aufruf von Befehlen z. B.. per rechter Maustaste oder Short-Codes und Tastatureingabe.

Unterschiedliche Meinungen gibt es bei der Berücksichtigung der Corporate Identity. Die meisten Puklikationen verordnen die Verwendung von Farben, Formate und Schriftarten eher bei Mockups und weniger bei Wireframes. So oder so, in der Praxis ist dieser Punkt wichtig. Eine nachträgliche Anpassung einer Implementierung verursacht immer mehr Aufwand, als die korrekte Verwendung von vereinbarten Aspekten von Beginn an.

Arten von Wireframes

Es gibt zwei Arten von Wireframes:

• Low-Fidelity-Wireframes
• High-Fidelity-Wireframes

Unter Low-Fidelity-Wireframes werden einfachste Entwürfe verstanden, also bspw. Zeichnungen, die mit Stift und Papier entstehen. Auch ein einfacher Entwurf, der mittels Software erzeugt wird, kann ein Low-Fidelity-Wireframe sein. Die Konzentration auf das Wesentliche, also bspw. die Auswahl und Anordnung von Elementen, steht im Mittelpunkt. Vorteile sind die schnelle, kostengünstige und im besten Sinne schlichte Abstraktion. Manchmal wird auch die Verwendung von Lorem ipsum Blindtext als Platzhalter für Inhalte und Beschriftungen als Merkmal erwähnt, doch auch bei High-Fidelity-Wireframes kommen solche Platzhalter zum Einsatz.

Im Vergleich ist das High-Fidelity-Wireframe eine ausgereiftere, optisch und auch technisch detailliertere Variante. Bspw. verfügen Elemente über Informationen wie konkrete Dimensionen, und das Verhalten und mögliche Aktionen bei interaktiven Elementen lassen sich erkennen. Natürlich ist die Erstellung zeitlich und finanziell aufwändiger, dafür ist aber das Verständnis bei den beteiligten Parteien höher. Und High-Fidelity-Wireframes ermöglichen tatsächlich eine erste (positive) User Experience.

Zusammengefasst sind die Ausarbeitung der Details und die Vollständigkeit der Abbildung die wesentlichen Unterscheidungsmerkmale. Wichtiger als eine trennscharfe Unterscheidungen zwischen den beiden Arten ist aber folgendes: Die beiden Arten stehen nicht im Wettbewerb miteinander, sondern bauen aufeinander auf. Mit einem Low-Fidelity-Wireframe lassen sich zügig grobe Strukturen festlegen und ein erstes Verständnis zwischen den Beteiligten erzeugen. Mit einem High-Fidelity-Wireframe wird dieses Verständnis ausgebaut, Details werden integriert und Interaktionen ermöglicht. Alternativ werden die beiden Arten auch als statische und dynamische Wireframes bezeichnet.

Vorteile beim Wireframing

Wireframing bietet eine Reihe von Vorteilen:

• Der Erzeuger des Wireframes gewinnt Klarheit über den Aufbau seiner Website oder Anwendung.
• Ein Wireframe lässt sich – zumindest in Bezug auf die Erstellung – zügig realisieren. Je umfangreicher bzw. komplexer eine Lösung ist, desto länger wird die Erstellung dauern.
• Da ein Wireframe “gezeichnet” wird, ist das Vorgehen deutlich günstiger, als vorschnell mit der Implementierung einer Lösung oder der Programmierung einer Website zu beginnen.
• Auch in Bezug auf den Materialeinsatz ist Wireframing günstig. In der einfachsten Ausbaustufe reichen Stift und Papier. Natürlich steigen die Aufwände, je mehr Menschen an dem Prozess beteiligt sind, oder die Kosten in Abhängigkeit möglicher technischen Lösungen (siehe Wireframing Tools).
• Kunden, Anwendern, Kollegen, Auftraggebern etc. lassen sich frühzeitig einbinden. Und der Austausch zwischen den jeweiligen Parteien wird gefördert.
• Ein iteratives Vorgehen wird unterstützt, bei dem neue Erkenntnisse leicht genutzt und integriert werden können; deutlich leichter als bei späteren Anpassungen der Implementierung.

Wireframe Software

In einigen Praxisberichten ist zu lesen, dass die Erstellung von High-Fildelity-Wireframes mittels Software und Interface Libraries ähnlich schnell funktioniert, wie bei Low-Fidelity-Wireframes. Solche Aussagen sind natürlich mit Vorsicht zu genießen; womöglich stammen sie aus der Feder eines Anbieters für Wireframe Software.

Hier finden Sie eine Liste mit Wireframe Software:

• Mockplus
• Sketch
• Omnigraffle
• Axure
• invision Studio
• invision Freehand
• Figma
• Adobe XD
• Lucidchart
• UXPin
• Proto.io
• Balsamiq
• Marvel
• Justinmind
• Microsoft Visio
• Miro
• Moqups
• AFFINITY Designer
• Adobe Illustrator
• Xara Designer Pro X
• MockFlow
• Gravit Designer
• …

Impuls zum Diskutieren:

Was halten Sie von folgender Aussage: “Eine Benutzeroberfläche ist wie ein Witz. Wenn Sie ihn erklären müssen, ist er nicht sonderlich gut.”

Hinweise:

Haben Sie Lust auf einen neuen Lieblings-Newsletter?

Die Inhalte auf dieser Seite dürfen Sie gerne teilen oder verlinken.

Immer mal wieder taucht die Frage nach der Abgrenzung von Wireframes, Mockups und Prototypen – bspw. Klickdummys – auf. Auch wenn die Grenzen eher fließend sind, evtl. hilft die nachfolgende Darstellung:

Hier finden Sie ergänzende Informationen aus unserer Rubrik Wissen kompakt:

Was macht eigentlich t2informatik? Ein Klick hier und Sie wissen es.