Was und Warum?

Ideen für Applikationsoberflächen sowie Interaktionskonzepte sollten präsentationsfähig umgesetzt werden, um dem Kunden frühzeitig einen „anfassbaren“ Prototyp an die Hand geben zu können. Für eine toolbasierte Darstellung von Wireframes haben wir nach einiger Recherche zwei Werkzeuge ausgewählt, die wir hier gerne vorstellen wollen.

Kurze Erklärung: Was sind Wireframes?
Bei der Konzeption von Anwendungen werden Wireframes vor dem Beginn der Anwendungsentwicklung erstellt. Wireframes können einfach auf Papier gezeichnet oder auch mit Unterstützung eines Programms erstellt werden. Damit werden die grundlegenden Funktionen der Anwendung visualisiert und „anfassbar“ gemacht. Dargestellt werden diese mit Hilfe von Umrissen der Oberflächenelemente oder auch schon detailgetreueren Platzhaltern. Die Funktionen sind nun nicht mehr nur in der Vorstellung des Auftragnehmers und des Kunden vorhanden. Der Kunde und der Auftragnehmer haben ein gemeinsames Bild der Anwendung und können eine gemeinsame Sprache sprechen.

Wir haben die Programme AXURE RP (http://www.axure.com/) sowie Balsamiq (http://www.balsamiq.com/) anhand einer Überarbeitung für das hauseigene CMS sowie Vorschlägen für eine Kundenapplikation getestet. Es wurden vorerst Scribbles der Oberflächen mit Papier und Bleistift angefertigt und anschließend mit beiden Tools umgesetzt.

Zusammenfassung der Ergebnisse aus AXURE

Mit dem Programm AXURE RP kann man Flowcharts, Wireframes, Prototypen und Spezifikationen erstellen.

Anhand von Use Cases für unser CMS wurden mit Hilfe von Axure Wireframes erstellt. Diese können entweder mit Bildern bzw. spezifischen Designelementen angereichert werden oder auch völlig ohne bildliche Elemente, also die reinen Interaktionselemente wie Buttons, Select-Menüs etc., erstellt werden. Der Umgang mit wiederkehrenden Elementen ist mit „Masters“ (Vorlagen) gelöst. Diese können mit einem Klick erstellt werden und in jede Seite per Drag & Drop hineingezogen und verwendet werden. Bei Änderungen an einem Master werden alle Seiten, die diese verwenden, auch aktualisiert.

Mouse-enter, mouse-leave und mouse-click Events können mit AXURE nachgebildet werden. Es sind jedoch für gute Slider-Events (Bewegung eines Elementes) viele Einstellungen nötig, die die Bearbeitung von solchen Events aufwendig machen.

Neue GUI Elemente können als Library importiert werden. Es sind einige Libraries von der Community erstellt worden, die man entweder gratis oder für geringes Entgelt benutzen kann.

Das Ergebnis kann in AXURE als HTML-Struktur exportiert werden: es entsteht ein klickbarer Prototyp. Der Kunde kann somit testen, wie sich der Entwurf/das Konzept anfühlt. Man kann sie sehr detailgenau erstellen und auch Hinweise bzw. Beschreibungen für einzelne Elemente hinterlegen. Dann kann der Kunde diese Anmerkungen auch innerhalb des Prototyps öffnen und lesen.

Dabei sollte immer überlegt werden, wie genau der Kunde die Wireframes haben möchte und wie stark das Design schon für den Kunden wichtig ist. Einige Kunden denken bei klickbaren Prototypen, dass das Programm schon fast fertig ist und können nicht zwischen Prototyp und Anwendung unterscheiden. Daher ist die Kommunikation über den Projektstatus Wireframes und Prototyp sehr wichtig. Diesen Eindruck unterstützt AXURE bei der Browserdarstellung des Prototyps mit der Seitenstruktur am linken Rand. Es sind jedoch auch applikationsgenaue Wireframes erstellbar, die das Aussehen einer schon bestehenden Applikation nachahmen können. Hierfür gibt es z. B. mehrere Libraries für detailgetreue Wireframes des IPhones.

Wenn bei der Konzeptionserstellung mit Hilfe der Wireframes die verschiedenen Elemente und Aktionen innerhalb von AXURE gut dokumentiert werden, kann eine Spezifikation im Word-Format erstellt werden. Dies spart nachträglich die Erstellung von Dokumentationen und es ist früh möglich, den Entwicklern ein Interaktionsdokument an die Hand zu geben.

Mein Eindruck von AXURE ist also sehr positiv. Die automatische und schnelle Generierung des Prototyps mit nur ein paar Klicks begeistert sofort.

Zusammenfassung der Ergebnisse mit Balsamiq

Mit Balsamiq (in der Plugin Version für JIRA) können einfache Wireframes schnell und in ansprechendem Design (wie per Hand gemalt) erstellt werden. Es sind viele Elemente vorhanden, die durch einfaches Drag & Drop in die Bearbeitungsfläche hineingezogen werden können. Elemente aus der Library können mit speziellen zusätzlichen (schon vorhandenen) grafischen Elementen versehen werden (z. B. ein Image für den „Cover Flow“ oder eine Scrollbar für das „Browser Window“). Schon vorgefertigte Inhalte für Tabellen erleichtern ein schnelles erstellen von Wireframes.

Das Verlinken ist mit Balsamiq in der JIRA Plugin Version nicht möglich. Auch können keinerlei Interaktionen erstellt werden. Damit entsteht kein klickbarer Prototyp der Anwendung, es werden reine Bilder erzeugt.

Eine XML Datei kann exportiert werden und auch wieder importiert werden. Bei eingebundenen Datei Verlinkungen müssen diese auf dem System vorhanden sein, damit beim Import auch darauf zugegriffen werden kann.

In Zusammenarbeit mit Entwicklern ist Balsamiq als Plugin Version sehr handlich. Es können hiermit zu jedem Issue mehrere Wireframes erstellt werden. So kann der Designer dem Entwickler zu jedem Issue einen Oberflächenentwurf einstellen. Dies kann natürlich auch mit einer externen Balsamiq Version vorgenommen werden und dann händisch jedem Issue angehängt werden. Jedoch ist es hierbei jedem möglich, Änderungen an einem Wireframe direkt in JIRA vorzunehmen. Der jeweilige Bearbeiter muss dabei keine Softwareversion von Balsamiq auf seinem Rechner installiert haben.

Allerdings darf man sich mit dem Speichern nicht zu lange Zeit lassen, damit man nicht automatisch von JIRA ausgeloggt wird, wenn man erst spät versucht den Entwurf zu speichern.

Gegenüberstellung

Tabelle 1: Gegenüberstellung von AXURE und Balsamiq

Attribute	AXURE (PC Version)	Balsamiq (Plugin für JIRA)
Gruppieren von Elementen	Ja	Ja
Sperren von Elementen	Ja	Ja
Mehrere Seiten	Ja	Nein
Master (Vorlagen)	Ja	Nein, reine Einzeldateien. (siehe Anmerkung 1)
Neue UI Elemente	Ja, einfach zu erstellen sowie auch neue Bibliotheken zu importieren.	Nein
Interaktionen	Nicht leicht zu verstehen, aber mit guter online Dokumentation.	Kein Verlinken in der Plugin Version für JIRA möglich.
Export Funktion	Ja: HTML, BMP, JPEG, GIF, PNG, MS Word Dokument	PNG (erzeugen durch Speichern), XML Struktur
Import Funktion	Bild Import, RP File, aus der Zwischenablage	XML Struktur, PNG Import für Bilder
Prototypen	Ja, HTML (klickbar mit Interaktionen)	Kein klickbarer Prototype, nur eine Gruppe/Menge von Bildern.
Drag & Drop	Ja	Ja
Bibliotheken (externe)	Ja	Nein
Bibliotheken (eigene)	Ja	Nein (nur die Elemente aus der Community, aber keine Bibliotheken)
Graphische Elemente	Ja, aber weniger als in Balsamiq. Diese grafischen Elemente neu zu erzeugen ist aber einfacher.	Ja, mehr und schöner entwickelt.
Hinweise/Anmerkungen zu Elementen	Ja	Ja (Anmerkungen sind innerhalb des Bildes vorhanden)
Präsentationsfunktion	Ja	Ja
Erlernbarkeit	Nicht einfach im Hinblick auf die Erlernbarkeit.	Leicht
Komplexität des Programms	Hoch	Niedrig
Kostenpflichtig	Ja, bei mehreren Benutzern gibt es einen Preisnachlass.	Ja, der Preis kommt auf die Anzahl der Benutzer an.
Lizenz	EULA. Man kann das Programm auf dem Heimrechner sowie auch auf dem Firmenrechner nutzen.	Akademische und Kommerzielle Lizenzmodelle

Anmerkung 1: Der in dem Handbuch angegebene “tricky png import”, der ein Vorlagen-Verhalten imitieren soll, funktioniert nicht in der Plugin Version, da JIRA automatisch neue Namen beim Speichern vergibt. Das erneute Öffnen eines Wireframes mit verändertem importierten Bild zeigt eine nicht gefundene Bild Datei.