Praktikum (2) – Evaluation: Prototyping-Tools

Last updated on 26. Januar 2014

Da ich mich in meinem Praktikum thematisch mit Benutzeroberflächen beschäftige, ist es auch ein Teil davon, verschiedene Mocking- bzw. Prototyping-Tools zu betrachten und zu evaluieren. In diesem Artikel werde ich nun einige Tools vorstellen und bewerten.

Bewertungskriterien:

Für die Evaluation der Tools, möchte ich zunächst die Bewertungskriterien festlegen. Wichtig, da eines der Tools später eventuell in meiner Praktikums-Firma eingesetzt werden soll, sind die Kosten des jeweiligen Programms.
Für den Funktionsumfang werde ich folgende Aspekte betrachten:

• Stehen die wichtigsten Elemente zur Verfügung?
• Können zusätzliche Bibliotheken installiert werden?
• Ist das Gestalten eines Prototypen möglich?
• Eigene Elemente einbindbar/erstellbar?

Weiterhin möchte ich sehen, wie das Endergebnis aussieht, wie sich die Lernkurve verhält und ob das Programm intuitiv bedienbar ist. Die Möglichkeit einer Versionierung der Arbeitsergebnisse stellt einen weiteren Aspekt dar.
Um einen Vergleich anstellen zu können, wie gut oder schlecht das Arbeitsergebnis mit den Programmen ist, werde ich auf ein Minimalbeispiel zurückgreifen. Der Aspekt, auf welcher Plattform das Programm verfügbar ist, spielt zwar eine untergeordnete Rolle, jedoch möchte ich diesen Punkt nicht außer Acht lassen.

Zuletzt möchte ich noch ein kurzes Statement zu meinem Gesamteindruck des jeweiligen Programms liefern.

Das Minimalbeispiel

Die Anforderungen, die ich an mein Minimalbeispiel stelle sind die folgenden:

• Es müssen mehrere Screens vorhanden sein.
• Es muss eine interaktive Verbindung zwischen den Screens geben.
• Auf den Screens sollten sich individuell gestaltete Elemente befinden.
• Die einzelnen Screens sollen verschiedene Kontrollelemente enthalten.
• Der Prototyp soll Eingaben zulassen.

Aus den Anforderungen leite ich als Minimalbeispiel eine kleine Blog-Webseite ab. Der Prototyp soll aus 3 Screens bestehen, in welchen typische Elemente eines Blogs vorhanden sind. Dabei sollen eine Tagcloud als individuelles Element, Links und Buttons als Kontrollelemente und für die Umsetzung der interaktiven Verbindung ein Login dienen.

Die dafür vorgehesehenen Screens sind die folgenden: Die Blogansicht, wenn kein Nutzer angemeldet ist (1), die Login-Maske (2) und die Blogansicht, als angemeldeter Nutzer (3). In der Login-Maske soll das eintippen eines Namens und eines verdeckten Passwortes möglich sein.

Betrachtete Tools

Auf dem Markt gibt es eine Vielzahl von Mocking- und Prototyping-Tools, die ich in diesem Rahmen nicht alle betrachten kann. Daher habe ich bereits eine kleine Vorauswahl getroffen, die einen Teil der Anforderungen bereits erfüllen. Das ausschlaggebende Kriterium hierfür war, dass die Funktionalität, einen Prototypen zu erstellen, gegeben sein muss. Außerdem habe ich nach unterschiedlichen Preiskategorien sortiert.

Wireframe Sketcher

Mit Wireframesketcher habe ich bereits in meinem letzten Hochschulprojekt Erfahrung sammeln können. Es lässt sich auf allen Betriebssystemen als separate Desktop-Anwendung oder alternativ als Eclipse-Plugin installieren. Die Desktop-Anwendung arbeitet mit dem Interface von Eclipse. Sofern man mit Eclipse entwickelt, bietet sich hier, sowohl in der Desktop- als auch in der Plugin-Variante, der Vorteil in einer gewohnten Umgebung zu interagieren.

Über das Erstellen eines Storyboards kommt man auf einfache Weise zu einem interaktiven Prototypen. Schon während der Entwicklung der Oberfläche kann man sich immer wieder ansehen, wie der Prototyp aktuell arbeitet. Dieser lässt sich durch die Arbeit mit dem Storyboard auch als interaktives PDF oder HTML exportieren. Das ermöglicht zum einen das Ausprobieren des Prototypen und zum anderen kann man sich in der PDF-Datei die einzelnen Screens separat betrachten. Der Umfang der Elemente, die zur Verfügung gestellt werden, machen den Eindruck vollständig zu sein. Auf der Webseite kann man sich jedoch auch zusätzliche Bibliotheken downloaden und somit den Pool an Elementen erweitern. Darunter befinden sich auch Module zum Erstellen mobiler Anwendungen. Es ist auch möglich, eigene Komponenten zu erstellen. Eine Versionsverwaltung kommt von Haus aus nicht mit.

Minimalbeispiel

Durch meine Erfahrung mit Wireframesketcher fiel mir der Wiedereinstieg nicht schwer. Das Programm ist in mit der Eclipse-Oberfläche intuitiv bedienbar. Via drag&drop lassen sich die Elemente auf einem Screen verteilen. Auch das Erstellen eigener Komponenten ist ohne große Anstrengungen ist. So habe ich auch eine Komponente für meine Tagcloud erstellen können. Über Hotspots kann man Verlinkungen auf andere Screens setzen und somit die Interaktivität aufbauen. Leider beschränkt sich die Interaktivität hier auf Verlinkungen. Nutzereingaben, wie das Ausfüllen von Textfeldern, sind nicht möglich.

Hauptfenster mit Wireframesketcher

Minimalbeispiel als interaktives PDF

Gesamteindruck

Mit Wireframesketcher lassen sich ansprechende Arbeitsergebnisse erzielen. Die Exportmöglichkeit in ein interaktives PDF oder HTML ist sehr nützlich für das Teilen mit dem Kunden. Der Entwicklerblog ist auch aktuell und wird ständig mit neuen Inhalten aufgefrischt. Mit $99 für eine Einzellizenz bzw. $89 bei mehreren Lizenzen ist es ein vergleichsweise günstiges und dennoch umfassendes Tool.

Justinmind Prototyper

Der Justinmind Prototyper ist mit einem Preis von $495 das teuerste Programm aus meiner Liste. Jedoch verspricht der Eindruck, den man von der Webseite bekommt, dass es das Geld auch wert ist. Positiv anzumerken ist, dass das Tool zusätzliche Bibliotheken zur Verfügung stellt, welche nach Bedarf von der Webseite kostenlos heruntergeladen und importiert werden können. Diese umfassen neben Bibliotheken für Webanwendungen auch solche für Mobile Anwendungen. Für diese können auch Gesten simuliert werden. Das Erstellen eigener Widgets ist ebenso möglich und damit auch das Zusammenstellen eigener Bibliotheken. Sie können bei den Entwicklern eingereicht und eventuell mit in den Katalog aufgenommen werden.

Während des Erstellens eines Prototypen hat man jederzeit die Möglichkeit, sich ein bisheriges Arbeitsergebnis zu simulieren. Die Webseite bietet zudem auch ein Tutorial sowie verschiedene Anleitungen und Beispiele für Prototypen, an denen man sich orientieren und erproben kann. Weiterhin wird einem die Möglichkeit geboten, das Programm durch Plugins zu erweitern, wofür es zudem ein SDK zum Entwickeln eigener Plugins gibt. Aus dem Blog der Entwickler ist ersichtlich, dass das Programm ständig weiterentwickelt und damit auch aktuell gehalten wird. Eine Versionierbarkeit der Arbeitsergebnisse ist nicht vorhanden.

Minimalbeispiel

Der Einstieg in das Programm ging recht schnell. Die Elemente, die einem zur Verfügung stehen, um das Mockup zu gestalten, sind übersichtlich und sortiert angeordnet. Über eine Suchfunktion lassen sich die Elemente auch schnell finden. Man findet zugleich die zusätzlichen Bibliotheken unter „My Widgets“. In diesen Bereich ist es möglich, selbst erstellte Widgets abzulegen und zu speichern.
Nach kurzem Probieren ist auch ersichtlich, wie die drei Arbeitsbereiche „Screen“, „Template“ und „Master“ miteinander agieren und wie sie funktionieren. Durch diese Aufteilung ist es ohne großen Aufwand möglich gewesen, Dopplungen bei der Zusammenstellung der Seiten zu vermeiden und ein einheitliches Layout zu erstellen. Ein sehr nützliches Feature ist das Definieren von Konditionen und Interaktionen für einzelne Elemente. Dadurch war es mir möglich den Login nur zu zulassen, wenn der Nutzer auch den richtigen Namen und das richtige Passwort eingibt.
Da mir während des Erstellens des Beispiels eine Tagcloud und ein Kalender gefehlt haben, habe ich hierfür eingene Widgets erstellt. Nachdem ich die einzelnen Labels für die Tagcloud zusammengestellt hatte, konnte ich diese gruppiert einfach in den Bereich „My Widgets“ ziehen. Einmal dort abgelegt, kann ich die Tagcloud sowie den Kalender nun immer wieder verwenden.

Nach dem Erstellen des Prototypen hat man die Möglichkeit, diesen in HTML zu exportieren oder auch online zu veröffentlichen. Für die Veröffentlichung ist die ebenfalls zu Justinmind gehörende Plattform „Usernote“ über einen Account nutzbar.

Ein Screenshot meines Prototypen:

Gesamteindruck

Der erste Eindruck, den man von dem Tool bekommt, wenn man sich allein die Webseite betrachtet, ist mehr als gut. Beim Erstellen meines Minimalbeispieles hat sich dieser Eindruck bestätigt. Es ist ein mächtiges Tool, welches viele Funktionen bietet, dabei aber nicht unübersichtlich wirkt. Die Interaktionen, die dem Nutzer ermöglicht werden sind sehr umfangreich, aber dennoch verständlich. Durch das Kreieren eigener Widgets ist es möglich individuelle Designs zu erstellen. Die Exportmöglichkeit in HTML ist ein sehr gutes Feature, welches dem Kunden ermöglicht, den Prototyp im Browser zu testen. Der Justinmind Prototyper ist zwar sehr teuer, bietet dafür allerdings auch sehr umfangreiche Möglichkeiten.

Serena Prototype Composer

Den Serena Prototype Composer kann man in einer kostenlosen Community Edition oder in der Professional Edition erwerben. Preislich liegt es, mit 275,37€, im Rahmen der betrachteten Tools im Mittelfeld. Jedoch muss man sich selbst für die Community Edition mit der Angabe vieler Daten registrieren. Auf der Webseite wird ein Demo-Video bereitgestellt, in welchem man einen groben Überblick über die Funktionen bekommt. Mein erster Eindruck durch das Video war, dass das Programm „zu viel“ kann. Es unterstützt neben der Funktion einen Prototypen zu erstellen, ebenso die Möglichkeit Workflows zu modellieren, Applikationslogik zu simulieren oder auch Anforderungen ähnlich wie in einem Issue Tracker zu definieren. Eine Versionierung der Modelle ist möglich.

Minimalbeispiel

Durch die vielen Interaktionsmöglichkeiten, die immer präsent sind, ist der Einstieg in das Programm zunächst beschwerlich. Entscheidet man sich nun, mit dem der Gestaltung des Interfaces anzufangen, merkt man schnell, dass man bei der Auswahl der Elemente eingeschränkt ist. Die Wichtigsten sind zwar vorhanden, aber die kleinen Piktogramme erschweren die Übersichtlichkeit und man sucht sehr lange, bis man das gewünschte Element gefunden hat.
Das Definieren bestimmter Eigenschaften der Elemente ist zwar möglich, aber nur versteckt zu finden und damit ist es recht mühsehlig, die Oberfläche genau so zusammenzustellen, wie man sie gestalten möchte.
Möchte man die verschiedenen Interfaces verbinden muss man Über den Umweg gehen, zunächst eine Aktivität anzulegen. Leider ist dies nicht sofort ersichtlich und erfordert einige Versuche à la Trial and Error. Für eine produktive Arbeit ist das allerdings nicht zielführend.
Eine Exportmöglichkeit des Prototypen ist nicht gegeben. Es ist lediglich möglich den Protoypen im Programm selbst anzusehen.

Gesamteindruck

Das Programm wirkt sehr unübersichtlich und die andauernd auftretenden Pop-up-Meldungen, sofern man ein Element löschen möchte, stören den Arbeisfluss erheblich. Man fühlt sich schnell erschlagen und kann nicht sehr intuitiv mit dem Programm arbeiten. Zudem benötigt man eine lange Einarbeitungszeit, um alle Funktionen zu verstehen und diese auch nutzen zu können. Dazu kommt, dass man eine sehr eingeschränkte Bibliothek an Elementen hat, die nicht erweitert werden kann. Ebenso ungünstig ist die fehlende Exportmöglichkeit des Prototypen.
Man kommt mit dem Programm zwar zum Ziel, aber es erscheint zu überladen um „nur“ einen Prototypen zu entwickeln.

Lumzy

Lumzy ist ein webbasiertes komplett kostenloses Programm. Auch ohne sich anzumelden, kann man bereits mit dem Werkzeug interaktive Prototypen erstellen. Es bietet die Möglichkeit den Prototypen als PDF zu exportieren, welches sich leider nicht interaktiv bedienen lässt, sondern lediglich die einzelnen Screens auf je einer Seite darstellt. Nach einer kostenlosen Registrierung steht einem der komplette Funktionsumfang zur Verfügung. Man kann nun unter anderem sein Projekt speichern, es mit anderen teilen (via Link, Twitter, E-Mail) und es steht einem zudem eine Versionsverwaltung der eigenen Entwürfe zur Verfügung. Man hat zudem jederzeit die Möglichkeit, sich eine Simulation der bisherigen Arbeit anzusehen.

Minimalbeispiel

Ich konnte mein Minimalbeispiel sehr schnell umsetzen. Die Bedienung war sehr intuitiv, da man über Drag & Drop einfach das gewünschte Element an die vorgesehene Stelle schieben kann. In der Bibliothek des Programms war bereits eine Tagcloud enthalten, welche zufällig generiert wurde. Die Buttons sind automatisch klickbar. Um die Buttons benutzbar zu machen, kann man diesen Events zuordnen, welche dann zum Beispiel auf andere Seiten weiterleiten. Über das Setzen von Hotspots kann man jeden Bereich klickbar machen und mit einem Event versehen. Es ist auch möglich, sich eine Master-Seite zu erstellen, welche man dann als Vorlage für die weiteren Seiten verwenden kann.
Bis auf ein Passwort-Textfeld konnte ich alle Elemente vorfinden, die ich für das Beispiel vorgesehen hatte. Auch das Einbinden eigener Grafiken ist dank des Bildimports möglich. Leider beschränkt sich die Auswahl der Elemente auf die, die einem das Programm zur Verfügung stellt. Man muss jede zusätzliche Grafik einzeln einfügen und hat nicht die Möglichkeit ganze Bibliotheken nachzuladen.
Beim Erstellen meines Minimalbeispiels bin ich leider auf einen Bug des Tools gestoßen. Beim Versuch ein Element zu kopieren wurden mir plötzlich scheinbar noch vorhandene Dinge ausgeblendet, die auch über den „Zurück“-Button nicht wiederherstellbar waren. Als ich die Elemente neu eingefügt und angeordnet hatte, versuchte ich mir die Live-Demo meines Prototypen anzuschauen. Dort waren die Elemente nun doppelt vorhanden.
Das Problem konnte allerdings gelöst werden, als ich nach meiner Registrierung das Projekt gespeichert habe und die Seite neu geladen habe.

Mein interaktives Minimalbeispiel kann man hier einsehen: Minimalbeispiel Lumzy

Gesamteindruck

Mit dem kostenlosen Werkzeug kommt man innerhalb kurzer Zeit zu einem ansprechenden Ergebnis, welches man unkompliziert mit Kollegen oder Kunden teilen kann. Werden Änderungen am Prototypen vorgenommen, werden diese auch im geteilten Link aktualisiert. Dank der intuitiven Bedienung versteht man schnell, wie man das Programm benutzen muss, ohne sich zusätzliche Dokumentationen dazu anzusehen. Allerdings muss man für Funktionen, wie das Umbenennen einer Seite oder des gesamten Projektes etwas suchen, bis man den Button findet, der einem zum Ziel bringt. Ein weiterer Pluspunkt ist, dass man seine Arbeitsergebnisse versionieren kann. Schade ist, dass ich schon beim kurzen Arbeiten auf Bugs und fehlende Elemente gestoßen bin.
Insgesamt aber ein nettes Tool, welches sicherlich noch Ausbaupotential hat.

Fazit

Hier noch einmal eine kure tabellarische Übersicht zu den einzelnen Tools.

Wenn ich die Programme in eine Reihenfolge bringen müsste, wäre der Serena Prototype Composter für mich auf dem letzten Platz. Es hat zwar einen recht großen Funktionsumfang, jedoch fehlt mir die Übersichtlichkeit und damit die intuitive Bedienung. Auf Platz drei wäre das kostenlose Lumzy. Es hat einen ähnlichen Umfang der Interaktionsmöglichkeiten wie Wireframesketcher, jedoch das hinzufügen eigener Bibliotheken bleibt aus.
Wireframesketcher und den Justinmind Prototyper würde ich beide auf den ersten Platz bringen. Das liegt zum einen daran, dass Wireframesketcher das günstigere Programm ist, einen ausreichend großen Funktionsumfang besitzt und das Einbinden eigener Bibliotheken erlaubt und zum anderen, dass der Justinmind Prototyper im Gegenzug zusätzlich die Definition von Konditionen sowie die Simulation von Gesten erlaubt.

Den direkten Vergleich der Prototypen gewinnt meines erachtens der mit Justinmind Prototyper erstellte. Mit ihm ließ sich der Ablauf der Benutzung am besten nachbilden. Die Reihenfolge der Platzierungen halte ich der Reihenfolge der Programme ansonsten gleich – nur dass ich Wireframesketcher hier nur auf dem zweiten Platz sehe.