Besser und schneller entwerfen mit Rapid Prototyping

• 12 min read
• Design,Web Design,Wireframing,Prototyping
• Zum Offline-Lesen gespeichert
• Auf Twitter teilen, LinkedIn

Das alte Sprichwort „ein Bild sagt mehr als tausend Worte“ trifft genau das, worum es beim User Interface Prototyping geht: die Verwendung von Bildern zur Beschreibung von Design- und Entwicklungsspezifikationen im Wert von Tausenden von Worten, die detailliert beschreiben, wie sich ein System verhalten und aussehen sollte. Im Rahmen eines iterativen Ansatzes für das Design von Benutzeroberflächen ist Rapid Prototyping der Prozess, bei dem der zukünftige Zustand eines Systems, sei es eine Website oder eine Anwendung, schnell nachgebildet und mit einem breiteren Team von Benutzern, Interessengruppen, Entwicklern und Designern validiert wird.

Dieses schnelle und iterative Vorgehen führt zu einem frühen und häufigen Feedback im Prozess, wodurch das endgültige Design verbessert und die Notwendigkeit von Änderungen während der Entwicklung verringert wird.

Weitere Lektüre auf SmashingMag:

• Optimieren Sie Ihr Design für Rapid-Prototyping-Tests
• Wählen Sie das richtige Prototyping-Tool
• Content-Prototyping im Responsive Webdesign
• Wiederbelebung von Benutzeroberflächen-Prototypen (ohne Zombies zu schaffen)

Prototypen reichen von groben Papierskizzen bis hin zu interaktiven Simulationen, die wie das Endprodukt aussehen und funktionieren. Der Schlüssel zum Erfolg von Rapid Prototyping liegt in der schnellen Überarbeitung auf der Grundlage von Rückmeldungen und in der Verwendung eines geeigneten Prototyping-Ansatzes. Rapid Prototyping hilft Teams, mit verschiedenen Ansätzen und Ideen zu experimentieren, es erleichtert die Diskussion durch visuelle Darstellungen anstelle von Worten, es stellt sicher, dass alle Beteiligten ein gemeinsames Verständnis haben, und es reduziert das Risiko und vermeidet fehlende Anforderungen, was schneller zu einem besseren Design führt.

Der Rapid Prototyping Prozess

Rapid Prototyping beinhaltet mehrere Iterationen eines dreistufigen Prozesses:

1. Prototyp Die Beschreibung der Lösung durch die Benutzer wird in Mock-Ups umgewandelt, wobei Standards für die Benutzererfahrung und bewährte Verfahren berücksichtigt werden.
2. Überprüfen Teilen Sie den Prototyp mit den Benutzern und bewerten Sie, ob er ihren Bedürfnissen und Erwartungen entspricht.
3. Verfeinern Sie auf der Grundlage des Feedbacks die Bereiche, die verfeinert oder weiter definiert und geklärt werden müssen.

Der Prototyp beginnt in der Regel klein, mit einigen wenigen Schlüsselbereichen, die nachgebildet werden, und wächst über mehrere Iterationen in Breite und Tiefe, wenn die erforderlichen Bereiche ausgebaut werden, bis der Prototyp fertiggestellt und zur Entwicklung des Endprodukts übergeben wird. Die Schnelligkeit des Prozesses zeigt sich am deutlichsten in den Iterationen, die je nach Umfang des Prototyps von Änderungen in Echtzeit bis hin zu Iterationszyklen von einigen Tagen reichen.

Scoping A Prototype

Das Wort Prototyp weckt oft Vorstellungen von einer codierten, voll funktionsfähigen Version einer Anwendung oder Schnittstelle. Schnelle Prototypen sind nicht dazu gedacht, sich zu voll funktionsfähigen Lösungen zu entwickeln, sondern sollen den Benutzern dabei helfen, die Benutzererfahrung des Endprodukts zu visualisieren und zu gestalten. Vor diesem Hintergrund sollten Sie sich bei der Planung eines Prototyps auf einige wichtige Punkte festlegen, bevor Sie mit dem Prototyping beginnen.

Was muss prototypisiert werden?

Gute Kandidaten für das Prototyping sind komplexe Interaktionen, neue Funktionen und Änderungen in Arbeitsablauf, Technologie oder Design. Das Prototyping von Suchergebnissen ist zum Beispiel dann sinnvoll, wenn Sie erheblich von der Standardsuche abweichen wollen, z. B. um eine facettierte Suche oder die Möglichkeit der Vorschau eines Dokuments einzuführen, ohne die Suchergebnisse zu verlassen.

Wie viel sollte prototypisiert werden?

Eine gute Faustregel ist, sich auf die 20 % der Funktionalität zu konzentrieren, die 80 % der Zeit genutzt werden, d. h. auf die Schlüsselfunktion, die am häufigsten verwendet wird. Denken Sie daran, dass es beim Rapid Prototyping darum geht, zu zeigen, wie etwas funktionieren wird oder wie das Design später aussehen wird, ohne das gesamte Produkt zu prototypisieren.

Find the Story

Nachdem Sie die Bereiche identifiziert haben, die prototypisiert werden sollen, verweben Sie sie zu einem oder mehreren Szenarien: Identifizieren Sie die kohärenten Pfade durch die Benutzererfahrung, die der Prototyp simuliert. Bei einer Website, die Schuhe verkauft, könnte ein Szenario darin bestehen, dass „Boring Joe“ genau die gleichen Nike-Laufschuhe kauft, die er vor sechs Monaten gekauft hat, während ein anderes Szenario darin bestehen könnte, dass „Exploring Sam“ durch die Größen 10s stöbert, um ein Paar Oxfords und ein Paar Loafer zu finden, die ihn interessieren.

Planen Sie Ihre Iterationen

Der gesamte Prototyp wird in der Regel nicht in einer einzigen Iteration erstellt, sondern eher Stück für Stück. Ein guter Ansatz ist es, mit dem Prototyping in der Breite und Tiefe zu beginnen und dann in ausgewählte Bereiche der Lösung einzutauchen. Bei einer Website würde dies bedeuten, dass in der ersten Iteration die Homepage und die Landing Pages für die wichtigsten Bereiche erstellt werden (manchmal auch als horizontaler Prototyp bezeichnet) und dieser Rahmen dann überprüft und überarbeitet wird. Bei einer Website zum Herunterladen von Medien könnten dies die Schritte sein, die ein Benutzer durchläuft, um ein Video zu finden und herunterzuladen, oder die Art und Weise, wie er die Medien in seiner Online-Bibliothek verwaltet.

Wählen Sie die geeignete Fidelity

Fidelity bezieht sich darauf, wie sehr ein Prototyp der endgültigen Lösung ähnelt. Es gibt mehrere Dimensionen der Wiedergabetreue, und Prototypen können in jeder dieser Dimensionen irgendwo im Spektrum liegen. Je nach Stadium des Entwurfsprozesses und den Zielen des Prototyps sollten Sie für jede der folgenden Dimensionen die angemessene Wiedergabetreue wählen:

• Visuelle Wiedergabetreue (skizziert ↔ gestylt) Aussehen und Haptik sind die auffälligste Dimension der Wiedergabetreue eines Prototyps und können, wenn sie nicht richtig gewählt werden, die Überprüfung des Prototyps verzögern. Wenn man zu früh zu sehr ins Detail geht, werden sich die Nutzer auf das visuelle Design konzentrieren, was in der Anfangsphase nicht angebracht ist. Wenn der linke Navigationsbereich beispielsweise ein Fünftel eines 1024-Pixel-Bildschirms einnehmen soll, muss er nicht genau 204 Pixel breit sein, solange er im Prototyp proportional dargestellt wird. Im Laufe des Prototyping-Zyklus sollten Sie die visuelle Wiedergabetreue durch die Einführung von Stil-, Farb-, Branding- und Grafikelementen erhöhen.
• Funktionale Wiedergabetreue (statisch ↔ interaktiv) Zeigt der Prototyp, wie die Lösung funktionieren wird (statisch) oder scheint er voll funktionsfähig zu sein und auf Benutzereingaben zu reagieren (interaktiv)? Diese Dimension lenkt die Benutzer weniger ab, aber das Hinzufügen von Interaktivität in späteren Iterationen erhöht die Funktionstreue und ermöglicht die Verwendung des Prototyps für Usability-Tests, Schulungen und Kommunikation.
• Inhaltstreue (lorem ipsum ↔ realer Inhalt) Eine weitere Dimension, die die Benutzer oft ablenkt, ist der Inhalt, der im Prototyp angezeigt wird. Verschnörkelte Linien und Blindtexte wie „lorem ipsum“ sollten in der Anfangsphase des Prototyping vermieden werden. Bei der Verfeinerung des Prototyps sollte jedoch geprüft werden, ob der Blindtext durch echten Inhalt ersetzt werden muss, um ein Gefühl dafür zu bekommen, wie er sich auf das Gesamtdesign auswirkt.

Das Prototyping-Spektrum

Low Fidelity

Der schnellste Weg, mit dem Prototyping zu beginnen, ist auch der einfachste: Stift(e) zu Papier bringen. Das Skizzieren auf Papier ist eine Low-Fidelity-Methode, die jeder durchführen kann; es sind keine speziellen Werkzeuge oder Erfahrungen erforderlich. Das Skizzieren wird meist in den frühen Phasen eines Designzyklus eingesetzt und ist eine schnelle Methode, um grobe Modelle von Designansätzen und Konzepten zu erstellen und Feedback von den Benutzern zu erhalten. Papierprototypen sind ideal für Brainstorming und Konzeptualisierung und können allein in einem Büro mit einem Skizzenbuch oder in einer Gruppe mit einem Flipchart (oder Whiteboard) und Markern erstellt werden.

Papierprototypen sind statisch und haben in der Regel eine geringe visuelle und inhaltliche Wiedergabetreue. Dies zwingt die Benutzer dazu, sich darauf zu konzentrieren, wie sie das System verwenden werden, anstatt darauf, wie es aussehen wird, und es macht die Designer offener für Änderungen auf der Grundlage von Benutzerfeedback.

Low-Fidelity-Prototyping eignet sich für Rapid Prototyping. Es hat keine Lernkurve, sondern ermöglicht es, Änderungen einfach und schnell vorzunehmen.

Medium Fidelity

Wenn wir anfangen, computergestützte Tools wie Visio und Omnigraffle für Prototypen zu verwenden, erhöht sich die Wiedergabetreue in den meisten Bereichen, was zu Medium-Fidelity-Prototypen führt. Wireframes, Task Flows und Szenarien, die mit diesen Tools erstellt werden, sind zeitaufwändiger und mühsamer, sehen aber formaler und raffinierter aus. Zwar können visuelle Elemente wie Branding, Farben und Stil eingeführt werden, doch halten sich Prototyper oft davon fern und konzentrieren sich stattdessen auf die Darstellung des Verhaltens der Anwendung. Interaktivität kann durch die Verknüpfung von Seiten oder Bildschirmen simuliert werden, aber die Funktionstreue ist hier bestenfalls mittelmäßig. Diese Prototypen sind am besten geeignet, um festzustellen, ob die Bedürfnisse der Benutzer erfüllt werden und ob die Benutzererfahrung optimal ist.

Es gibt zwei Gründe, warum man einen Prototyp mit mittlerer Wiedergabetreue absichtlich nicht wie einen Prototyp mit mittlerer Wiedergabetreue aussehen lässt:

• Der erste ist, dass man durch die Verwendung von Balsamiq oder skizzenhaften Visio-Schablonen, die den Prototyp mit geringer Wiedergabetreue aussehen lassen, die Benutzer dazu zwingt, ihn als Entwurf oder unfertige Arbeit zu betrachten, anstatt als ein ausgefeiltes und fertiges Produkt.
• Zweitens: Wenn Sie dem Prototyp eine hohe visuelle Wiedergabetreue verleihen (z. B. durch ein umfassendes, in Photoshop erstelltes Layout), bringen Sie den Benutzer dazu, sich auf das visuelle Design und das Erscheinungsbild zu konzentrieren, einschließlich Farbe, Schriftarten, Layout, Logo und Bilder.

Die Geschwindigkeit des Prototypings mit mittlerer Wiedergabetreue wird durch Vorlagen, Schablonen und wiederverwendbare Widgets und Elemente erreicht. Es wird schneller, je besser Sie die Werkzeuge Ihrer Wahl beherrschen.

High Fidelity

High-Fidelity-Prototypen sind am realistischsten und werden oft mit dem Endprodukt verwechselt, sind aber in der Regel zeitintensiv. Noch vor einigen Jahren bestand die einzige Möglichkeit, realitätsnahe Prototypen zu erstellen, darin, mit einer Programmiersprache zu programmieren, was häufig die Zusammenarbeit von Designer und Entwickler erforderte. Heutzutage können jedoch auch technisch nicht versierte Benutzer mit Hilfe von Tools zur Anwendungssimulation per Drag & Drop UI-Widgets erstellen, die die Funktionalität des Endprodukts simulieren, sogar für Geschäftslogik und Datenbankinteraktionen. Axure und iRise sind einige Beispiele für Anwendungssimulationstools, mit denen High-Fidelity-Prototypen erstellt werden können.

Diese Prototypen eignen sich, wenn eine hohe visuelle und funktionale Genauigkeit erforderlich ist, z. B. bei der Einführung einer neuen Technologie (z. B. bei der Umstellung von einer Mainframe-Anwendung – ja, die gibt es noch!) auf eine webbasierte Lösung. Die meisten dieser Prototypen können nicht in brauchbaren Code umgewandelt werden, aber sie dienen als hervorragende Referenz für Entwickler. Sie sind auch nützlich für die Durchführung von Usability-Tests und die Schulung von Benutzern.

High-Fidelity-Prototyping ist relativ schnell, wenn man den Grad der Interaktivität und der Wiedergabetreue bedenkt, und es kann durch die Verwendung von Drag-and-Drop-Simulationswerkzeugen beschleunigt werden. Darüber hinaus erleichtern einige dieser Tools das Einholen von Nutzerfeedback und die Dokumentation von Anforderungen, was den Designprozess weiter beschleunigt. Auch wenn Sie keine neue Programmiersprache erlernen müssen, haben diese Tools eine Lernkurve.

Auswahl eines Fidelity-Levels

Bei der Auswahl des Fidelity-Levels eines Prototyps gibt es keinen einzig richtigen Ansatz. Die meisten Entwürfe neuer Produkte beginnen am besten mit Skizzen und gehen dann zu Prototypen mit mittlerer oder hoher Wiedergabetreue über, je nach Komplexität des Systems und den Anforderungen an die Wiedergabetreue.

In der Zusammenarbeit mit einem bestimmten Kunden aus der pharmazeutischen Industrie gingen wir von Whiteboards zu interaktiven Prototypen mit hoher funktionaler und inhaltlicher Wiedergabetreue, aber geringer visueller Wiedergabetreue über. Dabei ging es weniger um das Erscheinungsbild als um die Einhaltung der Unternehmensrichtlinien.

Für einen anderen Kunden, diesmal aus dem Einzelhandel, musste unser interaktiver Prototyp eine hohe visuelle und funktionale Wiedergabetreue aufweisen. Die Inhaltstreue spielte keine Rolle, da sie die Inhalte wiederverwenden würden und bereits mit ihnen vertraut waren. Für sie waren das Erscheinungsbild und die interaktive Erfahrung wichtiger, da es sich um ihre erste Implementierung von SharePoint handelte und sie das Portal „nicht-SharePoint-mäßig“ aussehen lassen wollten!

Werkzeuge auswählen

Abhängig von Ihrem Ansatz haben Sie eine große Auswahl an Werkzeugen zur Verfügung. Dan Harrelson hat im Blog von Adaptive Path eine Liste beliebter Prototyping-Tools zusammengestellt.

Jedes Tool hat seinen eigenen Funktionsumfang und seine eigenen Stärken. Entscheiden Sie anhand Ihrer Bedürfnisse und der Anforderungen der Projekte, an denen Sie arbeiten, welches Tool am besten geeignet ist. Hier sind einige Fragen, die Sie bei der Evaluierung von Tools berücksichtigen sollten:

• Wie einfach ist es, das Tool zu erlernen und zu verwenden?
• Ist es flexibel, um Prototypen für Web-, Paket- und kundenspezifische Softwareanwendungen sowie Desktop- und mobile Anwendungen zu unterstützen?
• Ist ein Repository mit wiederverwendbaren Schablonen, Vorlagen oder Widgets verfügbar?
• Wie einfach ist es, den Prototyp mit anderen zur Überprüfung zu teilen? Kann deren Feedback mit dem Tool erfasst werden?
• Wie einfach ist es, spontan Änderungen vorzunehmen oder Feedback einzuarbeiten?
• Gibt es Funktionen für die Zusammenarbeit, z. B. die Möglichkeit, dass mehrere Personen gleichzeitig daran arbeiten können?
• Wie lauten die Lizenzbedingungen und -kosten?

Dos und Don’ts

Für den Anfang sollten Sie einige Punkte über effektives Rapid Prototyping beachten:

Tun Sie …

• Arbeiten Sie beim Rapid Prototyping mit Benutzern, Geschäfts- und IT-Stakeholdern zusammen. Sie geben nicht nur wertvolles Feedback, sondern erhalten auch ein Gefühl der Verantwortung für das Endprodukt.
• Verhindern Sie, dass sich der Prototyp schleichend entwickelt, indem Sie die Erwartungen für den Prozess festlegen, einschließlich derer, die den Zweck, die Genauigkeit, den Umfang und die Dauer betreffen. Erinnern Sie alle, auch sich selbst, daran, dass Rapid Prototyping ein Mittel zum Zweck ist, kein Selbstzweck.
• Bauen Sie bei der Erstellung interaktiver High-Fidelity-Prototypen und -Simulationen realistische Verzögerungen ein (z. B. für die Bildschirmaktualisierung oder das Durchlaufen von Transaktionsschritten), damit die Benutzer vom Endprodukt keine sofortigen Reaktionszeiten erwarten.
• Wiederverwenden, wiederverwenden, wiederverwenden. Für computergestütztes Prototyping bedeutet dies, wiederverwendbare Vorlagen, Schablonen, Muster und Widgets für künftige Projekte zu speichern.
• Am wichtigsten ist es, jede Prototyp-Prüfungssitzung mit dem Hinweis zu beginnen, dass es sich nur um einen Prototyp, ein Mock-up, und nicht um die eigentliche Lösung handelt. Dadurch werden die Benutzer daran erinnert, dass es sich um ein laufendes Projekt handelt, sie werden zu Rückmeldungen ermutigt, und bei sehr realitätsnahen Prototypen wird verhindert, dass die Benutzer sie fälschlicherweise für eine funktionierende Lösung halten.

Don’t…

• Don’t prototype features or functionality that cannot be implemented – dies ist häufig ein Problem bei der Implementierung von Softwarepaketen. Im Zweifelsfall sollten Sie dies mit den Entwicklern abklären, bevor Sie beginnen.
• Betrachten Sie nicht jede Änderung oder Anforderung, die sich aus einer Prototypenüberprüfung ergibt, als neue Anforderung. Rapid Prototyping hilft bei der Erfassung fehlender Anforderungen, aber diese neuen Anforderungen sollten sorgfältig bewertet werden. Einige können implementiert werden, während andere auf eine spätere Version verschoben werden.
• Beginnen Sie die Prototyp-Review-Sitzungen nicht ohne klare Richtlinien für das Feedback. Geben Sie sehr genau an, welche Art von Feedback Sie suchen. (Sind die Schritte logisch angeordnet? Ist die Navigation klar und intuitiv?) Wenn nicht, seien Sie auf folgende Fragen vorbereitet: „Mir gefällt das Blau in der Kopfzeile nicht“ oder „Können wir nicht stattdessen diese Schriftart verwenden?“ oder „Können Sie das größer, fetter, in Rot und blinkend machen?“
• Sein Sie kein Perfektionist. In den meisten Fällen muss das Rapid Prototyping nicht zu 100 % perfekt sein, sondern nur gut genug, um allen ein gemeinsames Verständnis zu vermitteln.
• Stellen Sie nicht für alles einen Prototyp her. Meistens ist das auch gar nicht nötig.

Weitere Ressourcen

• Wenn Sie einen Anstoß brauchen, um mit dem Skizzieren zu beginnen, lesen Sie Dan Roams Buch The Back of the Servkin.
• Erfahren Sie mehr über Paper Prototyping in Carolyn Snyders Buch Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, eine Technik zum Erforschen und Verfeinern von Konzepten.
• Brauchen Sie Low-Fidelity-Inhalte? Generieren Sie Lorem Ipsum-Text für Ihren Prototyp.
• Möchten Sie Ihre Papierskizze originalgetreu aussehen lassen? Probieren Sie diese Web-, iPad- und iPhone-Schablonen aus.
• Skizzier- und Prototyping-Tools für iPhone-Apps
• Einfaches Skizzieren und Prototyping in Firefox mit dem Pencil-Add-on.
• Kostenlose druckbare PDF-Vorlagen für Skizzen, Wireframing und Notizen
• 50 kostenlose UI und Web Design Wireframing Kits, Ressourcen und Quelldateien

(al)