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.
Ü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:
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:
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von X. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen