GUI-Spezifikation Teil 6: Ablaufdarstellung mit Mockup-Diagrammen

Mockups eignen sich gut zur anwendergerechten Visualisierung von Abläufen. Hierzu werden kleine Ansichten der einzelnen Dialog-Mockups in einem Ablaufdiagramm (z.B. in Kombination mit der UML) dargestellt. Das Tool Wireframe Sketcher unterstützt dies, wie in folgender Grafik zu sehen ist:

Somit können ganze Storyboards für Software-Applikationen erstellt werden, die einfacher verständlich sind, als reine UML-Ablaufdiagramme. Komplexe Sachverhalte, Abläufe und Abhängigkeiten werden direkt mit dem Look & Feel der zu erstellenden Software spezifiziert und veranschaulicht.

Wenn die Storyboards nicht direkt im Tool unterstützt werden, kann man z.B. MS Powerpoint oder MS Visio verwenden und die einzelnen Dialoge als Grafik einbinden.

GUI-Spezifikation Teil 3: Mockup-Beispiele

In diesem Beispiel wird gezeigt, wie Dialoge mit Hilfe des Tools Balsamiq Mockups grafisch spezifiziert werden können. Es stehen zum einen zahlreiche Standard-Oberflächenelemente zur Verfügung:

Zum anderen können Templates für verschiedenste Zwecke, wie z.B. Mobile Endgeräte, Facebook-Anbindung, Shop-Systeme etc. von Mockups to go runtergeladen werden. 

Beispiel iPad:

Salesforce CRM:

Facebook:

oder aber auch MS Windows Standard-Dialoge:

Wie man sieht, ergeben sich hierdurch vielfältige Möglichkeiten des GUI-Designs. Wie im vorigen Post schon erwähnt, eignen sich diese Dialog-Mockups hervorragend, um Software-Anforderungen mit Auftraggebern bzw. Anwendern zu ermitteln und zu diksutieren, da man sofort einen Eindruck der Software-Funtionalität vermitteln kann. Durch die Toolunterstützung kann ein solcher Dialog in kurzer Zeit mit geringem Aufwand erstellt werden.

GUI-Spezifikation Teil 2: Mockups und Wireframes

Mockups, oder manchmal auch Wireframes genannt, stellen prototypische Darstellungen von Benutzungsoberflächen dar. Es gibt neben der Möglichkeit, die Mockups auf Papier zu zeichnen, diverse Tools, die die Erstellung von Mockups unterstützen, wie z.B.:

• Balsamiq Mockups
• Wireframe Sketcher
• diverse Visio-Schablonen
• Mockingbird
• Sketchy für das iPad

Einige der Tools stellen die Dialoge so realistisch dar, dass man sie von den späteren "echten" Dialogen in der fertigen Software kaum unterscheiden kann. Prinzipiell ist das nicht verkehrt, es könnte bei Auftraggebern jedoch suggerieren, dass die Dialoge bzw. die Software schon fast fertig entwickelt sind - obwohl man ja erst in der Spezifikationsphase ist. Daher empfiehlt sich die Nutzung von Tools, die die Dialoge eher skizzenhaft darstellen.

Die Mockups können je nach Tool und Vorgehensweise als Wegwerf-Prototypen, d.h. zur reinen Anforderungsanalyse und Simulation verwendet werden, oder am kontinuierlich zu produktiv eingesetzzten Softwarekomponenten weiterentwickelt werden.

Übrigens ermöglichen manche der Werkzeuge ein Konvertieren der skizzierten Dialoge in Klassen der entsprechenden Programmiersprache, in der die Dialoge bzw. die Software später implementiert werden.

GUI-Spezifikation Teil 1: Einleitung

Grafische Benutzungsoberflächen (engl. graphical user interface, kurz GUI) als Teil von Software-Systemen stellen einen wichtigen Bestandteil bei der Anforderungsspezifikation dar. GUIs sind eine zentrale Schnittstelle zum Anwender (Dialoge), der die Software benutzt und entscheiden maßgebend, ob die Anwender die Software akzeptieren und nutzen oder nicht.

GUIs lassen sich mit verschiedenen Methoden und Hilfsmittel darstellen, von denen einige in den folgenden Posts erläutert werden:

• Mockups bzw. Wireframes: Skizzierte GUIs
• Wireframe-Diagramme bzw. Storyboards, die den Geschäftsprozess anhand der Dialoge abbilden
• Tabellarische Spezifikation der Dialogelemente und -funktionen

GUI-Spezifikationen eignen sich besonders gut zur Anforderungsanalyse mit Anwendern, da diese oft formalisiertere Spezifiaktionsarten, wie z.B. Use-Cases, Prozessmodelle oder UML-Diagramme nicht kennen bzw. verstehen. Mit den Dialogen jedoch können die Anwender sich in die Nutzung der Software reinfinden und den Ablauf und die Nutzung besser nachvollziehen.

Im nächsten Teil betrachten wir Mockups bzw. Wireframes als Hilfsmittel zur grafischen Anforderungsspezifikation.