Ia 2009

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

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)

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

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

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

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

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

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

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

Ia 2009

by guest306345 on May 26, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 4

Statistics

Ia 2009 — Presentation Transcript