Methode
Motivation für den Einsatz
Die graphische Benutzeroberfläche oder allgemein Bedienoberfläche (engl. user interface) ist das für die Nutzer sichtbare Ergebnis der Produktentwicklung. Individuelle Software wird in der Regel eingesetzt, um Geschäftsprozesse im Unternehmen besser zu unterstützen als es mit Software “von der Stange” möglich ist. Nutzer arbeiten effizienter und machen weniger Fehler, weil unternehmensspezifische Arbeitsabläufe durch besondere Fähigkeiten in der Software abgebildet werden. Individuelle Software kann einem Unternehmen einen entscheidenden Vorteil in einem umkämpften Marktsegment verschaffen. In der Bedienoberfläche eines IT-Systems steckt daher ein enormes Wissen. Dieses Wissen gilt es mit dem Baustein Layout zu sichern.
Mit dem Wunsch nach einer Veränderung einer Bedienoberfläche drücken Nutzer ihre Bedürfnisse in der Regel sehr klar aus. Die Akzeptanz einer Bedienoberfläche muss sich nach Gesichtspunkten der Ergonomie (objektive Kriterien) und der bevorzugten Arbeitsweise der Nutzer (subjektive Kriterien) richten. Eine frühzeitige Abstimmung mit einer realitätsnahen Darstellung der Fenster, Dialoge und Masken ist ein Erfolgsfaktor. Ein Nutzer kann aber kaum einschätzen, was eine Veränderung in einem Teil der Bedienoberfläche für das IT-System und die Produktentwicklung bedeutet. Es ist Aufgabe des Produktverantwortlichen, frühzeitiges Feedback der Entwickler zu notwendigen Korrekturen des Entwurfes während der Realisierung zu geben. Er tut das mit dem Baustein Layout.
Wissensmanagement richtig organisieren.
Zielgerichtet.
Agil.
Iterativ.
Prozesse
Projektmanagement
Der Produktverantwortliche hat mit dem Baustein Layout die Möglichkeit, jeden mit dem Auftraggeber abgestimmten Entwurf für die Bedienoberfläche zu erfassen. Der Entwurf (engl. mockup) ist eine realitätsnahe Darstellung eines Elements der Bedienoberfläche. Der Entwurf vermittelt vorrangig das Aussehen (engl. look and feel).
Im Steckbrief des Bausteins befindet sich eine Liste der geplanten Technologien für die Implementierung der Bedienoberfläche. Das ist eine sehr wertvolle Information für das Architekturmanagement, um Themen wie Lizenzkosten, technische Unterstützung vom Hersteller oder unternehmensweite Vorgaben rechtzeitig zu behandeln.
Prozesse
Anforderungsanalyse
Der Produktverantwortliche hat mit dem Baustein Layout die Möglichkeit, den Entwurf für ein Element der Bedienoberfläche als Ergebnis der Analyse zu sichern. Er kann auf Veränderungen durch Feedback der Domänenexperten reagieren und den Entwurf anpassen.
Eine Bedienoberfläche verfolgt immer ein bestimmtes Bedienkonzept. Die Größe des Bildschirmes (z.B. Watch, Smartphone, Tablet, Monitor, UHD-TV) und die Möglichkeiten der Eingabe (z.B. Maus, Tastatur, Stift, Berührung) beeinflussen die Gestaltung der Bedienoberfläche. Ein Bedienkonzept verfolgt auch das Ziel einer Standardisierung der Elemente der Bedienoberfläche durch eine Gestaltungsrichtlinie (engl. style guide). Jedes abgestimmte Bedienkonzept liegt als Baustein Spec vor und wird mit dem Baustein Layout verknüpft.
Prozesse
Produktentwicklung
Der Baustein Layout ist für Leser (z.B. Entwickler oder Tester) der zentrale Einstieg, um sich über die Bedienoberfläche zu informieren. Der Begriff Layout ist als Sammelbegriff für eine Reihe von Elementen einer Bedienoberfläche zu verstehen. Welche Elemente das sind, wird weitestgehend durch die Wahl der Client-Technologie bestimmt. Eine Desktop-Anwendung hat Elemente wie Fenster, Dialog oder Maske. Hingegen sprechen wir in einer Smartphone-Anwendung eher von einem Screen. Der Überblick im Baustein muss jeden Leser in die Lage versetzen, einen Teil der Bedienoberfläche fachlich einzuordnen. Über die Verknüpfung der ein- und ausgehenden Daten mit den Bausteinen Entity oder Event bekommt ein Leser Informationen zu Objekten, die eine wichtige Rolle in der Verarbeitung und Darstellung der Daten spielen. In der im Baustein veröffentlichten Spezifikation finden Leser alle Details zur Implementierung.
Gemäß Prinzip COD gilt der Titel des Bausteins als Vorgabe für den Namen der Implementierungsklasse. Mit dieser einfach umzusetzenden Regel muss kein Autor mehr eine spezielle Dokumentation im Wiki schreiben, um ein Element der Bedienoberfläche mit der technischen Lösung zu verknüpfen. Der Titel des Bausteins reicht als Einstieg in die Implementierung.
Seitenvorlagen für alle Bausteine und hilfreiche Makros für die Verwendung in Confluence.
Qualität
Seitenvorlage des Bausteins
Confluence unterstützt mit Seitenvorlagen die Idee der Bausteine optimal. Das folgende Beispiel kann direkt als HTML im Editor der Seitenvorlagen eingefügt werden.
Bitte hier Klicken, um den Quelltext anzuzeigen
<ac:layout>
<ac:layout-section ac:type="single">
<ac:layout-cell>
<h1>Steckbrief</h1>
<ac:structured-macro ac:macro-id="602764ad-f953-4c2a-9ee5-db2568da1960" ac:name="details" ac:schema-version="1">
<ac:rich-text-body>
<table class="wrapped relative-table" style="width: 100.0%;">
<colgroup> <col style="width: 25.0%;"/> <col style="width: 75.0%;"/> </colgroup>
<tbody>
<tr>
<th>Kurzbeschreibung</th>
<td>
<div class="content-wrapper">
<ac:structured-macro ac:macro-id="9dbebc75-1732-49f9-8bf9-fbbfe2848c00" ac:name="excerpt" ac:schema-version="1">
<ac:parameter ac:name="atlassian-macro-output-type">BLOCK</ac:parameter>
<ac:rich-text-body>
<p>
<ac:placeholder>Kurzbeschreibung der Ansicht (management summary).</ac:placeholder>
</p>
</ac:rich-text-body>
</ac:structured-macro>
</div>
</td>
</tr>
<tr>
<th colspan="1">Technologie</th>
<td colspan="1">
<ac:placeholder>Komma-separierte Liste der verwendeten Technologien.</ac:placeholder>
</td>
</tr>
</tbody>
</table>
</ac:rich-text-body>
</ac:structured-macro>
<h1 class="auto-cursor-target">Entwurf</h1>
<ac:structured-macro ac:macro-id="6a6f974b-bd94-4fe6-8064-5461375b1643" ac:name="section" ac:schema-version="1">
<ac:rich-text-body>
<table class="wrapped relative-table" style="width: 100.0%;">
<colgroup> <col style="width: 50.0%;"/> <col style="width: 50.0%;"/> </colgroup>
<tbody>
<tr>
<th colspan="2">Schematische Darstellung</th>
</tr>
<tr>
<td colspan="2">
<div class="content-wrapper">
<p>
<ac:placeholder>Hier bitte ein Drawio mit dem schematischen Aufbau des Layouts einfügen.</ac:placeholder>
</p>
</div>
</td>
</tr>
<tr>
<th colspan="2">Untergeordnete Layouts</th>
</tr>
<tr>
<td colspan="1">
<ac:placeholder>Hier bitte den Link auf ein untergeordnetes Layout einfügen.</ac:placeholder>
</td>
<td colspan="1">
<ac:placeholder>Hier bitte eine kurze Beschreibung der Verwendung des untergeordneten Layouts einfügen.</ac:placeholder>
</td>
</tr>
</tbody>
</table>
</ac:rich-text-body>
</ac:structured-macro>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="single">
<ac:layout-cell>
<p>
<br/>
</p>
</ac:layout-cell>
</ac:layout-section>
<ac:layout-section ac:type="single">
<ac:layout-cell>
<h1>Spezifikation</h1>
<ac:structured-macro ac:macro-id="49d82410-90c8-4321-b5b7-015f6d3e3e48" ac:name="panel" ac:schema-version="1">
<ac:parameter ac:name="borderWidth">0</ac:parameter>
<ac:rich-text-body>
<p>
<ac:placeholder>Bitte hier das Markdown-Dokument aus dem Git-Repository mit dem Markdown-Editor einfügen.</ac:placeholder>
</p>
</ac:rich-text-body>
</ac:structured-macro>
</ac:layout-cell>
</ac:layout-section>
</ac:layout>
Struktur
Eigenschaften des Bausteins
Der Baustein Layout repräsentiert ein Element der Bedienoberfläche (engl. user
interface) des IT-Systems.
Er hat einen Steckbrief mit einer Kurzbeschreibung und einer Liste der
eingesetzten Technologien.
Er beschreibt den Aufbau und das Verhalten von Elementen der Bedienoberfläche.
Ein Bedienkonzept legt nicht funktionale Aspekte fest.
Der Seitentitel beginnt immer mit Layout oder einer
produktspezifischen Spezialisierung, z.B. Window, Dialog, Panel, etc.
Durch die Seitenvorlage hat jede Seite das Stichwort layout.
Sie kann aber um weitere Schlagworte ergänzt werden.
Dadurch wird die Seite leichter auffindbar.
Der Baustein Layout hat einen Zustand. Er ist in Arbeit, wenn keine Spezifikation vorhanden ist. Er ist fertig, wenn eine Spezifikation vorhanden ist und die Implementierung Teil eines Produktinkrementes ist.
Der Baustein Layout hat durch die Spezifikation einen Bezug zu einem Produktinkrement.
Der Baustein Layout wird in der Sprache der Entwickler geschrieben.