Ein Wireframe ist die schematische Darstellung einer einzelnen Ansicht, die Aufbau und Rangfolge der Inhalte zeigt und die Gestaltung offen lässt. Kästen stehen für Bilder, Linien für Textblöcke, gearbeitet wird in Graustufen. Zu klären ist damit eine Frage: Was steht wo, und was wiegt schwerer als was? Sobald mehrere solcher Ansichten verlinkt sind und sich durchklicken lassen, spricht man vom Clickdummy.
- Wireframe
Schematische Darstellung einer einzelnen Ansicht, die Aufbau und Rangfolge der Inhalte zeigt und die Gestaltung offen lässt.
Beispiel: „Im Wireframe liegt das Kontaktformular unter den Referenzen, das sollten wir tauschen.“Auch: Drahtgittermodell oder Layoutgerüst. Im Projektalltag ist der deutsche Begriff unüblich.
Abgrenzung zum Clickdummy: Der Wireframe zeigt eine Ansicht im Stillstand, der Clickdummy verbindet mehrere Ansichten zu einem klickbaren Ablauf. Die Mischform aus Wireframe und Ablaufdiagramm heißt Wireflow: Sie stellt jeden Schritt einer Aufgabe als eigenes Gerüst dar, mit Pfeilen dazwischen.
Graustufen sind eine Methode
Farbe, Fotos und ausgearbeitete Schrift ziehen die Aufmerksamkeit auf sich. Wer einen gestalteten Entwurf vorlegt, bekommt Rückmeldungen zum Bild und zur Farbe des Buttons. Wer ein Gerüst vorlegt, bekommt Rückmeldungen zur Reihenfolge. In der Abstimmung mit Auftraggebern erleben wir diesen Unterschied bei fast jedem Projekt, und er ist der Grund, warum die Stufe nicht übersprungen wird.
Das Weglassen hat eine Grenze. Ein Wireframe, der nur aus grauen Rechtecken besteht, lässt sich nicht beurteilen, weil niemand weiß, was darin stehen soll. Deshalb gehören echte Überschriften hinein, echte Textlängen und die tatsächliche Anzahl der Einträge in einer Liste.
Wie detailliert ein Wireframe sein muss
Blindtext ist der häufigste Fehler. „Lorem ipsum“ verdeckt, dass die Überschrift im Deutschen dreizeilig wird und der Produktname nicht in die Kachel passt. Wir arbeiten deshalb mit Inhalten aus dem Content-Konzept, auch wenn sie noch nicht endgültig formuliert sind, und schreiben die Beschriftungen der Bedienelemente schon hier aus.
Was auf dieser Stufe offen bleiben darf, sind Zustände und Bewegung. Ein Wireframe zeigt einen Moment. Sobald der Fehlerfall und der Ladezustand zur Diskussion stehen, ist das Werkzeug ausgereizt und der Prototyp übernimmt.
Was Auftraggeber an Wireframes irritiert
Ein Wireframe sieht unfertig aus, und das erzeugt Unruhe, wenn er ohne Einordnung im Postfach landet. Hilfreich ist ein Satz dazu, was gerade entschieden wird und was ausdrücklich noch nicht. Ohne diesen Satz kommt die Rückfrage nach dem Logo, und die Struktur bleibt unbesprochen.
Der Wireframe ist außerdem die Stelle, an der die Informationsarchitektur auf die Seite trifft. Was in der Sitemap eine Ebene tiefer liegt, muss hier einen Platz bekommen, an dem es gefunden wird. Wo das nicht gelingt, stimmt die Struktur darüber noch nicht.