Was ist Wireframing?

Schritt für Schritt zum Wireframing

Die folgenden Schritte müssen beim Wireframing beachtet werden:

Art und Ziel der Seite

Der erste Schritt beim Wireframing ist die Planung. Vor der Erstellung des ersten Modells müssen die Art und das Ziel der Seite identifiziert werden. Webseiten lassen sich gut in Kategorien unterteilen, von denen jede ihre eigenen Ansprüche hat. Je nachdem, ob die Seite eine Home-, Landing- oder Informationspage ist, verändert sich die Vorgehensweise. Während Homepages in der Regel das Aushängeschild sind, haben Landingpages einen sehr viel engeren Fokus.

Das Ziel kann vieles sein, sollte aber klar definier- und messbar sein. Nutzerregistrierungen, Klicks und Verkäufe sind Ziele, die diesen Kriterien genügen. Informationsvermittlung und Nutzerbindung sind schwerer messbar, können aber unter Umständen legitime Ziele sein. Messbarkeit muss hier über sekundäre Faktoren, wie z.B. Scrolltiefe und Verweildauer definiert werden. Sämtliche Schritte im Wireframing basieren auf diesem Ziel und sollten seiner Erfüllung dienen – von der Benutzerführung bis zur Hierarchie der einzelnen Be-standteile.

Wahl der Bestandteile

Im zweiten Schritt werden die Bestandteile zusammengetragen, über welche die Seite verfügen soll. Textbereiche, Buttons, Werbeflächen und Navigationselemente sind häufig verwendete Elemente. An dieser Stelle muss noch nicht über ihren Sinn entschieden werden. Im weiteren Verlauf werden Elemente entfernt und neue hinzukommen. Ziel ist festzulegen, mit welchen Elementen der erste Entwurf des Wireframes gebaut wird. Eine gute Vorgehensweise ist hier ein Top-Down Ansatz. Einfach oben auf der Seite anfangen und sich dann langsam nach unten arbeiten. Da Nutzer die Elemente der Seite auch so erleben, gibt das gleich ein Gefühl für den Fluss der Seite aus den Augen der Nutzer. Auch wenn die Website über ein globales Design für z.B. Navigation oder Footer verfügt, sollten diese im Wireframe trotzdem vorkommen, da sie Einfluss auf Nutzerverhalten und das Zusammenspiel der Elemente haben.

Anordnung der Bestandteile

Sind die Elemente zusammengetragen geht es jetzt an ihre Anordnung. Da hier die Gefahr von subjektiver Beeinflussung sehr hoch ist, sollte spätestens bei diesem Schritt im Team gearbeitet werden. Das verhindert Entscheidungen auf persönlicher Geschmacksbasis und führt zu einem besseren Wireframe. Für eine erste Visualisierung kann hier schon ein ein-faches Wireframe erstellt werden. Arbeit am Whiteboard oder mit Papierelementen eignet sich hier besonders, da die sich die Anordnung im Prozess oft verändern wird.

Eine grobe Unterteilung der Seite in Bereiche hilft, den Überblick zu behalten. Navigation, Sidebar und Footer erklären sich von selbst. Die restlichen Elemente können aber auch in eigene Bereiche unterteilt werden. So hat jede Website einen above-the-fold-Bereich, also den Bereich, der dem Nutzer präsentiert wird, bevor er scrollt. Da dieser Bereich vor allem im Onlinemarketing sehr wichtig ist, sollte er als ein funktionierendes Ganzes betrachtet- und bearbeitet werden. Elemente below-the-fold können in ähnliche Bereiche unterteilt werden. Haupttext, Zwischenanzeige oder Bilder-Slideshow sind Beispiele für sinnvolle Unterteilungen.

Die abgesteckten Bereiche können nun nach Wichtigkeit angeordnet werden. Je wichtiger der Bereich, desto weiter oben sollte er stehen. So ergibt sich eine natürliche Hierarchie der Bereiche im Wireframe. Die Hierarchie sollte im Team besprochen werden, bis ein Konsens erreicht ist.

Gesamtwirkung des Prototypens

Mit der Anordnung der Elemente kann jetzt ein etwas saubereres Wireframe erstellt werden. Es sollte klar erkennbar sein, um welche Elemente es sich bei den einzelnen Teilen handelt – vor allem geht es hier darum, einen Überblick zu gewinnen. An diesem Punkt können jetzt erste grobe Anpassungen vorgenommen werden. Klassische Aspekte, auf die hier geachtet werden sollte, sind:

• Passen die Überläufe der Bereiche zueinander?
• Folgen Bilder direkt auf Bilder?
• Sind Textwüsten entstanden?
• Ergibt die Reihenfolge der Elemente inhaltlich Sinn?
• Bereiche werden in diesem Schritt ihre Position tauschen. Viele Aspekte werden erst sichtbar, wenn die Seite als Ganzes präsentiert wird.
• Bedeutung von Wireframing für die Usability einer Website

Wireframes legen den Grundstein für eine gute Usability. Nur eine Seite, deren Elemente von Grund auf mit Blick auf den Nutzer entworfen wurden, wird eine stimmige User Journey vorweisen können. Da die Seite beim Wireframing als Gesamtkonzept entworfen wird, liegt der Fokus auf dem Zusammenspiel der Elemente. Das verhindert holprige Benutzerführung und erlaubt es dem Nutzer, die Inhalte der Seite einfach und komfortabel zu konsumieren.

Ein weiterer essenzieller Vorteil, den das Wireframing für die Usability einer Seite bringt, ist die Möglichkeit von Tests. Wireframe sind gut verständlich und erlauben es auch nicht beteiligten Personen, den Entwurf zu verstehen. Oft entdecken unbeteiligte Tester Aspekte, die bei der Entwicklung übersehen wurden. Zwar sind gute Onlinemarketer durchaus in der Lage, das Nutzerverhalten anhand von Prototypen vorauszusagen, aber selten mit 100% Trefferquote. Aus diesem Grund sind Tests mit Wireframes viel wert. Kandidaten für solche Tests sind zum Beispiel Kollegen aus anderen Abteilungen. Für tatsächliche Kunden sind Wireframes in der Regel zu unfertig, es sei denn, sie werden klar als Entwurf kommuniziert.

Vorteile von Wireframing

Im Folgenden werden die Vorteile von Wireframing aufgelistet.

Einfache Handhabung

Wireframing ist per Definition einfach zu handeln. Die Darstellung ist großteils standardisiert und durch zurückgestelltes Design ist es auch nicht nötig, Fähigkeiten im Bereich Webdesign vorweisen zu können. Die unkomplizierte Natur von Wireframing erlaubt es die Methode oft und ohne große Barrieren bei der Konzeption einzusetzen. Auch ungeübte Personen können so leicht Prototypen erstellen.

Eignung für Teamarbeit

Da Konzepte beim Wireframing in einfach verständliche Formen gebracht werden können, eignet es sich besonders für Teamarbeit. Statt die Anordnung der Elemente aufwendig per Sprache beschreiben zu müssen, wird sie einfach visuell anhand eines Prototypens dargestellt und kann diskutiert werden. Brainstorming und die daraus resultierenden Ergebnisse können schnell und unkompliziert umgesetzt werden.

Niedrige Kosten

Vor allem Wireframing an Whiteboards und per Hand ist kostentechnisch zu vernachlässigen. Es werden keine besonderen Programme oder Qualifikationen benötigt. Allein die Personalkosten fallen an. Doch selbst bei High Fidelity Wireframes halten sich die Kosten in Grenzen, da hier nur ein professionelles Tool hinzukommt, aber das Grundgerüst immer noch das gleiche ist.

Prozessoptimierung

Wireframing ist ein hervorragendes Tool, um komplizierte Prozesse mit viel Hin und Her zu vereinfachen. Statt direkt mit der Designarbeit zu beginnen und den Entwurf hin- und herzuschicken, werden die Grundkonzepte im Wireframe festgelegt. Ist das Wireframe fertig, bedarf es nur noch eines Webdesigners, der ein Designkonzept auf Basis des Prototypens umsetzt. Durch die klaren Vorgaben des Wireframes kommt es an dieser Stelle auch seltener zu Missverständnissen. Statt sich auf vage Kommunikation zu verlassen, kann der Webdesigner das Wireframe immer wieder zurate ziehen.

Onboarding

Vor allem, wenn die Erstellung der Website im Auftrag eines Kunden geschieht, ist Onboarding ein wichtiger Schritt, bei dem Wireframes helfen können. Für die Projektplanung entwickelte fertige Webdesigns laufen Gefahr zu komplex und so schwer verständlich zu sein. Verrennt man sich bei der Konzeption, war sehr viel Arbeit umsonst. Wireframes hingegen sind sehr viel günstiger und erfüllen den gleichen Zweck. Bei der Projektplanung können sie genutzt werden, um als Prototypen zu dienen, ohne mit Design abzulenken. Ein Bonus ist, dass sie dem Kunden das Gefühl vermitteln, sehr viel früher im Prozess einzusteigen und somit mehr Einfluss auf die Erstellung des Endproduktes zu haben.

Wireframing Tools und Methoden

Im Folgenden wird bei den Wireframing Tools in analoge und digitale Methoden und Tools unterschieden:

Zettel und Stift

Auch wenn es etwas altmodisch klingt, ist es doch der erste Schritt vieler Wireframes. Vor allem in Meetings und Kreativgesprächen ist es meist einfacher, ein Konzept aufs Blatt zu zeichnen. Für diese frühe Konzeption ist es oft auch gar nicht notwendig komplexere Tools zu benutzen.

Whiteboard

Perfektes Brainstorming-Mittel für Entwicklungen von Wireframes im Team. Elemente lassen sich leicht löschen, verändern oder umstrukturieren. Alle beteiligten Personen können aktiv am Prozess teilnehmen. Bei entsprechender Boardgröße können hier auch mehrere volle Wireframes miteinander verglichen werden.

Papierkarten

Für Personen denen es wichtig ist, bei Kreativprozess etwas zum Anfassen zu haben eignen sich Papierkarten. Die Elemente des Wireframes werden ausgeschnitten und dann frei per Hand arrangiert. Zwar ist die Vorbereitung etwas aufwändiger, aber die Karten können projektunabhängig wiederverwendet werden.

Digitales Wireframing

Nun kommen wir zu einigen digitalen Wireframing Tools:

Balsamiq

Balsamiq verkörpert die Philosophie des Wireframings. Es bietet die gewohnten Wireframing-Elemente und verfügt über eine leicht zu benutzende Benutzeroberfläche. Die Ergebnisse sehen leicht verspielt und skizzenartig aus, erfüllen dabei aber komplett die Anforderung an ein Low Fidelity Wireframe. Das Tool verfügt über eine zeitlich begrenzte, kostenlose Testversion. Je nach Projektumfang wird danach ein monatlicher Betrag fällig.

Sketch

Sketch ist ein umfangreiches Design-Programm zur Planung von Webseiten. Als solches bietet es neben der Möglichkeit, Wireframes zu erstellen, eine Vielzahl an zusätzlichen Designmöglichkeiten. Vor allem, wenn Wireframing und spätere Designarbeit in einem Tool stattfinden sollen, eignet sich Sketch. Neben einer zeitlich begrenzen Testversion kann Sketch entweder gegen Vollpreis gekauft oder per monatlicher Zahlung im Team verwendet werden. Sketch läuft exklusiv auf macOS.

Axure

Axure RP belegt die gleiche Nische wie Sketch. Es wird als umfangreiche Prototyping-Software beworben, die den kompletten Entwicklungsprozess einer Website abbildet. Wireframing ist hier also nur ein Teil eines größeren Ganzen. Die Software läuft sowohl auf PC als auch auf macOS. Die zeitlich begrenzte Testversion mündet bei Axure in einem monatlich bezahlbaren Paket.

Adobe Xd

Mit Adobe Xd hat auch der Softwareriese Adobe seinen Hut in den Webdesign-Ring geworfen. Neben den tatsächlichen Designfunktionen wirbt Adobe Xd vor allem mit der Arbeit im Team. Das Tool ist vor allem für High Fidelity Wireframes geeignet, da es viele Möglichkeiten bietet, Interaktion darzustellen. Adobe Xd gibt es als kostenlose Version mit stark begrenzten Projekten und Teammitgliedern. Erweiterungen können gegen monatliche Bezahlung freigeschaltet werden.

Photoshop

Auch wenn es sich bei Photoshop nicht um ein klassisches Wireframing Tool handelt, kann es diesen Zweck doch erfüllen. Da vor allem Low Fidelity Wireframes wenig Komplexität mitbringen, können die Elemente in Photoshop gut dargestellt werden. Vor allem Personen, die schon mit Photoshop arbeiten, können sich die Suche nach Tools sparen, indem sie ihre Wireframes in Photoshop umsetzen. Das Gleiche gilt natürlich für sämtliche Bildbearbeitungsprogramme mit dem gleichen Funktionsumfang wie Photoshop. Neben der Testversion bietet Photoshop diverse Preisoptionen für Personengruppen und Unternehmen an.

Relevanz von Wireframes für das Online-Marketing

Der Entwurf einer Website via Wireframe legt den Grundstein für viele Aspekte, die im Onlinemarketing essenziell sind. Mit guter Planung können hier sowohl spätere Kopfschmerzen verhindert und Chancen genutzt werden.

Benutzerführung

Die Art, in welcher der Nutzer sich in der Website bewegt, ist ausschlaggebend für die Art und den Erfolg von Marketingmaßnahmen. Das Wissen, an welchen Stellen Angebote am besten platziert werden sollten, um ein Maximum an Erfolg zu erzielen, ist für eine gute Marketingstrategie unerlässlich. Die Websiteelemente können durch Wireframing so platziert werden, dass die Nutzer ohne es als unangenehm zu empfinden in die richtige Richtung geleitet werden.

Conversionoptimierung

In vielen Fällen sind Ziele des Onlinemarketings eine direkte Umwandlung eines Nutzers in einen Kunden. Dieser Vorgang wird Conversion genannt. Die Optimierung dieser Conversions wird maßgeblich durch den Aufbau der Seite und folgend durch den Prozess des Wireframings beeinflusst. Vor allem Bereiche wie der above-the-fold Bereich sind wichtig für den Marketingerfolg einer Seite. Hier sollte die Gestaltung des Bereiches daraufhin optimiert sein, den Nutzen zur Conversion zu bringen und ihn nicht mit Alternativen abzulenken. Der Grundstein hierfür wird im Wireframing gelegt, indem bestimmt wird, welche Elemente sich above-the-fold aufhalten.

Zusammenarbeit mit anderen Bereichen

Bei der Erstellung von Webseiten kommen viele Bereiche zusammen. Design, UX, Programmierung und Onlinemarketing arbeiten alle am gleichen Produkt. Da jede Disziplin ihre eigenen Anforderungen an eine Website hat, kann es hier leicht zu Herausforderungen in der Priorisierung kommen. So möchte das Design-Team vielleicht ein Element above-the-fold einfügen, weil es die Ästhetik verbessert. Lenkt das Element aber von dem für das Onlinemarketing-Team wichtigen Conversionbutton ab, kann es schnell zu Reibung kommen. Wireframing ist ein guter Rahmen, um genau solche Herausforderungen zu bewältigen. Es kann besprochen werden, was den einzigen Bereichen wichtig ist und ein Kompromiss ist das Ergebnis. Folglich ziehen danach alle Bereiche an einem Strang, denn sie haben den Kompromiss mitgetragen.