Wireframe Mockups/Prototyping leicht gemacht.

Screenshot von Mockflow
Screenshot von Mockflow
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.

Screenshot von FlairBuilder
Screenshot von FlairBuilder
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.

Screenshot von Pidoco
Screenshot von Pidoco
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.

6 Comments

  1. Dennis

    6. Oktober 2009 - 16:18

    Nice post, denke ich, können Sie auch daran interessiert, einen Blick auf ForeUI haben werden: http://www.foreui.com

  2. Sebastian Thimm

    19. Oktober 2009 - 15:51

    Hinweisen möchte ich noch auf Balsamiq, ein ebenfalls recht beliebtes und gut zu bedienendes UI-Mockup-Tool, welches online und offline zu verwenden ist und welches ich selbst gerade evaluiere: http://www.balsamiq.com

  3. Cristian Pascu

    31. Oktober 2009 - 00:25

    Hi there,

    Thanks so much for mentioning FlairBuilder!

    Cheers,
    Cristian

  4. Michael

    19. November 2009 - 18:19

    Hallo zusammen!

    Vielen Dank, dass Du über unser (pidoco°) Wireframe Tool gebloggt hast.

    Drei Anmerkungen würde ich gerne dazu machen.

    1. Du findest, dass das Tool „im Vergleich kein wirklich günstiger Spass“ ist. Was ist schon Spaß im Leben! 🙂 Aber mal ernsthaft, in dem Tool stecken mehrere Mannjahre Entwicklungsarbeit und es bietet auch deutlich mehr Funktionalitäten als die „üblichen“ Wireframing Tools. Denn bei pidoco° bekommt man ja gleich noch ein Tool für Experten Reviews und den Remote Usability Tester dazu! Damit kann man hochwertige one2one Usability Sessions mit Shared Screen, intergrierter Telefonleitung und kompletter „Aufzeichnungs-Abspiel-Kommentarsetzungsfunktion“ (dafür sollten wir nochmal einen guten namen finden) durchführen. Dafür ist der Preis, absolut fair, denke ich.

    2. Da man bei pidoco° keine langen Mindestvertragslaufzeiten hat und in den entsprechenden Paketen monatlich kündigen kann, kann man das Tool sogar auch immer nur projektweise buchen. Und beim nächsten Projekt sind dann schon wieder tausend neue kleine Updates drin, die eine Software as a Service so automatisch mit sich bringt!

    3. Was außerdem noch zu ergänzen wäre: Pidoco° gibt es auf Wunsch auch als Inhouse-Lösung mit vielen Zusatzservices (z.B. Usability Beratung, Schulungen, Stencil-Entwicklung etc.).

    Wer sonst noch Fragen hat, gerne telefonisch direkt an mich unter (030) 4881 63 82 oder über unsere Website: http://www.pidoco.com

    Beste Grüße aus Berlin,

    Michael (Pidoco GmbH)

  5. userfeedback

    18. November 2011 - 17:18

    Webdesign, mobiles Webdesign und Usability Tests gehören nach 2010 meiner Meinung nach unzertrennbar zusammen.

    Warum?

    Ist das Webdesign gut und sogar ausreichend Traffic vorhanden, fragen sich manche Online Shop Besitzer oder Eigentümer von kommerziellen Websites warum der erhoffte wirtschaftliche Erfolg ausbleibt.

    Die Antwort liegt wahrscheinlich in der mangelnden Benutzerfreundlichkeit. Ein Usability Test schafft hier meistens sehr schnell Abhilfe.

    Wer sonst noch mehr über diese Tests der Benutzerfreundlichkeit wissen möchte, dem möchte ich gerne ergänzend zu diesem herausragenden Artikel noch meinen Blog unter: http://www.userfeedbackhq.com anbieten.

    Liebe Grüße aus der Schweiz

    Bernhard

  6. Peter Severin

    10. November 2012 - 09:04

    Also take a look at WireframeSketcher, a desktop wireframing tool: http://wireframesketcher.com

    It lets you create wireframes using clean or sketchy styles; comes with lots of builtin controls and icons but can also be extended with custom controls; comes with stencils for mobile apps; screens can be linked to create interactive prototypes; results can be exported to PNG or clickable PDF and HTML. All graphics are vector based so that your results are always crisp and good looking.