Schnelle Prototypisierung mit Papier Prototypen

Prototyping erlaubt es schnell zu sichtbaren Ergebnissen und damit zu frühzeitigem direkten Feedback vom Kunden zu kommen. Dieses Feedback kann dann in einem agilen Loop wieder in den nächsten Prototyp integriert werden. Aber selbst Prototyping benötigt eine gewisse Zeit. Ein initiales Projektsetup muss erstellt werden sowie ein initialer Funktionsumfang erdacht und umgesetzt werden.

Auf die Erstellung eines initialen Konzeptes bzw eines Sets an Ideen könenn wir leider nicht verzichten. Via Paper Prototyping können wir allerdings innerhalb eines Tages mehrere Iterationen inklusive Erhebung und Einbindung von Kundenfeedback durchführen. Das ermöglicht es uns schon vor dem Start der Programmierung einen entwickelten und getesteten Prototypen zu erhalten.

Agenda

  1. Benötigte Materialien
  2. Vorgehensweise

 

Benötigte Materialien

  1. Papier
  2. Stifte in genau 4 Farben (schwarz, blau, rot, grün) (z.b. Stabilo Pen 68)
  3. Klarsichtfolie oder Kreppband
  4. Doppelseitiges Klebeband & Sticky Tack (Bostik Blu-Tack, Uhu Patafix, Tesa Tack, Pritt Poster Buddy o.ä.)
Papier:

Generell gilt hier: je größer desto besser. Die Leute wollen den Prototypen anfassen und mit ihm arbeiten. Auch sind am Workshop mehrere Personen beteiligt. Darum ist es wichtig großflächig zu arbeiten, um allen eine gute Sicht und direkte Einflussnahme zu ermöglichen.

A3 oder A2 bieten sich als Basis für den Prototypen an. Darüber hinaus ist es sehr hilfreich von vornherein mehrere Größen zur Hand zu haben um nicht aufwendig schneiden zu müssen.

Stifte

Für den Workshop werden genau 4 Farben benötigt:

  • schwarz dient als Basisfarbe um die Umrisse des eigentlichen Prototyps zu zeichnen
  • blau signalisiert eine Interaktionsmöglichkeit ( basierend auf der gerlernten Mechanik des WWW bezüglich links )
  • rot signalisiert etwas schlechtes/falsches wie z.B. einen Fehler
  • grün signalisiert etwas gutes wie z.B. einen Erfolgsmeldung

Durch die farbliche Limitierung ist es sowohl Probanden als auch Testern schnell möglich den Prototyp und die Interaktionsmöglichkeiten zu erkennen und zu nutzen.

Klarsichtfolie bzw. Kreppband

Diese beiden Elemente helfen Interaktivität über das Klicken hinaus zu simulieren. Wenn man Klarsichtfolie z.B. auf einen Text-Input klebt kann der Proband ihn mit einem Stift wieder und wieder beschreiben. Falls keine geeigneten Stifte bzw. Löschmittel vorhanden sind funktioniert dies auch sehr effektiv mit Kreppband das man immer wieder überkleben kann.

Doppelseitiges Klebeband bzw. Sticky Tack

Um Elemente frei kombinieren zu können müssen sie teilweise fest und teilweise temporär fixiert werden können. Sticky Tack (Klebeknete) ist eine simple Lösung um verschiedene Papierelemente miteinander zu verknüpfen. Gleichzeitig kann man die Elemente jederzeit wieder Trennen und neu kombinieren. Doppelseitiges Klebeband hilft feste Element zu verbinden, welche sich nicht mehr ändern sollen oder es hilft bewegliche Elemente (z.B. ein DropDown) so zu fixieren, dass sie sich bei Interaktion nicht lösen.

Der Platzhirsch bei Sticky Tack ist Bostik Blu.tack. Alternativen aus dem deutschen Raum sind: UHU Patafix, Tesa Tack und Pritt Poster Buddy

Vorgehensweise

  1. Papier Prototypen entwerfen
  2. Papier Prototypen mit einem Probandenpaar testen
  3. Feedback aus der ersten Runde einarbeiten
  4. Schritte 2+3 beliebig oft wiederholen (mindestens noch 1 mal)
Papier Prototypen entwerfen

Bevor es an das Testen eines Prototypen geht muss dieser überhaupt erst einmal konzipiert und erstellt werden. Dazu bedient man sich der oben erwähnten Materialien. Der Prototyp wird nach den aktuellen Ideen und Mutmaßungen entwickelt. Das Raster und die grundlegenden festen Elemente werden in schwarz augezeichnet; mögliche Interaktionen werden dann mit blau definiert. Freie Module wie Popups, neue Dialoge nach Benutzereingabe o.ä. können direkt auf einem zurechtgeschnittenen Papierstück vorbereitet werden und mit Klebepunkten versehen werden.

Papier Prototypen mit einem Probandenpaar testen

Für die Durchführung benötigen wir neben den beiden Probanden und dem Moderator noch einen “Computer”. Eine Person fungiert als fiktiver Computer. Während des Testens wird es Interaktion und auch unvorhergesehene Aktionen geben. Auf diese Aktionen geht der “Computer” ein, indem er den Prototypen entsprechend manipuliert. Zum Beispiel kann er auf einen Klick hin einen neuen (vorbereiteten) Dialog auf den Prototyp legen um den Nutzer weiter in der Aktion zu halten. Nicht alle Aktionen der Nutzer sind vorhersehbar. Gerade in den ersten Durchläufen des Testens, passiert es häufig, dass einer der Probanden eine ungeplante Aktion durchführt. Dann ist es am “Computer” ad hoc eine entsprechende Antwort zu geben. Vielleicht muss er schnell einen komplett neuen Dialog entwerfen um auf eine bestimmte Nutzereingabe zu reagieren. Um den Probanden zu signalisieren, dass der “Computer” arbeitet, hilft es sich ein post-it mit einer Sanduhr oder ähnlichem Ladezeichen auf die Stirn zu kleben. Dies hilft die Immersion voranzutreiben und lockert das Szenario gleichzeitig auf.

Dem Probandenpaar werden zum Testen vom Moderator mehrere explorative Aufgaben gestellt, wie zum Beispiel: Versuche dich bitte in der Anwendung zu registrieren. Auf dem Lösungsweg, werden die Probanden viele verschiedene Sachen ausprobieren und abstruse Dinge tun oder versuchen. Genau diese Informationen sind die gesuchten und sollten vom Moderator gewissenhaft dokumentiert werden. Auf den Moderator fällt weiterhin noch die Aufgabe die Immersion der Probanden konstant voranzutreiben und die Computer-Metapher konstant aufrecht zu halten. Auch ist es oft nötig die Probanden zu ermutigen sich frei im Prototypen zu bewegen und viele Sachen einfach auszuprobieren.

Nach jedem erfolgten Testlauf sollte man sich die Zeit nehmen und das unmittelbare Feedback in den Prototypen integrieren. Erwarteten die Probanden einen Button oder Dialog? Die entsprechenden Elemente sollten in den Prototypen integriert werden. Waren die Probanden an einer Stelle ratlos? Hier könnte womöglich ein Hilfe-Dialog helfen.

Auch hier wird wie am Anfang wieder mit Annahmen gearbeitet, wenn es keine konkreten Feedbacks zu verarbeiten gibt. Die Evaluierung findet dann in der nächsten Testrunde statt.

In dieser Weise, kann man schon an einem Tag innerhalb von 2-4 Testdurchläufen einen einigermaßen stabilen Prototypen entwickeln ohne auch nur eine Zeile Code schreiben zu müssen beziehungsweise noch wichtiger – wegschmeißen zu müssen.

Quelle & weiterführende Infos

Heydon Pickerings  elektrisierender Vortrag auf der Smashing Conference 2015 dient als Basis dieses Artikels

Leave a Reply

Your email address will not be published. Required fields are marked *