Skizzen und Storyboards

Prototyping sollen vor allem bei Design-Entscheidungen helfen. Am Beginn jedes Prototypings steht daher die Frage: Was will man mit dem Prototyp überprüfen? Geht es darum, ein erstes Layout zu finden? Dann helfen in der Regel Skizzen zentraler UI-Ansichten. Dabei spielen konkrete Inhalte und Größen keine Rolle: Gerade oder wellige Linie stellen oft die Texte dar, Rechtecke oder Kreise visualisieren Bilder und Grafiken. Wichtig sind hingegen Fragen wie: Was ist der zentrale Inhalt und wie setzt man diesen in Szene? Wo und wie lassen sich User-Interface-Elemente wie Listen, Buttons, Drop-down-Menüs und anderes platzieren? All dies lässt sich einfach und schnell anhand von Skizzen erörtern.

Als Nächstes sollte man Layouts mit verschiedenen Abläufen testen. Dazu eigenen sich Skizzen, die als Storyboards einen konkreten Anwendungsfall visualisieren. Dabei reicht es anfangs, drei bis fünf Kernfunktionalitäten abzubilden, die den Großteil der Nutzung ausmachen. Mit Hilfe der Storyboards lässt sich überprüfen, wie Nutzer navigieren und wo sie sich gerade in einer Anwendung befinden.

Wireframes

Zu Begin der Featurekonzeption nutzt der Produktmanager Wireframes um sich selber oder Entwicklern, Designern und Textern einen rudimentären Eindruck von der Idee bzw. dem Feature zu vermitteln. Die visualisierung stellt die Seitenstruktur und Featureumsetzung sehr grob und schematisch dar. Ein Wireframe fällt in das Aufgabenfeld eines User Experience Designers und beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typography, Bilder oder Grafiken. Es handelt sich um eine skizzenähnliche Beschreibung und Darstellung (Gittermodell) von Funktionen und Layout und setzt den Rahmen für die spätere Ausarbeitung des Designs. Wireframes dienen zudem auch zu einer ersten Überprüfung der Machbarkeit, des Navigationskonzepts und der Usability.

 Der Wireframe wird in schwarz-weiß-grau angefertigt und gleicht dadruch einer Skizze oder Bleistiftzeichnung. Dieses Art der Visualisierung ist sehr schnell, einfach und günstig zu erstellen. Dazu genügt Papier und Bleistift oder eine entsrechende Wireframe-Software.
Der Detailgrad kann sich dabei von Projekt zu Projekt stark unterscheiden. Es sollte nur das Nötigste dargestellt werden, um die oben genannten Punkte zu erfüllen. Im Vergleich zur Skizze sind Wireframes der erste schematische Designentwurf des Frontends. Sie sind unser erstes digitales Produkt auf dem Weg zum fertigen Interface, das bereits eine konkrete Darstellung der Benutzeroberfläche bieten. Konkret heißt das: Texte und Bilder haben bereits die finale Größe und sind in richtiger Relation zueinander angeordnet. Ansonsten arbeitet man in der Regel mit Blindtexten und Platzhaltern für Bilder in Form von grauen Rechtecken. Designvariablen wie Farbigkeit, Schriftart, Formen, Texturen und Effekte sind noch nicht definiert, um sich an diesem frühen Punkt der Konzeption nicht von solchen Details ablenken zu lassen. Denn es geht darum, zu bestimmen, welche Elemente es gibt und wie diese in Verbindung zueinander stehen, damit die Funktionalität verständlich für den Benutzer ist.

Dieses Art der Visualisierung ist sehr schnell, einfach und günstig zu erstellen. Dazu genügt Papier und Bleistift oder eine entsrechende Wireframe-Software.

Mockups

Wenn das Feature und die Userinteraktion anhand von Wireframes hinreichend besprochen und abgestimmt ist, kann im nächstem Schritt das Wireframe in ein Mockup übertragen werden.  Ein Mockup ist in der Webentwicklung im Prinzip der nächste Schritt nach dem Wireframing und baut auf dessen Struktur auf. Hier ist nun der Designer an der Reihe und darf mit Farben, Typography, Bildern und Grafikelementen arbeiten und so ein vorläufiges Design mit einzelnen visualisierten Elementen entwickeln.

Dabei wird der Wireframe in das Layout und Design der Webseite bzw. Software überführt. Ein Mockup enhält neben der Funtkion auch den Inhalt/test sowie das Design der Seite und stellt damit ein Visual Design dar. Sie können beispielsweise verwendet werden um Feedback von Stakeholdern einzuholen.

Der Detailgrad ist um einiges höher als in Wireframes und das Mockup sollte im besten Fall schon look and feel der fertigen Website vermitteln, stellt aber noch nicht das finale Design dar. Aus dem Modellbau bekannt als Attrappe ähnelt es dem finalen UI visuell, weist allerdings nur Teilfunktionalität auf. Oft werden Mockups auch als High-Fidelity-Prototypen bezeichnet, da hier nicht nur das grobe Gerüst (also Layout) eine Rolle spielt, sondern auch die bereits erwähnten Designvariablen. Farben, Formen, Texturen, Abstände und Schriftwahl sind nun relevant. Doch auch Detailfragen wie die Rundung eines Buttons gehören dazu. 

Prototypen bzw. Klickdummys

Etwas aufwändiger sind KlickDummys. Prototypen sind ein genaue und detailreiche Visualisierung des geplanten Features bzw. Produktes. Zusätzlich zum Mockup ermöglichen Sie die Simulation der Userinteraktion mit dem Produkt. Prototypen werden oft auch als Klickdummys bezeichnet. Sie eignen sie sich ideal für User Tests, um die Funktion und Wirksamkeit vor der eigentlichen Feature-Programmierung zu überprüfen. Klickdummys müssen aber nicht immer unbedingt programmiert sein. Hauptsache es sind Designs mit einer simulierten Interaktion: Es könnte auch mit der Maus durch Bildabfolgen klicken und so tun, als wäre das nächste Bild das Resultat der Aktion. Oder bei einem Klick auf einen Button wird eine neue Grafik angezeigt und damit ein Seitenwechsel simuliert. In der Regel versteht man unter Click-Dummys allerdings eine programmierte, teilfunktionale Demonstration der Anwendung. Prototypen können in der Regel mit geringem Entwicklungsaufwand in HTML und CSS programmiert oder mit einer Prototyp-Software realisiert werden.