Über unsMediaKontaktImpressum
Dr. Veikko Krypczyk & Olena Bochkor 21. Juni 2016

Prototyping – Eine Einführung

Entscheidend bleibt aber die richtige Idee für Design und Konzept. © learchitecto / Fotolia.com
Entscheidend bleibt aber die richtige Idee für Design und Konzept. © learchitecto / Fotolia.com

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ß.

Abb.1: Ansichtssache. Quelle: http://projectoffice.tumblr.com
Abb.1: Ansichtssache. Quelle: http://projectoffice.tumblr.com

Werfen Sie einen Blick auf Abb.1. Eine typische Situation aus dem Entwickleralltag. Wahrscheinlich ist sie jedem, der im IT-Bereich arbeitet, bekannt. Es ist leider so, dass es einen erheblichen Unterschied gibt zwischen der Situation, wie sie der Kunde wahrnimmt, wie diese der Projektleiter versteht, was der Analyst und der Entwickler daraus machen und wie diese letztendlich vom Business Consultant interpretiert wird. Eine ganz andere Frage ist, was der Kunde tatsächlich gebraucht hätte. Gelegentlich ist er sich darüber auch nicht immer vollends im Klaren. Oft werden die Anforderungen kaum dokumentiert und nach der ersten Installation kommt die Enttäuschung. Der Umfang des Supports lässt ebenso Wünsche offen. In diesen Situationen kann der Eindruck beim Kunden entstehen, dass das Produkt nicht seinen Preis wert ist. Wie ist der Ausweg?

Prototypen können in dieser Situation hilfreich sein. Bereits sehr früh im Entwicklungsprozess können sie die Abstimmungsprozesse schneller und effektiver machen. Somit können die kritischen Aspekte eines Produktes – hier einer Software – möglichst frühzeitig erkannt und beseitigt werden. Da die Anforderungsdefinition für Programme bekanntermaßen sehr schwierig und über weite Projektabschnitte als unsicher und damit stetigen Veränderungen unterworfen ist, sind Prototypen ein gutes Instrument, diese Unsicherheiten zu beseitigen.

Bevor wir uns mit der Praxis der Prototypenherstellung beschäftigen, werfen wir einen Blick in die Theorie. Grundsätzlich wird zwischen explorativen, experimentellen, evolutionären, vertikalen und horizontalen Prototypen unterschieden. Zuerst zum explorativen Prototyping. Dieses ist ein Hilfsmittel der Anforderungsdefinition und wird immer dann angewendet, wenn die Problemstellung noch unklar ist. Ein besseres Problemverständnis und das Aufdecken von Spezifikationslücken sind das Ziel.

Abb.2:Projektmodell. Quelle: Balzert, H.: Lehrbuch der Softwaretechnik [1]
Abb.2:Projektmodell. Quelle: Balzert, H.: Lehrbuch der Softwaretechnik [1]

Die Entwickler lernen den Anwendungsbereich und die Aufgaben der Benutzer besser kennen. Im Projektmodell kann dies wie in Abb.2 dargestellt werden. Das Modell umfasst zwei logische Stufen: Anforderungsermittlung und Systemgestaltung. Experimentelles Prototyping unterstützt den Softwareentwurf. Dabei wird die Realisierbarkeit des Entwurfs vor dem Einstieg in die Implementierungsphase nachgewiesen. Die Benutzer konkretisieren experimentell ihre Vorstellungen über das System und die Entwickler können dabei die Machbarkeit und die Zweckmäßigkeit des Anwendungssystems einschätzen.

Abb.3: Experimentelles Prototyping im zyklischen Modell. Quelle: Balzert, H.: Lehrbuch der Softwaretechnik [1]
Abb.3: Experimentelles Prototyping im zyklischen Modell. Quelle: Balzert, H.: Lehrbuch der Softwaretechnik [1]
Abb.4: Evolutionäres Prototyping im Projektmodell. Quelle: Balzert, H.: Lehrbuch der Softwaretechnik [1]
Abb.4: Evolutionäres Prototyping im Projektmodell. Quelle: Balzert, H.: Lehrbuch der Softwaretechnik [1]

Das Modell umfasst zwei logische Stufen: Anforderungsermittlung und Systemgestaltung. Experimentelles Prototyping unterstützt den Softwareentwurf. Dabei wird die Realisierbarkeit des Entwurfs vor dem Einstieg in die Implementierungsphase nachgewiesen. Die Benutzer konkretisieren experimentell ihre Vorstellungen über das System und die Entwickler können dabei die Machbarkeit und die Zweckmäßigkeit des Anwendungssystems einschätzen.

Abb.3 zeigt das experimentelle Prototyping im zyklischen Modell. Die Umsetzung umfasst die Stufen Softwareentwurf, Programmierung, Funktions- und Leistungsüberprüfung. Beim evolutionären Prototyping wird das sich in der Entwicklung befindliche System fortlaufend angepasst und verbessert. Dabei handelt es sich um ein kontinuierliches Verfahren, d. h. das Anwendungssystem wird stetig an die sich rasch verändernden Bedingungen angepasst. Abb.4 visualisiert das evolutionäre Prototyping im Projektmodell.

Wie bereits erwähnt, wird außerdem zwischen dem vertikalen und horizontalen Prototyping unterschieden. Beim vertikalen Prototyping erfolgt eine vollständige Implementierung einer Teilfunktion. Benachbarte Teile des Systems werden dabei weggelassen. Horizontales Prototyping wird oft als UI-Prototyping bezeichnet. Diese Prototypen dienen der Erprobung des allgemeinen Programmablaufs.

Prototyping für Apps

Abb.5: Von der Ideenzeichnung zum Produkt. Quelle: Semler, J., App Design [2]
Abb.5: Von der Ideenzeichnung zum Produkt. Quelle: Semler, J., App Design [2]

Der Prozess des App-Designs und der Entwicklung ist iterativ. Es macht Sinn, bereits sehr früh einen ersten Prototyp der künftigen App zu entwerfen. Dabei sollten die Designentwürfe wiederholt evaluiert werden. Prototypen sind hier echte Wegbegleiter auf der "Reise" von der Idee zur App! Diese Reise beginnt mit der Ideenzeichnung und verläuft über das Design bis hin zur entzündlichen Umsetzung (s.Abb.5).

Bevor man mit der Entwicklung des ersten Prototyps anfängt, sollte man die Antworten auf die nächsten Fragen parat haben:

  • Für welche Plattform(en) soll die App entwickelt werden?
  • Wie lässt sich die Zielgruppe eingrenzen?
  • Was sind die möglichen Konkurrenten?
  • Bietet die App-Idee eine Lösung für das Problem?

Nachfolgend wird der Ablauf des Prototyping dargestellt. Folgende grobe Schritte sind zu nennen:

  • Funktionsauswahl,
  • Konstruktion,
  • Bewertung und
  • Weiterverwendung

Funktionsauswahl

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.

Sketchnotes
Sketchnotes sind visuelle Landkarten. Sinnvolle Gedanken und Ideen werden auf Papier übertragen. Ziel ist es, die Inhalte verständlicher zu machen. Die typischen Werkzeuge bei der Erstellung von Sketchnotes sind Kuli bzw. Marker oder Bleistift und Papier. Die drei Grundelemente sind: Text, Bilder und Struktur. Durch die richtige Verknüpfung von diesen Komponenten können die Inhalte besser im Kopf verankert werden [3].

Personas
Personas symbolisieren typische Nutzer, welche die Zielgruppen Ihres Produkts oder Ihrer Anwendung repräsentieren. Sie geben dem oft unbekannten Anwender im Entwicklungsprozess ein Gesicht und damit dem Entwicklungsteam eine klare Vorstellung darüber, was ihre späteren Kunden auszeichnet. Personas erleichtern eine nutzerzentrierte Entwicklung und eignen sich daher besonders in der frühen Konzeptions- und Designphase von Software [4].

  • 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.

Tools im Überblick

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.

Vorgehensweise

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.

Quellen
  1. H. Balzert, 2012: Lehrbuch der Softwaretechnik: Entwurf, Implementierung, Installation und Betrieb, Spektrum Akademischer Verlag
  2. J. Semler, 2016: App Design. Alles zu Gestaltung, Usability and User Experience, Rheinwerk Design
  3. M. Rohde, 2013: Das Sketchnote Handbuch, mitp
  4. Wikipedia: Persona
  5. Balsamiq
  6. Pencil
  7. Microsoft Visio
  8. Marvel
  9. Axure
  10. POP
  11. Pixate
  12. Framer.js
nach Oben
Autoren

Olena Bochkor

Olena Bochkor studierte Betriebswirtschaftslehre u. a. mit dem Schwerpunkt Wirtschaftsinformatik. Ihr Arbeitsschwerpunkt ist u. a. die ansprechende Gestaltung moderner Benutzeroberflächen.
>> Weiterlesen

Dr. Veikko Krypczyk

Dr. Veikko Krypczyk studierte und promovierte in Wirtschaftsinformatik. Er arbeitet u. a. als Softwareentwickler, Fachautor und Dozent. Über die Firma LARInet gibt er darüber hinaus sein Wissen in Schulungen zu aktuellen...
>> Weiterlesen
Bücher des Autors:

botMessage_toctoc_comments_929