Prototyping Tools im Vergleich

 

Wer Wireframes und Prototypen am Rechner umsetzen will, hat bei der Auswahl der passenden Anwendung die Qual der Wahl: Unglaublich viele Tools tummeln sich mit ihren verschiedenen Schwerpunkten in diesem Bereich. Wie soll man dabei zu einer Entscheidung kommen? Wir haben ausgewählte Tools einfach einmal getestet. Dafür muss man kein Geld ausgeben, denn die meisten Anbieter ermöglichen das kostenlose "Beschnuppern" ihrer Anwendung.

 

Die Tools

Im Internet findet man eine Vielfalt an Prototyping-Tools, die von A wie Axure bis V wie Visio reicht: Axure, Balsamiq Mockups, caretta, Adobe Fireworks, iRise, justinmind, MockFlow, MockupScreens, Omnigraffle, Pencil Project, Pidoco, protoshare, Visio und viele mehr. Ein Vergleich all dieser Prototyping-Tools ist ein zu großes Unterfangen für diesen Blogbeitrag. Deshalb werden folgende fünf Tools ausgewählt.

• Adobe Fireworks - Bestandteil der Adobe Creative Suite 4, über den die Adobe Webseite sagt "entwerfen Sie im Handumdrehen eindrucksvolle Websites und Anwendungsoberflächen"
• Axure - bezeichnet sich selbst als führende Anwendung für die schnelle Entwicklung von Wireframes, Prototypen und Spezifikationen für Anwendungen und Webseiten
• Balsamiq Mockups - als eine Desktop-Applikation, mit der Entwürfe entstehen, die aussehen wie mit Hand gezeichnet
• Pidoco - als Online-Tool, mit dem Prototypen entwickelt und getestet werden können
• Microsoft Visio - als Standardprodukt zur Darstellung von Informationen und Diagrammen

Microsoft Visio und Adobe Fireworks werden bereits bei uns in Projekten eingesetzt, Pidoco ist uns als Kooperationspartner bestens bekannt, Axure und Balsamiq Mockups sind im Zuge der Recherche öfter aufgefallen und daher ebenfalls ausgewählt worden.

 

Die Kriterien

Bevor man mit einem Vergleich beginnt, müssen die Anforderungen an das Tool identifiziert werden. Folgende Fragestellungen können dabei hilfreich sein:

• Wo soll das Tool verwendet werden?
• Wer soll das Tool (kollaborativ) verwenden?
• Was sollte das Tool im Bereich visuelle Gestaltung leisten?
• Soll der Prototyp mit Anwendern getestet werden?
• Welches Ergebnis wird gewünscht? Wie soll das Ergebnis weiterverwendet werden?
• Gibt es eine Testversion? Wie viel kostet das Tool?

Aus diesen Leitfragen leiten sich folgende 12 Kriterien ab:

Abbildung 1: Kriterien für den Vergleich

 

Jedes Kriterium wird im Zuge des Vergleiches im Folgenden detaillierter erläutert. Die Kriterien verkörpern eine Auswahl von Anforderungen, wie sie für unsere Projekte relevant sein können.

 

Der Vergleich

Wo soll das Tool verwendet werden?

Die Frage nach dem "Wo" bezieht sich zum einen auf das Betriebssystem, mit dem das Tool kompatibel sein muss. Plattformunabhängige Tools haben dabei den Vorteil, dass sie bei diesem Kriterium immer einen guten Stand haben. Dazu gehört in erster Linie Pidoco, da dieses Tool im Browser läuft. Bei Balsamiq Mockups handelt es sich um eine Desktop-Anwendung, die auf Mac OS, Windows und Linux läuft. Eine browserbasierte Balsamiq Mockups Variante ist in Arbeit. Adobe Fireworks gibt es immerhin für Mac OS und Windows, während Axure und Microsoft Visio nur für die Windows-Welt verfügbar sind.

Die Frage nach dem "Wo" bezieht sich aber in diesem Fall auch auf die Phase des Designprozesses, in der das Tool eingesetzt werden soll: Im D-LABS Designprozess werden sowohl low-fidelity Prototypen, die den Nutzer durch ihren Scribble-Look zu grundlegendem Feedback ermutigen, als auch medium-fidelity Prototypen benötigt, deren Detaillevel spezifischeres Feedback ermöglicht. Für den umfassenden Einsatz im Prozess bieten alle Tools außer Balsamiq Mockups(nur Scribble-Look) die Möglichkeit, Wireframes "wie handgemalt" und im professionellen Layout zu erstellen (in Microsoft Visio z.B. über verschiedene Stencil Sets). Nettes Feature bei Pidoco: Wireframes werden unabhängig von ihrem "Look" zusammengestellt und danach über "open sketched"(handgemalt) bzw. "open plain" (gerade Linien) geöffnet!

 

Wer soll das Tool (kollaborativ) verwenden?

Wird ein Prototyp von mehreren Personen gemeinsam erstellt, dann ist eine Kommentar-Funktion essenziell. So können sich die Bearbeiter eigene Bemerkungen machen oder einander Notizen hinterlassen. Das ist bisher in Balsamiq Mockups und Adobe Fireworks nicht möglich; Axure, Visio und Pidoco bieten diese Funktion mehr oder weniger gut ausgestaltet an. Microsoft Visio ermöglicht Kommentare, wie man es aus der Office Suite kennt. Außerdem können mit Markern im Dokument Hervorhebungen vorgenommen werden. Besonders Pidoco überzeugt mit der Möglichkeit, andere Bearbeiter einzuladen, die dann Kommentare online hinterlassen können. Damit erübrigt sich beispielsweise das Versenden großer Dateien.

Ein großer Schritt in Richtung Kollaboration ist getan, wenn den Bearbeitern ein gleichzeitiges Arbeiten am Prototyp ermöglicht wird. Das ist bei den betrachteten Tools bisher nur mit Pidoco machbar. Axure ermöglicht aber immerhin sogenannte "Shared projects", bei denen Bearbeiter einzelne Seiten auschecken und geänderte Seiten wieder einchecken können. Eine Online-Version von Balsamiq Mockups, u.a. mit Kommentarfunktion und Versioning der Prototypen, ist in Planung.

 

Was soll das Tool im Bereich Gestaltung leisten?

Ein wichtiges Kriterium für schnelles Prototyping ist das Vorhandensein einer möglichst umfangreichen, erweiterbaren Widget-Library. Aus dieser Library werden Interface Elemente wie z.B. Buttons, Checkboxen usw. benutzt, um ein konsistentes Look&Feel der Prototypen projektübergreifend zu gewährleisten. Dabei ist nicht nur die Quantität, sondern auch die Qualität der Library entscheidend: Welche UI-Elemente werden benötigt (Tabs, Accordion etc.)? Gibt es vom Anbieter oder einer gegebenenfalls vorhandenen Community weitere Libraries? Alle hier vorgestellten Tools beinhalten eine Widget-Library. Besonders hervorzuheben ist dabei Balsamiq Mockups, das auch spezielle UI-Elemente wie Cover Flow, Street Map, Tag Cloud bis hin zu einer Formatting Toolbar bereit hält. Axure dagegen stellt (selbst oder durch die Community) Widget-Libraries zur Verfügung (u.a. das Yahoo! Design Stencil Kit, aber auch verschiedene Icon-Sets, Layout Grids o.Ä.). Auch für Adobe Fireworks und Microsoft Visio sind Widget-Libraries der Community vorhanden bzw. können erweitert werden.

Will man eine Wireframe-Abfolge gestalten, wird die Möglichkeit Templates anzuwenden wichtig. Axure bietet bspw. zwei "Arten" von Mastern: "Place in Background" für Seiten-Templates und "Custom Widget" für eigene UI-Elemente, die auf verschiedenen Seiten in unterschiedlichen Positionen vorkommen. Adobe Fireworks unterscheidet Seiten ("Pages") und Zustände ("States"), mit denen man bspw. Modi von Interaktionselementen darstellen kann. Der Workflow, um verschiedene UI-Elemente in mehreren Seiten zu verwenden, ist dabei hilfreich. Pidoco dagegen verwendet (ähnlich wie Adobe Photoshop) ein "Layer"-Konzept, mit dem Elemente auf verschiedenen Layern angeordnet und die einzelnen Layer an- und abgewählt werden können. In Microsoft Visio gibt es ein "Master Shape" Konzept, mit dem Elemente wiederverwendet werden können. Diese Shapes ließen sich bisher nur als Templates verwenden, d.h. Änderungen in einer Master Shape wirken sich nicht auf alle Instanzen dieses Shapes aus. Zwar ist das laut Dokumentation möglich, hat aber bei uns nicht hundertprozentig funktioniert.

 

Soll der Prototyp mit Anwendern getestet werden?

Das Feedback von Anwendern ist uns für die Entwicklung nutzerzentrierter Softwareprodukte immens wichtig. Dafür können einerseits statische Wireframes, idealerweise jedoch auch interaktive Prototypen verwendet werden. Buttons, Bilder und andere UI-Elemente müssen dabei schnell mit anderen Seiten oder Elementen verlinkt werden können. Gleichzeitig sollte aus den Wireframes mit möglichst wenig Aufwand der Prototyp generiert werden können. Beides ist bisher bei Axure, Pidoco und Adobe Fireworks relativ unkompliziert möglich. Balsamiq Mockups bietet lediglich eine Vollbild-Präsentation, in der mit dem Link Inspector auch eine Klickstory durch verknüpfte Screens möglich ist. Microsoft Visio bietet die Möglichkeit Zeichenblätter zu verlinken. Diese Funktionalität ist für Bildschirmpräsentationen hilfreich, der HTML-Export hat uns allerdings nicht überzeugt.

Da nicht immer die Zeit (oder das Budget) für ausführliche qualitative Nutzertests vorhanden ist, kann eine integrierte Feedbackmöglichkeit sinnvoll sein. Bei diesem Thema punktet nur Pidoco: Nach Abschluss der Beta-Phase sind nun Remote-Usability-Tests möglich, bei denen die Klicks des Probanden mittels Shared Screen beobachtet werden können.

 

Welches Ergebnis wird gewünscht? Wie soll das Ergebnis weiterverwendet werden?

Abhängig von Projektziel und Vorgehen kann Dokumentation ein großes Thema sein: Dann ist es nicht nur wichtig, den Prototyp in verschiedenen Bildformaten exportieren zu können, sondern auch eventuell vorhandene Anmerkungen und Verlinkungen mit einzubeziehen, um daraus möglichst einfach eine Spezifikation erstellen zu können. Diese Unterstützung bei der Spezifikation bot bis vor kurzem nur Axure, seit Neuestem ist aber auch bei Pidoco ein Export des Prototyps mit allen Spezifikationstexten in ein Word-Dokument möglich. Alle anderen vorgestellten Tools ermöglichen lediglich den Export in verschiedene Bildformate.

Soll hingegen der gesamte Prototyp weiterverwendet und in den Entwicklungs-Workflow integriert werden, dann wäre eine Anbindung bzw. ein Export für Entwicklungsprogramme (Grafiktools und IDEs) sinnvoll. Eine entsprechende Nachhaltigkeit für die Entwicklung ist bisher vor allem bei Adobe Fireworks gegeben. Ein in Adobe Fireworks erstellter Prototyp kann zum einen als Basis für die Entwicklung in HTML, Flex oder AIR genutzt werden und zum anderen kann das Design in Adobe Fireworks oder anderen Tools der Creative Suite angepasst werden. Aber auch Balsamiq Mockups bietet eine Möglichkeit, die Wireframes weiter zu verwenden. Dazu ist allerdings Programmierungsaufwand nötig, um die Wireframe-XML Daten in etwas "Interaktives" zu überführen.

 

Gibt es eine Testversion? Wie viel kostet das Tool?

Alle vorgestellten Tools bieten auf die eine oder andere Weise eine Testversion, um sich von den Funktionen und der Bedienbarkeit zu überzeugen: Balsamiq Mockups kann online und offline (Desktop) unbegrenzt genutzt werden, wobei alle fünf Minuten ein Reminder erscheint. Axure, Pidoco und Adobe Fireworks bieten 30 bzw. 31 Tage-Test-Versionen; Visio sogar eine 60 Tage-Testversion.

Eine nicht unbedeutende Rolle bei der Entscheidung für oder gegen die Nutzung eines Tools zum Prototyping spielt natürlich der Preis. Die verschiedenen Preismodelle reichen von einmalig 55 Euro bis 480 Euro pro Jahr (siehe Tabelle, gerundete Preise nach Angaben auf der Homepage).

Abbildung 3: Preisübersicht

In welchem Bereich und bei welchem Kriterium jedes Tool punkten konnte, zeigt die folgende Tabelle im Überblick:

Abbildung 4: Bewertung der Kriterien im Überblick

 

Das Fazit

Der Vergleich von Axure, Balsamiq Mockups, Pidoco, Microsoft Visio und Adobe Fireworks hat gezeigt, dass jedes Tool seine Stärken und Schwächen hat. Letztendlich hängt die Entscheidung davon ab, welche Anforderung an das Tool die Wichtigste ist:

Abbildung 5: Fazit

 

Ja, Microsoft Visio fehlt jetzt in dieser Auflistung. Das liegt vor allem daran, dass es im Vergleich zu den "neuen" Tools deutlich schwieriger zu handhaben ist. - Hat Microsoft Visio also gar keine Stärken? Doch: Es ist im Vergleich zu den anderen Tools (noch) relativ weit verbreitet. Wenn ein Prototyp bspw. auch im Originalformat an den Kunden übergeben werden soll, dann ist die Toolauswahl abhängig von den Programmen, die der Kunde einsetzt. - Und das könnte durchaus Microsoft Visio sein! Ob man aus diesem Grund zu Microsoft Visio greift, sollte sorgfältig abgewogen werden, da die "neuen" Anwendungen - wie dieser Blogbeitrag zeigt - einiges zu bieten haben und unserer Meinung nach deutlich leichter zu bedienen sind!

 

Links…

… zu den Produktseiten:
http://www.adobe.com/products/fireworks/
http://axure.com/
http://www.balsamiq.com/
https://pidoco.com/de
http://office.microsoft.com/de-de/visio/default.aspx

… zu weiterführenden Artikeln:

http://articles.sitepoint.com/article/tools-prototyping-wireframing
http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/
http://www.usabilityblog.de/2008/08/prototyping-tools-"die-qual-der-wahl"/
http://www.adaptivepath.com/blog/2009/03/24/rapid-prototyping-tools/
http://www.boxesandarrows.com/view/sketchy-wireframes
http://johnnyholland.org/2009/11/24/the-power-of-prototyping-an-interview-with-todd-zaki-warfel/

---