Zurück zur Übersicht

Storyboards in UI design


Ugur Örgün

Am Anfang steht das leere Blatt. Dies gilt meistens auch für das Design von Benutzerschnittstellen. Nun haben die meisten Designer dieser Schnittstellen das Ziel, eine Umgebung zu entwickeln mit dem der Nutzer gut zurechtkommt, die Oberfläche akzeptiert und die Bedienung als intuitiv empfindet. Dies war nicht immer so. In den Anfängen mussten die Bedürfnisse der Nutzer sich den Technischen Möglichkeiten, sei es Rechenleistung oder die Funktionalität der Software, unterordnen. Heutzutage erleben wir wie sich diese Einschränkungen immer schneller Verkleinern. Die Designer haben aber auch verschiedene Wege die Oberflächen zu entwerfen. Einige bevorzugen es ganz ohne ein Blatt “drauf los zu programmieren“, Andere nehmen Vorlagen und automatische Hilfe von Programmen die sie benutzen. Die Sorte, die wir aber betrachten wollen, sind diejenigen, die sich wirklich ein leeres Blatt zu Hilfe nehmen und erst mit der alten Technik, mit Stift und Papier (Hilfsmittel werden nicht ausgeschlossen) aufzeichnen, zurechtschneiden was sie am Ende produzieren wollen. Wir werden aber Methoden, die das Beschriebene mit  anderen Technologien unterstützen nicht ausschließen.

Explizit werden dabei einzelne Stufen, Ereignisse, Seiten, Elemente der endgültigen Oberfläche als Einzellbilder entworfen. Diese ergeben zusammen einen Ablaufsplan (Storyboard). Den gesamten Prozess nennt man kontextuelles Design. Um zu gelungenen und akzeptierten Benutzer Oberflächen zu gelangen, wird hierbei Versucht so früh wie möglich den Nutzer und seine Ansichten beziehungsweise Gewohnheiten in das Design mit einfließen zu lassen. Bekanntlich ist es „billiger“ Konzeptfehler so früh wie möglich abzuändern. Die ersten Ideen werden als schnelle Zeichnungen auf das Papier gebracht. Sobald das Grundgerüst steht zeichnet und entwirft man genauere Pläne, legt fest wo Bedienelemente ausgerichtet und angebracht werden. Dazu gibt es zum Beispiel die Methode, einzelne Bedien- oder Bildelemente durch Papierstückchen zu Repräsentieren, um schnell und effizient die beste Strukturierung und Anordnung zu finden. Mir ist es in dieser Zeit der schier unbegrenzten Rechenleistung lieber, mich ab dieser Stufe von einem Computer unterstützen zu lassen. Bildbearbeitungsprogramme, und verwandte Programme die später genannt werden, ersparen einem zum Beispiel viel Zeit Papierstückchen zu erstellen die zu bearbeiten und so weiter. Vor allem bin ich froh z.B. nicht mit Klebstoff arbeiten zu müssen und das ganze Chaos das dann entstehen würde noch aufräumen zu müssen. Der einzige Unterschied dabei ist die Skalierung. Wenn man wirklich auf dem Tisch mit den Papierelementen arbeitet sollte das alles etwas überdimensional dargestellt werden. Dafür kann man da einzelne Elemente nicht so schnell bearbeiten und z.B. die Farbgestaltung gleichzeitig entwickeln. An einem Monitor zu arbeiten gibt wiederum ungefähr genau das Bild wider, wie es am Ende erscheinen wird. Das Design-Umfeld ist dem Nutzungsumfeld nicht mehr Fremd. Somit kann man an verschieden proportionierten oder skalierten Monitoren, betrachten wie das Ergebnis auf verschiedenen Anzeigegeräten wirken wird.

Ein großer Vorteil von Ablaufsplänen im Design von Benutzerschnittstellen ist auch die Betrachtung des Ziels, bevor irgendein Prototyp konstruiert wird. Vor allem im Hinblick auf Benutzerfreundlichkeit ergeben sich hier viele Möglichkeiten der Kommunikation mit dem Nutzer. Da kann der Designer auch mal den Stift in die Hände verschiedener potentieller Endnutzer geben und sie das Gesamtkonzept mit beeinflussen lassen. Diese Möglichkeit erfordert keinerlei Programmierkenntnisse der Nutzer und führt innerhalb einer Kommunikation zu effizienten Lösungen für etwaige Probleme oder erleichtert einen Kompromiss zwischen den Wünschen der Nutzer und dem Machbarem.

Zum Design via eines Ablaufsplans gehört auch eine hierarchische Strukturierung der Einzellbilder. Dies kann man z.B. in Baumdiagrammen, Flussdiagrammen oder Ähnlichem lösen um zu verdeutlichen wie alle Seiten miteinander Verknüpft sind. Dabei kann man auch Fehler entdecken ob bestimmte Elemente fehlen oder einige überflüssig sind und ob alle geplanten Seiten, Zustände beziehungsweise Ansichten erreicht werden.
Zu einem Storyboard gehört auch eine Funktionsbeschreibung, und die am besten für alle Elemente. Dieser Anforderung kann man in Schriftlicher Form oder auch in der Form von User Environment Design (UED), wie auf der SAP Seite für Design Guild beschrieben wird genügen. Das Erstere bietet sich an, wenn in der traditionellen Art und Weise auf Papier gearbeitet wird. Das Zweite ist professioneller und bietet sich für beide Arten an. Es beschreibt die Funktionalität jedes Elementes in einer bestimmten Syntax und würde es ermöglichen in mehreren Teams zu arbeiten. Wenn es sich um ein größeres oder kompliziertes Projekt handelt, sollte Wert darauf gelegt werden, einzelne Funktionen und die Ziele der einzelnen Elemente genau zu beschreiben. Somit kann man Implementierungs- und Verständnisfehler fast von vornherein ausschließen. Es sind auch Mischformen denkbar, so dass für unwichtigere Elemente nur kurze Notizen gehalten und für elementarere Bereiche UED und/oder Funktionspläne erstellt werden. Im Vergleich zu anderen Methoden wie z.B. das Anfangen ohne irgendein Entwurf zu machen, also das „Drauf los Programmieren“ sehr oft in Verbindung mit Editoren, die eine große Hilfe durch Automatisierung beziehungsweise fertigen Programmteilen leisten, mag die Methode des Ablaufsplans und des kontextuellen Designs umständlicher erscheinen. Es könnte zu der Annahme verleiten, dass zuviel Zeit verschwendet wird, in der nichts Produziert wird. Aber im Endeffekt wird sich eine Detaillierte Planung in den meisten Fällen positiv auf das Ergebnis auswirken. Vor allem wird verhindert eventuelle Fehler erst zu spät im Produktionsstatus zu entdecken und diese dann viel teurer zu beseitigen. Teilweise kann man sogar beobachten, dass es den Designer und/oder den Entwicklern zu Schade ist die Arbeit ab einer bestimmten Phase ganz wegzuschmeißen, so dass sie Fehler hinnehmen und an wichtigen Stellen Änderungen vornehmen. Hinzukommt, dass nach einer Detaillierten Planung der Fortschritt in der Produktion viel schneller vorangeht. Die Konzentration auf das Programmieren wird somit nicht durch weitere Überlegungen unterbrochen, ob das richtige gemacht wird und wie das Weitere gelöst werden soll. Nachdem die Planung abgeschlossen ist, kann man gut und gerne auch mit Editoren und anderen hilfreichen Programmen arbeiten.
Für die Ablaufsplanung und die Visualisierung kommen natürlich nicht nur Papier und Bildbearbeitungsprogramme wie Photoshop in Frage, da wären noch Flip-Charts, Animationsprogramme wie Flash, Director, Präsentationsprogramme wie PowerPoint und viele mehr.

Kommen wir zurück zum anfänglichen Bild. Wir hatten ein leeres Blatt angenommen. Egal für welche Methode sich ein Designer entscheidet. Das Blatt wird solange es sich um eine neue Herausforderung handelt anfangs immer leer sein. Man kann gerne mehrere Blätter voll schmieren und viele zerknüllen und wegschmeißen. Man kann mit dem Bleistift, mit Tinte, der Schreibmaschine oder dem Computer schreiben. Aber das Ziel am Ende sollte ein Blatt oder eben mehrere Blätter zusammengefasst zu einem Buch sein, welches die Menschen an die der Inhalt gerichtet ist gut lesen können und gerne lesen.

Referenzen:

SAP Design Guild. Kontextuelles Design:
http://www.sapdesignguild.org/editions/edition8/incontext_d.asp, 13.11.05