Gibt es ein deutsches Wort für Wireframe?

Manchmal hört man Drahtgittermodell oder Seitenskizze. Im Alltag nutze ich, wie die meisten Teams, das englische Wort Wireframe.

Welches Tool braucht man, um ein Wireframe zu zeichnen?

Papier und ein dicker Stift reichen. Arbeitet das Team remote, erledigen Sie dasselbe mit grauen Kästen in jedem Zeichen- oder Designtool.

Nutzt man im Wireframe echten Text?

In einer Low-Fi-Zeichnung reichen Linien statt Text. An Stellen, die eine Entscheidung beeinflussen, wie bei Buttons, hilft ein echtes Label. Auch Gordon empfiehlt Textlabels für Handlungsaufforderungen (CTA).

Kann man ein Wireframe mit Nutzern testen?

Ja. Laut Pernice kritisieren Teilnehmende grobe Prototypen unbefangener. Beim Papiertest wechselt eine Person die Screens der Reihe nach.

Was ist ein Wireframe? Definition und Beispiel

Was ein Wireframe zeigt

Laut Kelley Gordon von NN/g kann ein Wireframe vier Dinge sichtbar machen: den Weg des Nutzers, das Seitenlayout, die Informationshierarchie und die Interaktionen. Auch der Detailgrad (Fidelity) reicht weit. Eine schnelle Bleistiftskizze ist ein Wireframe, eine detaillierte Zeichnung nah am fertigen Design ebenfalls.

Wenn ich „Wireframe“ sage, meine ich meist die Low-Fi-Variante. Low-Fi heißt eine grobe Zeichnung, die dem fertigen Produkt wenig ähnelt: graue Kästen und ein paar Labels. Ist die Anordnung von Menü und Seiten vorher besprochen, steht also die Informationsarchitektur, zeichnen Sie die Screens viel schneller.

Warum es hilft

Eine grobe Zeichnung lenkt die Diskussion an die richtige Stelle. Laut Kara Pernice (NN/g) wirkt ein grobes Design unfertig, deshalb kritisieren Nutzer es unbefangener. Stakeholder sehen, dass die Arbeit nicht fertig ist, und die Designerin hängt an einer Skizze nicht so wie an einem polierten Screen.

Auch das Verwerfen ist günstig. Im Wireframe löschen Sie einen Kasten und zeichnen ihn neu. In einem programmierten Screen braucht dieselbe Änderung eine neue Entwicklungsrunde.

In der Praxis ist es ein verbreitetes Ergebnis. In Page Laubheimers Umfrage für NN/g mit 86 UX-Fachleuten von 2015 sagten 71 % der Teilnehmenden, dass sie statische Wireframes „häufig“ erstellen. Das war das am häufigsten erstellte Ergebnis der Umfrage.

Beispiel: das Wireframe einer Produktseite

Die Zeichensprache ist einfach. Laut Gordon ist ein Bild ein Rechteck mit einem Kreuz darin, eine Überschrift ist eine dicke Linie, Fließtext eine dünne. Ein Dropdown ist ein Rechteck mit Pfeil, ein ausgewählter Radiobutton ein gefüllter Kreis.

Das Navigationsmenü ist ein Rechteck an der Stelle, an der es auf dem Screen stehen wird. Der Link zur aktuellen Seite wird unterstrichen oder eingerahmt.

Beispielzeichnung

Meine eigene Zeichnung: eine Produktseite auf dem Handy. Von oben nach unten: Zurück-Pfeil und Warenkorb, Suchfeld, durchgestrichener Bildkasten, Titel, Preis, Beschreibung, Größenmenü, zwei Versandoptionen und der Button In den Warenkorb. Keine Farbe, kein Foto.

Die Fragen, die ich bei diesem Screen stelle, betreffen nicht das Aussehen. Soll der Nutzer die Größe vor dem Button wählen? Gehört die Versandoption auf diese Seite oder in den Warenkorb? Das bespricht man im Wireframe in ein paar Minuten.

Eines der häufigsten Probleme in meinen Audits beginnt hier: Der Screen ist schön, aber die Reihenfolge der Elemente stimmt nicht. Ist erst Farbe drin, stellt niemand die Reihenfolge mehr infrage. Das Wireframe ist der günstigste Weg, diese Frage vor der Farbe zu stellen.

In vier Schritten zeichnen

Gordons Reihenfolge:

Legen Sie das Format des Screens fest und zeichnen Sie auch den Rahmen von Browser oder Handy.
Setzen Sie Navigationsmenü und Suchfeld.
Ergänzen Sie die größten Elemente: Überschriften, Banner, Bilder.
Füllen Sie die übrigen Details: Buttons, Dropdowns, Checkboxen, Textfelder, Zeilen für Fließtext.

Gordon empfiehlt einen dicken Stift und ein Zeitlimit; ein unordentliches Ergebnis ist für sie völlig normal. Machen Sie die erste Runde auf Papier. Ein dicker Stift lässt Sie sich nicht in Details verlieren.

Für ein detaillierteres Wireframe empfiehlt Gordon, mit festen Screengrößen zu beginnen. Fürs Web nennt sie als Beispiele 1024x768 und 1920x1080 Pixel. Mobil nehme ich die Handygröße, die bei den Nutzern des Produkts am häufigsten vorkommt.

Oft verwechselt: Mockup und Prototyp

Laut Pernice variiert die Fidelity auf drei Achsen: visuell, Inhalt und Interaktion. Ein Wireframe ist auf allen dreien niedrig. Ein Mockup ist derselbe Screen mit Farbe, Schrift und echten Bildern, aber nicht klickbar.

Der Prototyp fügt Interaktion hinzu. Das kann eine klickbare Datei sein oder ein Modell, bei dem jemand die Screens von Hand wechselt. In dieser Phase kommt der Test der Usability.