Storyboarding als Gestaltungswerkzeug für Oberflächenentwürfe

4. März 2013
Bei der Entwicklung von Software gibt es oftmals eine Benutzeroberfläche – sei es eine Desktopanwendung, eine App für ein Tablet/Smartphone oder eine Webanwendung. Im Fachkonzept werden die gewünschten Funktionalitäten (mehr oder weniger) gut und vollständig beschrieben, der Gestaltung der Oberfläche wird aber tendenziell eher wenig Beachtung geschenkt. Dies liegt nicht unbedingt an fehlendem Willen der Fachabteilung, sondern eher an fehlenden Möglichkeiten. Dabei spielt gerade die Benutzeroberfläche für den Endanwender ja eine entscheidende Rolle – denn von ihr hängt maßgeblich die Zufriedenheit des Benutzers ab.

Möglichkeiten des Oberflächenentwurfs

Die Gestaltung von Oberflächen-Entwürfen lässt sich auf vielerlei Arten realisieren.

Eine einfache Art sind Paper Prototypes. Hierbei wird die Oberfläche auf Papier, auf einer Tafel oder einem Whiteboard gemalt. Um diese Entwürfe ins Fachkonzept zu übernehmen, müssen diese als Fotos festgehalten werden, wodurch ein nachträgliches Anpassen nur noch schwer möglich ist.

Als Gegenstück dazu dienen Coded UI Prototypen, also in einer Entwicklungsumgebung programmierte Oberflächenprototypen. Diese können dann ebenfalls als Bild ins Fachkonzept übernommen werden. Aber auch hier gibt es Nachteile:

  • es wird eine entsprechende Entwicklungsumgebung benötigt, die die Fachseite in der Regel nicht hat und auch nicht bedienen kann (und auch nicht muss)
  • ein Entwickler (und eben nicht die Fachabteilung) muss Anpassungen vornehmen
  • das Setzen der entsprechenden Beispieldaten im Code kann u. U. sehr aufwendig sein

Jedoch gibt es zwischen diesen beiden Extremen noch einen Mittelweg: Design-Prototypen über Softwaretools. Beispielhaft können hier Expression Blend Sketchflow und Balsamiq Mockups genannt werden. Ein recht neuer Vertreter in dieser Gruppe von Werkzeugen ist die Storyboarding-Erweiterung von Visual Studio 2012 für Powerpoint.

Storyboarding mit PowerPoint

Schauen wir uns nun diese Storyboarding-Komponente ein wenig genauer an. Diese klinkt sich mit einem neuen Tab in PowerPoint ein.

image

Über den Button Storyboard-Shapes öffnet man eine Leiste mit allen verfügbaren Formen. Diese ist unterteilt in verschiedene Kategorien:

  • Backgrounds: Hintergründe für die grundlegende Art der Anwendung, z. B. Ribbon-Desktop-Anwendung, Browser, Windows Phone
  • Common: grundlegende Controls, wie z. B. Button, Text, Textbox, Checkbox, Grid etc.
  • Windows Apps / Desktop / Phone: für diese Anwendungsfälle spezifische Elemente
  • Icons: hier gibt es sowohl allgemeine als auch Windows App- oder Windows Phone-spezifische Icons
  • Annotation: für Anmerkungen, z. B. Sprechblase oder Notizzettel

Alle Elemente können per Drag&Drop auf die Folie gezogen und dort dann direkt bearbeitet werden. Somit ist z. B. auch ein schnelles Füllen eines Grids mit Daten möglich.

Mit den bereitgestellten Elementen lässt sich schon ein recht ordentlicher Entwurf z. B. einer Oberfläche für eine Ribbon-Anwendung gestalten:

image

Vorteile

Solch ein Entwurf ist relativ zügig erstellt, und kann einen deutlichen Mehrwert zu einer rein textuellen Beschreibung eines Fachkonzeptes liefern. Der Entwickler bekommt eine genauere Vorstellung davon, wie die Anwendung aussehen soll, und nicht nur, welche Funktionen sie bieten soll. Zudem eignet sich diese Technik, um eigene Ideen schnell festzuhalten und auszuprobieren, bevor zeitaufwendig eine Oberfläche programmiert wird. Durch die schnelle Bearbeitungsmöglichkeit ist es zudem möglich, in einer kleinen Gruppe die Ideen zu besprechen, direkt anzupassen und zu kommentieren.

Im Vergleich zu den anderen genannten Anwendungen kommt man mit dieser PowerPoint-Erweiterung auch dem Fachbereich entgegen, denn PowerPoint ist ein Werkzeug, mit dem der Fachbereich in der Regel Erfahrung hat.

Fazit

Für das gleiche Verständnis einer Anwendungsoberfläche kann das Design von Prototypen sehr hilfreich sein – sowohl für die Fachabteilung als auch für Entwickler. Die Einbindung der Storyboarding-Komponente bietet zudem den Vorteil, dass diese sich in ein weit verbreitetes Werkzeug integriert. Welche Möglichkeit aber auch genutzt wird, um eine Oberfläche vor der Programmierung und zur Abstimmung zu entwerfen – es hilft in jedem Fall.

Weiterführende Links

Wer sich genauer mit dem Thema Paper Prototyping auseinandersetzen möchte, der sei auf die englische Wikipedia verwiesen: http://en.wikipedia.org/wiki/Paper_prototyping

Ausführlichere Informationen zu den genannten Softwarewerkzeugen gibt es hier: