Ia 2009

1.057 Aufrufe

Veröffentlicht am

Design and practical use of user interface patterns

Veröffentlicht in: Technologie, Bildung
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.057
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Ia 2009

  1. 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. 2. Ausgangspunkt
  3. 3. Juni 2007 <ul><li>Start des Teams U ser I nterface E ngineering </li></ul><ul><li>Webanwendung “Publication Manager” </li></ul><ul><li>Weitere Anwendungen für komplexe, wissenschaftliche Anwendungen geplant </li></ul><ul><li>Entwicklung in Java Server Faces </li></ul><ul><li>Problem: Automatisch generiertes HTML, CSS, JS </li></ul><ul><li>Entscheidung im Juni 2007 das GUI aus der JSF Entwicklung herauszulösen </li></ul>
  4. 4. Plan Juni 2007 <ul><li>GUI V1 </li></ul><ul><li>Aufbau eines einfachen, seitenorientierten GUIs ohne Patterns </li></ul><ul><li>Testlauf für Einführung von Referenz HTML für JSF Entwicklung </li></ul><ul><li>Schwerpunkt: Funktionalen Anforderungen </li></ul><ul><li>GUI V2 (Unabhängig vom Releaseplan der Anwendung) </li></ul><ul><li>Definition von Patterns </li></ul><ul><li>Umsetzung und Vorbereitung der XHTML Snippets, Style Guide </li></ul><ul><li>Schwerpunkt: Reife und Qualität des Frontends (Accessibility, Usability, Performance, Browserkompatibilität) </li></ul>
  5. 5. Marc Fornes / THEVERYMANY 14 Schermerhorn street, Apt10, Brooklyn, New York 11201, US
  6. 6. Struktur
  7. 7. Pattern orientierte Architektur
  8. 8. Abstrakte Pattern am Beispiel „Item List“ <ul><li>Abgleich mit Anforderungen aus Use Cases </li></ul><ul><li>Wo treten wiederkehrende Elemente auf? </li></ul><ul><li>Recherche bestehender Lösungen (Etablierte Webanwendungen, Innovative Ansätze) </li></ul><ul><li>Abgleich mit Anforderungen der GUI Entwicklung </li></ul>Beispiel: DD-L List Pattern Struktur <ul><li>Organizing Layout and Display </li></ul><ul><li>Navigating Functionality </li></ul><ul><li>D isplay D ata </li></ul><ul><li>Navigating Data </li></ul><ul><li>User Input </li></ul>Systematik
  9. 9. Dekomposition … DD-L List Pattern DD-LH List Header DD-LB List Body Struktur
  10. 10. … und Dokumentation <ul><li>Beschreibung der Verwendung </li></ul><ul><li>Beschreibung aller Bestandteile </li></ul><ul><li>Beschreibung von Varianten </li></ul>Struktur
  11. 11. Definition wiederkehrender GUI Elemente <ul><li>Gemeinsame Basis für Kommunikationsdesign und Interface Development </li></ul><ul><li>Frühe Auseinandersetzung mit funktionalen Aspekten </li></ul><ul><li>Vermeidung von Gestaltungsfragen in der Phase der Konzeption </li></ul><ul><li>Vermeidung von redundanter Diskussion und Entwicklung wiederkehrender Grundelemente (Listen, Paginierung, Formulare, …) </li></ul>Interface Development <ul><li>Feasability </li></ul><ul><li>Nomenklatur und Vorbereitung von Klassen und Strukturelementen (CSS, HTML) </li></ul><ul><li>Vollständigkeit </li></ul><ul><li>Flexibel einsetzbar </li></ul>Kommunikationsdesign <ul><li>Besserer Ansatzpunkt für Gestaltung </li></ul><ul><li>Klare Abstraktionsebene </li></ul><ul><li>Wenig Redundanz im Style Guide </li></ul><ul><li>Brücke zwischen Entwicklung und Gestaltung (gemeinsame Sprache) </li></ul>Stakeholder <ul><li>Frühe Auseinandersetzung mit dem Grundkonzept </li></ul><ul><li>Langsames Heranführen an das Frontend </li></ul><ul><li>Qualität des Feedbacks höher </li></ul><ul><li>Schnelles Teilergebnis </li></ul>Struktur
  12. 12. Gestaltung
  13. 13. Application Layout und Style Guide <ul><li>Das Layout ist statisch und wurde in Hinblick auf Rollen, Position von persistenten Elementen und bestehenden Usability Standards erstellt </li></ul><ul><li>Alle Pattern haben einen definierten Platz im Layout </li></ul><ul><li>Festlegung der Rahmengestaltung (Fonts, Farbwelt, Raster) </li></ul>Gestaltung
  14. 14. Ableitung von Style Guide Definitionen aus abstrakten Patterns DD-L List Pattern Style Guide Definition für Listen Gestaltung
  15. 15. Entwicklung
  16. 16. <ul><li>Erstellung einer Pattern-basierten Architektur </li></ul><ul><li>Definition von Rasterelementen, Bibliotheken und JSPFs </li></ul><ul><li>Anreicherung mit Java Script Komponenten </li></ul><ul><li>Erstellung von Referenz HTML </li></ul><ul><li>Implementierung in Java Server Pages </li></ul>XHTML, CSS, JavaScript (JQuery) Development
  17. 17. Dokumentation + Referenzimplementierung <ul><li>Erstellung von HTML- „Snippets“ </li></ul><ul><li>Dokumentation für JSF Entwicklung </li></ul><ul><li>Erste Tests zu Browserkompatibilität und dynamischen Komponenten </li></ul>Development
  18. 18. Zusammenfassung Struktur: Abstraktes Pattern Gestaltung: Style Guide Definition Entwicklung: Komponenten
  19. 19. It works!
  20. 20. Ergebnis Ende 2008 (5 Patterns implementiert) http://qa-pubman.mpdl.mpg.de:8080/pubman/ http://pubman.mpdl.mpg.de
  21. 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. 22. Because it’s neither the developer’s, nor the organization’s interface. It’s the user’s interface.
  23. 23. Diskussion <ul><li>Prototyping http://colab.mpdl.mpg.de/mediawiki/ESciDoc_Prototyping </li></ul><ul><li>Weitere Anwendungen http://colab.mpdl.mpg.de/mediawiki/ESciDoc_Prototyping </li></ul><ul><li>Usability Evaluation (Thinking Aloud) http://colab.mpdl.mpg.de/mediawiki/User_Interface_Evaluation/Workshops/Interview_Analysis </li></ul><ul><li>Accessibility http://colab.mpdl.mpg.de/mediawiki/GUI_Accessibility </li></ul><ul><li>GUI Constraints http://colab.mpdl.mpg.de/mediawiki/GUI_Constraints </li></ul>

×