Prototyping (Wireframes, Mockups & Co)

Die nächste Methode, die wir in unserer Blogreihe zum User Centered Design vorstellen möchten, ist das sogenannte Prototyping.

Prototyping, was ist das?

Ziel des Prototypingverfahrens ist es eine graphische Repräsentanz von Ideen, Funktionen und Inhalten entstehen zu lassen, die mit Projektbeteiligten und Benutzern diskutiert und so schrittweise optimiert werden kann. Je nach Detailgrad der Prototypen und je nachdem wie ähnlich er der fertigen Anwendung ist, wird zwischen Prototypen niedriger Fidelität (Low-Fidelity Prototyp) oder hoher Fidelität (High-Fidelity-Prototyp) unterschieden. Bei der Konzeption von Informationssystemen wird diese Methodik meistens in frühen Entwicklungsstadien eingesetzt, um die Systemanforderungen abzubilden, kurzfristiges Feedback von Benutzern einzuholen, oder die Kommunikation zwischen Projektbeteiligten, Benutzern und Entwicklern zu verstärken (vgl. Hoyos 1987: 329ff.). 

Für die verschiedenen Arten von Prototypen existieren diverse Begriffe, von denen an dieser Stelle drei genannt und erläutert werden sollen:

  • Papierprototypen: Der Papierprototyp stellt eine einfach zu erstellende Prototypenvariante dar, für den lediglich Papier und Stift zum Einsatz kommen, um den Aufbau einer Seite grob zu skizzieren.
  • Wireframes (dt. etwa: „Seitengerüst“): Ein Wireframe enthält bereits die wesentlichen Inhalte einer einzelnen Seite eines Systems. Es wird bei einem Wireframe jedoch bewusst auf die Integration von Design verzichtet. Ein Wirframe enthält deshalb noch keine oder nur wenige Farben und Verläufe. Stattdessen werden typischerweise die Gestaltung des Headerbereichs, der Navigation und des Inhaltsbereichs über Wireframes dargestellt.
  • Clickdummy: Ein Clickdummy wird erstellt, indem einzelne Wireframes miteinander verlinkt werden. Der Wireframe einer Systemstartseite kann beispielsweise wesentliche Navigationseinträge verlinken, so dass bei einem Mouse-Klick auf den Menüpunkt ein weiterer Wireframe aufgerufen und dargestellt wird. Durch den Clickdummy kann somit die Navigations- und Informationsarchitektur des Systems vor dargestellt und mit Benutzern getestet werden Sobald im Projektverlauf auch Designentwürfe für das System vorhanden sind, können diese Screens zu einem graphischen Clickdummy verlinkt werden.
Beispiel für einen Papierprototypen
Beispiel für einen Papierprototypen

Warum eignet sich die Methode für den UCD-Prozess in Bibliotheken?

Häufig wird bei Projekten zur Entwicklung von Informationssystemen zu früh auf Design-Entwürfe oder gar die Implementierung des finalen Systems gesetzt. Sinnvoll ist hingegen die Umsetzung von Benutzeranforderungen zunächst in Papierprototypen und später in Wireframes und Clickdummys, sowie die iterative Evaluation und Optimierung unter Einbeziehung der zukünftigen Benutzer. Aufgrund der Verfügbarkeit von Testpersonen empfiehlt sich der Einsatz von Protoypen im Bibliothekskontext, weil problemlos mit kleinen Benutzergruppen erste Ideen oder Funktionen überprüft werden können. Während der Evaluation in anderen Kontexten oft zu wenig Zeit eingeräumt wird, weil die Rekrutierung geeigneter Testpersonen vermeintlich viel Aufwand bedeutet, lässt sich im Bibliothekskontext nicht leugnen, dass sich Testpersonen oft nur wenige Räume entfernt befinden. Diese Chance sollte genutzt und mit Prototypen verschiedener Stadien (Papierprototypen, Wireframes, Clickdummy) getestet und iterativ optimiert werden.

Was benötigen Sie für das Prototyping?

Neben der Möglichkeit Papierprototypen mit Papier und Stift zu erstellen, existieren inzwischen verschiedene Prototyping-Tools speziell für die Wireframeerstellung für unterschiedliche Zielgruppen und Projektfragestellungen.

Worauf sollten Sie achten?

  • Testen Sie früh, vermeiden Sie Überraschungen: Scheuen Sie sich nicht, bereits mit ersten Papierprototypen ein Benutzerfeedback einzuholen. Wenn Sie für verschiedene Prozessschritte eines Systems Papierprototypen vorliegen haben, besteht sogar die Möglichkeit, bestimmte Stellen (z.B. einen gezeichneten Button) durch die Benutzer „anklicken“ zu lassen und die nächste Seite in Form eines weiteren Papier-Entwurfs anzuzeigen.
  • Lernen Sie, Prototypen wegzuwerfen: Nichts fällt schwerer, als eigene Arbeit wortwörtlich in den Papierkorb zu verwerfen. Eine zentrale Eigenschaft von Prototypen besteht jedoch darin, dass sie ggf. schnell angepasst oder bei entsprechender Indikation vollständig verworfen werden können, um Platz für einen neuen Entwurf zu machen. Machen Sie sich zur eigenen Motivation bewusst, dass das Wegwerfen in diesem frühen Projektstadium einfacher, zeit- und ressourcensparender funktioniert, als zum Zeitpunkt eines fertig programmierten Systems, das aus Benutzersicht schwer oder gar nicht zu bedienen ist und folglich wenig Akzeptanz findet.
  • Drucken Sie die Wireframes für die Evaluation mit Benutzern aus und stellen Sie einen Stift zur Verfügung: Häufig ist zu beobachten, dass bei Wireframe-Tests mit ausgedruckten Wireframes, die Testteilnehmer zum bereitgelegten Stift greifen, um eigenen Ideen direkt in den Wireframe zu skizzieren.
  • Verwenden Sie Schablonen: Die meisten Prototyping-Tools bieten Vorlagen an, die Ihnen viel Arbeit abnehmen. Sie können beispielsweise ein vorgefertigtes Dropdown-Menü wie gewünscht platzieren und passen nur noch die Einträge des Menüs an.

Weiterführende Informationen und hilfreiche Tools zu Wireframes finden Sie hier: