Archive - Edition 8: User Productivity

back To Overview of User Productivity Edition

Leading and General Articles

User Productivity Topics

More User Productivity

 

User-Interface Patterns – Bausteine für Benutzeroberflächen

Von Udo Arend, SAP User Experience, SAP AG – 19. November 2004

English Version • Dieser Artikel wurde auch auf SAP INFO Online veröffentlicht

Wieder verwendbare Bausteine, so genannte User-Interface-Patterns, erleichtern die Entwicklung von konsistenten und ergonomischen Benutzeroberflächen. Der folgende Artikel beschreibt im ersten Teil den Pattern-Ansatz bei SAP. Im Rest des Artikels wird gezeigt, wie sich die Patterns aus generischen Aufgaben der Anwender herleiten lassen und wie diese auf der Benutzeroberfläche abgebildet werden.

 

Einleitung

Beim Entwurf der Benutzeroberfläche (User-Interface, UI) einer Unternehmenssoftware sehen sich Entwickler mit zahlreichen Fragen konfrontiert. Sollen sie Ikonen verwenden? Wo sind die Kopfdaten und wo die Detaildaten zu platzieren? Wie suchen Anwender nach Objekten oder Daten? Wie sollen neue Zeilen in eine Tabelle eingefügt werden? Aus welchen Arbeitsbereichen soll ein Bild aufgebaut werden?

Die richtigen Antworten auf all diese Fragen zu finden ist nicht leicht. SAP setzt bei der Entwicklung von Benutzeroberflächen daher auf vordefinierte "Grundrisse" (Floor Plans), die durch wieder verwendbare generische "User-Interface-Patterns" gefüllt werden. Im Rahmen eines anwenderzentrierten Design-Prozesses ("User-Interface First") entwerfen Entwickler – unterstützt durch geeignete Entwicklungswerkzeuge – Geschäftsanwendungen und konfigurieren deren Benutzeroberfläche mit Hilfe vordefinierter Bausteine.

 

Der Pattern-Ansatz bei SAP

Wieder verwendbare Bausteine, "Patterns", sind nichts Neues in der Software-Entwicklung und beim Entwurf von Benutzeroberflächen. Gemäß der Definition der Design-Experten Douglas van Duyne, James Landay und Jason Hong vermitteln sie Einblicke in Design-Probleme, indem sie das jeweils Wesentliche einer Fragestellung und ihrer Lösung in kompakter Form erfassen. Ein bekanntes Beispiel hierfür ist der Einkaufswagen bei Online-Shops, in dem Anwender die gewünschten Waren vor der Bestellung sammeln können.

Das UI Pattern-Konzept

Abbildung 1: Das UI Pattern-Konzept

Der Pattern-Ansatz bei SAP zeichnet sich durch zwei Besonderheiten aus. Zum einen trennt er die Beschreibung einer Aufgabe, die ein Anwender in der Software ausführt, und ihre Abbildung auf der Benutzeroberfläche. Diese Trennung hat den Vorteil, dass die Grundrisse und Bausteine entsprechend dem herrschenden Design-Paradigma und den Besonderheiten des Endgeräts – großer Monitor am PC oder kleiner Monitor am PDA – gestaltet werden können. Zum anderen funktioniert der Ansatz nur, wenn für allgemein gültige, so genannte "generische" Aufgaben generische User-Interface-Lösungen gefunden werden – ein Baustein soll ja für viele Anwendungen verwendet werden. Sowohl die Aufgaben als auch die Elemente der Benutzeroberfläche lassen sich geschachtelt in einer "Dekompositionshierarchie" abbilden, das heißt, einfachere Elemente lassen sich zu komplexeren zusammenstellen.

Eine solche generische Aufgabe ist beispielsweise die "Suche nach einem Arbeitsobjekt". Hierbei spielt es keine Rolle, ob es sich um eine Bestellung, Lieferung, einen Rechnungsbeleg oder um Material handelt. Die allgemeine Annahme lautet: Wenn generische Aufgaben für eine bestimmte Zahl von Geschäftsprozessen gleichartige Eigenschaften aufweisen, lässt sich auf der Benutzeroberfläche eine einheitliche Lösung finden. So stellt eine "Drucktaste" (Button) eine "klassische" Lösung für das generische Problem "Funktion auslösen" dar.

Beim Ansatz von SAP geht es darum, die Ebene dieser elementaren Aktionen und Lösungen, beispielsweise die Eingabe von Text oder der Klick auf einen Knopf, zu verlassen und komplexere Aufgaben zu identifizieren. Dazu werden die elementaren Bausteine, die "User-Interface-Controls", etwa die Drucktaste, zu höherwertigen Bausteinen, den "Pattern-Elementen", zusammengesetzt. Solch ein Pattern-Element ist beispielsweise eine Werkzeugleiste, die verschiedene Controls zur Funktionsauslösung zusammenfasst. Pattern-Elemente lassen sich wiederum zu noch komplexeren Bausteinen, den User-Interface-Patterns, kombinieren. Ein User-Interface-Pattern bedient eine oder mehrere generische Aufgaben, etwa die Suche nach einem Geschäftsobjekt und dessen Auswahl. Ein solches Pattern könnte etwa aus einem Suchbereich, verschiedenen Funktionstasten in einer Werkzeugleiste und einem Sammelbereich für die Trefferliste bestehen.

 

Standardisierte Grundrisse für Applikationen

Bei der Applikationsentwicklung werden User-Interface-Patterns zu Applikations-Grundrissen kombiniert und dabei auf dem Bildschirm angeordnet. Für gleiche Anwendungstypen ("Business-Aktivitäten"), etwa das Bearbeiten eines Kundenauftrags, lassen sich Applikations-Grundrisse standardisieren. Ein Teil der Lösung "People Centric" mySAP Customer Relationship Management (mySAP CRM), die den Auftakt zur Umsetzung von User-Interface-Patterns bei SAP markiert, besteht aus nur zwei Grundrissen und verwendet lediglich zwei unterschiedliche User-Interface-Patterns. Dadurch ist die Lösung sehr konsistent. Mit wenigen Grundrissen auszukommen ist in diesem Anwendungsgebiet allerdings nur möglich, weil die Applikationen ähnlich strukturiert sind. Natürlich lassen sich weitere Grundrisse und User-Interface-Patterns verwenden, wenn die Applikation dadurch besser den Anforderungen der Anwender entspricht.

SAP orientiert sich bei der Entwicklung von Benutzeroberflächen an der "Contextual Design"-Methode von Karen Holtzblatt, die von der Arbeitspraxis der Anwender ausgeht. Mit dieser Methode erstellen Entwickler und UI-Designer das Modell einer Interaktionsstruktur ("User Environment"-Modell) – also die Struktur eines Geschäftsprozesses aus Sicht des Benutzers. Die Interaktionsstruktur besteht aus abgeschlossenen Bereichen, den so genannten Fokusbereichen (Focus Areas), die jeweils eine Benutzeraktivität beschreiben, beispielsweise die Eingabe von Rechnungspositionen. Ein Fokusbereich wird bestimmt durch seinen Zweck für den Anwender, durch andere Bereiche, zu denen er navigieren kann, und durch die Funktionen, die ihm zur Verfügung stehen. Nach Holtzblatt soll die Benutzeroberfläche einen Fokusbereich auf dem Bildschirm als zusammenhängend darstellen, so dass sich der Anwender darauf konzentrieren und seine Aktivität dort vollständig ausführen kann.

Normalerweise werden Fokusbereiche für einen bestimmten Geschäftsprozess hergeleitet und sind nur für diesen gültig. Für den Ansatz von SAP allerdings ist es entscheidend, gleichartige Fokusbereiche von verschiedenen Geschäftsprozessen zu ermitteln. Nur dann lassen sich wieder verwendbare UI-Komponenten bauen, die für den jeweiligen Anwendungsfall konfiguriert werden können. Auf diese Weise erhalten unterschiedliche, aber gleich strukturierte Applikationen eine konsistent aufgebaute Benutzeroberfläche.

Der Ansatz, Benutzeroberflächen mit User-Interface-Patterns zu konfigurieren, funktioniert nur dann, wenn die Zahl der "generischen" Aufgaben einerseits gering bleibt, mit ihnen andererseits aber viele, auch sehr unterschiedliche Business-Aktivitäten beschrieben werden können. In den nachfolgenden Abschnitten wird beispielhaft gezeigt, wie generische Aufgaben aussehen können und wie daraus wieder verwendbare Bausteine bestimmt werden.

 

Design-Methode

Arbeitsobjekt suchen und auswählen

Abbildung 2: Arbeitsobjekt suchen und auswählen

Bevor der Anwender eine Aktivität ausführen, also etwa eine Rechnung bearbeiten kann, muss er den entsprechenden Geschäftsprozess auswählen. Anschließend kann er ein Arbeitsobjekt suchen oder direkt bestimmen. Die Auswahl des Arbeitsobjekts lässt sich auf der Benutzeroberfläche beispielsweise mit Hilfe von verschiedenen Dropdown-Boxen und einer Drucktaste realisieren. Die Dropdown-Box "Show" erlaubt es zum Beispiel, eine vordefinierte Suchabfrage auszuwählen, die Dropdown-Box "Get" ermöglicht alternativ die Auswahl eines Schlüsselfeldes und die Eingabe eines Wertes im zugehörigen Eingabefeld. Hinter der Drucktaste "Advanced" verbirgt sich ein Fenster, in dem eine erweiterte Suchanfrage ausgelöst werden kann.

Mögliche Arbeitsobjekte in einer Ergebnisliste

Abbildung 3: Mögliche Arbeitsobjekte in einer Ergebnisliste

Orientieren, identifizieren, bearbeiten

Die möglichen Arbeitsobjekte, die bei der Suchanfrage ermittelt wurden, lassen sich in einem Bereich der Benutzeroberfläche sammeln. Der Anwender kann dann entscheiden, wie er weiter verfährt, ob er also eines oder mehrere Objekte auswählt. Zur Orientierung benötigt er Informationen über das aktuelle Arbeitsobjekt, beispielsweise den Status und die Möglichkeiten der Navigation. Die Benutzeroberfläche muss es dem Anwender erlauben, das zu bearbeitende Objekt eindeutig zu identifizieren. Dafür müssen ihm die wichtigsten Daten in einem Formular, einer Tabelle, einem Baum oder grafisch zur Verfügung gestellt werden.

Beispiel-Objektstruktur für eine Rechnung

Abbildung 4: Beispiel-Objektstruktur für eine Rechnung

Leicht nachvollziehbare Strukturen

Als Maßeinheit für die Definition einer Applikation wählte SAP eine Aktivität wie "Rechnung erfassen". Man geht davon aus, dass jede "Business"-Aktivität aus einer leicht beschreibbaren Basisstruktur besteht, die ein Anwender in ähnlicher Weise nachvollzieht. Diese Struktur setzt sich aus Begriffen (Objekten) unterschiedlicher Abstraktion zusammen. Jedes Objekt kann vom Typ "kategorial" oder "aufzählend" sein. Ein Rechnungskopf zum Beispiel besteht aus verschiedenen Informationen, die sich formularähnlich abbilden lassen (kategorial), die Rechnungspositionen dagegen sind aufzählend und können gut in einer Tabelle dargestellt werden.

Beim Reengineering zahlreicher Business-Aktivitäten stellte SAP fest, dass die spezifische Objektstruktur häufig Teil einer allgemeinen Objektstruktur ist.

Grundriss für generische Aufgaben vom Typ "Bearbeiten von Objekten"

Abbildung 5: Grundriss für generische Aufgaben vom Typ "Bearbeiten von Objekten"

Die Fokusbereiche eines Geschäftsprozesses lassen sich zu einem Grundriss (Floor Plan) zusammenstellen. Jeder "Raum" des Grundrisses bestimmt einen Platz auf dem User-Interface, etwa oben horizontal, links senkrecht oder rechts unten. Jedes Stockwerk dieses Grundrisses wiederum beschreibt einen Bildwechsel. Für jeden Fokusbereich, der eine spezifische Aufgabe beschreibt, lässt sich folglich eine zugrunde liegende generische Aufgabe identifizieren. So definierte SAP beispielsweise für die Lösung "User Centric" mySAP CRM einen Applikations-Grundriss, der für die Aufgabe "Objekte bearbeiten" geeignet ist. Für andere Aufgaben sind andere Grundrisse notwendig.

 

Generische Aufgaben auf das User-Interface abbilden

Der Grundriss der generischen Aufgaben lässt sich dann auf den Grundriss ausprogrammierter User-Interface-Patterns abbilden. Dabei gilt:

  1. Eine oder mehrere generische Aufgaben werden auf ein User-Interface-Pattern abgebildet.
  2. Diese Komponente wird auf dem Bildschirm entsprechend eines vordefinierten Grundrisses angeordnet.
  3. Die Komponente enthält alle Funktionen, Daten und Links, die ein Anwender für die entsprechende Aufgabe benötigt.

Mit User-Interface-Patterns konfigurieren Entwickler die Oberflächen, anstatt sie zu programmieren. Der Entwickler entscheidet nur noch, welche Funktionen und welche Felder für jedes Pattern auf der Benutzeroberfläche erscheinen sollen. Dabei wählt er aus Vorschlagslisten aus, die ihm das Entwicklungswerkzeug liefert. Das eigentliche Erscheinungsbild auf der Benutzeroberfläche wird generiert. So lässt sich beispielsweise eine Formularsicht für kategoriale Daten durch Layout-Algorithmen erzeugen, die die entsprechenden Bildschirmelemente, beispielsweise Felder, Auswahlknöpfe (Radio Buttons) oder Ankreuzfelder (Check Boxes) gruppiert und zweidimensional anordnet.

Abbildung generischer Aufgaben auf UI-Patterns

Abbildung 6: Abbildung generischer Aufgaben auf UI-Patterns

 

Positive Bilanz

Nach dem ersten Projekt mit User-Interface-Patterns zieht SAP eine positive Bilanz. Folgende Ergebnisse lassen sich festhalten:

Vordefinierte User-Interface-Komponenten bieten einen dreifachen Vorteil. Erstens können damit hochkonsistente Benutzeroberflächen einfach erstellt werden. Zweitens lassen sich einzelne Komponenten auch im Nachhinein ergonomisch optimieren, und drittens entsteht ein hoher Produktivitätsgewinn bei der Entwicklung, da die Oberflächen nur konfiguriert werden müssen. Herausforderungen ergeben sich zum einen durch die Verschiedenartigkeit der Business-Aktivitäten, die einen Kompromiss zwischen Aufgabenangemessenheit und Konsistenz erfordern. Zudem können Entwicklungsanfragen zur Erweiterung der Funktionalität im Laufe der Zeit die klare Struktur eines User-Interface-Patterns verkomplizieren. Mit der Erfahrung wird sich zeigen, welche Grundrisse für welche Anwendungstypen am geeignetsten sind.

 

Referenzen

 

top top