Von Ingrid Gerstbach

In unseren Projektbegleitungen und Trainings werden wir immer wieder gefragt, welche Tools wir für unsere Prototyes nutzen. Unsere Antwort darauf ist: Meistens ist das Tool ein einfacher Bleistift und ein Stapel Papier.

Jedes Mal, wenn wir diese Antwort geben, ist es, als würde ein kleiner Seufzer der Enttäuschung zu hören sein. Vielleicht ist das deswegen der Fall, weil viele Menschen sich erhoffen, einen sicheren Weg zu finden, um komplexe Herausforderungen kreativer und schneller mit Hilfe der Technik zu lösen. Dabei ist die Experimentierphase einer der wichtigsten Schritte in dem ganzen Design Thinking Prozess! Selbst bei einer einfachen Lösung kann ein Prototyp, der in 5 Minuten entstanden ist, später mehrere Stunden trial&error sparen. Je günstiger also der Prototyp ist, desto besser. Denn in der Natur von Prototypen liegt es nun mal, dass weitere Iterationen und Raffinessen folgen, die in Summe sehr teuern werden können.

Einfache iPhone-Mockups mit Papier und Bleistift

Einfache iPhone-Mockups mit Papier und Bleistift

Vorteile von Bleistift und Papier

Ist es nicht verlockend, einfach Photoshop zu öffnen oder mit irgendeinem anderen digitalen Werkzeug zu beginnen? Gerade das Herumsuchen nach dem geeigneten Tool kostet auch viel Zeit und ist eine hervorragende Ausrede, um kein Feedback einholen zu müssen.  Allerdings hat diese Methode ein paar wichtige Vorteile:

  • Sie brauchen keine verschiedenen Bildschirme, um zwischen Zeichnungen bzw. Ideen hin- und herzuspringen.
  • Im Vergleich zu vielen anderen Mockup Tools sind Bleistift und Papier äußerst günstiges Werkzeug. Nicht nur im materiellen, auch im emotionalen Sinn: Sie hängen einfach viel weniger an etwas, dass Sie schnell heruntergekritzelt haben, als an einer langwierigen Programmierung oder Zeichnung via Photoshop oder InDesign. Sie probieren auch wesentlich mehr Kombinationen, wenn Sie zeichnen.
  • Maximale Flexibilität: Sie können auf allen Abstraktions-, Detail- und Größenebenen wild zeichnen und das alles innerhalb von Sekunden ändern.
  • Bei Papierzeichnungen lenken Sie Ihre Aufmerksamkeit nicht auf Feinheiten wie Schriftarten, kleine Schnittstellenelemente oder oft Farbauswahl. Bei solchen Zeichnungen konzentrieren Sie sich in erster Linie nur auf Ihre Idee, die aus Ihrem Kopf auf das Papier will. Und zwar schnell.

Und wenn es doch mal digital sein soll?

Paper by FifthyThree

Eine andere Version des Papierzeichnens bietet aber die iPad App Paper von FiftyThree. Sobald Sie die App starten, dürfen Sie sich ein Notizbuch aussuchen, das verdächtig an Moleskine erinnert. Die App bietet Ihnen zwei leere Seiten, um zu beginnen. Es gibt eine Menge an sehr intuitiven Anwendungen, mit denen Sie schnell beginnen können. Weiters können Sie Fotos vom iPad direkt in das Bild importieren und das dann auf Wunsch skalieren.
Mit einem Wort: Paper53 bietet Ihnen viele Möglichkeiten ein Storyboard zu zeichnen oder an Ihrem Prototypen zu arbeiten.

Balsamiq

Manches Mal können aber Papierzeichnungen noch ein wenig aufgebessert und verschönert werden. Das ist vor allem dann der Fall, wenn Sie sehr zufrieden mit Ihrer Papierversion sind, aber vielleicht zu Anschauungszwecken doch eine digitale Version brauchen.

Wir verwenden für gewöhnlich dazu die Software von Balsamiq. Per drag&drop können Sie schnell skalierbare Vorlagen von typischen Interface-Elemente wie Navigationsleisten oder Tabs auf der Arbeitsfläche anordnen und anpassen. Balsamiq ermöglicht es auch, dass Sie sich durch den Prototypen durchklicken können - wie in einer richtigen App. Auch nutzen wir das Programm gerne, weil die Linien eben nicht perfekt sind, sondern den Anschein eines noch nicht endgültigen Ergebnis zu verschaffen.

ORIGAMI

Origami wurde ursprünglich von Facebook entwickelt, um dem Team beim der Entwicklung von Design-Produkten zu unterstützen. Die App ist kostenlos, erfordert allerdings bereits bei der Installierung mehr Arbeit als andere Tools. Die Dokumentationen, Tutorials und How-to-Videos machen es einfach, loszulegen und auszuprobieren. Sie können auch Sketch und Photoshop-Designs importieren, verknüpfen und nach Bedarf als Animationen umwandeln. Origami enthält ein Präsentations-Tool, das Ihnen dabei hilft, einen benutzerdefinierten Hintergrund in Ihr Design einzufügen, Vollbild anzuzeigen und verschiedene Geräte zu simulieren. Als freie Prototyping-Lösung hat Origami viel zu bieten. Ein Nachteil ist jedoch, dass es keine Kommentare von Ihren Kunden oder dem Design-Team Kommentar direkt ins Projekt einschreiben lässt.

Proto.io

Proto.io ermöglicht Ihnen, dank fertiger Vorlagen für Webseiten und Anwendungen schnell mit Ihrem Projekt loszustarten. In meinen Tests lief die App ein wenig langsam und die Änderung und Anpassung von Bildern war manchmal schwierig. Auch schien jede Funktion ein neues Fenster zu erstellen (je eines für Projekte, die Entwicklung und die Live-Vorschau), wodurch die Übersichtlichkeit auf der Strecke bleibt. Ein großer Vorteil dieser App ist allerdings, dass sie auf jeder Plattform läuft und Sie dadurch jederzeit und überall dort weitermachen können, wo Sie aufgehört haben. Proto.io hat vor kurzem Plugins veröffentlicht, die es Ihnen ermöglichen, Sketch und Photoshop-Designs durch eine einfache Drag-and-Drop-Funktion zu integrieren.

Die angebotenen Vorlagen bieten bereits eine Vielzahl von Interaktionen, Sie müssen nur mehr App-spezifische Inhalte hinzufügen. Wenn Ihr Prototyp fertig ist, können Sie das Projekt mit einer URL teilen und so direktes Feedback auf der Prototyp-Seite einholen.

InVision

InVision ist wohl momentan weltweit das beliebteste Prototyping-Tool. Das Invision-Team bemüht sich aber auch ständig neue Features zu entwickeln, die Designer effizienter unterstützen sollen. Seine beste Eigenschaft ist wahrscheinlich die Verwaltung des Feedbacks. Kunden, aber auch das Team können bequem ihre Kommentare direkt im hinterlassen - so verlieren Sie wirklich nicht den Überblick über das gegebene Feedback. Aber auch die Kommunikation des Status an die Kunden oder das Team ist eine tolle Funktion: mit der InVision Projektmanagement Seite können Sie Design-Komponenten in einem Status-Workflow organisieren. Sie können Spalten für „To-dos“ aber auch für „In Bearbeitung“, „Braucht Überprüfung“, und „Ist genehmigt“ erstellen und diese per Drag-and-Drop füllen. Diese Funktion ist vor allem in Teams hilfreich, denn jeder kann zu jeder Zeit den Status abrufen und/oder kommentieren.

Digitale Mockups sind vor allem dann hilfreich, wenn Sie diese mit jemanden teilen möchten, der virtuell leichter erreichbar ist und Feedback geben kann. Manches Mal sind digitale Versionen auch verständlicher als es Skizzen sind.

Generelle Tipps zum Prototyping

  • Keep it simple: Das Hauptziel beim Prototyping ist, effizient festzustellen, ob Ihre Idee auf dem richtigen Weg ist. Je einfacher die Idee ist, desto schneller kommen Sie zum Prototyp und damit zur Lösung. Oft schaffen wir sonst unnötige Funktionalitäten und machen uns über das Design Sorgen, was unsere Kreativität wiederum einschränkt und so brillante Ideen gar nicht erst weiter kommen.
  • Schreiben Sie eine Liste mit max. 25 Eigenschaften und Funktionen, die Sie im Sinn haben, priorisieren Sie die Top fünf und meiden Sie die anderen 20. Kreativität Einschränkungen zwingen sich mit der besten Ideen gezielt auseinanderzusetzen und nicht mit jeder Idee ein wenig.
  • Lassen Sie Perfektion vor der Tür: Gerade bei unseren Projektbegleitungen erleben wir es immer wieder, dass die ersten Prototypen mit Perfektion verfeinert werden müssen, aber das hält nur enorm vom Fortschritt ab.
  • Gehen Sie schnell in die Testphase: Es gibt keinen perfekten Zeitpunkt, um Ihre Ideen zu prüfen und Sie werden in Wahrheit nie bereit sein, nie genug Geld haben, sich nie sicher sein, dass es die Idee ist, die die Welt verändern wird. Also, scheitern Sie schnell, lernen Sie dadurch und bringen Sie das Feedback wieder ein und nähern Sie sich so Ihrem Ziel.
  • Wenn Sie Szenarien oder Prozesse optimieren wollen, verwenden Sie Bilder, um eine interaktive Prototypen in 10 Minuten oder weniger herzustellen und testen Sie ihn dann. So können Sie schnell den Beteiligten zeigen, was Sie meinen oder wie es sich anfühlen wird.

Es ist vollkommen in Ordnung, wenn nicht sogar notwendig, dass ein Prototyp noch nicht ganz rund und hässlich ist. Vergessen Sie nicht: Das Ziel eines Prototyps ist, eine Vorstellung zu bekommen, die Sie testen und bewerten lassen können. Nachdem die Idee bestätigt ist, können Sie den Prototyp weiter verbessern und verschönern, bis alles an der richtigen Stelle ist.

Die genialen Zeichnungen auf dieser Webseite und auf unseren Methodenkarten sind im übrigen alle von Peter Gerstbach mit Paper illustriert worden - in unseren Trainings zeigt er auch gerne seine Tipps :)