User Interface Design Patterns

2.749 Aufrufe

Veröffentlicht am

Rainer Gibbert, User Experience Roundtable 2005, http://www.uxhh.de/roundtable/archiv/index.html#Mar05

Veröffentlicht in: Design, Technologie, Unterhaltung & Humor
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.749
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
17
Aktionen
Geteilt
0
Downloads
44
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

User Interface Design Patterns

  1. 1. User Interface Design Patterns quot;…to capture every bit of good designquot;
  2. 2. Inhalt Inhalt § Design Patterns und Design Pattern-Sprachen § Beispiel: Diplomarbeit § Design Patterns – ein Anwendungs-Szenario § Ausblick UI Design Patterns - 03.2005 Rainer Gibbert Seite 2
  3. 3. Design Patterns und Design Pattern-Sprachen
  4. 4. Design Patterns und Design Pattern-Sprachen Ursprung (1) § Design Patterns in der Architektur • Vom Architekten Christopher name+rating context Alexander ab 1977 entwickelt. • Pattern: eine erfolgreiche Lösung für ein wiederkehrendes Problem im Städtedesign. picture • Pattern-Sprache: setzt einzelne Patterns in Beziehung. examples problem (forces) § Ziele: • Verbesserung der Lebensbedingungen. • Speicherung von Design- diagram Philosophien. • Einbeziehung der Anwender solution (der Bewohner) in den Design- Prozess. references UI Design Patterns - 03.2005 Rainer Gibbert Seite 4
  5. 5. Design Patterns und Design Pattern-Sprachen Ursprung (2) § 1995 in der Softwaretechnik aufgegriffen • Erfolgreiches Format zur Speicherung von Lösungen im Software Engineering. • Aber einiges fehlt: - Der Interdisziplinäre Aspekt. - Die Verknüpfung der Patterns zu einer Sprache. § Patterns im Interaktionsdesign • CHI’97 - erster Workshop quot;Interaction Design Patternsquot; • “An HCI Design Pattern captures the essence of the solution to a recurring usability problem in interactive systems.“ § Wofür werden Design Patterns im Bereich HCI überhaupt benötigt? • HCI braucht Kommunikation • Archivierung von Erfahrungen UI Design Patterns - 03.2005 Rainer Gibbert Seite 5
  6. 6. Design Patterns und Design Pattern-Sprachen Ansatz § Design Patterns • Beschreiben wiederkehrende Design-Probleme. - Inklusive quot;konkurrierenden Kräftequot;. • Zeigen die dazugehörige Lösungen. - Wenn möglich mit Belegen für die Gültigkeit der Lösungen (wissenschaftlich; durch Evaluation). • Geben Beispiele für konkrete Umsetzungen. • Besitzen einen konsistenten Aufbau (Name, Illustration, Kontext, Problemstellung, Beispiele, Lösung mit Diagram, Referenzen) § Design Pattern-Sprache • Eine strukturierte Sammlung von Design Patterns. • Besitzt eine hierarchische Struktur von allgemeinen, abstrakten Problemen bis zu konkreten, spezifischen Designfragen. • Dienen zum schnellen und einfachen Lösen von Design-Aufgaben - Durch rekursive Verfeinerung des Konzepts mittels Durchlaufen der Hierarchie UI Design Patterns - 03.2005 Rainer Gibbert Seite 6
  7. 7. Design Patterns und Design Pattern-Sprachen Zweck Sammlung und Speicherung NAVIGATION SYSTEM von Design-Problemen und IN-CAR-NAVIGATION SLOW-TRAVELER- NAVIGATION dazugehörigen Lösungen. INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS Entwicklung eines umfassenden TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY User Interface Wissens-Katalog. Interdisziplinäre Kommunikation innerhalb Design-Teams, mit Kunden und mit den Anwendern des Produktes. UI Design Patterns - 03.2005 Rainer Gibbert Seite 7
  8. 8. Beispiel: Diplomarbeit UI Design Patterns für Navigationssysteme auf mobilen Geräten
  9. 9. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 9
  10. 10. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 10
  11. 11. Beispiel: Diplomarbeit Beispiel-Pattern (abstrakt): NAVIGATION SYSTEM (1) Problem: § Wie können Personen von einem Ort zu einem anderen geführt werden? • Menschen sind immer unterwegs. • Sie benutzen unterschiedliche Fortbewegungsmittel. • Sie wissen aber selten, wohin genau sie müssen und wie sie dort hin gelangen. Lösung: § Mittels eines Navigationssystems können Personen geführt werden. § Hiermit können diese einfach: • Routen planen. • Sich Karten anschauen. • Entlang Routen geführt werden. UI Design Patterns - 03.2005 Rainer Gibbert Seite 11
  12. 12. Beispiel: Diplomarbeit Beispiel-Pattern (abstrakt): NAVIGATION SYSTEM (2) Beispiele: Referenzen auf Unterpatterns: § PLANNING A ROUTE § INTERACTIVE MAPS § ROUTE GUIDANCE § IN-CAR-NAVIGATION § SLOW-TRAVELLER-NAVIGATION UI Design Patterns - 03.2005 Rainer Gibbert Seite 12
  13. 13. Beispiel: Diplomarbeit Beispiel-Pattern (abstrakt): NAVIGATION SYSTEM (3) UI Design Patterns - 03.2005 Rainer Gibbert Seite 13
  14. 14. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 14
  15. 15. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 15
  16. 16. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 16
  17. 17. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 17
  18. 18. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 18
  19. 19. Beispiel: Diplomarbeit Sprachhierarchie NAVIGATION SYSTEM SLOW-TRAVELER- IN-CAR-NAVIGATION NAVIGATION INDOOR-NAVIGATION OUTDOOR-NAVIGATION PLANNING A ROUTE INTERACTIVE MAPS ROUTE GUIDANCE DYNAMIC TURN-BY-TURN ADAPTIVE INTERACTIVE ROUTE FAVORITS CREATING NEW ROUTES ROUTE AS A WHOLE RECALCULATION / NIGHT VIEW ZOOMING SCALE BAR WHERE AM I? OVERVIEW PANNING GUIDANCE LEGEND BACK ON TRACK DISCRETE MOVEMENTS DISCRETE MOVEMENTS CONTINUOUS PANNING CONTINUOS PANNING PSEUDO-REALISTIC SPEED-DEPENDENT HELICOPTER NAVIGABLE ROUTE TYPES LEVEL OF DETAIL EVASION INSTRUCTIONS LIST 2D ROUTE MAPS ROUTE SKETCHES VOICE GUIDANCE DISCRETE VIEWS ZOOM SLIDER ZOOMING FOCUS USING USING USING USING INSTRUCTIONS AUTO-ZOOM FUNCTION OVERVIEW WINDOW DOUBLE CLICKING BUTTONS SCROLL BARS DRAG'N'DROP DEPARTURE AND DIRECTIONAL INTERSTATIONS MAP ORIENTATION DISTANCE INDICATION LANDMARKS MAGNETIC POSITIONS DESTINATION PICTOGRAMS TEXT ENTRY LIST SELECTION ADDRESS BOOK FAVORITE ADDRESSES MAP SELECTION POINTS OF INTEREST DISTANCE BAR FUZZY TEXT ENTRY UI Design Patterns - 03.2005 Rainer Gibbert Seite 19
  20. 20. Beispiel: Diplomarbeit Beispiel-Pattern (konkret): HELICOPTER FUNCTION (1) Kontext: § OVERVIEW Problem: § Wie kann eine Funktion, die einen direkten und informativen Überblick über eine Karte bieten soll, gestalten werden? Lösung: § Eine Helikopter-Funktion, welche auf Knopfdruck kurzzeitig aus der Karte herauszoomt und anschließend auto- matisch wieder hereinzoomt gibt einen schnellen und informativen Überblick. UI Design Patterns - 03.2005 Rainer Gibbert Seite 20
  21. 21. Beispiel: Diplomarbeit Beispiel-Pattern (konkret): HELICOPTER FUNCTION (2) Beispiele: Falk City Guide Map24.de Referenzen auf Unterpatterns: § keine UI Design Patterns - 03.2005 Rainer Gibbert Seite 21
  22. 22. Beispiel: Diplomarbeit Beispiel-Pattern (konkret): HELICOPTER FUNCTION (3) UI Design Patterns - 03.2005 Rainer Gibbert Seite 22
  23. 23. Design Patterns – ein Anwendungs-Szenario
  24. 24. Anwendungs-Szenario User Experience Tests (1) § Häufig werden ähnliche Anwendungen getestet. • Webseiten (z.B. Online Shops, Musik-Downloads, Homepages,…) • Mobile Anwendungen (WAP-Portale, Kommunikations-Systeme,…) • Desktop-Applikationen, etc. UI Design Patterns - 03.2005 Rainer Gibbert Seite 24
  25. 25. Anwendungs-Szenario User Experience Tests (2) § Diese Anwendungen beinhalten häufig ähnliche Prozesse. • Registrierungsprozesse • Kaufprozesse • Suchprozesse • Anmeldeprozesse, etc. UI Design Patterns - 03.2005 Rainer Gibbert Seite 25
  26. 26. Anwendungs-Szenario User Experience Tests (3) § Während der Tests treten häufig ähnliche Probleme auf, für die Lösungsansätze gefunden werden müssen. • Fehler bei der Eingabe von Formularen werden nicht/schlecht/falsch dargestellt. • Suchergebnisse sind schlecht strukturiert und dargestellt. • Der Status ist nicht oder schlecht erkennbar. • Etc. UI Design Patterns - 03.2005 Rainer Gibbert Seite 26
  27. 27. Anwendungs-Szenario Das Problem Lösungsansätze sollten möglichst einheitlich, umfassend und wenn möglich quot;die Optimallösungquot; sein. § In der Realität wird dies jedoch nur teilweise gewährleistet. • Empfehlungen werden unterschiedlich ausführlich gegeben. • Es werden z.T. sogar gegensätzliche Empfehlungen gegeben. • Es wird nicht die beste Lösung beschrieben. UI Design Patterns - 03.2005 Rainer Gibbert Seite 27
  28. 28. Anwendungs-Szenario Mögliche Ursachen für Abweichungen § Es arbeiten verschiedene Mitarbeiter an verschiedenen Projekten, die eventuell abweichende Vorstellungen oder Linke Seite Hintergründe haben. ist besser! § Es gibt verschiedene Faktoren und Nein, rechts!!! Hintergründe (die quot;konkurrierenden Kräftequot;). • Diese sind immer gleich erkennbar. • Diese sind teilweise nicht beeinflussbar. Physikalische Faktoren § Es gibt nicht quot;die Lösungquot;. Ökonomische Psychologische • Statt dessen existieren verschiedene Faktoren Faktoren Optimal- Möglichkeiten, die jeweils ihre Vor- und Lösung Nachteile mit sich bringt. • Die für die jeweiligen Umstände Soziale passendste Lösung muss gewählt werden. Faktoren UI Design Patterns - 03.2005 Rainer Gibbert Seite 28
  29. 29. Anwendungs-Szenario Eine mögliche Lösung: Design Patterns § Design Patterns könnten hier einen möglichen Lösungsansatz bieten. • Sie beinhalten eine einheitliche Problemlösung. - Diese ist abstrakt und Design-unabhängig gehalten. • Sie beschreiben alle möglichen Einflussfaktoren, was diese bedingen und wie die beste Lösung für diese Einflussfaktoren gefunden werden kann. • Sie geben Best-Practice Beispiele. - Es gibt auch sog. quot;Anti-Patternsquot;, die zeigen, wie man es nicht machen sollte. • Durch Referenzen auf thematisch verwandte Patterns können Problemlösungen umfassend für ganze Prozesse und sogar komplette Applikationen gegeben werden. UI Design Patterns - 03.2005 Rainer Gibbert Seite 29
  30. 30. Anwendungs-Szenario Beispiel: verständliche Fehlermeldungen (1) § Ein typisches Problem von Webseiten: Fehlermeldungen werden unzulänglich dargestellt. § Hierzu existieren bereits verschiedene Patterns. • Meaningful Error Messages (The Design of Sites) • Input Error Message (www.Welie.com) UI Design Patterns - 03.2005 Rainer Gibbert Seite 30
  31. 31. Anwendungs-Szenario Beispiel: verständliche Fehlermeldungen (2) Kontext: § Fehler treten beim Ausfüllen von Eingabeformularen auf. Problem: § Bei der Eingabe von Nutzerdaten kommt es vor, dass Anwender keine oder falsche Angaben machen. • Hierauf muss der Anwender aufmerksam gemacht werden. • Ihm muss gezeigt werden, wo der Fehler liegt, was das Problem ist und wie es behoben werden kann. • Der Anwender sollte nicht das Gefühl bekommen, dass der Fehler an ihm liegt. • Humor kann in Fehlermeldungen ebenfalls negative Auswirkungen haben. UI Design Patterns - 03.2005 Rainer Gibbert Seite 31
  32. 32. Anwendungs-Szenario Beispiel: verständliche Fehlermeldungen (3) Lösung: § Es sollten verständliche Fehlermeldungen in einer geläufigen Sprache gegeben werden. • Die Schweregrad des Problems sollte genannt werden. • Es sollten Lösungsschritte zur Behebung des Problems geboten werden. • Die Fehlermeldung sollte nahe der Problemstelle dargestellt werden. • Die Meldung sollte sich klar vom Design der übrigen Seite abheben. • Der Fehler sollte nicht auf den Anwender geschoben werden. • Es sollte Humor in Fehlermeldungen vermieden werden. Referenzen auf andere Patterns: § Zunächst sollte beim Erstellen von Formularen versucht werden, Fehlern vorzubeugen. § Verständliche Fehlermeldungen sollten immer geläufige Sprache verwenden. UI Design Patterns - 03.2005 Rainer Gibbert Seite 32
  33. 33. Anwendungs-Szenario Beispiel: Pattern Sprache (Auszug aus quot;The Design of Sitesquot;) Personal E-Commerce Clean Product Multiple Ways Homepage Portal Details to Navigate Shopping Cart Printable Page Quick-Flow Checkout Quick Adress Quick Shipping Payment Method Order Summary Selection Method Selection Multiple Order Confirmation Destinations Privacy Policy and Thank-You Meaningful Preventing Errors Error Messages UI Design Patterns - 03.2005 Rainer Gibbert Seite 33
  34. 34. Ausblick
  35. 35. Ausblick Was gibt es schon? § van Duyne, Landay und Hong: „The Design of Sites“ • 90 Website Design Patterns, unterteilt in 12 Untergruppen wie Navigation, Seiten-Layout oder E- Commerce § Jenifer Tidwell: „Common Ground“ • http://time-tripper.com/uipatterns • ca. 60 Interface Design Patterns § Martijn van Welie: „Patterns in Interaction Design “ • http://www.welie.com • Patterns zu Web-Design, GUI-Design und Mobile UI § Jan Borchers: „A Pattern Approach to Interaction Design“ • http://www.hcipatterns.org • HCI Patterns, Musical Patterns, Software Patterns UI Design Patterns - 03.2005 Rainer Gibbert Seite 35
  36. 36. Ausblick Was kann man tun? § Auf vorhandene Design Patterns zurückgreifen. • Bei wiederkehrenden Problemen. • Wenn nicht genau klar ist, wie ein quot;perfekterquot; Lösungs- vorschlag aussehen könnte und was alles zu beachten ist. § Selber gute und immer wiederkehrende Design-Lösungen festhalten. • Was war das Problem? - Welche wichtigen Teilaspekte sind dabei zu beachten? • Welche Lösungsmöglichkeiten gibt es? Beispiele? • Was ist die beste Lösungsmöglichkeit? - Gibt es hierzu Belege für die Gültigkeit (z.B. Daten aus Tests)? • Wo innerhalb des Prozesses (der Pattern-Sprache) ist das Problem anzusiedeln (-> Referenzen)? • Ein mögliches Tool hierfür: Wikis? UI Design Patterns - 03.2005 Rainer Gibbert Seite 36
  37. 37. Vielen Dank für Ihre Aufmerksamkeit! SirValUse Consulting GmbH Schlossstraße 8g 22041 Hamburg Fon: +49 40 68 28 27 - 0 Fax: +49 40 68 28 27 - 20 www.sirvaluse.de info@sirvaluse.de UI Design Patterns - 03.2005 Rainer Gibbert Seite 37

×