• Like
  • Save
Ia 2009
Upcoming SlideShare
Loading in...5
×
Uploaded on

Design and practical use of user interface patterns

Design and practical use of user interface patterns

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
800
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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