Was ist der Unterschied zwischen Sketches, Wireframes und Mockups?
Ich möchte in diesem Beitrag erklären was den Unterschied zwischen einem Sketch, einem Wireframe und einem Mockup ausmacht.
Zuerst muss man betonen: Wireframes sind nicht nur für das Web wichtig, auch wenn man von Wireframes häufig im Zusammenhang mit Webseiten liest. Wireframes sind essenziell für jegliche Art von Anwendung für die man eine Oberfläche benötigt. Ganz egal ob es sich um eine Webseite, eine Windows Desktopanwendung oder die Darstellung eines Navigationssystem im automotiven Umfeld handelt.
Sketches, Wireframes und Mockups sind alles kleine Teile des gesamten UX-Designprozesses. Zum UX-Designprozess selbst findet man unterschiedliche Phasen. Je nach Sichtweise und Einteilung können es vier bis zu sieben Schritte sein. Die Stanford University definierte sechs Phasen aus die der Designprozess besteht.
Sechs Phasen im Design Prozess (nach Standford University )
- Understand / Verstehen
- Observe / Beobachten, Befragen
- Point-of-View / Zusammenfassen, Storytelling
- Ideate / Ideengenerierung, Selektion
- Prototype / Prototypen, weitere Ideen generieren
- Test / Testen, Verfeinern der Prototypen
Eine andere Einteilung stellt die Phasen so dar:
- Research (User Interviews, Domain Research, Personas)
- Plan (Use Cases, User Journeys, Storyboards, Card Sorting)
- Design (Sketches, Wireframes, UI Styling, Design Patterns)
- Prototype (low-fidelity Prototypes)
- Test (Usability Testing, Heuristic Evaluation)
- Deliver (Clickable Prototype, Case Study, Documentation)
In diesem Beitrag möchten wir uns nur auf Wireframes und Mockups konzentrieren. Wir befinden uns somit in der Phase Protoype (nach Standford University) bzw. der Phase Design. Diese Phase beinhaltet wiederum unterschiedliche Elemente die einer bestimmten Reihenfolge unterliegen. Bestimmte Reihenfolge ja und nein! Der gesamte Designprozess ist iterativ, also wiederholend. Man wiederholt bestimmte Phasen so oft, bis sie zum erwünschten Ergebnis führen.
Reihenfolge
- Sketch / Skizze
- Wireframe
- Mockup
- Prototyp
Sketch
Sketches oder zu deutsch „Skizzen“ sind immens wichtig und sollten im Designprozess nicht fehlen. Im Unterschied zu einem Wireframe sind Skizzen nur grob gehalten und unsauber. Es ist sogar erwünscht, dass die Skizzen keine Perfektion ausstrahlen. Es geht hier ausschließlich um das Verständnis was der Benutzer sieht. Man kann es auch als eine Art grafisches Brainstorming bezeichnen. Sketches kann man mit Stift & Papier, auf einem Whiteboard oder auch digital erstellen. Ich rate jedoch eindringlich zu Stift & Papier zu greifen. Das Papier spüren, den Stift mit verschiedenen Stärken führen, hat Vorteile für die kreativen Gedanken. Skizzen sind die ersten Schritte im Designprozess und etwas, was jeder Designer tun sollte. Stop! Skizzieren ist nicht nur auf Designer beschränkt, sondern für jeden Entwickler, der für Oberflächen zuständig ist.
Es ist extrem hilfreich, sich weniger um Designästhetik zu sorgen und sich mehr auf die schnelle konzeptionelle Formulierung von Ideen zu konzentrieren.
Arbeitet man im Team, werden Skizzen von Teammitgliedern zusammen überprüft, um die besten Ideen zu vergleichen und zu konsolidieren. So gelangt man schneller zu besseren Ergebnissen.
Man muss kein Künstler sein
Das Tolle am Skizzieren besteht darin, dass man kein Künstler sein muss, um sie zu erstellen. Skizzieren dient nur dazu, Designkonzepte zu erforschen und zu erklären. Wenn ich Entwickler in meinem Umfeld beobachte, skizzieren leider nur sehr wenige, was ich für einen Fehler halte. Gibt es einen UI Designer oder Grafiker der die Oberflächen gestaltet, schadet es nicht wenn der Entwickler vorab eine Skizze anfertigt und gemeinsam bespricht. So ist er im Entwicklungsprozess besser eingebunden. Ist der Entwickler hingegen aber am Designprozess beteiligt oder entscheidet gar über das UI, ist skizzieren unverzichtbar.
Vorteile
+ Zeitersparnis im Workflow-Prozess.
+ Ideal zum Brainstorming von Ideen und zur Zusammenarbeit im Team.
+ Verfeinert den späteren Wireframing-Prozess
+ Hilft bei der Bewertung der Machbarkeit von Features und beim Ausschluss von Layout- und Funktionalitätsproblemen.
Fazit
Einige der besten Ideen beginnen mit einer Skizze. Man denke nur an die vielen erfolgreichen Startup`s die nur mit einer Skizze auf einer Serviette begonnen hatten. Skizzieren ist ein leistungsfähiger Prozess, der immer hilft, die besten Ideen und Lösungen für ein Designproblem zu finden. Es ist ungleich schwieriger, ein komplexes Design aus dem Hut zu zaubern, ohne die Details zu klären. Deshalb bleibt das Skizzieren ein wichtiger Schritt im Design- und Entwicklungsprozess.
Wireframes
Wireframe bedeutet so viel wie „Drahtgerüst“, welches den Ursprung im Begriff der Schneiderpuppe hat. Als Wireframe wird der konzeptionelle Entwurf einer Applikation oder Internetseite während der Planungsphase bezeichnet. In diesem Entwurf werden nur die nötigsten Elemente der Anwendung dargestellt.
Man kann diese wieder in zwei Gruppen einteilen:
1. Statische Wireframes
Unter einem statischen Wireframe versteht man eine schematische Darstellung von nur einer einzelnen Oberfläche. Für diese werden die grundlegenden Elemente definiert.
Das Layout eines statischen Wireframes sollte konzeptionell sein.
2. Dynamische Wireframes
Dynamische Wireframes bestehen aus mehreren Seiten. Die einzelnen Seiten werden dynamisch miteinander verknüft und bilden somit einen grob funktionellen Prototypen. Man kann hier auch von „click-dummies“ sprechen.
Nicht zu verwechseln mit einem fertigen Prototypen.
Wichtigkeit von Wireframes
Wireframes sollten nicht übersprungen werden. Sie sind für den gesamten Designprozess immens wichtig. Wireframes sind leicht zu verstehen und sollen dafür sorgen, dass alle Personen, die im Entwicklungsprozess eingebunden sind, die „selbe Sprache“ sprechen. Der Auftraggeber hat vielleicht ein anderes Verständnis von der Oberfläche wie der Entwickler. Werden Anforderungen und Wünsche strukturell dargestellt, können sich alle Beteiligten bildlich vorstellen, wie die zukünftige Oberfläche aussehen wird und worüber man spricht.
Zum Einen kann man sich schneller ein besseres Bild der zukünftigen Oberfläche machen und zum Anderen ist eine Abstimmung mit dem Auftraggeber einfacher. Das verringert das Risiko erheblich, komplett in die falsche Richtung zu planen oder gar zu entwickeln. Projekte werden dadurch verkürzt und schneller fertiggestellt.
Tools
Es gibt viele Möglichkeiten Wireframes zu erstellen. Softwareseitig wären hier Balsamiq, Axure, UXPin, Adobe XD oder Omnigraffle zu nennen. Nicht jede Software ist für jedes Betriebssystem erhältlich. Zu den einzelnen Programmen werde ich noch gesondert einen Beitrag verfassen.
Mood Board
Es gibt die Sonderform „Mood Board“ die zwischen Wireframe und Mockup angesiedelt ist. Durch die Verwendung von Mood Boards kann es in bestimmten Fällen möglich sein, Mockups zu überspringen.
Mood Boards sind im Grunde Wireframes die schon Farbe, Bilder und Typographie beinhalten. Oft kommt dies vor, wenn Designer sich nicht strikt an die Abgrenzung Wireframe und Mockup halten oder halten wollen. Ich persönlich bin kein Fan von Mood Boards.
Mockups
In der Regel spiegeln Mockups die Designauswahl für Layouts, Farbschemas, Typografie, die Visualisierungen der Navigation und die Gesamtatmosphäre des Produkts wider.
Sie sind meist eine Darstellung des Erscheinungsbildes eines Produkts in mittlerer bis hoher Wiedergabequalität und zeigt Grundlagen seiner Funktionalität. Mockups füllen die visuellen Details (Typographie, Farben, Branding) aus und sind in der Regel statisch. Wenn man sich solch ein Modell ansieht, bekommt man eine gute Vorstellung davon, wie das Endprodukt aussehen wird und eine ungefähre Vorstellung davon, wie es funktionieren könnte. Auch wenn die Funktionen noch nicht funktionieren. Ein Mockup kann als ein hochwertiger visueller Entwurf angesehen werden.
Im Entwurfsprozess kommen Mockups am Ende der Low-Fidelity-Phase (Low-Fidelity: geringe Wiedergabetreue) und am Beginn der High-Fidelity-Phase.
Mockups sind Attrappen und ähneln dem fertigen Produkt schon etwas. Dies liegt an der Verwendung von richtiger Typographie, ersten Farben und teilweise schon korrekten Bildern, sollte es sich um eine Webseite handeln. Die Texte können Blindtexte in Form von „Lorem Ipsum“ sein oder schon korrekte Texte. Ich rate zu korrekten Texten. Es kann so nicht passieren, dass alles fertig ist und beim Austausch der Blindtexte zu grafischen Unschönheiten kommt.
Vorsichtig muss man sein, da Mockups von Auftraggebern oder Vorgesetzten oft als schon fast fertig missverstanden werden. Dies ist natürlich nicht der Fall.
Wireframes vs. Mockups
Wireframe
+ früher konzeptioneller Entwurf, Konzeptidee
+ keine Farben (nur schwarz/weiß/grau)
+ keine Typographie
+ keine Bilder (nur Platzhalter)
+ keine Texte
+ statische Darstellungsform
+ Erstellung vom UX Designer
+ Seitenstruktur
+ dient zur Veranschaulichung
+ macht Elemente greifbar für alle stakeholder
+ Augenmerk auf Anordnung
+ Größe und Platzierung der Elemente wichtig
Mockup
+ „look & feel“ der Anwendung
+ erste Farben
+ Typographie
+ erste Bilder
+ Blindtexte (lorem ipsum), ggfs. richtige Texte
+ Modell mit rudimentärer Funktionalität
+ Erstellung vom UI Designer
+ kein finales Design
+ wird oft als schon fast fertig missverstanden
Fazit
In der Produktentwicklung (digital wie analog) sind die beschriebenen Methoden nicht mehr wegzudenken. Ist man als Entwickler an der Oberflächenentwicklung beteiligt, sind Sketches, Wireframes und Mockups sehr wichtig und dürfen nicht übersprungen werden. Sie vereinfachen den Weg zum Prototypen und können die Entwicklungszeit deutlich verkürzen. Man investiert anfangs vielleicht mehr Zeit, bekommt diese aber später vielfach zurück bezahlt. Durch bessere Produkte und dadurch weniger Probleme!