Storyboards in UI designs

Mensch-Maschine-Interaktion I WS 2005/2006 - Corinna Grüber

Historie

Die Verwendung von Storyboards beschränkt sich mittlerweile nicht mehr ausschließlich auf die Filmbranche, vielmehr hat sich das Storyboard auf mehrere Anwendungsmöglichkeiten erweitert. Storyboards werden vermehrt eingesetzt, wenn komplexe Sachverhalte, Abfolgen oder Zusammenhänge aus einer bestimmten Sichtweise gezeigt und in einem Model veranschaulicht werden soll.
Auf das User Interface Design bezogen, stellt das Storyboard alles dar, was eine Anwendung oder Webseite beinhaltet. Im Design von Benutzeroberflächen hat sich das Storyboarding als ein allgemein verständliches Hilfsmittel zur frühen Veranschaulichung der Zusammenhänge abstrakter Oberflächen etabliert. Storyboards werden sowohl für die Konzeption von Webanwendungen als auch für den Entwurf klassischer Softwareprodukte verwendet. Durch ein Storyboard kann allen Beteiligten einer Anwedungsentwicklung, das sind unter anderem Projektmanager, UI Designer, Entwickler aber vor allem Kunden, die sich meist nur schwer in der abstrakten Anwendungsstruktur zurechtfinden, ein einfacher Überblick über die zu erstellende Anwendung und deren Funktionen geben werden.
Ein Storyboard beinhaltet keine Angaben zum Graphical User Interface oder zum Layout.

Anwendung & Evaluation

Ein Storyboard im UI Design beinhaltet alle möglichen Hauptelemente einer Anwendung (Screens) mit deren entsprechenden Unterelementen. Typische Unterelemente sind Menüleisten, Text- und Eingabefelder. Zusätzlich gibt das Storyboard im UI Design darüber Aufschluss in welcher logischen und zeitlichen Abfolge die Hauptelemente der Anwendung stehen. Die einzelnen Screens eines UI Design Storyboards müssen, im weitesten Sinne analog zum Storyboard bei Film, zeigen (1) in welchem Teil der Anwendung sich der User befindet (wo spielt sich die Szene), (2) wer etwas tun muss - die Anwendung oder der User (wer sind die Akteure), (3) was für eine Eingabe oder Aktion erwartet wird - von der Anwendung oder vom User (wie verläuft die Handlung) und (4) was nach erfolgter Eingabe passiert bzw. welcher Screen der Nächste ist (was ist das Ergebnis dieser Szene).
Ist das Storyboard fertig gestellt, kann eine Anwendung bereits das erste Mal evaluiert werden. Hierbei übernimmt eine Person den Part der Anwendung und eine weitere Person ist der User. Die "Anwendung" darf dem "User" keine Rückfragen beantworten, sondern sie reagiert immer nur auf die Aktionen, die der User ausführt und zeigt ihm dem der Aktion entsprechenden Screen. Um diese erste Evaluation gut auswerten zu können, ist es hilfreich sie auf Video aufzunehmen um sie später, auch auf die Reaktion des Users hin, zu untersuchen. Ein Storyboard spiegelt in gewisser Weise einen ersten evaluierbaren Prototyp der Anwendung wieder. Ein evaluiertes Storyboard kann so bereits sowohl in der Analyse- als auch in der Designphase auf Fehler in der Konzipierung wie ein disfunktionaler Ablauf oder ein benutzerunfreundlicher Aufbau aufmerksam machen.
Bevor ein Storyboard einer Anwendung erstellt wird, muss bis auf die weiter unten aufgeführte Ausnahmen noch nicht feststehen mit welcher Technologie die Anwendung umgesetzt werden soll. Die Darstellung einer Anwendung mittels eines Storyboards ist auch für die Entscheidung, auf welche Technologie bei der Erstellung der Anwendung zurückgegriffen wird, einzubeziehen.

Erstellung&Werkzeug

Im User Interface Design gibt es weder für die Erstellung von Storyboards noch für das zu verwendende Werkzeug einheitliche Richtlinien oder Vorgaben. Zum einen werden sie schnell und einfach mittels Papier und Stift erstellt und eventuell für eine digitalisierte Darstellung eingescannt und zum anderen können sie mit Graphikprogrammen wie Photoshop erstellt werden. Wieder andere UI Designer erstellen ihr Storyboard mit Hilfe von PowerPoint. Auch ist es möglich Storyboards anhand von UML-Diagrammen zu erstellen.

Die Wahl des Werkzeuges, mit dem das Storyboard erstellt werden soll, hängt in der Regel davon ab, von wem es erstellt wird und welche Funktion das jeweilige Storyboard innehat, was für ein Prototyp erzeugt werden soll.

Wird es zum Beispiel mit UML erstellt, so kann der Prototyp daraus später implementiert und immer wieder überarbeitet werden und stellt letztendlich das reale Produkt dar. Jedoch sollte hierbei schon vor dem Erstellen des Storyboards klar sein, mit welcher Technologie die Anwendung implementiert wird um entsprechend ein Werkzeug zu wählen. Der Nachteil bei diesem Werkzeug wäre, dass branchenfremde Personen (Kunden, evtl. Projektmanager) die Notation nicht kennen und das Storyboard nicht richtig verstehen, was das frühe Erkennen von Konzeptfehlern behindern und auf Kundenseite zu Frustration führen könnte.

Die günstigste und im Verhältnis effizienteste Methode ein Storyboard anzufertigen ist die Erstellung mittels Papier und Stift. Zur größeren Flexibilität während der Erstellung und der Korrekturen nach der Evaluierung können zusätzlich PostIts zur Definition der Unterelemente verwendet werden (Papier- und PostItPrototyp). Für die Präsentation des Storyboards müssten die Screens entweder eingescannt werden oder nacheinander für alle gut sichtbar aufgehängt werden (Flipcharts). Der Vorteil dieses Verfahrens liegt eindeutig bei der schnellen und einfachen Erfassung des Storyboards vor allem für Laien. Der Nachteil jedoch, dass bei von Hand gezeichneten Storyboards es nicht von zu unterschätzender Wichtigkeit ist, dass die zeichnende Person auch Zeichnen kann. Für die meisten Benutzeroberflächen ist kein Künstler nötig, aber die Screens sollten klar sein und sich voneinander untersche! iden. Ansonsten ist die Evaluation der Anwendung mittels des Storyboards wenig hilfreich, da die Uneindeutigkeit im Storyboard als Fehler in der Anwendung betrachtet werden könnten.

Die Erstellung von Storyboards mit Hilfe von PowerPoint ist sinnvoll, wenn das Storyboard präsentiert werden soll. PowerPoint bietet einfache Mittel um die Screens mit deren Unterelementen zu visualisieren. Einzige Schwierigkeit ist die Darstellung von nichtlinearen Abläufen und die schnelle den Ablauf betreffende Korrektur des Storyboards. Um auch nichtlineare Abläufe darzustellen muss derselbe Screen in der Präsentation mehrfach auftauchen, was ein kurzfristiges "Umbauen" des Storyboards aufwendiger macht.

Ein Storyboard mit Photoshop oder einem ähnlichen Graphikprogramm zu erstellen, ist für die meisten Storyboards zu aufwendig und eher ineffektiv. Da ein Storyboard noch kein Layoutentwurf ist, sollte auf alle das GUI betreffenden Elemente verzichtet werden, um die volle Aufmerksamkeit auf die Funktionalität der Anwendung zu richten.

Es sind auch Kombinationen der oben angeführten Erstellungsmethoden denkbar. So ist es beispielsweise möglich eingescannte von Hand gezeichnete Screens in eine PowerPoint Präsentation zu integrieren, um sie dann präsentieren zu können.

Quellen

Grotenhoff, Maria: Stylianakis, Anna. (2001). Website-Konzeption: Von der Idee zum Storyboard. Bonn: Galileo Press GmbH

Rolf Hennicker, Nora Koch. Modeling the User Interface of Web Applications with UML
http://www.pst.informatik.uni-muenchen.de/personen/kochn/pUML2001-Hen-Koch.pdf am 13.11.2005

James A. Landay, Brad A. Myers. Sketching Storyboards to Illustrate Interface Behaviors
http://www.cs.berkeley.edu/~landay/research/publications/CHI96/short_storyboard.pdf am 13.11.2005

http://de.wikipedia.org/wiki/Storyboard am 13.11.2005
http://en.wikipedia.org/wiki/User_interface am 13.11.2005
http://www.remedy.com/customers/dev_community/UserExperience/glossary.htm#lofi_proto am 14.11.2005
http://www.sapdesignguild.org/editions/edition3/interact_design.asp am 13.11.2005
http://www.akademie.de/fuehrung-organisation/wissensmanagement/tipps/usability/papier-prototyping.html am 13.11.2005