App Prototyping - Nutzen, Design-Tools und Beispiele

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.

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.

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.

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.

Hier kannst du den Prototypen selber ausprobieren.

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.

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.