UX-Wireframing

In Interface Design, Tools, User Experience, Workflow Posted

Ein ganzheitliches Interface zu gestalten, geht oftmals weit über das designen eines ästhetische ansprechenden Screens hinaus. Schließlich soll eine Anwendung nicht nur schön aussehen, sondern auch handfeste Funktionen haben, auf diese sich der Nutzer verlassen kann. Eine reibungslose User Experience verspricht so langfristige Kundentreue und stärkt das Vertrauen in das Produkt.

Das Wireframing ist ein hilfreicher und nahezu unverzichtbarer Schritt im UX-Design-Prozess, denn die Navigation und die entsprechende Gestaltung des Interfaces stehen erstmals im Fokus. Als anwendungsbezogener Visual Guide können ästhetische Details wie das Design einzelner Elemente vorerst getrost unberücksichtigt bleiben. Es stellt sich vielmehr die Frage, welcher Content kommuniziert und auf welche Weise dieser auf den verschiedenen Seiten arrangiert werden soll. Kurz gesagt: es geht um die Informationsarchitektur.

Wireframes in drei Etappen erklärt

Ähnlich dem Großteil der Entwicklungsschritte einer Anwendung, weist natürlich auch das Wireframing eine Vielzahl an Überlappungen von UX- und UI-Design auf. Eine konsequente Kommunikation mit den verschiedenen Teammitgliedern ist also immer dann lohnenswert, wenn die Optimierung der User Experience im Spiel ist. Ähnlich verhält es sich natürlich auch bei der Konstruktion eines Grundgerüsts für die zukünftige Anwendung. Das gute an der Sache das Konzept Wireframe ist so simpel, dass es sich in nur drei Etappen erklären und dementsprechend einfach mit den Kollegen umsetzen lässt.

1. Seiten aufgliedern

Im Rahmen des Sketchings wurde die Grundidee hinter der zukünftigen Anwendung bestenfalls schon zu Papier gebracht. Der ungefähre Nutzen des Produkts steht also fest und ist bereit für die Ausarbeitung en detail – zumindest was die Informationsarchitektur angeht. Im Fokus steht dabei die Interaktion des Users mit dem Interface, dargestellt in der einfachsten Form. Als eine Art Drahtmodell sollen so für die Anwendung relevante Elemente skizziert sowie deren Funktion stichwortartig zusammengefasst werden. Nicht unberücksichtigt bleiben darf an dieser Stelle die Navigation auf der Benutzeroberfläche. Eine grobe Strukturierung ermöglicht es so, einen ersten Überblick über die potentielle User Journey zu erhalten.

2. Elemente anordnen

Die ersten Schritte des User Experience Designs funktionieren beinahe ausschließlich nach dem Baukastenprinzip. Dem Entwurf einzelner Elemente im Sketching folgt so das zusammenbasteln hin zu einem vollständigen Produkt. Eine Anwendung ähnelt dabei dem menschlichen Gesicht. Statt Augen, Nase und Mund definieren Header, Body und Footer den Charakter des Interfaces. Während diese Anordnung natürlich immer beibehalten wird, sollte sich die Ausarbeitung des Inhalts an der Benutzerführung orientieren. Elemente, die besonders relevant für die Verständlichkeit des Produkts sind, gilt es so hervorzuheben und kurz zu erläutern. Ablenkende Details wie Farben oder Textblöcke sind allerdings tabu, da nur das grobe Gerüst der Anwendung beleuchtet werden sollte.

3. Wireframes digitalisieren

Anders als beim Sketching stützt sich das Wireframing nicht auf eine analoge Umsetzung mit Stift und Papier. Die Informationsarchitektur der einzelnen Pages steht im Vordergrund. Folglich bietet es sich auch an, auf ein passendes Tool zurückzugreifen, welches das Drahtgerüst der Anwendung anschaulich darstellt und die Dauer der Umsetzung möglichst gering hält. Programme wie Lucidchart spezialisieren sich nicht nur auf die Erstellung von Diagrammen, sondern greifen Entwicklern auch bei der Planung von Wireframes unter die Arme. Innerhalb des digitalen Baukastens kann so auf eine Palette an vorgefertigten Templates in sämtlichen Endformaten zurückgegriffen werden. Aber auch individuelle Designs lassen sich durch das breite Angebot an Elementen simpel umsetzen. Die Handhabung ähnelt dabei gängigen Programmen wie InDesign.

Wireframe vs. Mockup

Leider ist die Liste an verwirrendem Fachjargon rund um das Thema UX-Design-Prozess noch nicht ganz abgeschlossen, denn dem Wireframe folgt noch eine weitere Visualisierungform: das Mockup. Diese basieren quasi auf den Ergebnissen des Wireframings und umfassen bereits erste detaillierte Elemente zur ästhetischen Umsetzung der Anwendung. Ähnlich einem Styleguide sollen so erstmals gestalterische Komponenten wie Schriftarten oder Farbspektren ausgetestet und modellhaft festgehalten werden. Denn genau darum geht es bei der Konzeptualisierung eines Mockups: die Erarbeitung eines Modells. Die Rohfassung muss dabei lediglich in seiner Optik dem Endprodukt ähneln. Die Ausarbeitung der einzelnen Funktionen obliegt den Entwicklern hingegen wiederum einem darauffolgenden Prozessschritt.

Wireframes kurzgefasst

Die Fertigstellung der finalen Anwendung muss nicht in Lichtgeschwindigkeit, sondern sollte vielmehr durchdacht erfolgen. Das Wireframing bietet sich dabei besonders an, Ideen vom Reißbrett mit den geplanten Zielen des Produkts abzugleichen. Mit der Konzentration auf die Benutzerfreundlichkeit des Interfaces stellt es die verschiedenen Komponenten der Website in Form eines reduzierten Drahtgerüsts dar. Das Output: eine hilfreiche Basis für die Ausarbeitung erster Prototypen, die ebenso gut der Lokalisierung von Dysfunktionen nützt. Kosten- und zeitaufwändige Redesigns lassen sich so bereits in einer frühen Entwicklungsphase umgehen.

• Was sind Website-Wireframes? Lucidchart 2020
• Ein Wireframing-Leitfaden für Einsteiger Envato.com am 18.06.2012
• What is the difference between a sketch, wireframe, mockup, and prototype? FarShore am 10.05.2017