Das Problem hat sicher jeder schon gehabt: schnell etwas Sichtbares für einen potenziellen Auftraggeber produzieren zu müssen. Hier bereits mit Photoshop & Co. zu schießen, ist oft genau die falsche Munition. In der Regel ist es die bessere Lösung, mit sogenannten Wireframes zu arbeiten. Durchladen und sichern!
Schön sehen sie unbestritten aus: Designvorschläge für neue Websites, die optisch so wirken, als wären sie bereits fertig. Einem potenziellen Auftraggeber, egal ob intern oder extern, solche aufwendigen Vorabvorschläge zu präsentieren, ist oft genauso notwendig wie unsinnig.
Notwendig, weil der Auftraggeber noch nicht begriffen hat, dass er wohl die ungeeignetste Person der Welt ist, die Wirkung solcher Designs für die eigene Site wirklich beurteilen zu können. Denn der Wurm muss letztlich dem Fisch schmecken, nicht dem Angler. Leider wollen viele diesen Wurm vorab ausführlich begutachten und im übertragenen Sinne wollen sie auch daran knabbern – um zu kosten, wie er denn schmeckt. Mit anderen Worten erwarten viele Auftraggeber, schon endkonturnahe Designs zu sehen. Dann lehnen sie sich zurück und lassen alles auf sich wirken. Es ist schwer für gute Agenturen, aus diesen meist farbenorientierten Darstellungsorgien auszubrechen, weil sie aus Akquisitionsgründen den Wünschen der Kunden folgen müssen. Der Kunde will es so.
Unsinnig, weil es wohl einer der schwerwiegendsten Gründe dafür ist, dass so viele Websites am Nutzerbedürfnis vorbeigehen. Und die neue Flash-Farbfernsehwerbung auf der Startseite wird dann oft länger diskutiert als die sehr viel wichtigere Informationsarchitektur. Man stelle sich vor, wie fünf Vorstände oder Hauptabteilungsleiter in einem Konferenzzimmer sitzen und sich von mehreren Agenturen nacheinander Vorschläge für eine neue Website oder ein Redesign präsentieren lassen. Hier erscheint einfach alles falsch:
Die wahren Nutzer der Site sitzen später in einem Büro oder zu Hause im Wohnzimmer, schauen auf einen kleinen Bildschirm, werden nicht selten nebenbei von anderen Dingen abgelenkt und kennen all die unternehmens- oder branchenüblichen Begriffe oft nicht. Trotzdem bleiben sie bei der Planung in der Regel außen vor und das viel zitierte „besucherzentrierte“ Design damit leider meist ein reines Lippenbekenntnis.
Zitat James Allen: „Das Problem ist, dass jeder denkt, dass er kundenzentrierte Webseiten hat!“
Oft liegt die fehlende Kundenzentrierung aber auch darin, dass geeignete Design-Vorstufen fehlen, mit denen man einfach Tests mit Kundengruppen durchführen könnte. Stehen die Navigation, das Design und die Site-Architektur erst einmal, sind Änderungen, die auf Kundentests beruhen, meist zeitaufwendig und damit teuer. Die Kundenstimme flüstert nur, während Fertigstellungstermine und Budgets laut schreien. Kein Wunder also, dass die wirkliche Gebrauchstauglichkeit von Webseiten für den Kunden in der Regel erst später im Livebetrieb festgestellt wird oder werden kann – wenn überhaupt.
Gut wären also einfach zu erstellende und „anfassbare“ Konzepte, die man vorab mit Kunden testen könnte. Die oben erwähnten, in Vorstufen oft zu designorientierten Konzepte oder Prototypen haben aber noch einen weiteren gravierenden Nachteil, den jeder Webdesigner wahrscheinlich schon erlebt hat: Man kann hundertmal vorab darauf hinweisen, dass das Design nur ein Vorschlag wäre. Trotzdem verdiskutieren und verbeißen sich die Zuhörer an Kleinigkeiten – dass das Logo nicht die richtigen Farben hätte oder ein Satz über das Unternehmen nicht korrekt wäre. Das ist auch völlig normal und zu erwarten, denn wenn ein Mensch etwas sieht, das fast fertig zu sein scheint, dann konzentriert er sich logischerweise oft auf kleine Details und Fehler, die man unbedingt vor der Fertigstellung noch ändern müsste. Der an dieser Stelle notwendige Blick für das Ganze weicht der Diskussion um Kleinigkeiten. Dabei war doch alles nur ein möglichst perfekt wirkender Vorschlag, der den Kunden beeindrucken sollte!
Einen möglichen Ausweg aus den oben beschriebenen Dilemmas weisen die von wirklichen Profis verwendeten sogenannten Wireframes. Darunter versteht man einfache „Drahtgerüste“, die bereits eine deutliche Kontur visualisieren – aber eben ohne Farben und Designelement auskommen und damit den Blick und die Diskussionen auf im Konzeptstadium wesentlichere Dinge lenken. Nachfolgend werden vier verschiedene On- und Offline-Tools zur Erstellung solcher Wireframes vorgestellt. Die Bedienung geht recht leicht von der Hand und nach einer kurzen Einarbeitungszeit kann man damit extrem schnell Prototypen für die verschiedensten Ansprüche erstellen.
Ein recht kostengünstiges Produkt zur einfachen Erstellung von Wireframes bietet Balsamiq auf www.balsamiq.com zum Download für derzeit 79 USD an. Es basiert auf Adobe Air und damit lassen sich Websites, aber auch Desktop- und iPhone-Anwendungen übersichtlich entwerfen. Eine voll funktionsfähige Testversion für Windows, Mac und Linux ist dort zum vorherigen Ausprobieren frei erhältlich. Nach sieben Tagen greifen allerdings ohne Lizenzschlüssel einige Einschränkungen (unter anderem sind das Speichern sowie der Export nicht möglich). Der Zeitpunkt des Tests sollte also mit Bedacht und nicht vorschnell gewählt werden. Wer die Desktop-Version nicht downloaden möchte, findet dort übrigens auch den Link zu einer benutzbaren Online-Demo. Die Lizenzierung basiert auf Personen, nicht auf der Anzahl der Installationen. Man kann das Tool also auch auf mehreren Rechnern nutzen. Je nach Anzahl der Lizenzen bietet Balsamiq einen Discount von bis zu 50 % an, ebenso für Schulen und Hochschulen.
Die Bedienung des Tools ist sehr intuitiv möglich. Im oberen Bereich befindet sich eine Leiste mit diversen Objekten, die per Regler verschiebbar ist oder sich über eine kleine Navigation darüber (All, Big, Buttons, Common, Containers, Layout, Markup, Media, Text und iPhone) einschränken lässt.
Zur Erstellung eines Wireframes sucht man zunächst aus der Objektleiste das gewünschte Objekt aus und zieht es mit der Maus in den Arbeitsbereich. Individuelle Beschriftungen lassen sich per Doppelklick auf das Objekt hinzufügen. Ein einfacher Klick auf ein Objekt lässt ein transparentes Editierfenster erscheinen (siehe Abbildung 2), auf das man bei Bedarf mit dem Mauszeiger fährt. Die Transparenz verschwindet dann und für jedes Objekt lassen sich hier umfangreiche Einstellungen wie zum Beispiel Schriftgröße, Layerfunktionen, Gruppierungen, Kopieren und Einfügen, „angewählt“ oder „ausgegraut“ (disabled) oder weitere Icons auswählen. Dort findet man auch unter „Link“ die Möglichkeit, einzelne Wireframes miteinander zu verlinken. Damit kann man im fertigen Dummy per Mausklick auf eben diese Objekte zwischen den einzelnen Seiten hin- und herspringen und so den Eindruck einer kleinen Anwendung erzeugen. Das Editierfenster verschwindet übrigens automatisch nach wenigen Sekunden wieder, wenn man es mit dem Mauszeiger wieder verlässt.
Wireframes: Im eigentlichen Wortsinn versteht man unter einem Wireframe ein Drahtgitter. Es soll bei der Konzeption in einem frühen Stadium helfen, den funktionellen Aufbau einer Website zu visualisieren. Sogenannte statische Wireframes werden verwendet, um diesen Aufbau und die Objekte einfach und schnell zu visualisieren. Bei dynamischen Wireframes können Objekte mit interaktiven Aktionen verknüpft werden. So ist es in einem dynamischen Wireframe möglich, zum Beispiel über die Navigation einzelne Seiten aufzurufen oder über Buttons oder Pulldown-Menüs definierte Reaktionen zu erzeugen. Prinzipiell ist es je nach Aufwand damit möglich, eine fast komplett (scheinbar) funktionierende Website zu simulieren. Der Aufwand wird dabei in die Konzeptentwicklung investiert und nicht in viele, erst spät erkannte Änderungen der eigentlichen Programmierung. Je genauer ein dynamisches Wireframe ist, desto schneller (und kostengünstiger) ist die spätere Web-Anwendung fertig.
Mockups: Unter Mockup versteht man eine Nachbildung eines Originals, wörtlich genommen also eine Attrappe. Bei der Entwicklung von Webseiten verwendet man den Begriff vor allem für einen klickbaren Wegwerf-Prototyp, der die spätere Benutzeroberfläche simuliert. Er wird allerdings in der Praxis nicht einheitlich und oftmals synonym mit Wireframe verwendet.
Prototyp: Die Grenzen zum dynamischen Wireframe sind fließend. Bei Prototypen liegt der Schwerpunkt tatsächlich auf der Entwicklung einer Anwendungsoberfläche, die der späteren Anwendung so nahe wie möglich kommt. Programme zur Prototypenerstellung haben in der Regel zusätzlich umfangreiche Möglichkeiten zur Dokumentation bzw. zum Anlegen von Spezifikationen, die zur späteren Programmierung notwendig und hilfreich sind. Jedes Objekt wird in seinem Verhalten exakt beschrieben. Somit entstehen klare Anweisungen für die tatsächliche Umsetzung.
Bei intensiverer Nutzung des Tools empfiehlt sich ein Blick in die Online-Hilfe. Dort sind alle Möglichkeiten der Programmnutzung sehr gut beschrieben und man findet auch eine Liste von Tastenkürzeln, mit denen man oft genutzte Funktionen schnell über die Tastatur steuern bzw. aufrufen kann. Für Präsentationen hält Balsamiq Mockups einen speziellen Modus bereit (über „View“ aufrufbar), mit dem man die Inhalte bildschirmfüllend zeigen kann. Praktisch ist dabei ein großer blauer Pfeil, der mit der Maus gesteuert wird und mit dem man auf einzelne Objekte zeigen kann. Hinterlegte Links zu anderen Wireframes-Seiten kann man in der Präsentation dann direkt anklicken und die Anwendung öffnet diese Seite. Bei geschickter gegenseitiger Seitenverlinkung lässt sich damit, wie oben erwähnt, der Aufbau einer Website zumindest ansatzweise simulieren. Beim Überfahren eines solchen Links in der Präsentationsansicht ändert sich der blaue Pfeil in eine blaue Hand und unter der Hand erscheint der Name der neuen Seite, die bei einem Klick aufgerufen werden würde. Alle klickbaren Objekte haben zur besseren Erkennbarkeit zusätzlich rechts unten einen kleinen blauen Pfeil, der nach rechts oben zeigt und damit den Link visualisiert (siehe Abbildung 3).
Über ein kleines Kontrollfeld rechts unten in der Präsentationsansicht (es erscheint nur dann, wenn man mit der Maus in die Nähe fährt) kann man Hinweise, wie zum Beispiel den gelben Klebezettel in Abbildung 1, interaktiv ein- und ausblenden. Mit der „Esc“-Taste verlässt man den Präsentationsmodus wieder.
Wem das Tool funktionell und von der Bedienung her zusagt, der sollte sich auf der Webseite von Balsamiq noch etwas tiefer gehend umsehen. Dort findet man eine Fülle an weiteren Hilfen, Tipps und Hinweisen, so unter anderem auch, dass sich die Desktop-Anwendung von Balsamiq Mockups über Kommandozeilen steuern und aufrufen oder sich über ein hinterlegbares Konfigurationsfile in XML individuell feiner einstellen lässt, wie das folgende Codebeispiel andeutet:
<config> <fontFace>Architect Small Block</fontFace> <rememberWindowSize>false</rememberWindowSize> <useCookies>false</useCookies> <documentsPath>C:\Documents And Settings\Administrator\Desktop</documentsPath> <snappingEnabled>true</snappingEnabled> <selectionColor>FF0000</selectionColor> <transparentBackground>true</transparentBackground> </config>
Wer intensiver damit arbeitet, spart sich auf diese Weise durch die Anpassung der optimalen Voreinstellungen durchaus noch etwas mehr Zeit.
Balsamiq Mockups hinterlässt insgesamt einen recht ausgereiften Eindruck und erlaubt auch Ungeübten eine sehr schnelle Einarbeitung. Die erzeugbaren Wireframes haben eine angenehme Optik und wirken durchaus professionell. Wer auf weitergehende Funktionalitäten bei der Erstellung optischer Visualisierungen von Website-Konzepten verzichten kann, ist mit diesem Tool daher sicher gut bedient.
Ebenso wie Balsamiq Mockups ist Axure RP Pro 5.6 ein auf dem Desktop (Windows und Mac) installierbares Programm und funktioniert prinzipiell ähnlich. Man zieht Einheiten aus einer Objektbibliothek auf eine Seite, beschriftet bzw. modifiziert sie nach Bedarf und verknüpft wichtige Objekte mit einem Link. Die Funktionalität des Programms ist hier jedoch deutlich höher. Erwartungsgemäß natürlich auch der Preis: 589 USD verlangt Axure für eine Einzellizenz mit 12 Monaten Support, ab fünf Lizenzen gibt es einen Nachlass von 50 USD pro Lizenz. Ebenso bekommen Non-Profit-Organisationen und (Hoch-)Schulen einen deutlichen Nachlass. Der Support lässt sich für 149 USD um jeweils ein Jahr verlängern. Preise für Unternehmenslizenzen gibt es auf Anfrage. Zum Testen kann man auch hier eine lauffähige Testversion herunterladen und 30 Tage lang testen. Da das Programm etwas umfangreicher ist, empfiehlt es sich, dies zu einem Zeitpunkt zu machen, zu dem man auch genügend Zeit zum Testen hat.
Mit Axure RP Pro lassen sich Wireframes nämlich später auch zu komplexen, funktionsfähigen Prototypen ausbauen und bei Bedarf auch komfortabel für die spätere Programmierung detailliert spezifizieren. Über sogenannte Widgets bildet man zunächst alle wichtigen Objekte jeder einzeln funktionell zu beschreibenden Webseite ab. Außer der Startseite könnten das neben anderen Seiten zum Beispiel Produktübersichten, Produkteinzeldarstellungen, der Warenkorb und die komplette Bestellstrecke in einem zu entwerfenden Shopsystem sein. Dabei lassen sich auch eigene Bibliotheken bzw. Objekte als Vorlagen hinterlegen – ebenso wie man Mastervorlagen oder Kopf- und Fußelemente definieren kann.
Um danach einen Schritt weiterzugehen und daraus einen interaktiven und auch im Web voll lauffähigen HTML-Prototyp zu entwickeln, braucht man keinerlei Programmierkenntnisse. Sämtliche interaktiven Elemente lassen sich automatisch generiert wie gewohnt im Webbrowser bedienen und für jede Aktion oder einen Zustand eines Objektes (zum Beispiel „Checkbox, Option 3 angeklickt“ oder „Item 4 aus der Dropdownbox ausgewählt“) kann eine entsprechende Reaktion hinterlegt werden. Selbst feste Zeitverzögerungen bei Klicks zur Simulation von Systemantwortzeiten (siehe Abbildung 5)oder komplexe Verzweigungen sind per Mausklick programmierbar. Die einfache Möglichkeit des anschließenden Publizierens im Web erlaubt bei Bedarf einen mehr oder weniger umfangreichen Vorabtest der Benutzeroberfläche. Erkannte prinzipielle Fehler können so noch im Konzeptstadium ausgemerzt werden und sind in der Regel mit wenigen Mausklicks behoben, sodass durchaus auch iterativ im Sinne eines Rapid Prototypings getestet werden kann. Das Ergebnis sind robuste, benutzerorientierte Oberflächen und eine ziemlich genaue Beschreibung, wie die Website oder das Shopsystem anschließend programmiert werden muss.
Apropos spätere Programmierung: Die Spezifikation der Oberfläche bzw. aller Objekte und Funktionalitäten kann bei der Erstellung von Objekten gleichzeitig mit erledigt werden. Beim Anklicken eines Objektes erscheint auf der rechten Seite (siehe rote Kästen in Abbildung 4) „Annotations & Interactions“. Oben kann das Verhalten der Anwendung bezüglich dieses Objektes festgelegt werden, so zum Beispiel, dass sich beim Überstreichen mit dem Mauszeiger interaktiv ein Inhalt ändert oder was passiert, wenn der Nutzer im Pulldown „Gummibärchen“ auswählt. Für eine Spezifikation sind aber noch weitere Anforderungsbeschreibungen notwendig. Dies kann man in dem Feld darunter „Annotations – All Fields“ erledigen. Alle dort vorhandenen Eingabefelder sind komplett an die eigenen Anforderungen anpassbar (via „Customize“). Es können Text-, Zahlen- und Datumsformate definiert werden, sowie Pulldown-Boxen mit individuellen Inhalten. Da eine zu große Liste an Feldern schnell unübersichtlich wird und nicht jeder Bearbeiter die gleichen Felder nutzt, kann man ein Set an Feldern zusätzlich noch in eigenen Ansichten gruppieren. Damit kann man zum Beispiel dem Entwickler andere Felder zur Eingabe anzeigen als einer testenden Fachabteilung (siehe Abbildungen 6 und 7).
Aus allen so beschriebenen Feldern entsteht am Ende tatsächlich sprichwörtlich auf Knopfdruck über den Menüpunkt „Generate/Specification“ eine komplette Spezifikation im MS-Word-Format. Dort wird jede hinterlegte Seite per Bild ausgegeben und per nummeriertem Verweis werden für jedes dokumentierte Objekt strukturiert all die Felder mit Inhalt ausgegeben, die hinterlegt wurden. Wenn für alle wichtigen Objekte die notwendigen Felder (genaues Aussehen, Berechnungslogiken, genaues Verhalten beim Klicken etc.) für die spätere Programmierung bereits bei der Erstellung des Wireframes bzw. des Prototyps erfasst werden, ist die Anwendung komplett fertig dokumentiert und lässt in der Regel keinen Spielraum mehr für Missverständnisse. Da über „Generate/Prototype“ auch ein komplett klick- und lauffähiger Anwendungsdummy in HTML erzeugt und einfach per ftp ins Web gestellt werden kann, können die späteren Entwickler jederzeit neben der „trockenen“ Spezifikation in einem in der Regel abgeschlossenen Bereich auch live nachsehen. Über diesen Weg kann und sollte natürlich auch schon vorher jede Version des Wireframes oder des Prototyps ausgiebig getestet werden – und zwar bevor die erste Zeile Code geschrieben wird.
Eine umfangreiche Online-Hilfe (Tutorial), ein Blog und Nutzerforen stehen bei Axure für eine weitere Einarbeitung in das Tool kostenlos zur Verfügung. Axure PR Pro ist deutlich komplexer als Balsamiq Mockups, aber damit eben auch mächtiger. Trotzdem gelingt die Bedienung recht intuitiv, sodass man die Hilfe nur selten benötigt. Die Wireframes sehen auf den ersten Blick nicht so chic aus – aber die Weiterentwicklungsmöglichkeit zum komplett fertig lauffähigen Prototyp bietet einen hohen Nutzwert, den man allerdings möglicherweise erst spürt, wenn man mit dem Programm arbeitet. Eine eigene Inaugenscheinnahme bringt hier individuell für jeden sicher schnell Aufschluss.
Die oben beschriebenen Tools sind Desktop-Anwendungen, dagegen ist HotGloo (www.hotgloo.com) eine reine Online-Lösung einer Hamburger Firma. Während es ganz generell durchaus ernst zu nehmende Bedenken gibt, sensitive Daten an einen zunächst unbekannten Anbieter aus dem Haus zu geben (Datenschutz, Missbrauch bei Hackerangriffen etc., möglicher Konkurs oder Geschäftsaufgabe des Anbieters und unerwartetes Abschalten der Plattform) und daher installierbare Programme mit lokaler Datenhaltung vorzuziehen sind, haben Online-Plattformen durchaus auch Vorteile: Man kann von überall aus rechnerunabhängig zugreifen, ohne aufwendige Zusatzsoftware im Team gemeinsam an Projekten arbeiten und in der Regel sind solche Dienste auch preislich gut skalierbar. So auch bei HotGloo. Für die Verwaltung eines Projektes und einen Benutzer werden aktuell monatlich 7 USD in Rechnung gestellt, für ein Team mit zwei Projekten 14 USD und für einen unlimitierten Unternehmenszugang 48 USD. In Summe auf ein Jahr gerechnet ist das sicher kein Pappenstil – allerdings bekommt man für ernsthafte Profiarbeit durchaus eine Menge an Gegenwert geboten. Alle Pakete können 30 Tage kostenfrei getestet werden – und solange man mit einem Projekt unter 10 einzelnen Seiten bleibt, kann man auch das Angebot „free plan“ dauerhaft kostenlos nutzen.
Nach der Anmeldung und der Anlage eines Projektes gelangt man direkt in den sogenannten „Stage“-Bereich. Dort werden alle Objekte eines Wireframes verwaltet. Zunächst sollte man über die „Sitemap“ einzelne Webseiten anlegen, benennen und hierarchisch ordnen (siehe Abbildung 9).
Eingefügte Navigationselemente nehmen dann hierauf später automatisch Bezug. Die grundsätzliche Bedienungsphilosophie ist ähnlich wie bei den Desktop-Programmen: Man zieht die benötigten Objekte wie Buttons, Pulldown-Menüs, Textfelder etc. aus einem Container auf die Arbeitsfläche und passt sie optisch und inhaltlich entsprechend den Anforderungen über ein Eigenschaftsfenster (Properties) an.
Aus den Standardobjekten lassen sich praktischerweise eigene Objekte (Custom) erzeugen. Das können zum Beispiel gruppierte Objekte sein, die bereits angepasst wurden, Fuß- oder Kopfzeilen, Login-Kästen usw. Das erleichtert den Umgang mit häufig verwendeten Anwendungsgruppen erheblich.
Als Web-Anwendung lässt sich HotGloo leider nicht immer intuitiv bedienen. Die rechte Maustaste funktioniert nicht anwendungsbezogen, sondern ruft nur Elemente des Flashplayers auf. Dass es keinerlei OK-Button für den Abschluss einer Aktion gibt, ist ebenfalls gewöhnungsbedürftig. Hat man etwas editiert oder verändert, klickt man mit der Maus einfach außerhalb des Editierfensters und somit hat man die Eingaben „bestätigt“. Auch einige kleinere Bugs findet man noch: So lassen sich zum Beispiel Pulldown-Menüs später in der Review-Ansicht bei mehreren Einträgen nicht scrollen, sondern schließen sich nach einem Klick auf den Scrollbalken einfach wieder. Wechselt man beim Festlegen interaktiver Aktionen von Objekten aus dem „Expert Mode“ in den „Easy Mode“, gehen die vorherigen Eingaben verloren. Sehr positiv für das spätere Testen ist die Möglichkeit, einfach gelbe Zettel im Ansichtsmodus (Review) an beliebige Stellen zu heften. Somit kann man Optimierungshinweise direkt in der Anwendung und beim Objekt hinterlegen. Als weiterer Vorteil ist das Anlegen und Verwalten von Rollen zu sehen. Damit kann man das Anzeigen oder Unterdrücken einzelner Elemente auf Seiten für unterschiedliche Nutzergruppen (Besucher, eingeloggter Besucher, Käufer etc.) steuern bzw. simulieren.
Die als „Help“ in der Anwendung hinterlegten Kurztexte beschränken sich nur auf FAQs und die dort verlinkten Tutorial-Videos sind wenig hilfreich. Irgendwie muss wohl der Ton bei den bei vimeo.com hinterlegten Videos verloren gegangen sein und somit sieht man ohne jede Erklärung jemanden in der Anwendung klicken. Damit fehlt leider ein wesentlicher Baustein zum Verständnis einiger komplexerer Abläufe. Die auf der Startseite von Hotgloo hinterlegten „How to“-Hilfen laufen allerdings in einem Overlayfenster und sind – zum Glück – mit Ton, wenn auch auf Englisch. Sie enthalten viele gute Tipps und unter anderem einen kleinen, dreiteiligen Workshop, wie man ein Wireframe zu einem Webshop erstellt. Leider muss man diese Videos komplett über sich ergehen lassen, denn textliche Hilfen, die man individuell lesen und eben auch teilweise gezielt überspringen kann, gibt es so gut wie keine. Hier sollte der Anbieter dringend nachbessern. Wer sich entscheidet, sich näher mit Hotgloo zu beschäftigen, der sollte sich die Tipps in den Video-Tutorials trotzdem auf jeden Fall ansehen.
Die Domäne von HotGloo ist hauptsächlich die Erstellung von Wireframes mit einfachem Zugang von beliebigen Rechnern und der Bearbeitung im Team. Der integrierte Chatmodus, der über die Sprechblase ganz rechts unten am Rand aktiviert werden kann, ist dabei sicherlich nützlich. Hier lässt sich zum Beispiel ein „Change owner“ festlegen – nur dieser darf dann Änderungen im Editiermodus vornehmen. Alle anderen können nur den Review-Modus sehen und den Wireframe testen. Laut Hotgloo handelt es sich hierbei um eine echte Realtime Collaboration, bei der also auch bei mehreren Benutzern keine Daten verloren gehen können. Der Export eines Wireframes erfolgt im PNG-Bilderformat oder als PDF-Datei.
Ebenso wie HotGloo bietet iPlotz (www.iplotz.com) eine Online-Anwendung zur Erstellung von Wireframes an. Hier gibt es allerdings auch eine Desktop-Anwendung zum Kauf, die Daten mit registrierten Online-Nutzern austauschen kann. Die Preise gehen von 15 USD pro Monat für eine Einzellizenz bis zu 495 USD pro Jahr für 10 Nutzer. Die Desktop-Anwendung kostet einmalig 75 USD. Die Anzahl der Projekte und Seiten ist dabei prinzipiell unbegrenzt. Auch bei iPlotz gibt es einen kostenlosen Testaccount, mit dem sich ein Projekt mit bis zu fünf Seiten verwalten lässt. Mit iPlotz lassen sich sowohl Web-Anwendungen als auch solche für das iPhone und das iPad konzipieren. Praktisch ist dabei auch die einfache Umschaltmöglichkeit von dem optischen Windows- zum Mac-Stil, der alle Elemente in das dort übliche Aussehen ändert.
Die Benutzeroberfläche bei iPlotz steht in mehreren Sprachen – auch in Deutsch – zur Verfügung. Die Hilfen und Tutorials sind allerdings wie oft üblich nur auf Englisch verfügbar. Dass iPlotz vor allem auch auf Teamarbeit und eine echte Projekt- und Aufgabensteuerung ausgelegt ist, erkennt man an den umfangreichen Funktionalitäten in der Verwaltungsansicht. Man kann für Projekte Aufgaben einsteuern und sie anderen Teammitgliedern zuordnen. Über die Angaben von Terminen, Fortschrittsanzeigen und Status behält man so leicht auch bei komplexeren Projekten den Überblick.
Ordnet man Teammitgliedern Aufgaben zu, bekommen diese einen kurzen (englischen) Hinweis per E-Mail. In der Entwurfsansicht lassen sich dann die einzelnen Seiten aus einem Objektcontainer mit der Maus auf die Arbeitsfläche ziehen und die Eigenschaften entsprechend ändern.
Im Entwurfsmodus zieht man wie auch bei den anderen Programmen einfach Objekte auf die Arbeitsfläche und modifiziert sie anschließend. Für Objekte hält iPlotz allerdings nur eine einfache Interaktion vor: die Verlinkung mit anderen hinterlegten Seiten oder Webadressen. Das dürfte aber für die meisten Konzeptentwicklungen auch genügen.
Ein Menü als Objekt zum Einfügen sucht man bei iPlotz vergebens – dies wird automatisch erzeugt, wenn man die HTML-Vorschau auswählt. Über diesen Menüpunkt kann man übrigens auch den kompletten Satz aller Seiten in HTML automatisch gezippt zur weiteren Bearbeitung in einem HTML-Editor herunterladen. Damit bietet sich für Profis die Möglichkeit, erstellte Wireframes auch im Nachhinein noch mit besonderen Features auszustatten und entsprechend beliebig zu modifizieren. Über ein iPlotz-spezifisches XML-Format lassen sich Wireframes auch mittels einer Im- und Exportfunktion projektübergreifend nutzen. Insgesamt kann man sich in iPlotz recht schnell einarbeiten und wer in einem Team an einem Projekt arbeitet, wird besonders die Aufgabenverwaltung schnell zu schätzen wissen.
Hinweis: Als schwerer Fauxpas muss wohl die Tatsache bezeichnet werden, dass iPlotz im angemeldeten Zustand in der obersten Zeile zunächst das Passwort als Benutzernamen, natürlich im Klartext(!), anzeigt. Somit ist es für jeden bei Präsentationen oder gemeinsamer Arbeit an einem Bildschirm sichtbar. Über „Mein Profil“ können Sie Ihren Benutzernamen vom vorbesetzten Passwort dann ändern.
Eine eindeutige Empfehlung lässt sich nur für die generelle Verwendung von Wireframes geben. Wer konzeptionell damit schon einmal gearbeitet hat, kennt den Nutzen. Schnelligkeit, konzeptionelles Durchdenken und Testen der Oberflächen, leichte Änderungsmöglichkeiten und am Ende eine in der Regel problemfreie programmiertechniche Umsetzung. Die vorgestellten Programme taugen dabei grundsätzlich alle zur Entwicklung solcher Wireframes – haben aber durchaus wie gezeigt unterschiedliche Schwerpunkte bzw. Vor- und Nachteile.
Wer nur gelegentlich oder einmalig einen Wireframe erstellt, sollte sich Balsamiq Mockups näher ansehen. Hier geht alles wunderbar intuitiv und alle notwendigen Features zur Visualisierung sind vorhanden. Für komplexere Projekte, die funktionell möglichst genau beschrieben und visualisiert werden und am Ende als echter Prototyp zum Testen verwendet werden sollen, wäre wohl Axure RP Pro eine Alternative. Wer es kostengünstiger haben möchte, kann seine Wireframes auch einmalig mit einem Monatsaccount bei einem der beiden Online-Anbieter erarbeiten. Für komplexere Anwendungen in Teamarbeit erscheint dabei iPlotz etwas besser geeignet. Wer sich wirklich ernsthaft mit dem Thema auseinandersetzen möchte, dem sei der Test aller Anwendungen ans Herz gelegt. Welches der Tools die eigenen, individuellen Anforderungen und Vorlieben am besten erfüllt, kann man nur mit dem eigenen Ausprobieren wirklich feststellen. Doch auch hier gilt: Die Beschäftigung mit dem Thema Usability bzw. wie man Benutzeroberflächen besucherfreundlich und nutzerzentriert aufbaut, bleibt einem natürlich nicht erspart. Hier hilft auch ein Tool – das vom Wortsinn her ja immer nur ein (dummes) Werkzeug sein kann. Wie immer greift auch hier die bekannte amerikanische Abkürzung „PICNIC“. Problem in Chair–- not in Computer!