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.
Detailgrade und ihre Namen
In der Praxis unterscheidet man drei Stufen. Low Fidelity ist die Skizze auf Papier oder im Whiteboard-Werkzeug, die in Minuten entsteht und nach der Besprechung weggeworfen wird. Mid Fidelity ist der Wireframe im engeren Sinn: maßhaltig, mit echten Texten, in Graustufen. High Fidelity trägt Schrift, Farbe und Bilder und ist damit kein Wireframe mehr, sondern Screen Design.
Die Stufen sind kein Weg, den jedes Projekt vollständig geht. Bei einer überschaubaren Unternehmensseite reicht oft die Skizze, weil die Muster bekannt sind. Bei einem Konfigurator oder einem mehrstufigen Antrag lohnt die mittlere Stufe für jeden Schritt.
Ein Wireframe gilt für eine Breite
Ein Gerüst zeigt eine Anordnung, und die Anordnung hängt von der verfügbaren Breite ab. Wer nur die Desktopfassung zeichnet, verschiebt die Frage, was auf dem Telefon zuerst kommt, in die Umsetzung. Dort entscheidet sie dann derjenige, der das Template baut. Wir zeichnen deshalb mindestens zwei Breiten, und wo Inhalte auf dem Telefon umsortiert werden müssen, gehört die Umsortierung in den Wireframe und nicht in eine Randbemerkung.
Anmerkungen gehören dazu
Ein Wireframe ohne Beschriftung ist eine Behauptung. Was passiert beim Klick auf die Kachel? Woher kommt die Liste, wie viele Einträge zeigt sie, und was steht da, wenn keiner vorhanden ist? Solche Fragen werden im Bild nicht sichtbar und entscheiden später über den Aufwand. Bewährt haben sich nummerierte Anmerkungen am Rand, die je Element den Zweck, die Datenquelle und den Sonderfall nennen. Der Leerzustand ist dabei der am häufigsten vergessene Punkt.
Woraufhin ein Wireframe abgenommen wird
Zur Abnahme gehören vier Fragen, und keine davon betrifft das Aussehen. Steht das Wichtigste oben? Findet jede Zielgruppe ihren Einstieg? Ist zu jedem Element klar, woher der Inhalt kommt und wer ihn pflegt? Und lässt sich die geplante Struktur aus dem Sitemap-Konzept hier überhaupt unterbringen? Wer stattdessen über Abstände und Schriftgrößen spricht, hat die Stufe verlassen, bevor sie ihren Zweck erfüllt hat.