Prototyping – Eine Einführung (2024)

Dr. Veikko Krypczyk & Olena Bochkor 21. Juni 2016

Software wird für Anwender produziert. Das Ergebnis ist nur dann gut, wenn es den Ansprüchen vollends genügt. Damit dieses gelingt, sind frühzeitig Abstimmungen notwendig. Ein probates Mittel ist die Erstellung von Prototypen. Der Artikel beleuchtet die theoretischen Hintergründe und gibt einen Einblick in die Praxis. Unterschiedlichste Tools zur Unterstützung erleichtern die Arbeit und machen darüber hinaus noch Spaß.

Die Auswahl der Funktion lässt sich von den Zielen ableiten. Was will man mit einem Prototyp erreichen? Hier liegt die Wahl zwischen der Entwicklung eines vertikalen oder eines horizontalen Prototyps.

Konstruktion

Grundsätzlich kann zwischen den folgenden Phasen bei der Konstruktion von Prototypen unterschieden werden:

• Entwurfsskizzen: Damit sind sowohl Handskizzen, als auch digitale Skizzen gemeint. Diese lassen sich schnell anpassen und erweitern. Das ist insbesondere am Anfang sehr wichtig, um eine erste Vorstellung zu entwickeln. Auf Details kommt es noch nicht so sehr an. Eine grobe Skizze reicht! Die Kenntnisse von Sketchnotes können dabei hilfreich sein. Wenn die ersten Skizzen soweit fertig sind, kann man zu Storyboards übergehen. Im Gegensatz zu einer einzelnen Skizze werden hier mehrere davon zusammengefasst und der Ablauf kann somit zusammenhängend dargestellt werden. Anders ausgedrückt stellen Storyboards die Use Cases von Anwendern nach: die Problemfälle werden konstruiert und die Fehlerstellen erkannt. Es ist nicht falsch, hier mit Personas zu arbeiten. Empfehlenswert ist es, mit dem Hauptscreen anzufangen. Was soll nach dem Start der App erscheinen? Daraus werden sich automatisch andere Screens ergeben: Einstellungen, Profil, Ansicht, etc. Bei digitalen Skizzen sollte man ein Programm wählen, mit dem man vertraut ist.

• Wireframes: Mit dem Übergang zu Wireframes wird es konkreter. Dies ist der erste schematische Designentwurf einer App. Die Inhalte und Funktionen werden genauer beschrieben und miteinander verknüpft. Wireframes ermöglichen es, Prototypen ohne Programmieraufwand zu erstellen. Es sind skizzenähnliche Darstellungen, welche noch keine funktionsfähigen Elemente besitzen. Dabei wird auf den Design-Grundriss gesetzt. Im Gegensatz zu Mock-ups sind dabei keine Farben enthalten. Wireframes haben lediglich den Zweck, die Verbindung zwischen der konzeptionellen Funktionalität und dem visuellen Design des Interfaces zu schaffen. Idealerweise findet man dabei auf folgende Fragen eine Antwort: Was zeigt und wie funktioniert jeder einzelne Screen? Welcher Zusammenhang besteht zwischen den Screens? Wie werden die Informationen organisiert und dargestellt? Es gibt eine Vielzahl von Tools, welche bei der Erstellung von Wireframes nützlich sind. Wichtig ist es, bei der Gestaltung folgende Punkte im Hinterkopf zu behalten:
  • Je größer ein Objekt dargestellt wird, als umso wichtiger wird es wahrgenommen.
  • Der Kontrast bestimmt die Unterscheidbarkeit der Elemente.
  • Die Stärke der Kontur einer Fläche und Einfärbung beschreibt die Funktionalität.
  • Die Form spielt auch eine Rolle: Ein abgerundetes Rechteck wird eher als eine Schaltfläche wahrgenommen als ein normales Rechteck.
  • Gruppierte Objekte werden als zusammenhängend wahrgenommen.

• Design-Mock-ups: Mock-ups werden basierend auf Wireframes erstellt. In dieser Phase wird das UI visuell und grafisch dargestellt und das Design getestet. Es wird endlich farbig! Mock-ups geben den Entwicklern die Vorgaben zum Programmieren. Hier werden die Formen, Typografie und die Farbtöne konkretisiert. Nachfolgend stellen wir ausgewählte Mock-up-Tools vor.

Das Ziel ist es, dass passgenaue Tool zur Entwicklung eines Prototypen auszuwählen. Der Begriff Fidelity wird dabei zum Unterscheidungskriterium. Darunter wird der Realitätsgrad des Entwurfs verstanden.

Tools für das Low-Fidelity Prototyping: Die erstellten Prototypen ähneln dem finalen Produkt kaum.

• Balsamiq [5]: Die Vorteile sind eine einfache und schnelle Handhabung, gute Bibliotheken und eine große Auswahl an UI-Elementen. Hier findet man alle notwendigen Objekte, angefangen von Navigationselementen über Bereiche für Bilder und Videos bis hin zu Formularen. Bei Screens die mit einer Interaktion verbunden sind, zeigt das Tool noch einige Mängel. Leider ist Balsamiq für den Einstieg recht teuer. Die einfachste zeitlich unbegrenzte Desktop-Lizenz für einen Benutzer kostet bereits 89 Dollar.
• Pencil [6]: Pencil Project ist ein kostenloses Tool, welches über umfangreiche Bibliotheken an UI-Elementen, Formen, Cliparts, Icons, etc. für verschiedene Plattformen verfügt. Diese können bequem per Drag-and-drop im Programmfenster angeordnet werden. Die Bedienung ist wirklich einfach. Es eignet sich insbesondere für ein schnelles Prototyping.
• Microsoft Visio [7]: Microsoft Visio ist ein allgemeines vektorbasiertes Zeichenprogramm aus der Microsoft Office-Familie. Durch die große Anzahl an Bibliothekelementen können jedoch auch Entwürfe des UI gezeichnet werden. Der Vorteil ist, dass es ggf. schon auf dem Rechner vorhanden ist und man sich nicht erst noch an die Bedienung eines weiteren Werkzeuges gewöhnen muss.

Tools für das High-Fidelity-Prototyping: Die erstellten Prototypen sind ein gutes visuelles Abbild des späteren Produkts.

• Marvel [8]: Eine realistische Darstellung steht dabei im Vordergrund. Die mit diesem Programm erstellten Prototypen können sehr gut zum Leben erweckt werden und fühlen sich bereits wie ein fertiges Produkt an. Positiv ist es, dass eine kostenfrei nutzbare Version für eine unbegrenzte Zeit zur Verfügung steht.
• Axure [9]: Dieses Tool hat den größten Funktionsumfang und kostet am meisten. Für eine zeitlich unbegrenzte Standard Desktop-Lizenz für einen Nutzer bezahlt man 289 Dollar. Axure verfügt über umfangreiche Möglichkeiten von Interface-Prototypen, die man passend konfigurieren kann. Es ermöglicht, zu den abgebildeten Elementen einfache Aktionen hinzuzufügen. Weiterhin kann man mit Axure Erklärungen und Fußnoten zu den Wireframes ergänzen, welche später als Word-Dokument exportiert und als Konzeptpapiere verwendet werden. Axure gilt als Tool für Profis, d. h. die Bedienung ist alles andere als intuitiv, meistens kommt man nicht um Programmierkenntnisse herum.

Tools für das Rapid Prototyping: Im Rapid Prototyping werden zum einen Micro-Interaktionen für Custom Controls und zum anderen komplette Screens entwickelt. Grundsätzlich handelt es sich um High-Fidelity-Prototypen, die sich jedoch nur auf einen spezifischen Teil der App konzentrieren.

• POP [10]: Anhand dieser App können gezeichnete Wireframes mit interaktiven Features kombiniert werden: Skizzen vom Papier können fotografiert und dann in der Pop-App interaktiv miteinander verknüpft werden. Zwei Projekte pro Nutzer können kostenlos erstellt werden. Für 25 Dollar pro Monat kann eine beliebige Anzahl von Nutzern unbegrenzt viele Projekte erstellen.
• Pixate [11] verfügt über einen größeren Funktionsumfang als POP. Damit können schnell interaktive Prototypen für mobile Endgeräte erstellt werden. Ebenso ist die Erstellung individueller Listen und zusammenhängender Animationen möglich. Dabei kann in Pixate vieles über Drag-and-drop erledigt werden. Man kommt also mit minimalen Programmierkenntnissen aus.
• Framer.js [12] ist ein Open Source-JavaScript-Framework für Rapid Prototyping. Für dieses Tool sind Programmierkenntnisse erforderlich. Es ermöglicht die Realisierung von komplexeren Animationen und Funktionen mit JavaScript. Leider sind die entwickelten Prototypen nur auf WebKit-Browsern wie Safari oder Chrome lauffähig.

Welches Tool sollte man nun wählen? Am besten man probiert mehrere Tools aus. Ein wichtiges Entscheidungskriterium ist die Zeit. Prototyping soll schnell gehen, d. h. das gewählte Werkzeug soll dabei helfen, zügig einen ersten Entwurf des Programms bzw. der App zu erstellen.

Die erste und die wichtigste Voraussetzung für das erfolgreiche Prototyping ist, dass alle Beteiligten wissen, welcher Zweck mit der Entwicklung des Prototypings verfolgt wird. Dem Projektleiter kommt eine besondere Verantwortung zu.

Man muss Mut zum "Wegwerfen" haben, denn nur dann gelingen gute Produkte.

Ebenso müssen klare Abbruchkriterien festgelegt werden, anhand derer entschieden werden kann, wann eine Weiterentwicklung des Prototyps nicht mehr sinnvoll ist. Ein zu später Abbruch eines Prototyping-Projekts führt zu hohen Kosten, der Markteintritt ist verzögert und der Erfolg bleibt aus. Prototyping dient auch dazu, nicht geeignete Ideen und Projektentwürfe noch rechtzeitig auszusortieren. Ebenso ist das Streben nach Perfektion nicht zu übertreiben, d. h. es muss klare Kriterien geben, wann das Produkt "gut genug" ist. Es macht keinen Sinn, ein perfektes Produkt zu entwerfen und dafür aber durch die Konkurrenz nicht mehr in den Markt zu kommen.

Fazit

Prototyping ist ein guter Ansatz, um schnelle Produktmuster zu erstellen. Tools und Hilfsmittel – vom Bleistift bis zur App – unterstützen den Vorgang vielfältig. Entscheidend bleibt aber die richtige Idee für Design und Konzept. Auch den Mut zum "Wegwerfen" muss man haben, denn nur dann gelingen wirklich gute Produkte.