Prototyping

Ein Prototyp ist ein Modell, welches das geplante Layout oder die Struktur einer Website darstellt. Wie detailliert das Modell sein soll, hängt vom jeweiligen Einsatzzweck ab: Prototypen können genutzt werden, um Ideen und Entwürfe im Team zu diskutieren oder einem Auftraggeber zu vermitteln. Sie sind sehr hilfreich, um Nutzer in den Entwicklungsprozess einzubeziehen und die Qualität von Entwürfen früh zu testen (User Centered Design). Dabei können zusätzliche Nutzungsanforderungen aufgedeckt werden, die sonst vielleicht übersehen worden wären.

Wann?

Ein Prototyp sollte früh konzipiert und im Projekt eingesetzt werden. So kann mit der iterativen Entwicklung die Qualität von Websites verbessert werden.

Wer?

Erste Prototypen sind einfache Ideenskizzen, die jeder erstellen kann. Für die Gestaltung der Struktur und der Abläufe einer Website sind oft Informationsarchitekten und Interaktionsdesigner zuständig.

Wo?

Während der Besprechung auf einer Serviette bis hin zu professionellen Prototyping-Tools, welche die online Zusammenarbeit unterstützen.

Tools?

Zur Unterstützung des Prototyping gibt es viele sowohl einfache als auch professionelle Tools. Als einfache Lösung kann auch Standard-Software wie MS Powerpoint verwendet werden.

Vorbereitung

Um einen Prototyp zu erstellen sollte im Vorfeld das Ziel einer Website, die Zielgruppe (z.B. durch Personas oder Interviews), die wichtigsten Use Cases und eine Navigationsstruktur (z.B. durch Card-Sorting) festgelegt werden.

Prototypen gibt es in unterschiedlichen Detaillierungsgraden, von sehr einfachen Entwürfen und Skizzen (low-fidelity) bis hin zu detaillierten grafischen Darstellungen oder mit umfangreichen Interaktionsmöglichkeiten ausgestatteten Prototypen (high-fidelity). Welche Ausprägung am besten geeignet ist, hängt von der Zielsetzung und der Entwicklungsphase ab.

Soll der Prototyp für Nutzertests eingesetzt werden, kann eine fortgeschrittene grafische Gestaltung bei Nutzern zu hohe Erwartungen in Bezug auf die Funktionalität wecken, die dann zwangsläufig enttäuscht werden. Besser ist es, zunächst die Seitenaufteilung, das Wording und die Abläufe darzustellen, und dabei das Design bewusst einfach zu halten.

Ein detaillierter Prototyp, der aussieht wie ein Endprodukt, kann es außerdem schwierig machen, einem Auftraggeber zu vermitteln, dass noch umfangreiche Entwicklungsarbeiten notwendig sind.

Durchführung

Erste, einfache Prototypen dienen als Basis für die Weiterentwicklung des Konzepts. Prototypen werden getestet, Verbesserungsvorschläge im Entwicklerteam und mit dem Kunden besprochen und so zunehmend detailliertere Versionen erstellt.

Einfache Prototypen

Bei der Neukonzeption einer Website wird normalerweise mit low-fidelity Prototypen begonnen, die wenige Details sowohl in Bezug auf das Design als auch die Funktionalität enthalten. Sie helfen, eine erste Vorstellung von der Website zu bekommen und zeichnen sich durch ihre schnelle und somit kostengünstige Entwicklung aus. 

Papier-Prototypen: Die wichtigsten Elemente der Website werden grob auf Papier gezeichnet - auch mit Papierprototypen lassen sich bereits Nutzertests  durchführen.

Storyboards: Grafische, comic-artige Ablauf-Beschreibungen von möglichen Interaktionsszenarien

Wireframes: Skizzen, welche die Umrisse der Seitenelemente und damit die Aufteilung und das Layout einer Website darstellen

Testen mit Papier-Prototypen

Im Sinne des User Centered Design Prozesses dienen Prototypen vor allem dazu, Nutzer bei der Entwicklung eines Produkts einzubeziehen und Usability-Tests durchzuführen. Bei einem Test mit Papier-Protoypen werden den Testpersonen die angefertigten Skizzen gezeigt. Diese sollen mündlich wiedergeben, wie sie den Prototyp nutzen würden, was eine gewisse Abstraktionsfähigkeit verlangt. Eine weitere Person hat die Aufgabe, das System zu simulieren und auf die Benutzeraktionen zu reagieren indem die Elemente des Prototypen neu arrangiert oder zusätzliche Seiten vorgelegt werden.

Detaillierte Prototypen

In späteren Phasen der Entwicklung kann dazu übergegangen werden Prototypen mit mehr Details im Design oder mehr Funktionalität zu versehen. Der Übergang von low- zu high-fidelity Prototypen ist dabei als fließend zu betrachten. Komplexe Prototypen können auch schon auf der Basis der späteren Entwicklungsplattform (etwa PHP, Ruby On Rails) erstellt werden.

Click-Dummys: Enthalten Links und es kann wie in einer richtigen Website navigiert werden (statische HTML-Dokumente oder PDFs). Die Umsetzung des Designs spielt eine untergeordnete Rolle.

Ergebnis

Als Zwischenergebnisse entstehen Prototypen mit unterschiedlichem Detailgrad. Ziel des Prototyping ist es, frühzeitig Probleme zu erkennen und ein Produkt zu entwickeln, das den Bedürfnissen des Nutzers entspricht. Dies wird durch ein iteratives Vorgehen erreicht, bei dem in jeder Entwicklungsphase Usability-Tests mit dem Prototyp durchgeführt werden (siehe auch Usability in Web-Projekten).

Informationen im Internet

Berichte

Tools und Vorlagen

  • Einfaches Prototyping-Tool (Open Source): Pencil
  • Online-Tool für das kollaborative Erstellen von Wireframes in "Sketch"-Optik: Balsamiq
  • Sammlung von Vorlagen für Wireframes in Powerpoint und Visio: IA Tools (unter der Überschrift Wireframes)

Weiterführende Literatur

  • Pearrow, Mark: Web Usability. Handbook. 2nd Ed. Boston: Charles River Media (2007)
  • Rossen, Mary-Beth; Carroll, John M.: Usability Engineering. Scenario-Based Development of Human-Computer Interaction. San Francisco: Morgan Kaufmann Publishers (2002)
  • Cato, John: User-Centered Web Design. Harlow: Addison-Wesley (2001), S.206 ff