Aber was sind Wireframes?

Wireframes stellen den Bauplan bzw. das Skelett der User Interaction einer Website dar und liefern Antworten dazu, welche Informationen wie dargestellt werden und welche Funktionen und Interaktionen verfügbar sein sollen. 

Mittels Wireframes können, ohne direkt schon Content einzuspeisen, Prioritäten von Infos und Funktionen visualisiert und priorisiert werden. Außerdem können auch schon Auswirkungen von Benutzeraktionen simulieren/visualisieren werden.

Je nachdem wie viel Ressourcen für die Erstellung von Wireframes zur Verfügung stehen, können Wireframes grobe, skizzenhafte Darstellungen von Benutzeroberflächen sein (low fidelity) oder eben detailliertere Darstellungen, die genauer das Aussehen, Verhalten und die Interaktionen der Benutzeroberfläche darstellen (high fidelity).

Was ist der Unterschied zwischen Wireframes und Mockups?

Der Unterschied zwischen Mockups und Wireframes besteht prinzipiell in der Tiefe der Funktionalität. Während ein Mockup eine einfache Darstellung einer Funktionalität ist, der mehr zur Präsentation taugt, sind Wireframes detaillierter und dienen im Weiteren auch schon als klickbare Abbildungen von Use Cases.

Mockups dienen vor allem als Basis zur Umsetzungsentscheidung, stellen Prozesse oder Funktionen dar, die auf Anhieb verständlich sind. Alternativ bieten Wireframes schon eine klare Definition der Positionierung der einzelnen Elemente oder Atome und stellen somit ein UI-”Skelett” dar.

Wieso sind Wireframes im Gestaltungsprozess so wichtig?

Stell dir vor, du planst ein großes Event. Mit großer Wahrscheinlichkeit wirst du nicht einen Tag vorher mit der Planung beginnen, sondern Wochen oder Monate davor. Gleich verhält es sich bei einem großen Webprojekt.  Wenn einfach drauf los programmiert wird und dann erst Kundenwünschen oder Änderungen aufkommen, muss jede Zeile Code überarbeitet oder gelöscht bzw.neu geschrieben werden. Ein viel zu kostspieliges Unterfangen, dass mit dem bewährten Gestaltungsprozess, nämlich Planung, Konzeption > Skizzierung > Wireframes > Prototyp > Coden, vermieden werden kann. 

Der genaue Vorteil von Wireframes ist die strukturierte Visualisierung der Benutzeroberfläche. Durch frühe Konzeptentwicklung kann der Gestaltungsprozess bis hin zum Prototypen einfach verändert werden, ohne kostspieligen Code-Aufwand. Stakeholder werden früh im Gestaltungsprozess miteingebunden, und Änderungen sind schnell und kostengünstig möglich. 

Dieser Prozess kann dann in schnellere und iterative Entwicklung wiederholt werden, sodass ein zufriedenstellendes Endprodukt entsteht, welches die Grundlage für einen Prototyp darstellt und später dann technisch umgesetzt  werden kann.

Wie macht man Wireframes?

Um gute Wireframes zu erstellen, brauchst du nicht viel, wenn du dich an gewisse Regeln hältst. Beispielsweise ist die K.I.S.S.-Regel (Keep It Simple Stupid) eine der wichtigsten Grundregeln, an die du dich halten solltest. Dabei geht es nicht darum, grafische Meisterleistungen zu vollbringen, sondern eine erste visuelle Struktur festzulegen, auf die dann aufgebaut werden kann. Das heißt, es können konkret auch nur farbige Vierecke anstatt Bilder verwendet werden. 

Am Ende soll das Wireframe mit einem höchst möglichen Nutzererlebnis gebaut werden, damit diese dann im Prototypen getestet werden kann. 

Ein weiterer wichtiger Punkt sind die Einhaltung von Designrichtlinien, die wir kurz nochmal wiederholen: 

Die vier goldenen Regeln des UI-Designs

• Nutzerinnen die Kontrolle über die Benutzeroberfläche geben
• Die Interaktion mit einem Produkt komfortabel gestalten
• Die kognitive Belastung verringern
• Die Benutzeroberflächen konsistent gestalten

Bei Interesse genauer hier nachzulesen: https://xd.adobe.com/ideas/process/ui-design/4-golden-rules-ui-design/

Weiters gibt es dann noch folgende Wireframing Bereiche, die für die Gestaltung wesentlich sind: 

Information Design 

Die Informationen sind so anzuordnen, dass sie den Zielen und Anforderungen der Nutzerin entsprechen werden. Es herrscht also eine Informationshierarchie. Auch können Key Elemente markiert und hervorgehoben werden (Bsp.: „Jetzt Kaufen“, „weiterlesen“, „hier herunterladen“, …).

Navigation Design 

Die Verknüpfungen zwischen den Links sollten visuell dargestellt werden, um die Verständlichkeit und Konsistenz zu verbessern. Dabei sollten verschiedene Arten von Verknüpfungen berücksichtigt werden, wie Text, Icons, Kontext, Haupt- und Untermenüs, und so weiter. Aspekte wie Auffindbarkeit (Platzierung), Konsistenz (Position, Style) und Bezeichnungen (kurz und prägnant, Bildsprache - wenn möglich) sind der Nutzerin wichtig. Die Nutzerin soll außerdem immer wissen, wo sie sich befindet („Scent of Information“ - Kontextrelevanz führt zu einer guten Wahrnehmung des Standorts).

Hier soll auch an Navigationsmuster gedacht werden. Bei einem Mobile first Approach ist zum Beispiel das Burger Menü oder die Gesture Based Navigation nicht wegzudenken, während am Desktop Elemente wie Tabbed Navigation, Breadcrums oder Search Navigation meistens nicht fehlen dürfen.

Interface Design 

Das Design und die Anordnung des Konzepts für die Interaktionselemente der Benutzeroberfläche gestalten, zu denen unter anderem Schaltflächen, Eingabefelder, Kontrollkästchen und andere gehören. Ein etwas älterer, aber trotzdem guter Ratgeber ist https://www.smashingmagazine.com/2009/01/12-useful-techniques-for-good-user-interface-design-in-web-applications/.

Welche Wireframe Tools gibt es?

„Also welche Tools zum wireframen gibt es und welche werden bei pcode verwendet?“, höre ich dich schon fragen.

Es gibt verschiedene Programme wie Canva, Miro, Adobe XD oder BalsamiQ, die dafür gut sind entweder nur Wireframes anzubieten oder sogar noch das ein oder andere Zusatzfeature haben. Unserer Meinung nach sticht aber ein Programm klar hervor.

Figma ist nicht nur für Wireframen optimal, sondern überzeugt auch durch ein intuitives und einfaches Interface. Die Möglichkeit, miteinander an einem Dokument zu arbeiten, und darauf aufbauend später einen Prototypen zu basteln, erleichtert den Gestaltungsprozess immens. Also wir verbinden die beiden ganz einfach: Wireframes Figma!

Fazit:

Wireframes sind essentiell im Web Entwicklungsprozess und dienen als Bauplan für Benutzeroberflächen. Durch den Einsatz von Wireframes können dank schneller Änderungen viel Kosten und Zeit im gesamten Entstehungsprozess gespart werden, da frühzeitig Feedback eingearbeitet werden kann. Ingesamt sind Wireframes ein unerlässliches Werkzeug im Webdesign Prozess, um sicherzustellen, dass das Endprodukt sowohl funktional als auch benutzerfreundlich ist. 

Willst du mehr über Wireframing oder den Prozess wissen, dann melde dich doch einfach bei uns mit einer E-Mail an team@pcode.at.