Inhalt
1. Was ist UI Prototyping
2. Methoden des UI Prototyping
3. UI Prototyping am Beispiel von Macromedia Flash
3.1 Allgemeines
3.2 Einfaches interaktives Prototyping
3.3 Prototyping mit Funktionalität
4. Zusammenfassung
5. Anhang
6. Links & Literatur
Die Aufgabe des UI Prototypings liegen darin, ein visuellen Prototypen einer späteren Applikation zu erstellen. Die Hauptaufgabe lieget hierbei im Sammeln von Information, welche die Erstellung der Applikation begleiten und steuern sollen. Hierbei kann man bereits sehr früh Rückmeldungen erhalten und Fehler in einem frühen Stadium eliminieren.
Das Wort Prototyp stammt vom griechischen prototypon, zu Deutsch Urform, ab und bedeutet in der hier zutreffenden Bedeutung erste maßstäbliche und gewöhnlicherweise funktionsfähige Ausfertigung eines neuen Typs oder Designs einer Konstruktion, wobei Konstruktion hier durch Screen Design ersetzt werden sollte.
Das UI Prototyping läßt sich in drei Bereiche einteilen:
1. Low-Fidelity Prototyping: Hier liegt der Schwerpunkt auf der einfachen Erstellung von Screen Designs und basiert auf der Annahme, daß die Qualität teilweise mit der Anzahl von Überarbeitungen steigt. Der Vorteil dieser Form liegt klar in der einfachen und schnellen Erstellung von Entwürfen, die wiederum schnell veränderbar sind. Die Nachteile liegen in der Schwierigkeit, adäquate Rückschlüsse über das Benutzerverhalten zu bekommen.
2. Medium-Fidelity Prototyping: Die einzelnen Ansichten einer Anwendung sind hier bereits verknüpft, so daß man bereits einen besseren Eindruck von Zusammenhängen erhalten kann. Auf die Einbindung von Logik wird allerdings im Allgemeinen verzichtet. Der Vorteil liegt in der nach wie vor schnellen Erstellung und dem besseren Feedback der Benutzer. Nachteilig ist, daß der erstellte Code im Normalfall nicht wiederverwendbar ist und daß die Aufgabe des Screen Designs und der Implementierung von verschieden Teams wahrgenommen werden muß.
3. High-Fidelity Prototyping: Hierbei greift man auf interface construction tools zurück, die es ermöglichen, ein sehr genaues visuelles Abbild des späteren Produkts zu erstellen. Negativ kann sich allerdings die frühe Festlegung auf bestimmte Elemente auswirken.
Zu den Low-Fidelity Prototyping Methoden ist wohl als bekannteste das Paper Prototyping zu nennen. Aus Papier hergestellte, dem Aussehen am Bildschirm nachempfundene Elemente werden angeordnet, um sich einen ersten Eindruck des Screen Designs zu verschaffen. Entwürfe können auch bereits am Benutzer getestet werden, indem man die Interaktionen durch Personen simuliert, d.h. der Computer wird durch eine Person simuliert, ein andere stellt die Aufgaben oder übernimmt die Beobachtung des Benutzerverhaltens.
Beim Medium-Fidelity Prototyping kommt bereits mehr Technik zum Einsatz: Es wird ein Prototyp, der aus einzelnen verknüpften Screens besteht, erstellt. Der Aufwand ist hierbei zwar größer als beim Paper Prototyping, dafür ist es aber auch möglich, genauere Ergebnisse zu erhalten. Beim Test kann der Benutzer selbsttätig durch die einzelnen Screens navigieren. Auf der technischen Seite gibt es Vielzahl von Programmen, die dies ermöglichen. Es bietet sich an, das User Interface als steuerbare Präsentation anzulegen, wobei jede Folie eine Ansicht darstellt. Auch die Verwendung von Flash kann von Vorteil sein, da hier auch bereits mehr Flexibilität bei der Interaktion simuliert werden kann. Es kann Information eingegeben werden oder aus Pull-Down Menus ausgewählt werden, um nur einige der Möglichkeiten zu nennen. Hierauf soll später noch genauer eingegangen werden. Eine weitere Möglichkeit besteht in der Verwendung von HTML-Seiten, die je nach Bedarf noch mit interaktiven Elementen angereichert werden können, z.B. mittels JAVA-Script.
Im High-Fidelity Prototyping wird ein Erstellungswerkzeuges eingesetzt, welchen das Screen Design so erstellt, daß es der späteren Applikation am nächsten kommt. Soll beispielsweise eine JAVA Anwendung erstellt werden, so läßt sich mit einer Vielzahl von Programmen (z.B. Eclipse) auf einfache Art und Weise eine zunächst noch statische grafische Benutzerschnittstelle erstellen, welchen der des späteren Produkts gleicht. Allerdings ist die Hauptfunktionalität in diesem Stadium noch nicht verfügbar.
Im nachfolgenden Abschnitt soll das UI Prototyping mit Macromedia Flash näher betrachtet werden. In oben genannter Einteilung läßt sich dieses zwischen Medium- und High-Fidelity Prototyping einordnen. Handelt sich beim zu erstellenden Produkt um eine Applikation in Flash, handelt es sich mehr um High-Fidelity Prototyping, bei der Simulation eines User Interfaces, welches später mit einer anderen Technologie realisiert werden soll, wird man es unter Medium-Fidelity Prototyping einordnen.
Meiner Meinung nach liegen die Vorteile von Macromedia Flash zum einen in der Möglichkeit mit einfachen Mitteln eine interaktive Simulation aus bereits vorgefertigten Elemtenten, wie z.B. Check boxes, Radio buttons, uvm. zu erstellen und zum anderen bietet die Scriptsprache, das Action Script, eine Vielzahl von Möglichkeiten, einen Entwurf mit Funktionalität zu versehen, um einen noch akkurateren Eindruck vom späteren Produkt zu vermitteln.
Ein weiterer Vorzug von Flash ist es, daß man die erstellten Prototypen sehr leicht über das Internet übermitteln kann, da die Dateien meist eine sehr geringe Größe haben. So ist auch möglich an verschiedenen Orten Tests durchzuführen.
Eine Flash-Datei ist im Allgemeinen wie ein Film aufgebaut, d.h. sie besteht aus vielen einzelnen Bildern. Ein wichtige Rolle nehmen hierbei die sog. Schlüsselbilder ein. Ein Schlüsselbild hat immer einen bestimmten Inhalt, der in unserem Fall aus Elementen besteht, die der Ersteller dort abgelegt hat. Beispiel
Mit Flash wird eine ganze Reihe von Komponenten ausgeliefert, welche eine schnelle Erstellung von UI Prototypen ermöglichen. Jede der Komponenten kann über die grafischen Benutzerschnittstelle von Flash bearbeitet und individuell angepaßt werden. Es ist auch möglich, mediale Inhalte, wie Bilder, Töne oder Videoclips einzubinden. Der grafischen Gestaltung sind keine Grenzen gesetzt: Alle Elemente sind frei positionierbar und jederzeit veränderbar, einfache Formen, wie Linien, Kreisen oder Rechtecken, können über eine Werkzeugpalette via Drag&Drop auf der Bildfläche platziert , verändert und komponiert werden.
Um nun noch die gewünschte Verbindung der einzelnen Schlüsselbilder herzustellen, sind einige wenige Befehle aus der Scriptsprache nötig, die sich allerdings komfortabel aus einem Menu auswählen lassen. Zu jedem Befehl im Script erhält man einen Hinweis, welche Parameter erforderlich sind. Beispiel
Zu jedem Befehl ist auch noch möglich, eine sehr detaillierte Auskunft in deutsche Sprache über die mitgelieferte Referenz zu erhalten. Beispiel
Somit ist es relativ leicht möglich, sich auch ohne lange Einarbeitungszeit zurechtzufinden und einfache UI Prototypen zu erstellen.
Wie oben bereits erwähnt, ist es auch möglich, in gewissem Maße Funktionalität mit dem Prototyp zu verbinden. Natürlich sollte hierbei immer überlegt werden, ob der größere Aufwand gerechtfertigt ist, da man den erstellten Code meist nicht weiterverwenden kann. Der Vorteil liegt aber klar darin, daß man ein genaueres Feedback erhält, als bei einem Prototyp ohne Logik.
Erhält man beispielsweise die Aufgabe, eine UI für die Verwaltung und Darstellung von mediale Ressourcen eines Handy's zu konzipieren, so läßt sich ein genaueres Feedback erwarten, wenn man einen Teil der Logik im Prototyp mit integriert. Vor allem dann, wenn es ein wesentlicher Teil der Aufgabe ist, zu testen, wie gut der Benutzer verschiedene Aufgaben, z.B. das Abspielen eines Audio-Tracks oder einer Videosequenz, ausführen kann. Hierbei ist es sicher von Vorteil, wenn teilweise ein Steuerung für die medialen Ressourcen integriert, um ein optimales Bedienkonzept zu entwickeln. Beispiel
Bei Web-Projekten ist es möglich, sogar noch weitergehender Funktionalität zu simulieren: Die Einbindung von Datenquellen oder auch die realistische Simulation von Wartezeiten, um nur zwei Beispiele zu nennen.
Abschließend läßt sich feststellen, daß es wohl nicht ein einziges optimales Werkzeug zum Erstellen von UI Prototypen gibt. Wird wenig Funktionalität für ein akkurates Feedback benötigt, so ist es sicher von Vorteil, einen einfachen, schnell zu erstellenden Prototyp zu verwenden. Steht verstärkt Funktionalität bei der Bewertung eines Designs im Vordergrund, so ist sinnvoll, auch den UI Prototyp mit Funktionalität auszustatten, da so frühzeitig Fehler erkannt werden können, welche in einem späteren Stadium umfangreiche und zeitintensive Änderungen mit sich bringen würden.
Ansicht eines interaktiven Screens zum Abspielen von Audio/Video
Prototyping Methods: http://hci.ethz.ch/seminar/Slides/PrototypingMethods.pdf
Macromedia Flash MX 2004: Software und mitgelieferte Dokumentation und Referrenz
