How to Wireframe

Dies ist ein skizzenähnlicher Entwurf einer Anwendung, der noch keinen Fokus auf Gestaltung legt. So spielen Farben, Typographie, Bilder und Grafiken in dieser Phase noch keine Rolle und wir fokussieren uns auf die (Informations-)Struktur, die Positionierung von Inhalten, Funktionalitäten und das Verhalten der Screens zueinander. So können wir den ersten Grundstein für das Screendesign legen und erhalten einen besseren Überblick.

Vorbereitung: Vor dem Wireframe Anforderungen und Ziele kennen

Bevor wir mit dem eigentlichen Wireframe beginnen, müssen wir uns darüber klar werden, welches Ziel die Anwendung hat. Wer benutzt sie am Ende und was wollen die Nutzenden damit erreichen? Was wünscht sich der Kunde? Indem wir uns diese Fragen stellen, vermeiden wir, am Bedarf vorbei zu entwickeln und können uns direkt auf die relevanten Punkte fokussieren. Wir sollten uns fragen, welche Probleme die Nutzenden lösen möchten und wie sie hier vorgehen würden. So können wir entlang einzelner Prozesse die verschiedenen Screens entwerfen und die ermittelten Anforderungen in das Wireframe übertragen.

Kurz und knapp

Vorab sollten folgende Fragen geklärt werden:

1. Welches Ziel hat die Anwendung?
2. Wer benutzt sie?
3. Was sind die Ziele und Wünsche der Nutzenden?

Erstellung eines Wireframes

Der Grundaufbau ist im Prinzip meistens derselbe:
Im ersten Schritt legen wir fest, um welche Umgebung es sich handeln soll. Wollen wir die Inhalte in einem Desktop-, Tablet- und/oder Handyscreen darstellen? Je nachdem, für welches Endgerät wir unser Wireframe erstellen, wählen wir eine Vorlage aus, die ungefähr den realen Maßen entspricht. Mittlerweile hat sich je nach Anwendungsfall der „Mobile First“-Ansatz etabliert, sodass wir mit der mobilen Ansicht beginnen und dann um weitere Elemente erweitern, um eine Tablet- und/oder Desktop-Version zu erstellen.

Es gibt einige Tools, die uns dabei helfen. In diesen finden wir eine große Palette an vorgefertigten Komponenten, die wir einfach in der Größe verändern, verschieben und auch individualisieren können. So ist auch die Erstellung von klickbaren Wireframes möglich, um direkt ein besseres Bild über die abgebildeten Prozesse und den dazugehörigen Elementen zu liefern, da wir die Abhängigkeiten zwischen den Screens und den abgebildeten Aktionen (z.B. in Form eines Buttons) abbilden können.

In folgendem Beispiel möchten wir mit dem Tool balsamiq ein Wireframe einer Anwendung erstellen, mit der wir ein Auto via Carsharing reservieren können. In diesem Screen möchte der Kunde oder die Kundin eine Reservierung stornieren.

Zunächst wählen wir die notwendigen Elemente aus, die wir für die Funktionalität unserer Anwendung benötigen. Das sind in unserem Beispiel ein ‚Zurück‘ und ein ‚Bestätigen‘ Button und ein Drop-Down Menü zur Auswahl des Grundes der Stornierung.

	Kurz und knapp Welche Endgeräte werden bedient? Was sind die notwendigen Elemente, die wir für die Funktionalität unserer Anwendung benötigen? Mobile First: Beginn mit der mobilen Ansicht, erweitere um eine Tablet- und/oder Desktop-Version. Als nächstes machen wir uns über die Verteilung unserer Inhalte und Komponenten Gedanken und ergänzen Elemente wie Header, Banner, Textfelder, Bilder, Footer etc. (in diesem Status oft auch einfach noch als Platzhalter). Generell gilt: Je größer ein Element auf einem Screen abgebildet wird, desto wichtiger und zentraler ist es. Das kann besonders hilfreich sein, um bei Überschriften die Ebenen abzubilden.
	Nun können wir weitere Details ergänzen. In diesem Fall möchten wir weitere Erläuterungen hinzufügen oder auch Elemente, die für die Funktionalität unserer Anwendung zwar nicht dringend nötig sind, allerdings die UX verbessern oder konkrete wirtschaftliche Interessen abbilden können, die nicht fehlen sollten. Außerdem möchten wir noch auf die Möglichkeit der Umbuchung verweisen und Erläuterungen ergänzen.
	Bei der Erstellung sollten wir generell auf eine bestimmte Konsistenz achten. Unsere Screens sollten wiedererkennbar sein und sich im Stil und Layout nicht zu sehr unterscheiden. Es sollte deutlich sein, dass es sich bei verschiedenen Screens um die gleiche Anwendung handelt. Dabei können wir auch innerhalb eines Screens verschiedene Elemente gruppieren, um die ähnlichen Eigenschaften der verwendeten Objekte darzustellen. Wie bereits erwähnt machen wir uns beim Erstellen eines Wireframes noch keine Gedanken über Farben. Dennoch können wir auch mit Hilfe verschiedener Grautöne die Relevanz und den Fokus auf Elemente lenken und ihre Funktion abbilden. So markieren wir bspw. Buttons besonders dunkel oder hinterlegen einen Schatten.

Bei der Erstellung unseres Wireframes können wir im Rahmen mehrerer Iterationen mit verschiedenen Ansätzen ausprobieren, welche Variante für die Problemlösung die effizienteste und nutzerfreundlichste ist. Daher gilt: ausprobieren und der Kreativität freien Lauf lassen. Ungeeignetere Ideen können im Nachhinein immer noch verworfen oder auch mit anderen Ideen und Variationen kombiniert werden.

Kurz und knapp

• Verteilung der grundlegendsten Inhalte und Komponenten. Je größer, desto wichtiger. Danach Ergänzung weiterer Details.
• Achte auf Konsistenz.
• Farben sind noch nicht wichtig. Arbeite stattdessen mit Grautönen.
• Mehrere Durchläufe führen nach und nach zum Ergebnis.

Typische Darstellung von Elementen in Wireframes

Wir begegnen in unserem Alltag immer wieder Symbolen, von denen wir auch ohne Erklärung wissen, was sie bedeuten. Daher sollten wir uns auch bei der Erstellung eines Wireframes an den gängigen Elementen bedienen um sicherzustellen, dass ihre Bedeutung leicht verständlich ist. Besonders bei der Verwendung von verschiedenen Tools fällt auf, dass sich die Darstellungen der Elemente ähneln und wir uns schnell zurechtfinden, da wir die Elemente dank dieser standardisierten Darstellung schnell wiedererkennen.

Hier ein paar Beispiele für die typischen Formen:

Das Wireframe ist fertig – Was jetzt?

Nachdem wir unser Wireframe fertiggestellt haben, sollten wir es am besten durch zukünftige Nutzer und Nutzerinnen testen lassen, um so zu prüfen ob die Anforderungen erfüllt werden oder nicht. Dabei erhaltenes Feedback sammeln wir, um es einzuarbeiten und wiederholen diesen Vorgang so oft, bis die Bedürfnisse der Nutzenden erfüllt werden. Der Vorteil am Wireframe ist dabei, dass es schon eine gute Struktur darstellt, diese aber nicht fixiert wird und stattdessen noch Optimierungen möglich sind. Ebenfalls können wir durch gemeinsame Diskussion über die Gewichtung herausfinden, ob die dargestellten Elemente als entsprechend wichtig genug dargestellt wurden. Wenn das der Fall ist und wir unser Wireframe soweit fertiggestellt haben, können wir auf dieser Grundlage Mockups und Prototypen erstellen.

Kurz und knapp

• Durch Nutzerinnen und Nutzer testen lassen – werden die Anforderungen erfüllt?
• Feedback einarbeiten und den Vorgang wiederholen.
• Auf dieser Grundlage mit Mockups oder Prototypen weitermachen.

Schon gewusst?

Bei Wireframes, Mockups und Prototypen handelt es sich um unterschiedliche Dinge. Oft werden sie verwechselt oder sogar als das Gleiche betrachtet.
In der Regel beginnen wir mit einem Wireframe, überführen dies in ein Mockup und erstellen daraus wiederum einen Prototypen. Dabei wird unser Entwurf mit jeder Stufe detaillierter und enthält immer mehr Interaktionen, anhand derer wir die ersten Prozesse „testen“ können. Auch hierfür gibt es hilfreiche Tools, wie Adobe XD: Etwas komplexer, aber ermöglicht bereits semi-interaktive Klickdummies, die sowohl zur Diskussion mit dem Kunden als auch als genaue Vorlage für Entwicklerinnen und Entwickler dienen können. Mit Axure RP ist die Erstellung voll interaktiver Klickdummies mit hohem Detailgrad (‚high-fidelity‘) möglich, bei denen auch die Übergabe von Parametern möglich ist.

Mehr zu Frontend Entwicklung erfahren

Quellen

https://balsamiq.com/learn/articles/five-steps-to-great-wireframes/
https://webdesign.tutsplus.com/de/articles/a-beginners-guide-to-wireframing–webdesign-7399
https://balsamiq.com/learn/articles/wireframing-phases-ideation-validation/
https://www.iqual.ch/de/internet-glossar/was-sind-wireframes-und-wozu-koennen-sie-verwendet-werden
https://www.bluemonkeys.at/a/wozu-wireframes/
https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00