Das Dokument beschreibt die Entwicklung einer benutzeroberfläche für eine nachhaltige Informationsarchitektur, insbesondere den Einsatz von abstrakten Patterns und wiederverwendbaren Komponenten zur Verbesserung der Funktionalität und Benutzerfreundlichkeit in einer wissenschaftlichen Webanwendung. Es werden Strategien zur Erarbeitung von Design-Richtlinien, die Definition von wiederkehrenden GUI-Elementen sowie die Bedeutung des Feedbacks von Stakeholdern hervorgehoben. Abschließend werden die erreichten Ergebnisse und zukünftige Pläne zur Erweiterung der Pattern-Bibliothek skizziert.

1. 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

2. Ausgangspunkt

3. 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

4. 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)

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

6. Struktur

7. Pattern orientierte Architektur

8. 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

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

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

11. 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

12. Gestaltung

13. 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

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

15. Entwicklung

16. 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

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

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

19. It works!

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

21. 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

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

23. 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