So geht Prototyping richtig

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.



Prototyping, Interactive Design
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 ein­zuholen 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 Fra­gen auf, die es mittels Prototyping zu klären gilt: Wel­che 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 nach­vollziehbar? 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 Pha­se eines Interactive-Projekts? Was macht ihn aus? Soll­te 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 interak­tive 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 ste­hen 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 bas­teln. Über die Integration weiterer Designelemen­te 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 hin­zu­kom­men. Einen technischen Standard dafür gibt es nicht, ein Mockup lässt sich als PowerPoint-Prä­sen­ta­tion, als HTML-Entwurf (mit einem der erwähn­ten 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 Erkennt­nis­interesse 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ändi­ge 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 ver­wan­deln. 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 naht­los 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 Pflich­tenhefts, das keiner lesen mag, erstellen immer mehr Agen­turen interaktive Wireframes, die das Ver­halten der Anwendung simulieren. Ausgeklügelte Pro­totypingtools 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 Ausarbeitun­gen notwendig. »Hat das Team sich in der Konzep­tions­phase geeinigt und will beim Head of Product oder Abteilungsleiter ein Okay einholen, muss die Darstel­lungsform konkre­ter werden«, erläutert Mi­riam Scheibe. »Denn diese Personen haben in der Regel nicht viel Zeit, man muss die Idee also rüberbringen wie in einem Ele­vator Pitch. Für den Fall, dass Zeit und Budget fürs Photoshop-Design fehlen, kann man auch Wirefra­mes 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 aus­geklügelte Funktionalitäten und Klickwege.

Auch Marketingabteilungen wollen meist früh etwas Be­eindrucken­des sehen.

Es empfiehlt sich also früh zu überlegen, welcher Prototyp zum konkreten Projekt und Designprozess passt. In PAGE 07.2016 berichten die UX-Expertin­nen Miriam Scheibe, Astrid Wunsch und Alina Schlaier aus ihrem Arbeitsalltag.

 

 

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 experimen­tieren. 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, PhotoshopInVision; 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)

 




Kommentieren

Einfach mit dem PAGE Account anmelden oder Formular ausfüllen

Name *

Email *

*Pflichtfeld

Ihr Kommentar *

 
 

Das könnte Sie auch interessieren