Statische Wireframes und Designs reichen heute kaum noch aus, denn Websites und Software werden immer komplexer und interaktiver. Zum Glück können mit Prototyping-Tools alle Interaktionen simuliert und ausprobiert werden, noch bevor ein Entwickler eine Zeile Code schreiben muss. So können Designs verständlich gemacht, Usability-Tests mit echten Nutzer*innen durchgeführt, Stakeholder überzeugt und den Entwicklern die Anforderungen erklärt werden. Deshalb gehört das Prototyping inzwischen zum Standard-Repertoire in der UX Konzeption. Der Markt der Prototyping-Tools ist jedoch unübersichtlich und wächst unaufhörlich weiter. Die Stärken und Schwächen einiger bekannter Tools werden in diesem Beitrag beleuchtet.
(Weitere bekannte Prototyping-Tools wie Adobe XD, InVision und Marvel wurden hier ausgelassen, da sie in ihrer Funktionalität noch sehr eingeschränkt sind und/oder ihren Fokus vor allem auf Rapid Prototyping setzen.)
| Axure | Justinmind | proto.io | UXPin | HotGloo | |
|---|---|---|---|---|---|
| Allgemeines | |||||
| Preis pro Lizenz | ab $0 | - | - | - | |
| Preis pro Monat | ab $29 | ab $0 | ab $24 | ab $19 | ab $13 |
| Webbasiert | nein | nein | ja | ja | ja |
| Widgets und Design | |||||
| Mitgelieferte Libraries | Wenige | Viele | Viele | Sehr viele | Wenige |
| Eigene Libraries | ja | ja | nein | ja | nein |
| Mögliche Fidelity | hoch | hoch | hoch | hoch | niedrig |
| Kompatibilität mit anderen Tools | ja | ja | ja | ja | nein |
| Components | ja | ja | ja | ja | ja |
| Interaktivität | |||||
| Animationen | ja | ja | ja | ja | nein |
| Variablen | ja | ja | ja | ja | nein |
| Bedingte Interaktionen | ja | ja | ja | ja | nein |
| Device-Unterstützung | |||||
| Responsive Design | ja | ja | nein | ja | ja |
| Apps für Mobile Devices | ja | ja | ja | ja | nein |
| Touch-Gesten | ja | ja | ja | ja | nein |
| Kollaboration | |||||
| Team-Projekte | ja | ja | ja | ja | ja |
| Paralleles Arbeiten | ja | ja | nein | ja | ja |
| Versionierung | ja | ja | nein | nein | nein |
| Veröffentlichen | ja | ja | ja | ja | ja |
| Kommentieren | ja | ja | ja | ja | ja |
| Dokumentation | |||||
| Spezifikation generieren | ja | ja | ja | ja | nein |
| Annotationen | ja | ja | ja | ja | nein |
Ein wichtiges Entscheidungskriterium ist sicher immer der Preis. Grundsätzlich unterscheiden sich die Prototyping-Tools zwischen einmaligem Kauf und einem Abo-Modell. Nur für Justinmind kann eine Lizenz gekauft werden und liegt dann zwischen 0 und 455 US-Dollar (je nach Funktionsbedarf).
Beim Abo liegt Axure RP preislich an der Spitze: 29 US-Dollar fallen monatlich mindestens an. Im Mittelfeld liegen Justinmind, proto.io und UXPin mit um die 20 US-Dollar pro Monat. Der Einstieg in die Welt der Prototyping-Tools beginnt mit HotGloo für 13 US-Dollar.
Beim Vergleich der Preise ist jedoch Vorsicht angesagt: Es gibt meist mehrere Varianten, die sich in der Anzahl der Nutzer, der Projekte und manchmal auch in den Features unterscheiden. Die hier genannten sind immer die günstigsten Preise.
Ein wichtiger Faktor ist auch, ob das Prototyping-Tool webbasiert im Browser läuft (proto.io, UXPin und HotGloo) oder als Standalone-Software installiert wird (Axure und Justinmind). Beide Varianten bieten Vorteile:
Um einen Prototypen zu erstellen werden in allen Tools vorgefertigte Widgets eingesetzt, die wie ein Baukasten funktionieren. Alle fünf Tools kommen mit einer gewissen Auswahl solcher Widgets, doch der Umfang unterscheidet sich stark: Axure RP und HotGloo bieten nur geometrische Formen, Formularelemente und einige wenige weitere UI-Pattern. Justinmind und proto.io gehen schon weiter und liefern direkt Bibliotheken mit Standard-Widgets für iOS und Android mit. UXPin schließlich hat die größte Auswahl an Widgets.
Die mangelnde Auswahl von Widgets in Axure RP wird ausgeglichen durch die Möglichkeit, eigene Bibliotheken anzulegen oder zu importieren. Im Web gibt es viele vorgefertigte Bibliotheken - teilweise umsonst, teilweise kostenpflichtig. Auch Justinmind und UXPin erlauben, eigene Widget-Bibliotheken anzulegen.
Prototypen werden häufig nach der visuellen Fidelity, also der grafischen Genauigkeit oder Ausgestaltung, unterschieden. High-Fidelity-Prototypen sehen fast aus wie die fertige Software, während Low-Fidelity-Prototypen eher an interaktive Wireframes erinnern. Generell erlauben fast alle hier genannten Prototyping-Tools sowohl High- als auch Low-Fidelity. Nur HotGloo bietet sehr eingeschränkte grafische Einstellungen und taugt somit nur für Low-Fidelity-Prototypen.
Wenn das Design bereits in einem anderen Tool erstellt wurde und nur interaktiv gemacht werden soll, dann bieten fast alle Prototyping-Tools Möglichkeiten, mit Design-Software zusammenzuarbeiten: Bis auf Hotgloo, können alle Programme entweder z. B. direkt aus Photoshop oder Sketch importieren (proto.io, UXPin) oder bieten zumindest ein Plugin an, mit dem ausgewählte Elemente z. B. aus Sketch, oder Adobe XD eingefügt werden können (Axure RP, Justinmind). Dabei bleiben alle Layer in ihren Elementen erhalten, sodass sie sehr leicht zu einem Prototypen weiterentwickelt werden können.
Wiederkehrende Teile eines Prototypen, typischerweise etwa ein Website-Header, können in allen Prototyping-Tools als sogenannte „Components“ verwaltet werden. Sie werden zentral angelegt und Änderungen wirken sich dann auf alle Seiten aus.
Beim Prototyping geht es vor allem darum, die einzelnen Screens interaktiv zu machen, sodass sie auf Benutzeraktionen reagieren. Grundsätzlich können dies alle hier diskutierten Tools. Der genaue Umfang unterscheidet sich jedoch stark.
Animationen werden von allen Prototyping-Tools außer HotGloo unterstützt. Eindeutig am besten dafür geeignet ist jedoch proto.io, bei dem sehr einfach zwischen verschiedenen States animiert werden kann und die Einstellungen dafür über einen Zeitstrahl erfolgen.
Um auch komplexere Interaktionen zu simulieren, müssen ggf. Daten in Variablen gespeichert und von Screen zu Screen weitergegeben werden. Dies ist nur nicht mit HotGloo möglich. Durch bedingte Interaktionen (Conditions) können bestimmte Zustände geprüft werden, um dann unterschiedliche Aktionen auszuführen.
Grundsätzlich unterstützen alle Prototyping-Tools verschiedene Geräteklassen wie Smartphones und Tablets. Meist läuft dies über die Auswahl des Devices beim Anlegen eines Projektes. Responsive Websites unterstützt proto.io als einziges der hier genannten Prototyping-Werkzeuge nicht. Nicht überall funktioniert dieses Feature gleich: Während sich in Justinmind die Elemente bereits so anlegen lassen, dass wir im Fenster simulieren können, wie sich die Webseite auf unterschiedlichen Screens verhält, können wir bei Axure RP nur mit zuvor festgelegten Breakpoints arbeiten. Seit Axure RP 10 wurde dieser Schritt allerdings durch die „Resizing Constrains“ deutlich erleichert.
Für Touch-Geräte sind auch entsprechende Gesten unerlässlich. Leider unterstützt HotGloo diese nicht, so dass es für mobile Prototypen nur sehr eingeschränkt empfehlenswert ist.
Axure RP, Justinmind und proto.io bieten verschiedene Wege an (sowohl per Direktlink als auch per App), mit denen die Prototypen dann sehr einfach auf dem tatsächlichen Device angezeigt werden können. Das macht etwa das Durchführen von Usability-Tests ohne großen Aufwand möglich. Für UXPin gibt es immerhin eine Mirror-App, um das Design auf einem echten Gerät spiegeln zu können.
Heutzutage arbeitet häufig nicht mehr ein einzelner Designer an einem UX-Design, sondern mehrere Team-Mitglieder gemeinsam. Auch Feedback-Schleifen mit Kunden oder Kollegen sollte ein Prototyping-Tool bestmöglich unterstützen.
So ist es nicht verwunderlich, dass alle fünf Prototyping-Tools Kollaborationsfunktionen bieten. In Axure RP und Justinmind können Team-Projekte genutzt werden, damit mehrere Personen parallel an einem Prototypen arbeiten können und dieser immer auf dem neusten Stand bleibt. Die anderen, webbasierten Tools, speichern die Prototypen sowieso in der Cloud, sodass dies kein Problem darstellt. Bis auf proto.io kann sogar mit allen Tools mit mehreren Personen gleichzeitig gearbeitet werden.
Die Team-Projekte bieten in Axure RP und Justinmind einen weiteren Vorteil: Es werden verschiedene Versionen erzeugt, sodass Änderungen nachverfolgt und rückgängig gemacht werden können.
Alle Tools erlauben es, den Prototypen zu veröffentlichen, sodass andere Nutzer ihn betrachten und kommentieren können.
Wenn direkt aus dem Prototypen ein Spezifikationsdokument erzeugt werden soll, etwa als Grundlage für die technische Umsetzung, dann eignen sich inzwischen alle Prototyping-Tools hierzu. Axure RP hat hierzu mehrere Optionen an Bord und kann sowohl CSS-Code für die Entwickler bereitstellen, als auch Word-Dateien und Flow-Charts exportieren. In allen Prototyping-Tools lassen sich Annotationen nutzen, um den Prototypen ausführlich zu dokumentieren. Diese können dann im Browser betrachtet werden.
Wie an dieser Gegenüberstellung zu erkennen ist haben alle Prototyping-Tools sowohl Vor- als auch Nachteile. Es gibt kein bestens Tool, sondern nur das richtige Tool für einen bestimmten Einsatzzweck.
Am vergleichbarsten sind Axure RP und Justinmind. Sie sind beide eindeutig an Fortgeschrittene gerichtet, denn sie bieten einen sehr großen Funktionsumfang und ermöglichen auch sehr komplexe Interaktivität. Justinmind besitzt leichte Vorteile im Umgang mit Daten, bei der Team-Kollaboration und durch die mitgelieferten Bibliotheken. Axure RP dagegen hat bei komplexen Interaktionen die Nase vorn und bietet zudem eine weit größere und hilfreichere Community. So ist es leichter, Axure RP zu erlernen, etwa mit Online-Kursen oder Axure RP Training von professionellen Anbietern.
Auch die anderen drei Prototyping-Tools bedienen jeweils spezielle Anforderungen:
Somit ist das wichtigste bei der Auswahl des richtigen Prototyping-Tools, die eigenen Bedürfnisse zu analysieren. Zudem sollte unbedingt vorher ausgiebig getestet werden. Dafür bieten alle hier beschriebenen Tools kostenlose Trial-Versionen an.
Ihre Rückmeldung zu diesen Überlegungen und Thesen interessiert uns sehr.
Schreiben Sie uns!
Robin Nagel (2022): Prototyping-Tools im Vergleich, In: Forschungsbeiträge der eresult GmbH
Usability und UX-Qualitätssiegel
Wir sind aktiv in diesen Verbänden, Vereinen und Netzwerken:
