Skizzen, Wireframes, Designentwürfe, High-Resolution-Visuals: Für die Entwicklung interaktiver Anwendungen sind Prototypen unverzichtbar. Wir erklären die Unterschiede und sagen, welcher Typ sich für welche Aufgabe eignet.
Indem man mehrere Papierprototypen zu einem Storyboard kombiniert, lässt sich das Verhalten eines digitalen Interfaces darstellen
In der Entwicklung digitaler Produkte führt kein Weg an Prototypen vorbei. Ihr Ziel und Zweck ist es, eine grafische Repräsentanz für Ideen, Funktionen und Inhalte entstehen zu lassen, um Feedback einzuholen und das Produkt zu verbessern. Die größte Herausforderung im Interactive Design birgt meist das Interface: Userfreundlich sollte es sein, intuitiv, am besten selbsterklärend (siehe auch unseren Artikel »Dos & Don’ts im UX Design«, PAGE 07.2016, Seite 38 ff.).
Der Entwicklungsprozess wirft permanent Fragen auf, die es mittels Prototyping zu klären gilt: Welche Elemente nimmt der User wahr? Wie reagiert ein Objekt auf ihn und nach welcher Logik das gesamte System? Ist diese Logik für den User nachvollziehbar? Macht die Bedienung Spaß oder langweilt sie, frustriert sie ihn sogar? Prototypen helfen, realistische Antworten auf Basis von Erfahrungswerten zu finden, um auf diese Weise die beste Designentscheidung zu treffen.
Aber welche Art von Prototyp eignet sich für welche Phase eines Interactive-Projekts? Was macht ihn aus? Sollte er möglichst ausgearbeitet daherkommen oder reicht eine simple, schnelle Ausführung? Sind einfache Prototypen womöglich überholt, wo man doch auch mit dem richtigen Tool schnell interaktive Prototypen zusammenklicken kann? Ist es nun der Designer, der Entwickler oder der UX-Experte, der sich um ihre Anfertigung kümmert?
Für die ersten Entwürfe genügen meist Handskizzen oder Scribbles
Testen mit allen Mitteln von Low- bis High-Fidelity
Prototypen zeichnen sich in Bezug auf Aussehen und Funktionen durch einen unterschiedlichen Grad an Wiedergabetreue (Fidelity) aus. Für die ersten Entwürfe genügen meist Handskizzen oder Scribbles. In diese Kategorie des Lo-Fi-Prototypings fallen auch die noch recht grob gehaltenen, meist schon digital erstellten, monochromen Wireframes, die aber bereits Struktur und Funktionalitäten in den Fokus rücken. Diese schematischen Entwürfe müssen noch gar nicht bunt und fancy sein, visuelle Elemente bleiben hier meist außen vor, auch Lorem-ipsum-Texte sind gang und gäbe.
Mit Axure, Balsamiq, Justinmind oder UXPin stehen einige Tools mit einer großen Auswahl an Elementen (Buttons, Links, Menüs et cetera) zur Verfügung, die es erlauben, schnell ein Interface zu basteln. Über die Integration weiterer Designelemente lassen sich die Wireframes dann auch zu ausgefeilten Klickdummys verfeinern.
In die Phase des Hi-Fi-Prototypings tritt ein Projekt ein, sobald Mockups angefertigt werden
– das sind detaillierte Designentwürfe, bei denen Farben, Formen, Texturen, Abstände und Schriften hinzukommen. Einen technischen Standard dafür gibt es nicht, ein Mockup lässt sich als PowerPoint-Präsentation, als HTML-Entwurf (mit einem der erwähnten Prototypingtools) oder als Grafik erstellen. So kann man sich zum Beispiel mittels Photoshop dem angestrebten Visual Design nähern. Sollen Website oder App animiert sein, demonstrieren Videodummys, etwa in der Animationssoftware After Effects, sowohl dem Kunden wie auch dem Programmierer konkret, wo die Reise hingehen soll.
Teamgespräche und Konzepttests brauchen kein Bling-Bling
Ganz so schematisch und linear läuft der Prozess in der Praxis dann allerdings nicht ab, denn welche Art von Prototyp jeweils am besten geeignet ist, hängt von mehreren Faktoren ab: von der Zielgruppe und deren fachlichem Hintergrund, vom Erkenntnisinteresse und von der Entwicklungsphase.
»Um im Team Ideen zu sammeln oder zwischen Konzepter und Entwickler im Pingpong hin und her zu werfen, gibt es nichts Besseres als einfache Skizzen von Hand«, sagt Miriam Scheibe, selbstständige UX-Designerin in Hamburg. Selbst die Darstellung von Verhalten und Interaktionen ist mithilfe von Scribbles möglich, indem man mehrere Screens als Flows gruppiert und einige Blätter nebeneinander an die Wand hängt, zum Beispiel um zu zeigen, was passiert, wenn der User einen Check-out-Prozess durchläuft. Da man in dieser frühen Phase lediglich das Konzept verifiziert, braucht es dafür kein Visual Design.
»Je vager eine Idee ist, desto einfacher sollte der Prototyp sein«
so Miriam Scheibe. Und wem Handskizzen zu weit weg vom Produkt sind, weil er für ein frühes Testing eine konkretere Form benötigt, der kann seine Papiervorlagen auch abfotografieren und mit einer Prototyping-App wie Marvel in einen simplen interaktiven Website- oder App-Prototyp verwandeln. Sogar Gesten wie Wischen, Zoomen oder Pinchen stellt Marvel bereit. Diesen Prototyp optimiert man iterativ bis zur Finalisierung und Abnahme durch den Kunden, und der Designer kann nahtlos im ihm vertrauten Programm weiterarbeiten.
Detailtreue intern, Eye Candy fürs Offizielle
Wireframes dienen der internen Kommunikation, um die Informationsarchitektur zwischen Konzeption, Visual Design und Entwicklung zu vermitteln. Das geht zwar auch mit einer starren PDF-Datei, doch bieten viele Tools weit mehr: Anstelle eines üppigen Pflichtenhefts, das keiner lesen mag, erstellen immer mehr Agenturen interaktive Wireframes, die das Verhalten der Anwendung simulieren. Ausgeklügelte Prototypingtools wie Axure spielen sogar simultan eine Word-Spezifikation aus und ermöglichen durch die Integration eigens erstellter Designs eine visuelle Opulenz, die aus dem groben Wireframe einen grafisch ausgearbeiteten Klickdummy macht.
Überall dort, wo nicht nur intern und auf einem gemeinsamen fachlichen Level kommuniziert wird, sind visuelle Ausarbeitungen notwendig. »Hat das Team sich in der Konzeptionsphase geeinigt und will beim Head of Product oder Abteilungsleiter ein Okay einholen, muss die Darstellungsform konkreter werden«, erläutert Miriam Scheibe. »Denn diese Personen haben in der Regel nicht viel Zeit, man muss die Idee also rüberbringen wie in einem Elevator Pitch. Für den Fall, dass Zeit und Budget fürs Photoshop-Design fehlen, kann man auch Wireframes ausschmücken, indem man Hintergründe, Grafiken, Schriften oder Farben integriert.«
Auch wenn Agenturen beim Kunden pitchen oder Start-ups vor Venture-Capital-Gebern präsentieren, sollte man besser auf Hi-Fi setzen und nicht auf das Abstraktionsvermögen des Publikums vertrauen. In solchen Situationen zählen fulminante Ästhetik und imposantes Look-and-feel immer noch mehr als ausgeklügelte Funktionalitäten und Klickwege.
Auch Marketingabteilungen wollen meist früh etwas Beeindruckendes sehen.
Es empfiehlt sich also früh zu überlegen, welcher Prototyp zum konkreten Projekt und Designprozess passt. In PAGE 07.2016 berichten die UX-Expertinnen Miriam Scheibe, Astrid Wunsch und Alina Schlaier aus ihrem Arbeitsalltag.
Prototyping: Condor Handscribble
Für die Fluggesellschaft Condor entwickelte die Kölner Digitalagentur denkwerk einen Relaunch der Buchungswebsite. In den ersten
handgezeichneten Entwürfen interner Brainstorming-Sessions standen neben der Sitzplatzbuchung noch andere Elemente auf der Seite, beispielsweise diverse Upselling-Angebote.
1/4
Prototyping: CONDOR Wireframe
Dieser vom Informationsarchitektn in Axure erstellte monochrome schematische Entwurf setzt die Vorlage detaillierter um und beschreibt einzelne Features, Zustände, Interdependenzen oder – wie hier – das Verhalten der Sitzplatzübersicht.
2/4
Prototyping: Condor Designskizzen
Die Photoshop-Grafik nutzt bereits Elemente des Condor-Corporate-Designs und visualisiert die Idee, die Sitzplatzbelegung im gesamten Flugzeug auf einer Seite darzustellen. Auf Basis dieser Skizzen machte denkwerk User-Testings mithilfe von Papierprototypen.
3/4
Prototyping: Condor Layouts
Die Tests zeigten, dass die Platzübersicht auf kleinen Screens die Darstellung und Usability beeinträchtigte. So wechselte denkwerk für die Kundenpräsentation zu einer scrollbaren Ansicht. Später folgten lediglich Font- und Farbanpassungen, die Informationsarchitektur blieb dieselbe und diente den Entwicklern zusammen mit dem Wireframe als Programmiervorlage.
4/4
Prototypen & Prototypingtools
Was passt zu welcher Projektphase?
Low-Fidelity Funktion: Mit Scribbles und groben Wireframes kann man unkompliziert und schnell Feedback zu neuen Interface-Ideen einholen und in agilen Kreationsprozessen experimentieren. Für externe Testings helfen konkretere Formen. Ausarbeitungsgrad: Einfache Entwürfe ohne Anspruch
auf Vollständigkeit und grafische Verbindlichkeit, die sich schnell ändern und ergänzen lassen. Tools: Stift und Papier, Flinto; Marvel; Proto.io
High-Fidelity Funktion: Bei Hi-Fi-Prototypen handelt es sich um detaillierte Designentwürfe, um interaktive Klickdummys mit ausgereiftem Design und um Videos mit Grafikanimationen oder Screencasts. Sie eignen sich, um vor Investoren oder Kunden zu präsentieren – inklusive Look-and-feel des digitalen Services oder Produkts. Ausarbeitungsgrad: Beschränkt auf zwei bis drei wichtige, en détail gestaltete Seiten Tools: After Effects, Photoshop; InVision; Justinmind; Sketch
Programmiert mit Spezifikation Funktion: Voll funktionsfähige interaktive Wireframes, bei denen die Interfaceelemente, ihre Anordnung und speziell der Screenflow bereits verbindlich festgelegt sind – oft mit simultan ausspielbarer Word-Spezifikation. Auch das Verhalten (Animationen, Responsiveness et cetera) ist
klar erkennbar, was die Kommunikation an der Schnittstelle von Design und Entwicklung wesentlich erleichtert. Ausarbeitungsgrad: Alle Funktionen und Elemente inklusive ihrer Anordnung sind definiert, nur die Textebene ist offen. Tools:Axure; UXPin; Justinmind und InVision (URLs siehe oben)
