Wireframing

Was ist Wireframing, welche Wireframe-Arten gibt es, wo liegen Vorteile und wer bietet Software an?

Wireframing Definition – was, wo und wie

Wer eine Website oder das Graphical User Interface (GUI) einer Software entwirft, steht vor der Frage, was wird wie und wo darstellt. Welche Informationen werden vermittelt, wie ist die Struktur der Darstellung und wie soll der Anwender oder User navigieren? Ein Wireframe beschreibt das strukturelle Modell einer Website, einer Software oder Web-Anwendung. Es ist ein schematischer Entwurf, der definiert, welche Elemente an welchen Stellen verwendet werden und wie die Navigation zwischen den Elementen auf einzelnen oder verschiedenen Webseiten bzw. Screens einer Software oder Web-Anwendung funktioniert. Den Prozess zur Erstellung eines Wireframes wird als Wireframing bezeichnet.

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.

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.

 

Wireframing

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.

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:

 

Hinweise:

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:

 

Wireframe - Mockup - Prototyp

Was macht t2informatik?

t2informatik - Wir entwickeln Software für großartige Unternehmen

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

Wissen kompakt: Was ist ein Klickdummy?

Was ist ein Klickdummy?

Wissen kompakt: Was ist ein Prototyp?

Was ist ein Prototyp?