Wireframe Mockups/Prototyping leicht gemacht.

2,1K

Webseiten haben sich im Laufe der Zeit rasant geändert. Von einfachen Textseiten hin zu komplizierten Strukturen, nachzuladende Inhalten und grafischen Meisterwerken. Doch vielerorts hat die Entwicklung dieser Seiten nicht Schritt gehalten. Viele Agenturen erschlagen ihre Kunden entweder mit diversen Photoshop Versionen der Webseiten, oder mit unverständlichen technischen Konzepten, wo Navigationen umständlich beschrieben und nur nach einem Mathematik Studium verständlich werden. Ein dritter Weg, kommt erst langsam aus dem Bereich Softwareentwicklung in den Bereich der Webseitenentwicklung. Dabei handelt es sich um Wireframe Mockups, bei dem die Webseiten skizziert werden und dank aktueller Software wie FlairBuilder, MockFlow, Axure, oder Pidoco sogar als Prototype (Klickdummy) interaktiv nutzbar sind. So lassen sich im Vorfeld schon Probleme in der Usability feststellen und verbessern.

Die einfachste Version der Erstellung eines Wireframe Mockups ist sicherlich eine Webseite mit Papier und Stift zu skizzieren. Leider bietet dies im späteren Verlauf diverse Nachteile. So lassen sich Änderungen nur schwer einbauen und auch die Abstimmung mit Leuten, die nicht im gleichen Raum sitzen, ist schwierig. Diese Lücke füllen Programme wie Microsoft Visio oder Omnigraffle. Mit ihnen kann man Diagramme und Mockups zeichnen, verändern und als Datei oder als Bildexport an Kollegen oder Kunden schicken. Aufgrund der Komplexität dieser Programme wurden sie jedoch nur selten für solche Aufgaben eingesetzt und weiterhin lieber zum Photoshop oder zur Textverarbeitung gegriffen.

Mittlerweile gibt es diverse Programme speziell für das Wireframe Prototyping von Webseiten. Drei dieser Programme habe ich mir einmal näher angeschaut. Alle laufen sowohl auf Mac, Linux und Windows. Axure RP Pro macht in diversen Videos zwar einen sehr guten Eindruck, kommt für mich als Mac User jedoch leider nicht in Frage und wurde deshalb auch nicht getestet.

Alle Programme ermöglichen es Elemente aus den Seitenlisten einfach auf eine von beliebig vielen Vorlagen zu ziehen und diese anzupassen. Ebenso können alle Programme einfache Klickdummys erstellen, in denen Elementen (wie z.B. einem Button) das öffnen einer neuen Seite durch einen Klick zugeordnet wird.

FlairBuilder baut auf Adobe Flash bzw. Air Technologie auf und ist gerade in der Version 1.7 erschienen. Durch den Einsatz von Adobe Air lassen sich Youtube- oder Vimeo Videos, Webcams oder Google Maps leicht einbinden und so auch Multimedia Seiten im frühen Status gut testen. Elementen können weitere Funktionen wie das Öffnen von Tooltips, Popups oder einem Dateibrowser zugeordnet werden, damit bietet FlairBuilder fürs Wireframing Prototyping die beste Palette an Elementen an. Ebenso können Bilder von fertigen Layouts eingebunden und mit Klickflächen belegt werden. So können auch in den Layouts noch schnell Fehler gefunden werden. Alle Projekte können als Dateien abgespeichert werden. Ein externer Viewer ermöglicht es Kollegen und Kunden ohne eigene Lizenz die entsprechenden Prototypen auf ihrem Rechner anzuschauen. Zum Bearbeiten brauchen sie jedoch ebenfalls eine gütliche Lizenz für $99. Zum Testen gibt es eine Webdemo und eine eingeschränkte 14-Tage-Testversion für den Desktop.

MockFlow ist eine reine Flash Anwendung. Das Interface ist sehr einfach aufgebaut, erfüllt jedoch seinen Zweck. Um anderen Leuten die aktuelle Version zu zeigen, kann man einen Link per e-Mail verschicken. Der Empfänger muss sich danach einen kostenlosen Basic Account anlegen. Man kann die Rechte des Empfängers auf das reine Anschauen limitieren, oder ihm erlauben auch Änderungen vorzunehmen. Die einzige Einschränkung beim Ändern von Prototypen ist dabei, dass ein User mit einem Basic Account keine weiteren Seiten hinzufügen kann. Er kann jedoch alle vom anderen User erstellten Seiten editieren. Mockflow gibt es in zwei Versionen. Eine kostenlose Basic Version (1 eigener Prototyp mit max. 4 Seiten, 2 Leute können an dem Prototyp arbeiten) und eine kostenpflichtige Version ($50 / Jahr) mit beliebig vielen Prototypen, die von beliebig vielen Usern bearbeitet werden können.

Pidoco ist eine Webanwendung der Firma Pidoco GmbH (ehem RapidRabbi.it) aus Berlin und kommt komplett ohne Flash aus und basiert auf HTML/SVG und Javascript. Die Bedienung unterscheidet sich aber nicht merklich von den anderen zwei Programmen. Über einen E-Mail können Kunden die aktuelle Version sehen. Um mit anderen Leuten an einem Prototypen zu arbeiten, benötigen jedoch alle einen entsprechenden Account (mindestens Classic, Rabatte für mehrere Versionen bekommt man auf Anfrage). Im Vergleich aber kein wirklich günstiger Spass. Ebenso wie FlairBuilder unterstützt auch Pidoco das Einbinden von Layouts aus Photoshop um diese auf ihre Usability hin zu untersuchen. Ein Remote Usability Modul befindet sich zudem in der geschlossenen Betaphase. Mit diesem wird es möglich sein Usern Aufgaben am Prototypen zu stellen, wobei deren Klickwege aufgezeichnet werden. Aktuell gibt es drei unterschiedliche Preismodelle. Basic beinhaltet nur das visualisieren von Webseiten und kostet 10€ pro Monat. Für 30€ im Monat (Classic) kann man diese Visualisierungen in klickbare Prototypen umwandeln. Die Advanced Version (40€ / Monat) ermöglicht es schlussendlich diese Prototypen an Kunden zu schicken und eine Diskussion zu führen oder Kommentare zu hinterlassen. Zum Testen von Pidoco gibt es neben einer Webdemo auch einen kostenlosen 31 Tage Test.

Fazit
Vom Preis-Leistungs-Verhältnis aus gesehen macht FlairBuilder auf mich den besten Eindruck. Der Preis von $100 ist moderat und dem Funktionsumfang angemessen. Schmerzlich vermisse ich jedoch die Möglichkeit einfach Prototypen an andere Leute zu schicken. So würde meine Wahl auf Mockflow oder Pidoco fallen. Mockflow ist für viele Aufgaben ausreichend und so eine günstige Möglichkeit Prototypen zu erstellen. Funktionell ist jedoch Pidoco ein großes Stück weiter und wäre für größere Projekte meine erste Wahl – dafür kostet es aber auch ein Vielfaches von Mockflow.

Außer Konkurrenz möchte ich noch die Flash Websoftware HotGloo aus Hamburg erwähnen. Diese befindet sich noch in einer kostenlosen Beta Phase und macht einen vielversprechenden Eindruck. In der Beta Phase können bis zu 10 User an 6 Projekten arbeiten. Das Einbinden von Bildern in Kombination mit Klickbereichen wird ebenso unterstütz, wie das Einblenden von Objekten auf Knopfdruck um z.B. Div Layer zu simulieren. Mit einer vernünftigen Preispolitik nach der Beta Phase könnte HotGloo ein heisser Tipp sein.