Reading the aweseome post of Charlie Fountaine about the principles of prototyping. I remembered that my 2020 Tech4Germany group did a write up on our take on prototyping. As I couldn’t find it online anymore, I just decieded to publish it here, in 2020 we wrote:

Prototyping

Agile Projekte leben davon, entwickelte Ideen und Hypothesen schnell zu validieren oder zu verwerfen. Dabei stellen Prototypen den Katalysator für diesen Lernprozess dar. Prototypen bieten die Möglichkeit, Nutzer:innen und ihre Bedürfnisse besser zu verstehen, Grenzen von Technologien frühzeitig zu entdecken und Probleme in der Tiefe zu erkunden. Neben dem testbaren Prototyp ist aber auch der Weg zu diesem ein wichtiger Teil des Prozesses. Während der Entwicklung des Prototypen kann das Team bereits erste Fehler oder Lücken in Konzepten und Ideen entdecken. Je nach Testziel des Prototypen oder Phase des Projektes bieten sich unterschiedliche Detailgrade an. Die Detailgrade unterscheiden sich dabei in der Ausarbeitung von Inhalten, visuellem Design und Interaktivität.

So machen zum Beispiel Papierprototypen dann Sinn, wenn schnell und unkompliziert grundlegende Ideen oder Konzepte getestet werden sollen. Durch die niedrige Barriere haben Nutzer:innen meist keine Hemmungen den Prototypen offen zu kritisieren - ein Papierprototyp sieht schließlich auf den ersten Blick nicht nach viel Arbeit aus. Je höher der Detailgrad eines Prototypen, desto eher nehmen Nutzer:innen Stellung zu Inhalten (z.B. Bilder, Formulierungen, …) oder visuellem Design (z.B. Farben, Schriftarten, …).

Wieso braucht es (rapid) Prototyping?

❌ Frühes Scheitern

Papierprototypen oder Wireframes (aneinander gehängte Bilder, die z.B. eine Website simulieren) können ohne viel Aufwand (Zeit, Materia, technische Entwicklung) erstellt werden. So können Ideen früh getestet und Annahmen zur Lösung durch Nutzerfeedback validiert oder verworfen werden. Anschließend bleibt genügend Zeit, um Ergebnisse zu validieren, aus den Fehlern zu lernen und den nächsten Prototypen zu entwickeln.

👀 Show don’t tell

Prototypen folgen der Philosophie des Greifbar-Machens: abstrakte Ideen werden für alle Beteiligten erfahrbar. So können Missverständnisse und inhaltslose Diskussionen vermieden werden.

💬 Eine Unterhaltung starten

Prototypen regen Gespräche an, ob im Team, mit potentiellen Nutzer:innen beim Testen oder bei projektfernen Stakeholdern. So kann über Ideen gesprochen und ein gemeinsames Verständnis entwickelt werden.

🔍 Fragen & Herausforderungen aufdecken

Bereits bei der Umsetzung einer Idee in einen Prototypen zeigen sich Schwächen und Stärken, welche zuvor nicht sichtbar waren.

7 Regeln für gute Prototypen

Nicht in den eigenen Prototypen verlieben - Prototypen sind dazu da, von Nutzer:innen kritisiert und vom Team verworfen zu werden.
Prototypen zum Provozieren bauen - nicht mit dem Ziel bauen, die Nutzer:innen von der Idee zu überzeugen.
Right-Rapid-Rough - lieber die eine richtige Frage stellen, schnell und grob bauen, und dafür oft iterieren als zu viel Arbeit in einen einzelnen Prototypen stecken.
Eine Frage/Hypothese/Zielsetzung = ein Prototyp - lieber mehrere einzelne Prototypen mit jeweils einer Hypothese/Zielsetzung als ein komplexer mit mehreren voneinander abhängigen Zielsetzungen, so wird das Testergebnis klarer.
Gesellschaftliche Regeln, Ressourcen und Fakten hinterfragen - Einschränkungen wie Ressourcen, Datenschutz oder Barrierefreiheit sind wichtig, aber sind nicht unbedingt für das Testziel relevant.
Ergebnisoffenheit und Lern-Mindset - Prototypen sind zum Lernen da, Ideen können auch falsch sein oder Nutzer:innen ganz andere als die antizipierten Bedürfnisse haben.
Frühes Testen, fertig schlägt perfekt - ein Prototyp ist dann fertig, wenn es einem selbst noch leicht peinlich ist, damit in Tests zu gehen, so verhindert man overengineering und sich in den eigenen Prototypen zu verlieben (siehe Punkt 1).

Werkzeuge und Methoden

📃 Papierprototypen

Für Papierprototypen braucht man nur Stift und Papier. Post-It’s helfen, wenn Elemente flexibel sein sollen. Papierprototypen bieten sich dann an, wenn schnell und unkompliziert ein Konzept oder eine Idee getestet werden soll. Optik ist zweitrangig, ein einfacher Kasten kann ein Handy sein und unterschiedliche Post-It’s verschiedene Screens - es geht in erster Linie um die Funktionalität.

🧵 Wireframes und Klickdummys

Wenn ein Ansatz schon etwas ausgereifter ist und erste Erkenntnisse zu Inhalten, visuellem Design oder Interaktion das Ziel des Prototypen sind, kommen Wireframes ins Spiel. Der angedachte Fluss (z.B. die Seiten eines Web-Formulars) der Idee werden mit “Draht” verknüpft, es entsteht ein Ablauf. So kann man ganz ohne Programmierung schon “klickbare” und “schöne” Prototypen bauen. Wireframes können unterschiedliche Reifegrade haben und entweder sehr grobe Ideen illustrieren oder ausgearbeitete Benutzeroberflächen abbilden, die einem realen Produkt bereits zum verwechseln nahe kommen können. Diese sind auch zur Kommunikation mit Engineers hilfreich. Beispiele für Tools: Balsamiq, Axure, Marvel, Invision, Adobe XD, Sketch, Figma, Webflow

💻 (Low)Code Prototypen

Als letzter Schritt vor der Implementierung eines Minimum Viable Products (MVP) und der iterativen Ausarbeitung hin zur Produktvision stehen (Low)Code Prototypen. Hier werden nun bestimmte Funktionen des Produktes in realistischen Umgebungen erstellt, um auch technologische Einschränkungen und Herausforderungen kennenzulernen. Dabei werden meist Webtechnologie-Stacks eingesetzt, so können Nutzer:innen realistische User Interfaces gezeigt werden ohne ein komplexes Backend anzuschließen. Eine Möglichkeit, auch ohne Programmierkenntnisse realitätsnahe Prototypen zu erzeugen, bieten Low/No-Code Programme wie Glide.

🔗 Nützliche Links/Tools/Informationen:

18F Prototyping Methods: https://methods.18f.gov/make/ [Englisch]
Mozilla Toolkit: https://toolkit.mozilla.org/prototype-test/ [Englisch]
d.school Prototyping Checklist: https://dschool.stanford.edu/resources/prototyping-dashboard [Englisch]
Rapid Prototyping: https://www.designkit.org/methods/rapid-prototyping [Englisch]
Über High- und Low-Fidelity Prototypen: https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/ [Englisch]
Case-Study warum Prototyping wertvoll und nützlich ist: https://www.nngroup.com/articles/mozilla-paper-prototype/?lm=wireframing-and-prototyping&pt=course [Englisch]