Entwicklung von Benutzeroberflächen für eine nachhaltige Informationsarchitektur: Von abstrakten Patterns zu wieder verwendbaren Interface- Komponenten Rupert Kiefl Head of User Interface Engineering Max Planck Digital Library (MPDL), 16. Mai 2009 Design und praktischer Einsatz von User Interface Patterns

Ausgangspunkt

Juni 2007 Start des Teams U ser I nterface E ngineering Webanwendung “Publication Manager” Weitere Anwendungen für komplexe, wissenschaftliche Anwendungen geplant Entwicklung in Java Server Faces Problem: Automatisch generiertes HTML, CSS, JS Entscheidung im Juni 2007 das GUI aus der JSF Entwicklung herauszulösen

Start des Teams U ser I nterface E ngineering

Webanwendung “Publication Manager”

Weitere Anwendungen für komplexe, wissenschaftliche Anwendungen geplant

Entwicklung in Java Server Faces

Problem: Automatisch generiertes HTML, CSS, JS

Entscheidung im Juni 2007 das GUI aus der JSF Entwicklung herauszulösen

Plan Juni 2007 GUI V1 Aufbau eines einfachen, seitenorientierten GUIs ohne Patterns Testlauf für Einführung von Referenz HTML für JSF Entwicklung Schwerpunkt: Funktionalen Anforderungen GUI V2 (Unabhängig vom Releaseplan der Anwendung) Definition von Patterns Umsetzung und Vorbereitung der XHTML Snippets, Style Guide Schwerpunkt: Reife und Qualität des Frontends (Accessibility, Usability, Performance, Browserkompatibilität)

GUI V1

Aufbau eines einfachen, seitenorientierten GUIs ohne Patterns

Testlauf für Einführung von Referenz HTML für JSF Entwicklung

Schwerpunkt: Funktionalen Anforderungen

GUI V2 (Unabhängig vom Releaseplan der Anwendung)

Definition von Patterns

Umsetzung und Vorbereitung der XHTML Snippets, Style Guide

Schwerpunkt: Reife und Qualität des Frontends (Accessibility, Usability, Performance, Browserkompatibilität)

Marc Fornes / THEVERYMANY 14 Schermerhorn street, Apt10, Brooklyn, New York 11201, US

Struktur

Pattern orientierte Architektur

Abstrakte Pattern am Beispiel „Item List“ Abgleich mit Anforderungen aus Use Cases Wo treten wiederkehrende Elemente auf? Recherche bestehender Lösungen (Etablierte Webanwendungen, Innovative Ansätze) Abgleich mit Anforderungen der GUI Entwicklung Beispiel: DD-L List Pattern Struktur Organizing Layout and Display Navigating Functionality D isplay D ata Navigating Data User Input Systematik

Abgleich mit Anforderungen aus Use Cases

Wo treten wiederkehrende Elemente auf?

Recherche bestehender Lösungen (Etablierte Webanwendungen, Innovative Ansätze)

Abgleich mit Anforderungen der GUI Entwicklung

Organizing Layout and Display

Navigating Functionality

D isplay D ata

Navigating Data

User Input

Dekomposition … DD-L List Pattern DD-LH List Header DD-LB List Body Struktur

… und Dokumentation Beschreibung der Verwendung Beschreibung aller Bestandteile Beschreibung von Varianten Struktur

Beschreibung der Verwendung

Beschreibung aller Bestandteile

Beschreibung von Varianten

Definition wiederkehrender GUI Elemente Gemeinsame Basis für Kommunikationsdesign und Interface Development Frühe Auseinandersetzung mit funktionalen Aspekten Vermeidung von Gestaltungsfragen in der Phase der Konzeption Vermeidung von redundanter Diskussion und Entwicklung wiederkehrender Grundelemente (Listen, Paginierung, Formulare, …) Interface Development Feasability Nomenklatur und Vorbereitung von Klassen und Strukturelementen (CSS, HTML) Vollständigkeit Flexibel einsetzbar Kommunikationsdesign Besserer Ansatzpunkt für Gestaltung Klare Abstraktionsebene Wenig Redundanz im Style Guide Brücke zwischen Entwicklung und Gestaltung (gemeinsame Sprache) Stakeholder Frühe Auseinandersetzung mit dem Grundkonzept Langsames Heranführen an das Frontend Qualität des Feedbacks höher Schnelles Teilergebnis Struktur

Gemeinsame Basis für Kommunikationsdesign und Interface Development

Frühe Auseinandersetzung mit funktionalen Aspekten

Vermeidung von Gestaltungsfragen in der Phase der Konzeption

Vermeidung von redundanter Diskussion und Entwicklung wiederkehrender Grundelemente (Listen, Paginierung, Formulare, …)

Feasability

Nomenklatur und Vorbereitung von Klassen und Strukturelementen (CSS, HTML)

Vollständigkeit

Flexibel einsetzbar

Besserer Ansatzpunkt für Gestaltung

Klare Abstraktionsebene

Wenig Redundanz im Style Guide

Brücke zwischen Entwicklung und Gestaltung (gemeinsame Sprache)

Frühe Auseinandersetzung mit dem Grundkonzept

Langsames Heranführen an das Frontend

Qualität des Feedbacks höher

Schnelles Teilergebnis

Gestaltung

Application Layout und Style Guide Das Layout ist statisch und wurde in Hinblick auf Rollen, Position von persistenten Elementen und bestehenden Usability Standards erstellt Alle Pattern haben einen definierten Platz im Layout Festlegung der Rahmengestaltung (Fonts, Farbwelt, Raster) Gestaltung

Das Layout ist statisch und wurde in Hinblick auf Rollen, Position von persistenten Elementen und bestehenden Usability Standards erstellt

Alle Pattern haben einen definierten Platz im Layout

Festlegung der Rahmengestaltung (Fonts, Farbwelt, Raster)

Ableitung von Style Guide Definitionen aus abstrakten Patterns DD-L List Pattern Style Guide Definition für Listen Gestaltung

Entwicklung

Erstellung einer Pattern-basierten Architektur Definition von Rasterelementen, Bibliotheken und JSPFs Anreicherung mit Java Script Komponenten Erstellung von Referenz HTML Implementierung in Java Server Pages XHTML, CSS, JavaScript (JQuery) Development

Erstellung einer Pattern-basierten Architektur

Definition von Rasterelementen, Bibliotheken und JSPFs

Anreicherung mit Java Script Komponenten

Erstellung von Referenz HTML

Implementierung in Java Server Pages

Dokumentation + Referenzimplementierung Erstellung von HTML- „Snippets“ Dokumentation für JSF Entwicklung Erste Tests zu Browserkompatibilität und dynamischen Komponenten Development

Erstellung von HTML- „Snippets“

Dokumentation für JSF Entwicklung

Erste Tests zu Browserkompatibilität und dynamischen Komponenten

Zusammenfassung Struktur: Abstraktes Pattern Gestaltung: Style Guide Definition Entwicklung: Komponenten

It works!

Ergebnis Ende 2008 (5 Patterns implementiert) http://qa-pubman.mpdl.mpg.de:8080/pubman/ http://pubman.mpdl.mpg.de

Ausblick: Erweiterung der Pattern Library … UI-03 Form Wizard ND-02 Bitmap Navigation ND-FS Format Selector UI-08 Timeline OL-D Dialogue OL-DR Details Report U ser I nput N avigating D ata O rganizing L ayout

Because it’s neither the developer’s, nor the organization’s interface. It’s the user’s interface.

Diskussion Prototyping http://colab.mpdl.mpg.de/mediawiki/ESciDoc_Prototyping Weitere Anwendungen http://colab.mpdl.mpg.de/mediawiki/ESciDoc_Prototyping Usability Evaluation (Thinking Aloud) http://colab.mpdl.mpg.de/mediawiki/User_Interface_Evaluation/Workshops/Interview_Analysis Accessibility http://colab.mpdl.mpg.de/mediawiki/GUI_Accessibility GUI Constraints http://colab.mpdl.mpg.de/mediawiki/GUI_Constraints

Prototyping http://colab.mpdl.mpg.de/mediawiki/ESciDoc_Prototyping

Weitere Anwendungen http://colab.mpdl.mpg.de/mediawiki/ESciDoc_Prototyping

Usability Evaluation (Thinking Aloud) http://colab.mpdl.mpg.de/mediawiki/User_Interface_Evaluation/Workshops/Interview_Analysis

Accessibility http://colab.mpdl.mpg.de/mediawiki/GUI_Accessibility

GUI Constraints http://colab.mpdl.mpg.de/mediawiki/GUI_Constraints