Aufbau einer Interaction Design Pattern Library Am Beispiel einer Library von Interaction Design Patterns für Web Applikationen

Transkript

1 Aufbau einer Interaction Design Pattern Library Am Beispiel einer Library von Interaction Design Patterns für Web Applikationen White Paper Version 2 Christian Hübscher

2 Inhalt Einleitung... 3 Konzept hinter dem Aufbau der Pattern Library... 4 Universal Model of the User Interface... 4 Konzeption einer Benutzeroberfläche aus Patterns... 4 Der Designprozess mittels Patterns... 5 Grober Aufbau der Pattern Library... 6 Detaillierter Aufbau der Pattern Library... 8 Beispiele von Seiten der Pattern Library Bereichsseite «STRUKTUR» Übersicht über die «Seitentypen» Pattern «Übersichtsseite» Literatur Seite 2

3 Einleitung Der Aufbau einer Pattern Library soll am Beispiel der Interaction Design Pattern Library der Zürcher Kantonalbank illustriert werden. Das Konzept wurde ursprünglich von Stefan Pauwels und Christian Hübscher entwickelt (Hübscher et al., 2011) und dann für zwei Systeme bzw. Systemfamilien entsprechend umgesetzt. Die Erarbeitung einer der Libraries für ein internes System wurde auch in einer Case Study dokumentiert (Pauwels et al., 2010). Die hier beschriebene Pattern Library für Kundensysteme wurde hauptsächlich von Andreas Springer und Christian Hübscher aufgebaut. Seite 3

4 Konzept hinter dem Aufbau der Pattern Library Um den Aufbau der Pattern Library besser verstehen zu können, soll hier kurz das zugrundeliegende Konzept erläutert werden. Dieses Konzept wird von Hübscher et al. (2011) detaillierter beschrieben. Universal Model of the User Interface Das Modell, welches hinter dem Aufbau der Pattern Library steht, ist das Universal Model of the User Interface von Baxley (2002, 2003). Dieses Modell basiert auf der Idee, eine Benutzeroberfläche in Schichten zu konzipieren, welche aufeinander aufbauen. So soll in einem Projekt zuerst die Struktur des User Interface, dann das Verhalten und am Schluss die visuelle Darstellung konzipiert und gestaltet werden. Diese drei Hauptebenen sind dann noch in je drei weitere Teilebenen aufgeteilt. Mit diesen total neun Schichten entsteht eine Struktur, die als Basis für die Organisation der Patterns dienen kann. In unseren Pattern Libraries haben wir nicht direkt alle diese neu Schichten übernommen, sondern auf diesem Konzept aufbauend eine dem Inhalt der Libraries angepasste Strukturierung gebildet. Konzeption einer Benutzeroberfläche aus Patterns In der Illustration rechts wird gezeigt, wie auf dieser Logik aufbauend aus einzelnen Patterns verschiedener Ebenen eine Benutzeroberfläche konzipiert werden kann. Patterns der Ebene Struktur zeigen, welche Abläufe über verschiedene Seiten hinweg es gibt. Auf der Ebene Verhalten ist geregelt, wie auf einzelnen Seiten Informationen angeschaut und manipuliert werden können. Die Ebene Darstellung zeigt dann, wie diese Inhalte visuell gestaltet werden können. So enthalten in der Regel Patterns auf «höheren» Ebenen wiederum andere Patterns. Diese Zusammenhänge sind in der Pattern Library über die Verlinkung von Patterns sichtbar. Seite 4

5 Der Designprozess mittels Patterns Wie oben erklärt, soll die Konzeption von einer Benutzeroberfläche nun entlang der Schichten Struktur, Verhalten und Darstellung gemacht werden. Deshalb sind auch die Patterns entsprechend organisiert. Dies ist ein Vorgehen wie es auch in ähnlicher Form von Garrett (2002), Baxley (2003) und anderen Autoren beschrieben wird. Der Bereich Struktur enthält die grundlegendsten Fragen. Er befasst sich damit, welche Typen von Seiten es gibt, wie diese in der Navigation organisiert sind und welche Workflows über Seiten hinweg es gibt. Hier werden die Seiten als Ganzes betrachtet. Wenn klar ist, welche Seiten und Workflows es gibt, wird im Bereich Verhalten beschrieben, was auf diesen Seiten platziert wird an statischen und interaktiven Inhalten. Dieser Bereich ist weiter organisiert in Daten betrachten, Daten bearbeiten und Benutzerunterstützung. Daten betrachten: In erster Linie soll entschieden werden, welche Navigationsmechanismen es braucht, um sich über Seiten hinweg zu bewegen können. Im Bereich der Datencontainer werden verschiedene «Gefässe» für Daten beschrieben (Tabellen, div. Boxen, Diagramme, etc.). Die Strukturelemente (Group Boxen und Trennlinien) helfen, diese Container weiter gruppieren zu können. Im Bereich «Suchen, Filtern, Blättern, Sortieren» werden dann Mechanismen beschrieben, um die Ansicht auf Daten auf Seiten bzw. in Containern zu modifizieren. Daten bearbeiten: In «Formular» ist beschrieben, wie ganze Bereiche der Dateneingabe gestaltet werden sollen und bei «Eingabeelemente» sind dann die einzelnen «Widgets» beschrieben (Checkbox, Eingabefeld, Button, etc.). Benutzerunterstützung: Hier sind die Patterns beschrieben, welche helfen, das Systemverhalten besser verstehen zu können (Meldungen, Fortschrittsanzeige, etc.) sowie jene, die helfen besser Daten eingeben zu können (Eingabehilfen: Autovervollständigung, Kalenderauswahl, etc.). Die Patterns zur Darstellung erklären dann Regeln der visuellen Umsetzung. «Layout» erklärt, wie Inhalte auf einer Seite platziert werden können (mögliche Spaltenraster etc.). «Style» beinhaltet Informationen zu Icons, Farben und Animation. Im Bereich «Text» sind dann Textformatierung und Sprachverwendung geregelt. Seite 5

6 Grober Aufbau der Pattern Library Hier wird der Aufbau der Interaction Design Pattern Library für eine Familie von Web Applikationen beschrieben. Die Pattern Library hat nebst den eigentlichen Patterns auch ein Kapitel zur Designstrategie, wo Grundlagen für das Interaction Design dokumentiert sind. Die User Interface Design Prinzipien (basierend auf Apple Computer, 1995; ISO, 2006; Shneiderman, 1998; Tognazzini, 2014; u.a.) dienen als Grundlage für die Patterns und werden in vielen Fällen auch in den einzelnen Patterns referenziert. Nebst der Pattern Library mit den konzeptionellen Bausteinen für Lösungen gibt es noch einen Online-Styleguide, der die konkrete visuelle Umsetzung zeigt mit entsprechendem CSS dazu. Die Pattern Library enthält zwar grundlegende Regeln zur visuellen Umsetzung (Farben, Iconstil, etc.) aber die konkrete grafische Umsetzung ist aus dem Styleguide ersichtlich. STARTSEITE Über die Online Guidelines DESIGNSTRATEGIE Personas Die Personas zur Systemfamilie: Beschreibung und Priorisierung. User Interface Design Prinzipien 1. Anpassung an Arbeits- und Denkweise der Benutzer 2. Konsistenz 3. Feedback 4. Sichtbare und eindeutige Interaktionsmöglichkeiten 5. Fehlertoleranz 6. Verlässliche Orientierungspunkte 7. Angenehme und professionelle grafische Gestaltung 8. Benutzern Vertrauen vermitteln 9. Benutzern Arbeit abnehmen 10. Abkürzungen für geübte Benutzer Zusammenspiel der Systeme Punkte, die beachtet werden müssen, dass das Zusammenspiel einzelner Systeme gut funktioniert. [Fortsetzung nächste Seite] Seite 6

7 PATTERNS Konzept Patternlibrary (Inhalt des letzten Kapitels, S. 4 ff.) STRUKTUR Seitentypen GUI-Ablauf Informationsarchitektur VERHALTEN Daten betrachten Navigieren Datencontainer Strukturelemente Suchen, Filtern, Blättern, Sortieren Daten bearbeiten Formular Mehrfachauswahl Einfachauswahl Eingabeelemente Funktionssteuerung Benutzerunterstützung DARSTELLUNG Seitenlayout Text Style Seite 7

8 Detaillierter Aufbau der Pattern Library Hier ist die detaillierte Struktur der Pattern Library beschrieben. Die Bereichsseiten (z.b. STRUKTUR) zeigen mit welchen Themen ein Bereich organisiert wird. Die Kapitelseiten (z.b. Seitentypen) zeigen eine Auflistung von verschiedenen Patterns einer Kategorie. Die einzelnen Patterns (z.b. Übersichtsseite) beschreiben dann die einzelne Lösung. Die einzelnen Patterns sind untereinander verlinkt im Sinne von: Von welchem Pattern ist dieses ein Teilpattern? Aus welchen Teilpatterns besteht dieses Pattern? Welches sind alternative Lösungen für das gleiche Problem? Welche Patterns sind sonst irgendwie verwandt? STRUKTUR Seitentypen Übersichtsseite Hauptseite Detailseite Prozessschrittseite Overlay GUI-Ablauf Verlinkung Drilldownverlinkung Querverlinkung Externe Verlinkung Aufgabenstruktur Direktes Editieren Einschrittiges Editieren Mehrschrittiges Editieren Informationsarchitektur [Fortsetzung nächste Seite] Seite 8

9 VERHALTEN Daten betrachten Navigieren Hauptnavigation Tabnavigation Tabüberlauf Servicenavigation Header Footer Favoritennavigation Wechsler Schnellzugriff Hyperlinks Zurück Blättern auf Detailseite Breadcrumbnavigation Datencontainer Vorschauelement Listen Rechtsboxen Geschäftszeile Objektheader Tabellen Standard Table Data Table Special Table Funktionsleiste Totalzeile Table Select (Checkbox) Table Paging Diagramm Datensatz Strukturelemente Groupbox Trennlinie Suchen, Filtern, Blättern, Sortieren Suchen Filtern Filtern nach vorgegebenen Werten Zeitraumfilter Textfilter Spaltensortierung [Fortsetzung nächste Seite] Seite 9

10 Daten bearbeiten Formular Mehrfachauswahl Einfachauswahl Eingabeelemente Radiobutton Checkbox Dropdown Combobox Eingabefeld Textarea Menü Funktionssteuerung Benutzerunterstützung Fortschrittsanzeige Aktivitätsanzeige Rückfrage Meldungen Eingabehilfen Fehlermeldung Fehler global Fehler elementspezifisch Warnmeldung Warnung global Warnung elementspezifisch Bestätigungsmeldung Bestätigung global Bestätigung elementspezifisch Hinweis elementspezifisch Tooltip elementspezifisch Autovervollständigung Kalenderauswahl Schrittweises Aktivieren Validierung Autokorrektur Transitions Erläuterung zu Eingabeelementen [Fortsetzung nächste Seite] Seite 10

11 DARSTELLUNG Seitenlayout Text Schriften Textformatierung Sprachverwendung Meldungstexte Satzzeichen & Grossschreibung Stil Standard-Beschriftungen Barrierefreiheitstexte Style Icons Seitenhintergrund Logos Farben Animation Seite 11

12 Beispiele von Seiten der Pattern Library Dies sind Beispiele von einzelnen Seiten der Pattern Library. Im Header haben alle Seiten eine Hauptnavigation auf die grossen Bereiche, die restliche Navigation erfolgt im Content oder über die Sitemap, welche als «Leftnavigation» zur Verfügung steht. Die Library wurde als Axure File umgesetzt und kann so als HTML Dokument im Browser betrachtet werden. Anmerkung: Die Braunen Flächen auf den Screenshots sind Links auf andere Seiten innerhalb der Pattern Library. Über das Icon rechts unten können diese auch in einem neuen Fenster geöffnet werden. Bereichsseite «STRUKTUR» Hier sieht man welche Bereiche es innerhalb von «Struktur» gibt: Abbildung 1 Bereichsseite STRUKTUR (Zürcher Kantonalbank, 2014) Seite 12

13 Übersicht über die «Seitentypen» Hier werden alle verschiedenen Seitentypen aufgelistet mit einer Beschreibung der möglichen Varianten: Abbildung 2 Übersicht über die Seitentypen (Zürcher Kantonalbank, 2014) Seite 13

14 Pattern «Übersichtsseite» Die einzelnen Patterns sind immer gleich aufgebaut: Titel Grafik mit einer Illustration des Patterns (optional mit Links auf Teilpatterns) Beschreibung von Anwendungsregeln zum Pattern (mit Links auf Teilpatterns, Alternativen, etc.) Beispiele aus den Systemen Liste mit Links zu verwandten Patterns Abbildung 3 Pattern Übersichtsseite (Zürcher Kantonalbank, 2014) Anmerkung: Bei diesem Pattern werden die Zusammenhänge zu anderen Patterns in der grafischen Repräsentation gezeigt. Bei anderen Patterns sind diese dann eher als Textlinks im Text der Anwendungsregeln. Seite 14

15 Literatur Apple Computer, Inc. (1995). Macintosh Human Interface Guidelines. Reading, MA: Addison-Wesley Publishing Company. Baxley, B. (2003). Universal Model of a User Interface. In Proceedings of the 2003 Conference on Designing for User Experiences, pages ACM New York, NY, USA. Baxley, B. (2003). Making the Web Work: Designing Effective Web Applications. Indianapolis, IN: New Riders Publishing. Garrett, J. J. (2002). The Elements of User Experience. Indianapolis, IN: New Riders Publishing. Hübscher, C., Pauwels, S. L., Roth, S. P., Bargas-Avila, J. A., & Opwis, K. (2011). The organization of interaction design pattern languages alongside the design process. Interacting with Computers 23(3), International Organization for Standardization (ISO). (2006). ISO Ergonomics of human-system interaction Part 110: Dialogue principles. Genève: International Organization for Standardization. Pauwels, S. L., Hübscher, C., Bargas-Avila, J. A., & Opwis, K. (2010). Building an interaction design pattern language: A case study. Computers in Human Behavior 26(3), Shneiderman, B. (1998). Designing the User Interface (3rd ed.). Reading, MA: Addison-Wesley Longman, Inc. Tognazzini, B. (2014). First Principles of Interaction Design (Revised & Expanded). Available: Zürcher Kantonalbank (2014). Interaction Design Pattern Library. Bankinternes Dokument*. *Verwendung der Screenshots sowie Beschreibung der Pattern Library mit Genehmigung der Zürcher Kantonalbank. Alle Rechte vorbehalten. Seite 15