App Prototyping - Nutzen, Design-Tools und Beispiele

27. Juli 2021 - von Stefan Spieler

Oftmals wird Prototyping in der initialen Phase eines Softwareprojekts zu wenig berücksichtigt. Der Nutzen eines Prototyps ist aber ungeheuer wertvoll, um Kosten und Zeit zu sparen und am Schluss ein besseres Ergebnis zu erreichen. Weshalb das so ist und wie wir bei Apps with love Prototypen erstellen und anwenden, liest du auf den folgenden Zeilen.


Was App Prototyping ist

Mit Prototypen wird versucht, eine App zu simulieren, ohne dass dafür Aufwände fürs Programmieren gemacht werden müssen. Prototypen kann man als interaktive, multilineare “PowerPoint” Präsentationen verstehen. Sie zeigen einem, wie eine App funktionieren wird, ohne, dass sie vollständig funktionstüchtig sind.

Bei Apps with love unterscheiden wir zwischen zwei Arten von Prototypen:

  1. Funktionale Prototypen
  2. Visuelle Prototypen

Ein funktionaler Prototyp hat das Ziel, die konzipierte App in ihrer Ganzheit darzustellen. Es geht darum herauszufinden, ob die Funktionen, zum Beispiel Buttons, so platziert sind, dass User*innen sie auch finden und benutzen. Wir sprechen in diesem Zusammenhang auch von einem Klickdummy: Es geht darum herauszufinden, wie die App funktionieren kann. Das visuelle Erscheinungsbild steht dabei nicht im Vordergrund. Vielmehr geht es darum, die Interaktionen der Nutzenden mit der App funktional zu validieren.

Wenn möglich, sollte ein funktionaler Prototyp alle Screens der App beinhalten. Ein einfaches Beispiel siehst du hier:

Falls du den Figma Prototypen selber ausprobieren möchtest, kannst du dies hier tun.

Ein visueller Prototyp hingegen könnte zwar theoretisch auch die komplette App darstellen, meistens würde dies aber zu aufwändig und daher zu kostspielig. Daher beschränken sich visuelle Prototypen zum Beispiel auf eine einzelne Transition zwischen Screens oder auf die Animation eines Elements auf einem Screen (z.B. ein Button, oder ein Loader). Bei visuellen Prototypen geht es also eher um einzelne visuelle Elemente und deren Gestaltung.

Visueller Prototyp für animierte Tapbar-Icons

Warum man für eine App einen klickbaren Prototypen kreieren sollte

Man kann es mit einem Hausbau vergleichen: Warum sollte ein Architekt ein Modell aus den Bauplänen erarbeiten, bevor man mit dem eigentlichen Bau beginnt? Themen wie Lichteinstrahlung, Südausrichtung oder Integration ins Quartier können erst dann richtig betrachtet werden. Ähnlich verhält es sich bei Software, speziell bei Apps. Mobile Applikationen werden auf einem Desktop PC erarbeitet. Das Endprodukt wird aber von den User*innen nur auf den kleinen Screens von Mobiltelefonen betrachtet. Fehlt nun die Betrachtung des App Designs bei der Konzeption auf einem kleinen Bildschirm, können sich leicht Fehlüberlegungen einschleichen. Mit einem Prototypen schirmt man sich erfolgreich gegen diese ab.



Das Vorgehen bei Rapid Prototyping

Rapid Prototyping ist nicht, wie es der Begriff vermuten lässt, schnell oder schneller als "normales" Prototyping. Zumindest nicht im Bereich von User Interface oder User Experience Design (UI/UX). Der Begriff “Rapid Prototyping” stammt aus der Industriedesign-Branche, wo Produkte oder Bauteile mittels 3D Modellen getestet werden, bevor sie in Massenproduktion gehen. In diesem Zusammenhang ist das Erstellen eines Prototyps viel schneller und kostengünstiger, als wenn man auf das fertige Produkt wartet und dort Mängel feststellt. 

Im Bereich der UI/UX interpretieren wir den Begriff so, dass jeder fertig konzipierte Teil mittels Testing vom Zielpublikum geprüft wird. Falls Mängel festgestellt werden, können diese sofort und mit relativ geringem Aufwand korrigiert werden. Unter Rapid Prototyping verstehen wir also normales Prototyping als festen Bestandteil in einem iterativen Prozess bei der Konzipierung.


Was ein Prototyp für Nutzen bringen kann

Die meisten Prototypen beziehungsweise Klickdummys beschränken sich auf eine multilineare Abfolge von Screens. Diese können mittels Klick oder Tap aufgerufen werden. Als User*in bekommt man so nebst dem Visuellen auch noch ein Gefühl für die Zeit. Wie lange nimmt der Gebrauch der App in Anspruch? Könnte man eventuell den Weg zum Ziel-Screen verkürzen? Eine gute UX ist das A und O einer App und es ist wichtig, den User*innen die Nutzung möglichst einfach und unkompliziert zu machen.

Apps können bis zu einem gewissen Mass erlebbar gemacht werden, bevor sie überhaupt existieren. Deshalb eignen sich Prototypen auch besonders gut, um potentielle Geldgeber*innen von einer App Idee zu überzeugen. Man hat bereits weit mehr in den Händen als “nur” eine theoretische Geschäftsidee. Dies erleichtert die Suche nach Investor*innen oder erhöht die Chancen auf Crowdfunding, da man schon ein viel realistischeres Bild des möglichen Endproduktes vermitteln kann, als wenn man es nur beschreiben würde.

Max Hurter

«Die Zusammenarbeit mit Apps with love war so, wie ich es mir gewünscht habe: Meine eigenen Ideen konnten in der Zusammenarbeit rasch weiterentwickelt werden und es entstand ein interessantes Produkt, welches ein tollen ersten Einblick in die geplante App ermöglicht. Da ich aus einem anderen Berufsfeld stamme, war ich sehr auf das Know-How der Mitarbeiter*innen von Apps with love angewiesen, die mich stets unterstützt und weitergebracht haben.»

Max Hurter - Für sein Projekt Cosmos hat er einen Prototypen erstellen lassen.

Wie oben schon erwähnt, helfen Prototypen insbesondere, sich vor Fehlüberlegungen und hohen Aufwänden diese rückgängig zu machen, abzuschirmen. Logisch könnte man Geld einsparen, wenn man bei der Konzeption auf einen Prototypen verzichtet. Die Wahrscheinlichkeit, dass eine Idee während des Prototyping scheitert, ist jedoch häufig hoch. Würde man nun die Fehlkonzeption erst bei der programmierten App feststellen, müsste man praktisch nochmal von vorne beginnen, oder zumindest vieles neu programmieren, um den Fehler zu beheben. Diese Aufwände würden die einer sauberen Prototyping-Phase um ein Mehrfaches übersteigen. Deshalb lohnt es sich, bei der Konzeption in einen Prototypen zu investieren und nicht direkt mit dem Programmieren zu beginnen.


Warum ein gewisses Mass an Programmierung trotzdem sinnvoll sein kann

Nebst klickbaren Design-Prototypen, gibt es auch Prototypen, die doch schon programmierte Elemente enthalten. Programmierte Prototypen erstellt man beispielsweise für Apps, welche im Zusammenspiel mit einer anderen Hardware funktionieren müssen. Hier würde ein konzeptioneller Prototyp nichts bringen, da man konkret die Kommunikation zwischen der Hardware und der Software testen will und nicht, wie sonst üblich bei Prototypen, die App Architektur bzw. User Experience. 

Hierbei sprechen wir dann jeweils eher von einem Proof of Concept (PoC) oder explizit von einem technischen Prototypen. Es soll validiert werden, ob eine gewisse technische Komponente überhaupt funktionieren kann. Dazu braucht es zumindest ein gewisses Mass an Programmierarbeit. Das kann aber auch mal eine Konsolenapplikation, oder eine App mit praktisch keinem User Interface (UI) sein.

Programmierte technische Prototypen oder PoCs bringen also einen Vorteil, wenn man nicht das User Interface oder die User Experience testen will, sondern effektiv die technische Machbarkeit oder Funktionalität. Also zum Beispiel wenn das Zusammenspiel mit einem existierendem Produkt (Software oder Hardware) oder einer Schnittstelle (Bluetooth, NFC, komplexe Authentifizierung) nötig ist.

Technischer Prototyp für Hardware
Wird ein PoC für eine App gebaut, um etwa das Funktionieren mit bestimmter Hardware sicherzustellen, ist die Hardware oft auch noch ein Prototyp.

Geeignete Tools für das Prototyping

Darüber, welche Tools sich am besten für das Erstellen von Prototypen eignen, gehen die Meinungen auseinander. Es gibt viele Produkte auf dem Markt, die alle ungefähr das gleiche können, aber natürlich dennoch ihre Stärken und Schwächen haben. Um nur einige beim Namen zu nennen: 

Des Weiteren sind die meisten UI/UX Tools mittlerweile auch mit Prototyping Funktionen ausgestattet:

Alle oben genannten Tools haben grundsätzlich die gleichen Funktionen wenn es um Prototyping geht. Man kann Screens miteinander verbinden und eine Transition zwischen den Screens bestimmen.
Einzig Flinto geht weiter als die simple Verbindung zwischen Screens. Es ist möglich, komplexe Transitionen völlig benutzerdefiniert zu erstellen, um so für die konzipierte App ein einmaliges Erlebnis zu erzielen.

Beim Thema Lizenzkosten verhält es sich in etwa gleich wie beim Funktionsumfang. Mittlerweile sind die meisten Tools in einem Monats- oder Jahresabonnement erhältlich. Einige bieten da auch einen gratis Plan mit weniger Funktionen, andere eine Vollversion zum ausprobieren für ca. 2 Wochen. Die Kosten bewegen sich zwischen 8 - 20 USD pro Monat, wobei man bei einer jährlichen Zahlung noch einen gewissen Rabatt erhält. Welches Tool genutzt wird, ist also letztendlich meist vor allem von persönlichen Präferenzen und Gewohnheiten abhängig.



Aufwände für die Erstellung eines Prototypen

Wie aufwändig die Erstellung eines Prototypen ist, kommt natürlich ganz auf die Art des Prototypen, den Umfang der App und wie detailliert der Prototyp sein soll an. Ein weiterer Faktor ist der Ausarbeitungsstand der Screens. Auf Basis von Wireframes (Kästchen und Linien, meistens ohne Farbe) kann man in wenigen Stunden einen kompletten Prototypen bauen. Falls man dies aber mit ausgearbeiteten Screens machen will, welche auch bereits “realen” Inhalt darstellen sollen, kann der Aufwand sich rasch vergrössern. 

Als praktisches Beispiel zur Veranschaulichung nehmen wir zwei unterschiedliche Arten von Prototypen für eine Fotosammlung.


Eine Fotosammlung auf Basis von Wireframes

Für diesen Prototypen sind lediglich zwei Screens notwendig

  • eine Übersicht
  • die Detailansicht eines Bildes

Da keine “realen” Inhalte gezeigt werden, sieht die Detailansicht aller Bilder gleich aus. Die Aufwände diesen Prototypen zusammenzustellen sind minim. Trotzdem wird veranschaulicht, wie die Lösung aufgebaut ist und wie die Navigation durch die Fotosammlung funktionieren wird.

Prototyp auf Wireframe Basis

Hier kannst du den Prototypen selber ausprobieren.

Eine Fotosammlung mit “realen” Inhalten

Hier orientiert sich die Anzahl Screens an der Anzahl Bilder in der Sammlung. Pro Foto braucht es einen Screen im Prototypen

  • Übersicht
  • Detailview Bild 1
  • Detailview Bild 2
  • Detailview Bild 3

Die Anzahl Screens eines Prototypen kann sich also schnell vervielfachen, je nachdem was abgebildet werden soll.

Zusammensetzung einer Fotosammlung mit realen Inhalten

Hier kannst du dich selber durch den Prototypen klicken.

Spare Zeit, Kosten und Nerven

Klickdummys und Prototypen allgemein, sind ein wertvolles Tool, um Funktionalitäten zu testen, ohne dass bereits teure Programmieraufwände entstehen. Durch das Abbilden des angedachten User-Flows werden mögliche Logikfehler sichtbar und können frühzeitig behoben werden. Ausserdem helfen Prototypen zukünftigen User*innen oder Auftraggeber*innen enorm dabei, sich vorstellen zu können, wie die Lösung funktionieren wird. Das heisst Prototypen veranschaulichen viel besser was die Idee hinter einer geplanten App ist und wie sie sich anfühlen wird. Damit kann ein Prototyp auch zu einem wichtigen Tool etwa bei der Suche nach potentiellen Geldgeber*innen werden.

Eine verhältnismässig kleine Investition in eine saubere Prototyping Phase lohnt sich also durchaus, da auf lange Dauer Zeit und Kosten eingespart werden können.

Melde Dich bei uns wenn Du eine App Idee hast, die Du mit Hilfe eines Prototypen validieren und auf nächste Level bringen möchtest.

Wir haben grad gemerkt, dass du mit Internet Explorer surfst. Unsere Webseite sieht damit leider nicht so schön aus.

Du willst erfahren warum das so ist?
Wir haben darüber geschrieben.

Zum Blog

Du brauchst Hilfe bei der Umstellung?
Melde dich. Wir helfen gern.

Kontakt

Einen neuen Browser installieren?
Hier gibt es Auswahl.

Browser