GUI Prototyping auf dem Desktop und im Web, Teil 2 3 (weitere) kostenlose Mockup-Tools

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

FIS Informationssysteme und Consulting GmbH

Confluent Germany GmbH

Vom schnellen UI-Design über funktionale Prototypen bis hin zum Teilen und Diskutieren mit Kollegen: kleinere Projekte können beim Erstellen von Mockups auf kostenlose Tools zurückgreifen.

Vor einiger Zeit haben wir bereits einige kostenlose Mockup- und Rapid-Prototyping-Werkzeuge vorgestellt. Hier folgt ein wenig Nachschub in Form dreier gelungener, moderner Tools für Web- und Mobile-Apps, die allesamt als Webservices direkt im Browser laufen. Inklusive einer waschechten Open-Source-Lösung. Zum Einsatz kommen …

• die ausgereifte und umfangreiche Software von Mockplus RP für voll funktionsfähige Prototypen,

• das eher eingeschränkte und für schnelles UI-Design geeignete Marvel sowie

• die Open-Source-Anwendung Quant-UX, die sogar mit einem Feld für Low-Code lockt.

Alle Tools können sinnvoll kostenlos eingesetzt werden, zumindest für kleinere Teams und Projekte. Insbesondere für weitere Nutzer und Projekte oder Features zur Kollaboration fallen bei Marvel und Mockplus Kosten an. Das freie – übrigens aus Deutschland stammende – Quant-UX bleibt diesbezüglich außen vor – und erfreulicherweise sieht diese Open-Source-App auch noch sehr gut aus.

Bildergalerie

Marvel

Marvel beschreibt Marvel RP als „Rapid Prototyping, Testing und Handoff für moderne Design-Teams“. Das Prototyping macht den Anfang und hier wird schnell klar, dass das Konzept eher Grafik-lastig ist, der Import vorhandener Mobile-Screens beziehungsweise Webseiten zielt nämlich auf Bildformate ab.

Aber natürlich lassen sich Designs auch From-Scratch direkt im Editor erstellen. Dafür stehen neben rudimentären Zeichenwerkzeugen vor allem etliche Plattform-typische Elemente zur Verfügung, also beispielsweise die üblichen Android- oder iOS-Buttons, -Menüs, -Player und so weiter. Aber auch komplette Standard-Screens wie etwa Twitter-Logins, Zeit-Wähler oder Kamera-Ansichten finden sich in der Bibliothek.

Elemente lassen sich gruppieren, an Hilfslinien ausrichten sowie individuell bearbeiten und so in die Bibliothek aufnehmen. Insgesamt läuft das Designen sehr flüssig. Kleiner Makel: Die Gratis-Version ist laut Website auf je einen Nutzer, ein Projekt und einen Test beschränkt – im Editor fehlt jedoch auch die Möglichkeit, mehr als zwei Screens anzulegen. Allerdings können Screens beliebig lang sein, so dass sich Screens via Scrolling simulieren lassen.

Das eigentliche Prototyping ist allerdings noch einmal in einem anderen Fenster untergebracht. Die Funktionalität beschränkt sich auf das Setzen von Aktionsbereichen, die dann zu anderen Screens oder Ankern im aktuellen Screen verlinken. Fertige Prototypen können dann im interaktiven virtuellen Smartphone getestet werden.

Der Handoff-Bereich hingegen bietet sehr detaillierte Möglichkeiten. Hier können ausführliche Reviews zu allen Aspekten des Designs hinterlegt werden, sauber sortiert in hierarchischen Gruppen. Die Eigenschaften eines jeden Elements werden in der Seitenleiste aufgeführt, zusammen mit dem zugehörigen XML-Code und einer Download-Möglichkeit für etwaige Assets wie Grafiken.

Auch der User-Test-Bereich ist wirklich gelungen: Über einen generierten Link können Nutzer eingeladen werden, den Prototypen im Simulator zu testen – mit freier Nutzung oder einem vorgegebenen Ziel (etwa einem bestimmten Screen). Das Resultat einer solchen Session sind statistische Informationen, beispielsweise zu Klicks/Tabs auf inaktive Bereiche, und ein Screenvideo der gesamten Nutzerinteraktion.

Marvel RP ist bezüglich der Funktionalität der Prototypen dünner ausgestattet als viele Mitbewerber – was häufig nicht ins Gewicht fallen dürfte. Dafür geht das Design sehr fix und die Test- und Review-Features sind sehr gefällig.

Mockplus RP

Mockplus RP bietet in Kombination mit Mockplus Cloud einen ähnlichen Leistungsumfang wie Marvel RP – aber mit größeren Unterschieden. Der Mockplus-Designer ist deutlich ausgefeilter, optisch wie inhaltlich hat er mehr zu bieten. Die Einstellungen und Tools sind zahlreicher und kleinteiliger zu konfigurieren, was letztlich zu mehr optischen Gestaltungsmöglichkeiten führt – und zu mehr Spaß bei der Arbeit!

Wesentlich relevanter ist aber sicherlich das Plus an Prototyping-Features. Marvel-Prototypen sind letztlich Grafiken mit Hotspots zum Verlinken. Mockplus-Varianten bestehen hingegen aus wirklich interaktiven Elementen. So kann beispielsweise das Web-View-Element tatsächlich Webseiten anzeigen und nutzbar machen. Auch Mediendateien können Sie so in Designs einbauen.

Schon bei vermeintlichen Kleinigkeiten ist dieses Mehr an Interaktivität ein Segen, so lassen sich zum Beispiel Checkboxen ganz praktisch an- und abhaken. Kurzum lassen sich wirklich Prototypen erstellen, mit denen man etwas „herumspielen“ kann. Sehr gelungen: die äußerst nützliche Storyboard-Ansicht. Hier wird der Weg eines Nutzers zu den verschiedenen Funktionen und Bereichen sehr schön übersichtlich deutlich.

Mockplus Cloud wiederum dient als Kollaborationsplattform, also für die Handoff-Funktion. Die ist hier grundsätzlich sehr ähnlich aufgebaut wie bei Marvel, auch hier gibt es diverse Kommentarmöglichkeiten, Eigenschaften, Download-Möglichkeiten und so weiter. Allerdings ist auch dieser Bereich bei Mockplus aufgeräumter und moderner. Hinzu kommen Helferlein wie Revisionshistorie und Lupe.

Die Arbeit in allen Mockplus-Bestandteilen ist durchaus Grund zur Freude. Die Navigation und Verknüpfung all dieser Dinge sind hingegen extrem nervenaufreibend. Ständig öffnen sich neue Tabs, teils landet man in Editoren und fragt sich, wozu dieser denn gerade dienen soll, das Aufrufen einiger Funktionen wie den Handoffs gleicht einem Rätsel aus einem Point- and Click-Adventure.

Quant-UX

Quant-UX ist Open Source Software und wie könnte es anders sein: Hier geht noch ein wenig mehr. Zwar gibt es hier keinerlei Service-Universum mit Handoffs, Cloud-Speicher, App-Store oder dergleichen, aber einen sehr guten Prototyper mit deutlich mehr Features für Programmlogik, ein außergewöhnlich gutes Test-Feature und freilich mehrbenutzerfähig.

Der eigentliche Designer ähnelt auf den ersten Blick dem Marvel-Äquivalent: die typischen Bausteine aus Design-Welten wie Material, WireFrame oder iOS, Zeichenwerkzeuge, Hilfslinien für die Ausrichtung und so weiter. Dinge wie Checkboxen sind dabei interaktiv.

Daneben fallen zwei weitere Bausteine auf: Ein Logik-Operator und ein Web-Service-Element. Der Logik-Baustein kann für A/B-Tests genutzt werden: Er wird zwischen Link-Auslöser (Button) und zwei Link-Ziele geschaltet und leitet Nutzer bei Tests zufällig auf einen der Wege. Über den Web-Baustein lassen sich Rest-APIs abfragen, was allein für enorme Möglichkeiten sorgt.

Im Prototyping-Modus beschränkt sich auch Quant-UX auf das Setzen von Links und Animationen, was einfach und reibungslos klappt. Dann gibt es noch den Reiter Low-Code: Hier können dann doch nur Methoden übergeben werden, die von dem echten finalen Programm – nicht dem Prototypen! - aufgerufen werden sollen. Das macht allerdings das Übernehmen der Prototypen in die Entwicklung einfacher. Zumal Quant-UX HTML, CSS und Vue.js aus den Designs erzeugen kann, auch via CLI.

Das Highlight ist aber der Testbereich: Im Simulator wird die Nutzer-Session als Screenvideo aufgezeichnet, dazu gibt es eine CSV-Tabelle mit genauen Informationen zu allen Interaktionen und obendrein noch gut aufbereitete Heatmaps. Darüber können Sie nachvollziehen, welche Wege Mauszeiger genommen und welche Bereiche angegklickt wurden.

Alle vorgestellten Mockup-Tools haben ihre Stärken und Schwächen. Die Marvel-Apps liefern einen ordentlichen Workflow für Teams unter einer nützliche, unspektakulären Oberfläche, schwächelt aber etwas beim Prototyping. Das Mockplus-Universum liefert die professionellste Oberfläche mit den meisten Design-Tools und ebenfalls einen guten Team-Workflow, auch wenn die schicken Test-Module der Konkurrenz fehlen – das Navigations-Chaos ist allerdings zu beginn nervig.

Quant-UX ist die eigentliche Überraschung: Optisch deutlich ansprechender als manch anderes (kleineres) Open-Source-Projekt, gute Design- und Prototyping-Tools und eben die schon gelobte Testumgebung. Das „Anspielen“ lohnt sich in allen drei Fällen.

(ID:48754725)