Prototyping Tools – „Die Qual der Wahl“

Kennen Sie vielleicht auch folgende Situation?

Sie sitzen wieder einmal an Ihrem PC und haben die Aufgabe ein neues Konzept bzw. einen wohl möglich sogar klickbaren/funktionstüchtigen Prototypen zu „bauen“.

Nun beginnt man mit der Überlegung: Welches Tool ist nun das richtige für die Fragestellungen / Wünsche meines Kunden? Welches Tool bietet mit die Flexibilität, den Detailgrad und den Grad an Kompatibilität und Wiederverwendbarkeit, den ich gerade für das aktuelle Projekt brauche.

Folglich überlegt man (in diesem Fall wohl eher erst einmal ich) kurz: Nehme ich vielleicht…

PowerPoint: Hier kann jedermann sich erste Wireframes zusammenbauen. Zudem besitzt nahezu jeder das Programm an sich. Aber schon bei der Darstellung bzw. bei der fehlenden Scrollbarkeit und der nicht vorhandenen bzw. sehr umständlichen Verlinkung von Folien hört der Spaß dann doch auf. Es ist halt doch eher nur eine Art Daumenkino.

Visio: Dieses MS-Office-Produkt bietet mit seinen schon für Websites oder Software vorgefertigten Stencils/Templates (kann man sich an verschiedenen Stellen im Netz runterladen, z. B. http://www.guuui.com/issues/01_06.php) doch schon einiges mehr an Funktionen bzw. Elementen. Sogar klickbare Dummys lassen sich für den geliebten IE generieren. Um Entwürfe von Websites jedoch scrollbar zu machen, muss man sich leider auch einiger Workarounds bedienen und auch sonst hat man hier und da mit „Problemchen“ zu kämpfen.

DENIM: Dieses frei verfügbare Tool von Mitarbeitern der University of Washington (siehe http://dub.washington.edu:2007/denim) ist leider nur für die frühe Entwicklungsphase von Konzepten geeignet. Und aufgrund seiner Art bzw. Bedienungsmöglichkeiten (z. B. über ein Tablet PC) meiner Meinung nur bedingt zu verwenden. Der Einsatz eines WACOM-Zeichentablets für diese Zwecke überzeugte mich ebenfalls in keinster Weise – zumal ich das Programm für sehr instabil halte. Aber: Es ist auf jeden Fall mal einen Test wert. Sehr amüsant, was man dort „zusammenkrikeln“ kann. Es macht großen Spaß, sieht leider jedoch nur so aus, als ob mein kleiner Neffe den Entwurf mit Kuli gezeichnet hätte.

Axure: Derzeit mein Liebling! Mit Layern, Cases, vordefinierten Elementen, Templates, etc. würfel ich mir in kürzester Zeit meinen Prototypen bzw. meine Wireframes zusammen, die in kürzester Zeit miteinander verknüpft sind. Auch Interaktionsprozesse sind mit den bereitgestellten Tools durchaus möglich. Das größte Manko meinerseits: Man kann keine eigenen „Stencils“ kreieren, wie es z. B. Visio der Fall ist. Dafür hat man aber hervorragende HTML-Klickdummys (vom seltsam generierten Code mal abgesehen), die darüber hinaus auch noch schön anzusehen sind, wenn man dann doch mal nicht die Finger vom Design/Farbtopf lassen kann.
Seit einiger Zeit gibt es nun die 5. Version (siehe http://axure.com)

Dreamweaver: Eigentlich eine feine Sache, da ich doch direkt „validen“ Code generieren kann Jedoch erfordert dies dann doch oft noch manuelles Nachjustieren. Zudem kann nicht unbedingt jeder andere Mitarbeiter oder manchmal auch Praktikant direkt einsteigen bzw. die ein oder andere Hilfstätigkeit übernehmen, weil man doch sehr im Code steckt. Es ist halt nicht immer alles „WYSIWYG“.

Die weiteren Produkte der großen Adobe-Familie sei hier nur kurz am Rande erwähnt. Natürlich ist es möglich auch mit Flash oder beispielsweise Illustrator ebenfalls Prototypen zu kreieren. Jedoch ist mir dies zu „grafiklastig“ und aufwändig bzw. in den meisten Fällen meiner Projekte nicht unbedingt nötig/gewollt.

RapidRabb.it: Zu guter letzt noch eine Lösung eines Start-Ups aus Berlin, welches natürlich noch nicht mit dem gewaltigen Funktionsumfang der bereits genannten Tools aufwarten kann. Aber: Sie arbeiten daran! Zudem kann man den Prototyp komplett online erstellen und auch direkt zu Verfügung stellen. Diese „Collaborationskomponente“ finde ich sehr interessant. Man muss nicht extra den Dummy hochladen oder eine WebEx-Konferenz starten, um dem Kollegen/ Kunden in Buxtehude die neuste Idee zu präsentieren oder über Feinabstimmungen zu sinnieren. Auf jeden Fall ein Projekt an dem man dranbleiben sollte: http://rapidrabb.it.

So, soviel von meiner Seite aus…

Wie sieht es denn bei Ihnen aus? Welche Tools werden am häufigsten genutzt? Wo sehen Sie Vor-/Nachteile bei den genannten oder anderen von Ihnen eingesetzten Programme?

Ich würde mich freuen, wenn es bald endlich mal eine Prototyping-Software gibt, bei der man nicht mehr mit diversen Kinderkrankheiten und fehlenden Funktionen zu kämpfen hat: einem „allumfassenden“ Prototyping-Tool halt.

Bis dahin, viel Spaß beim „Bauen“.

21 Gedanken zu „Prototyping Tools – „Die Qual der Wahl“

  1. Thorsten Wilhelm

    Vielen Dank für diese klasse Übersicht an Tools.
    Bisher hab ich die Erfahrung gemacht, dass recht unterschiedlichen Tools eingesetzt werden, irgendwie abhängig von den Vorlieben des jeweiligen Teams / der jeweiligen Person. Das zeigt irgendwie das entweder (a) noch kein „rund um“ geeignetes Tool vorhanden ist oder (b) die benötigten Funktionen sehr stark abhängig sind vom jeweiligen Projekt und dessen Fragestellungen – oder halt beidem.
    Auf jeden Fall scheint es da Handlungsbedarfe zu geben … Entweder müsste man ein „ideales Tool“ entwickeln oder die Prozesse so anpassen, dass sie mit den vorhandenen Tools durchführbar sind; letzteres erscheint mir aber wenig optimal.

    Antworten
  2. Jan

    Zur Zeit scheint Axure sehr populär zu sein. Bleibt zu hoffen, dass es sich auch weiterhin verbessert und an unsere Bedürfnisse anpasst.

    Antworten
  3. paulinepauline

    ich überlege gerade, ob ich von visio auf axure umsteige und spiele seit ein paar tagen ein bissl damit rum. einen schicken clickdummy hat man wirklich super flott erstellt. aber fürs wireframe-erstellen an sich hat es mich noch nicht überzeugt. vielleicht liegts aber auch daran, dass ich nun schon seit 8 jahren mit visio arbeite und ganz furchtbar dran gewöhnt bin. 😉

    Antworten
  4. Martin Beschnitt

    @paulinepauline: Ok, 8 Jahren Erfahrung im Umgang mit Visio machen es natürlich schwer:-)
    Aber vielleicht überzeugt dich Axure ja doch irgendwann. Es soll ja auch nicht heissen, dass das Programm die „Eierlegende Wollmilchsau“ ist. Leider…

    Falls du Neuigkeiten in Bezug auf Prototyping-Tools hast, lass es mich bzw. den usabilityblog wissen!

    P.S.: Sorry, bin jetzt direkt zum „Du“ übergegangen. Reine Affekthandlung. Hoffe, es ist okay.

    Antworten
  5. Florian K.

    Axure ist schön und schnell wenn man mal eben ein paar Scribbles erstellen will.
    Interessant wäre wenn es ein Prototyping Tool geben würde mit dem man gleichzeitig auch noch grundlegende Usabilitytests machen könnte um die Benutzerfreundlichkeit von bsp. Navigationsstruckturen zu testen.
    Gibts die Kombi oder is das noch ne Marktlücke??

    Antworten
  6. Martin Beschnitt Beitragsautor

    @ Florian K.: Hmm…verstehe Dich leider nicht ganz. Ich kann doch spielend einfach einen Prototypen basteln, mit dem ich dann auch Nutzertests durchführen kann. Natürlich darf dieser nicht zu abstrakt sein. Aber gerade, wenn der Navigationsmechanismus schon feststeht, kann ich doch Dummyseiten erstellen und Nutzer mit Use-Cases über die Seiten schicken. Z. B. „Stelle Sie sich vor Sie möchten gerne immer up-to-date sein in Bezug auf die Unternehmensmeldungen. Zu diesem Zweck sind Sie auf der Suche nach dem Newsletter, den Sie gerne abonnieren möchten.“
    Grundlegende Strukturen testet man natürlich immer noch im Rahmen von Card-Sorting-Test. Besonders wenn Oberrubriken erst noch gebildet werden, oder grundlegende Wording-Fragestellungen vorliegen.
    Ist dies jedoch bereits erfolgt, lässt sich Axure durchaus für weitere qualitative Tests einsetzen.

    Antworten
  7. Fabrice Wegner

    Ein weiteres Tool als Ergänzung zu Deiner Liste: ProtoShare

    Sieht vielversprechend aus, allerdings kann ich noch nichts dazu sagen, da ich aktuell noch am Testen von Axure bin – ProtoShare kommt gleich danach dran.

    Allerdings scheint mir der klassische Weg via DreamWeaver am Effizientesten zu sein. Einen Hauptvorteil von Rapid Prototyping Tools – dem automatischen Erstellen von Spezifikationen – erspart man sich leider meist nicht. An den Specs die z.B. bei Axure herauskommen, muss man für mein Gefühl zu lange herumfeilen.

    Antworten
  8. Andreas Oettinger

    Seit heute gibt es Fireworks CS4 offiziell auf deutsch. Hatte leider keine Zeit das Tool während der Beta-Phase zu testen. Hat jemand schon erste Erfahrungen gesammelt und weiß vor allem ob auch scrollbare Prototypen möglich sind?

    Antworten
  9. Martin Beschnitt

    @Fabrice: Also, ProtoShare sieht wirklich nett aus. Was jedoch für Axure spricht ist das Anlegen von „Cases“. D.h. ich kann Suchanfragen simulieren etc. Das geht meines Erachtens nicht mit Protoshare. Definitiv aber eine feine Sache.
    Denke, dass es sich hier um einen direkten Wettbewerber von PapidRabb.it handelt, oder sehe ich das falsch?
    @ Andreas: Danke für den Tipp/Link. Ich hoffe, ich komme dieses Jahr noch dazu die neue Version zu testen:-(

    Es bleibt weiterhin spannend. Habe das letzte Mal in Berlin endlich mal eine andere Agentur gesehen, die auch Axure einsetzt. Sah sehr professionell aus. Zudem meinten Sie, dass Axure für sie derzeit das „Ding der Dinge“ ist:-)

    Gruß Martin

    Antworten
  10. Martin Beschnitt Beitragsautor

    Kurzes Update: RapidRabb.it ist offiziell gestartet.

    Nach der langen Beta-Phase hat nun jeder die Möglichkeit einen Account zu erwerben und seine Benutzungsoberflächen mit RapidRabb.it zu gestalten. RapidRabb.it läuft im Browser und bietet Teams die Möglichkeit per Echtzeit-Kollaboration – ähnlich wie bei Google Docs – an den Prototypen zu arbeiten und diese per Link an weitere Leute zu „versenden“.

    Ein Video zu den grundlegenden Funktionen kann man sich auf http://rapidrabb.it/demo-video anschauen.

    Unter http://rapidrabb.it/vorschau kann jeder den Editor ausprobieren, nur können die erstellten Prototypen damit nicht gespeichert werden.

    Gruß Martin

    Antworten
  11. Fabrice Wegner

    Hallo Martin,

    vielen Dank für die Info zu PapidRabb.it, das Tool hatte ich vorher nicht auf dem Schirm! Sieht vielversprechend aus!

    Viele Grüße,
    Fabrice

    Antworten
  12. Jörg Enkel

    Hallo zusammen,

    ich habe noch ein kleines feines Tool frisch ausgegraben, mit dem ich gerade einige MockUps zusammenbastel, etwas schnelleres hatte ich bisher noch nicht im Einsatz um nett aussehende und schnell editierbare „WireFrames“ zu erstellen…

    „Balsamiq Mockups“, kostet 79$ und ist eine Adobe Air Anwendung. Es läuft daher auf Windows, MAC und Linux. (Bei mir bisher nur auf Windows und MAC 😉

    Der Clou aus meiner Sicht: Die Mockups sehen quasi handgemalt aus und laden so zu mehr Diskussion der Benutzer/Auftraggeber ein, weil die Screens nicht so final und poliert wirken. Da kritisiert man eher dran rum…

    http://balsamiq.com/products/mockups

    Im Moment kann es allerdings leider Click-Dummies noch nicht, aber an der Funktion wird gerade gearbeitet, das kann man im sehr offenen und interessanten Blog des Entwicklers nachlesen. Die Story dahinter ist übrigens auch recht interessant…

    http://www.balsamiq.com/blog/

    Also ich werde da sicher auch noch drüber bloggen, wenn ich etwas mehr Zeit habe, aber das Tool überzeugt mich momentan wirklich total und ich habe von den o.g. Tools auch schon einige ausprobiert.

    Ahoj!
    Jörg Enkel.

    P.S.:
    Es gibt auch eine Flash-Online-Demo unter

    http://www.balsamiq.com/demos/mockups/Mockups.html

    Antworten
  13. Martin Beschnitt

    @ Jörg: Vielen Dank für den Tipp. Das Tool sieht sehr vielversprechend aus. Werde mich mal genauer damit beschäftigen. Besonders das „Handgemalte“ faziniert mich so. Danke, danke, danke. Nette, neue Feierabendbeschäftigung:-)

    Gruß
    Martin

    Antworten
  14. Klaus Martin Meyer

    Hallo Martin,

    danke für den interessanten Artikel. 🙂

    Zu Visio:

    > Sogar klickbare Dummys lassen sich für den geliebten IE generieren. Um
    > Entwürfe von Websites jedoch scrollbar zu machen, muss man sich leider auch
    > einiger Workarounds bedienen und auch sonst hat man hier und da mit
    > „Problemchen“ zu kämpfen.

    Das stimmt so nicht. Wenn man die Templates von GUUUI nutzt, lassen sich auch Klickdummies erstellen, die im Browser scrollen. Was Visio IMHO allerdings fehlt ist eine Möglichkeit verschiedene Masterseiten (vgl. Indesign) zu erstellen. Einige nützliche Skripte für Visio (Seiten duplizieren) finden sich hier: http://www.welie.com/visio/

    Grüße aus HH,
    Klaus Martin

    Antworten
  15. Pingback: Pidoco: Interface Design Software as a Service | WeizenSpr.eu

  16. Martin Beschnitt Beitragsautor

    Hallo zusammen, anbei ein neues, viel versprechendes Tool: MOCKFLOW (http://www.mockflow.com/). Besonders die Möglichkeit der „Real-Time Design Collaboration“ finde ich überaus interessant. Ich denke, ich gebe dem Tool mal eine Chance…
    Habt jemand schon Erfahrungen damit gemacht?

    Viele Grüße und ein erholsames Wochenende
    Martin

    Antworten
  17. Pingback: Prototyping-Tools: Die Qual der Wahl – auch (noch) im Jahre 2010 | usabilityblog

  18. Cagdas Ünlüer

    Hallo zusammen,

    da meine Abschlussarbeit darüber handelt, habe ich hier noch ein paar Vorschläge anzubieten (mehr folgt später ^^) :

    | Wiederverwendbare Prototypen

    – Prototype Composer
    Gehört zu denen, mit denen man komplette Ablaufhierarchien / Scenarien aufstellen kann (ähnlich wie bei Axure aber weit aus komplexer).Dateninhalte simulieren und bearbeiten kann und mit weiteren Produkten von Serena (z.B Development Process Management usw …) wieder verwendet/entwickelt werden kann.

    Geeignet für : klassische Software
    Hersteller : Serena
    Kosten : Free
    URL : http://www.serena.com/products/prototype-composer/index.html

    – Expression Blend 4
    Der momentane (persönliche Meinung für .NET Entwicklung) König unter den Prototyping Tools. Möglich eigene Komponenten darzustellen / designen. Export möglich für den Kunden den er austesten kann, wobei im hintergrund zugleich durch sein rumgeklicke und etc eine Vorgehensweise des Kunden anylisiert wird (usability testing sozusagen) und bei rückerhalt diese grafisch angezeigt und analysierbar ist.

    Adobe konnektivität (import von Illustrator oder Photoshop Entwurf möglich)…

    uvm.

    Geeignet für : klassische & web Software (nur für .NET)
    Hersteller : Microsoft
    Kosten : 705,00 €
    URL : http://www.microsoft.com/germany/expression/products/blend_overview.aspx

    – Fireworks CS5
    Um den Author zu korrigieren : Dreamweaver ist eigentlich für das entwickeln vorgesehen, die Design Ansicht taugt nichts fürs Prototyping. Dafür gibt es aber gott sei dank Fireworks. Mit Fireworks können schnell (wenn man geübt ist) und einfach Web oder Adobe Air/Flex Anwendungen entworfen werden.

    Man kann mit Fireworks Webseiten (seies im Groben oder im Detail) designen und entweder als reines Bild dem Kunden präsentieren oder es einfach exportieren (html mit Tables/imgs oder als Css Layout) und im Browser präsentieren. Man kann direkt in Fireworks schon diverse CSS / Html Einstellungen für einzelne Objekte oder Objekt-Gruppen vornehmen.

    Für Adobe Air/Flex Anwendungen sind schon (aber auch für html) standard Komponenten (textfeld und etc.) in Fireworks vorhanden die man per Drag&Drop aus der Library in das Dokument ziehen kann. Diese Komponenten können gestalterisch verändert werden (welches auch natürlich für die Einstellungen der Komponente gilt) und bei einem Export kann man bestimmen, ob zu diesem layout eine CSS File erstellt werden soll, welches man im Adobe Flex Builder einbetten kann.

    Fazit : Super Anwendung für Web/Flex Prototyping mit hoher Wiederverwendbarkeit & Flexibilität.

    Geeignet für : standard web & air anwendungen
    Hersteller : Adobe
    Kosten : 450,00 €
    URL : http://www.adobe.com/de/products/fireworks/

    Fürs erste wars das. hab noch weitere die aber zuerst noch ausgetestet werden müssen. Ich hoffe das es bissl weiterhelfen kann ;).

    Antworten
  19. Steffen Heim

    @Cagdas:
    Vielen Dank für die Interessanten Informationen zu den 3 Tools.
    – Expression Blend 4 – werde ich mir auf jeden fall auch mal etwas näher ansehen. Scheint echt gut zu sein.

    Bin schon gespann auf weitere interessante Tool. Ich versuche mich auch immer im Bereich der Prototyping-Tool up-to-date zu, aber so ganz ist das halt nicht immer möglich.
    Ich hatte vor kurzem hier im Blog auch ein paar weitere Tools kurz vorgestellt im Beitrag Prototyping-Tools: Die Qual der Wahl – auch (noch) im Jahre 2010.

    Vielleicht findest du dort auch noch einen nützlichen Tipp.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.