Prototyping Reloaded

 

Im vergangenen Beitrag Prototyping-Tools im Vergleich haben wir verschiedene Tools einander gegenüber gestellt. Es gab, so gesehen, keinen klaren Sieger, da es immer auf das Einsatzgebiet des Prototyping Tools ankommt. Für uns waren die entscheidenden Anforderungen eine geringe Einarbeitungszeit, Erweiterbarkeit und Effizienz beim Design von Wireframes.

Da diese Anforderungen von Microsoft Visio nicht erfüllt waren, schauten wir uns nach Alternativen um und zogen insbesondere Fireworks und Axure in die nähere Auswahl. Nach einer Test-Phase mit den Trial Versionen haben wir uns auf Fireworks geeinigt.

Im Folgenden möchte ich kurz zusammenfassen, welche Features besonders die Produktivität steigern und welches Verbesserungspotential es in Fireworks CS5 noch gibt.

 

Produktivitäts-features

 

Das Gruppieren von Elementen im Wireframe erleichtert die Arbeit mit komplexen Wireframes. Besonders hilfreich ist dabei auch, dass Textfelder in Gruppen einfach mit dem Text-Werkzeug editiert werden können, ohne die ganze Gruppe auflösen zu müssen.

Die detaillierten Einstellmöglichkeiten für die Sichtbarkeit von Elementen auf verschiedenen Seiten der Wireframes erleichtern die Überarbeitung von Wireframes sehr. Man muss nur einmal ein Element anpassen und diese Änderung ist dann auf allen Seiten sichtbar, die dieses Element benutzen. Auch das Prinzip der Masterseiten unterstützt die effektive Anpassung von Wireframes.

Copy & Paste gehört bei einer Design-Software zum guten Ton: Im Vergleich zu Visio fügt Fireworks die Elemente auch an der gleichen Position im Wireframe ein von der aus sie kopiert wurden. So gehören hüpfende Elemente in Wireframe-Szenarios der Vergangenheit an.

Die intelligenten Hilfslinien sorgen dafür, dass einzelne Elemente im Wireframe nicht mühselig ausgerichtet werden müssen und das Layout der Wireframes aufgeräumt wirkt. Es wird automatisch eine Flucht zu existierenden Elemente gezogen, so dass diese bündig angeordnet sind.

Das Nutzen der Symbol-Bibliothek erlaubt den Entwurf eigener Elemente für Wireframes. Die können dann per Symbol-Script noch Eigenschaften wie Farbe oder Schriftart erhalten. Darüber hinaus gibt es in Fireworks Funktionen, die das Ersetzen und Aktualisieren von Symbolen in Wireframes sehr vereinfachen. Das 9-Slice-Scaling rundet das Symbol wortwörtlich ab und sorgt dafür, dass Symbole auch angemessen skalieren und nicht verzerrt werden.

Ein schnelles Arbeiten ist in Fireworks zum Einen durch die gewohnten Short-Cuts aus der Creative Suite möglich und zum Anderen durch die einfachen Werkzeuge und das Seiten-Status-Ebenen-Prinzip.

 

Verbesserungswürdig

 

Wenn man viele Wireframes in einer Datei speichert, erscheinen schon mal "Out of memory" Meldungen. Zwar behebt ein Fireworks-Neustart das Problem meistens und die Datei ist auch immer noch funktionstüchtig, aber die Produktivität (und das Vertrauen in die Anwendung) steigert das nicht gerade. Allerdings muss man dazu sagen, dass dieses Problem vermehrt auf Windows Vista aufgetreten ist.

Die Rich-Symbols mit eigenen Skripten geben viel Freiraum, allerdings ist die Interaktion mit den Symbolen etwas hakelig: Wenn man Eigenschaften wie zum Beispiel das Label eines eigenen Buttons ändern will, muss man immer mit <Enter> bestätigen. Anwender, die vorher noch nicht mit Flash Professional o.ä. gearbeitet haben, sind zudem etwas irritiert, wenn man per Doppelklick im "Symbol-Edit"-Modus strandet, anstatt den Text des Buttons ändern zu können.

Das Ebenen-Konzept in Fireworks ist etwas anders als in Photoshop: In Fireworks wird für jedes Element eine neue Ebene angelegt. In Photoshop passiert das nur, wenn der Anwender explizit eine neue Ebene anlegt. Was in Photoshop Gruppierungen sind, sind in Fireworks Ebenen. Gruppierungen fassen in Fireworks ausgewählte Elemente zu einem Bitmap-Bild zusammen und dieses Bitmap gleicht dann einer Gruppierung und liegt in einer Ebene. Klingt kompliziert? Ist es anfangs auch, aber wenn man einfach mal etwas rumprobiert, wird es einfacher.

Das führt dann auch zum nächsten Punkt: Die Übersetzung ins Deutsche ist nicht wirklich gut gelungen. "Bitmap-Bild" ist keine sinnvolle Verallgemeinerung für Grafiken und Gruppierungen. Darüber hinaus ist der Dialog für die Sichtbarkeit von Ebenen in Seiten nicht zu verstehen. Die englische Version ist wesentlich einleuchtender formuliert und erleichtert die Nutzung dieser wirklich hilfreichen Funktion.

 

Die Dokumenten-Bibliothek soll das Bearbeiten von Symbol-Instanzen vereinfachen. Allerdings erscheint teilweise ein Symbol ohne ersichtlichen Grund mehrfach in der Dokumenten-Bibliothek. Warum das so ist? Wir warten noch auf eine Antwort von Adobe…

 

Fazit

 

Trotz dieser Ungereimtheiten überwiegen aber die positiven Aspekte und neben den vielen hilfreichen Werkzeugen hat die Ähnlichkeit der Fireworks-Benutzeroberfläche zu anderen Produkten der Creative Suite die Einarbeitungszeit stark reduziert. Deshalb werden wir Fireworks weiter für Prototyping einsetzen.

Im nächsten Schritt werden wir unsere Prototyping-Bibliothek vervollständigen und insbesondere den Druck-Workflow optimieren. Darüber hinaus werden wir versuchen den Dokumentations-Workflow auf Fireworks umzustellen, um Notizen während des Wireframings erfassen und in einem geeigneten Format für die Weiterverwendung festhalten zu können.

Abschließend kann man sagen, dass Prototyping mit zahlreichen Tools möglich ist. Bevor man aber Prototyping in den Kreativ-Prozess in seinem Unternehmen einbindet, sollte man die wichtigsten Kriterien abwägen, damit die Integration optimal verläuft und der Aufwand in angemessenem Verhältnis zum letztendlichen Nutzen des Prototypen steht. Wichtige Faktoren sind dabei die Einarbeitungszeit und die Anpassbarkeit des Tools an vorhandene Workflows. Desweiteren sollte man das Prototyping Tool an einer konkreten Aufgabe testen. Damit stellt man sicher, dass es für den letztendlichen Verwendungszweck wirklich angemessen ist.

---