EinführungUser Experience Design für interaktive Systeme2. SitzungMarcus Haberkorn | Fachhochschule Trier| 2012Seminar | U...
Jesse James Garrett:The Elements of User Experience                                  2
Jesse James GarrettDie Elemente der User Experience"Standardwerk" für UX (2002)umfassende Systematisierungursprünglich für...
Jesse James Garrett: Elements of UX                         Oberfläche bringt alles visuell zusammen:                     ...
Jesse James Garrett: Web als Hypertextsystem                         Die folgenden Folien beziehen sich auf               ...
Jesse James Garrett: Web als Hypertextsystem                         Benutzer-Bedürfnisse:                         Von Auß...
Jesse James Garrett: Web als Hypertextsystem                         Inhaltliche Anforderungen:                         De...
Jesse James Garrett: Web als Hypertextsystem                         Informations-Architektur:                         Str...
Jesse James Garrett: Web als Hypertextsystem                         Navigations-Gestaltung: Gestaltung                   ...
Jesse James Garrett: Web als Hypertextsystem                         Visuelle Gestaltung:                         Grafisch...
Jesse James Garrett: Web als SoftwareschnittstelleDie Perspektive auf Systeme alsSoftware-Schnittstelle(aufgabenorientiert...
Jesse James Garrett: Web als SoftwareschnittstelleVisuelle Gestaltung:Grafische Bearbeitung derSchnittstellenelemente     ...
Jesse James Garrett: Web als SoftwareschnittstelleInterface/Schnittstellen-gestaltung:Gestaltung der Schnittstellen-Elemen...
Jesse James Garrett: Web als SoftwareschnittstelleInteraktionsdesign:Gestaltung der Anwendungsflüsse zurerleichterten Wahr...
Jesse James Garrett: Web als SoftwareschnittstelleSpezifizierung der Funktionen:‚Feature-Set‘ als detaillierte Beschreibun...
Jesse James Garrett: Web als SoftwareschnittstelleBenutzer-Bedürfnisse:Von Außen abgeleitete Site-Zielsetzungen, welche du...
Weiterbearbeitung der AufgabeVorarbeit:Ihr habt jeweils drei ähnliche Systeme verglichen, die nach eurerEinschätzung unter...
Weiterbearbeitung der AufgabeSzenario:       Du leitest ein Designteam.1.     Auf welchen der von dir analysierten Dienste...
Euer TeamMichael, Visual   Sue, Interface-                   David, Content-                      Patrice, InteractionDesi...
Concept Models / Concept Map                               21
Wozu?        Inhaltliche Anforderungen:        Definition der notwendigen        Inhaltselemente der Site zur        Befri...
Concept MapsIn der Analysephase werden kulturelle,kontextuelle und benutzerbezogeneInformationen gesammelt.Diese können zu...
Concept MapsKonkrete Funktion:- Überlegungen spezifizieren- Zusammenhänge reflektieren- Priorisieren / CM: nur Wichtigstes...
Concept Maps               25
Concept Maps               26
Concept Maps               Quelle   27
Concept Maps: Flickr (von Bryce Glass)                                         28
Concept Maps - Vorgehensweise1. Reduktion2. Strukturierung & Visualisierung3. Elaboration                                 ...
Concept Models                 30
Concept Models                 31
32
ÜbungLegt eine Concept Map für Pacman auf dem Whiteboard an!                                                   Quelle   33
34
35
Concept Models übenLegt ein Concept Model eines euch bekannten Dienstes an undstellt es kurz vor.Ca. 20 Minuten.          ...
Marcus HaberkornAkademischer Rat, M.A.Lehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design ...
UX Design - 2. Sitzung
Nächste SlideShare
Wird geladen in …5
×

UX Design - 2. Sitzung

1.216 Aufrufe

Veröffentlicht am

Folien zur 2. Sitzung der Veranstaltung "User Experience Design" im Studiengang Intermedia Design der FH Trier im Wintersemester 2012/13

0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.216
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
214
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

UX Design - 2. Sitzung

  1. 1. EinführungUser Experience Design für interaktive Systeme2. SitzungMarcus Haberkorn | Fachhochschule Trier| 2012Seminar | User Experience Design | Wahlpflichtkurs für Semester 3-5
  2. 2. Jesse James Garrett:The Elements of User Experience 2
  3. 3. Jesse James GarrettDie Elemente der User Experience"Standardwerk" für UX (2002)umfassende Systematisierungursprünglich für WebsystemeHomepage/Blog http://jjg.net 3
  4. 4. Jesse James Garrett: Elements of UX Oberfläche bringt alles visuell zusammen: Wie sieht das fertige Produkt aus? Gerüst konkretisiert die Struktur: Mit welchen Interface-Komponenten können User die Site nutzen? Struktur gibt dem Aufgabenbereich eine Form: Wie verhalten sich die Teile der Seite und passen wie zusammen? Aufgabenbereich überführt Strategie in Anforderungen: Welche Features wird die Site beinhalten? Strategie ist der Anfang: Was will der User von der Site? Was wollen wir? 5
  5. 5. Jesse James Garrett: Web als Hypertextsystem Die folgenden Folien beziehen sich auf das Web als Hypertextsytem (informationsorientiert, rechte Hälfte der Grafik). Nutzt das zu entwickelnde System das Web als Software-Schnittstelle (aufgabenorientiert, linke Hälfte der Grafik), kommen andere Ansätze hinzu. 6
  6. 6. Jesse James Garrett: Web als Hypertextsystem Benutzer-Bedürfnisse: Von Außen abgeleitete Site- Zielsetzungen, welche durch Benutzerforschung erhoben werden (ethno-, techno-, psychografisch etc.) Inhaltsziele: Interne Zielsetzungen der Site, wie etwa geschäftliche, künstlerische o.a. 7
  7. 7. Jesse James Garrett: Web als Hypertextsystem Inhaltliche Anforderungen: Definition der notwendigen Inhaltselemente der Site zur Befriedigung der Benutzerbedürfnisse 8
  8. 8. Jesse James Garrett: Web als Hypertextsystem Informations-Architektur: Strukturierte Gestaltung des Informationsraumes zur 9
  9. 9. Jesse James Garrett: Web als Hypertextsystem Navigations-Gestaltung: Gestaltung der Schnittstellen-Elemente zur Erleichterung der Navigation durch die Informations-Architektur Informationsgestaltung: Informationsgestaltung zur Erleichterung des Verständnisses 10
  10. 10. Jesse James Garrett: Web als Hypertextsystem Visuelle Gestaltung: Grafische Bearbeitung von Text, grafischen Elementen und Navigationskomponenten 11
  11. 11. Jesse James Garrett: Web als SoftwareschnittstelleDie Perspektive auf Systeme alsSoftware-Schnittstelle(aufgabenorientiert, linke Hälfte derGrafik) fügt weitere Aspekte hinzu. 12
  12. 12. Jesse James Garrett: Web als SoftwareschnittstelleVisuelle Gestaltung:Grafische Bearbeitung derSchnittstellenelemente 13
  13. 13. Jesse James Garrett: Web als SoftwareschnittstelleInterface/Schnittstellen-gestaltung:Gestaltung der Schnittstellen-Elementezur Erleichterung der Handhabung derFunktionen, wie in der klassischen HumanComputer Interaction (HCI)Informationsgestaltung:Informationsgestaltung zur Erleichterungdes Verständnisses 14
  14. 14. Jesse James Garrett: Web als SoftwareschnittstelleInteraktionsdesign:Gestaltung der Anwendungsflüsse zurerleichterten Wahrnehmung vonBenutzeranforderungen, sowie Definitiondes Umgangs mit den Funktionen 15
  15. 15. Jesse James Garrett: Web als SoftwareschnittstelleSpezifizierung der Funktionen:‚Feature-Set‘ als detaillierte Beschreibungder Funktionalität der Site, um dieBenutzeranforderungen zu befriedigen 16
  16. 16. Jesse James Garrett: Web als SoftwareschnittstelleBenutzer-Bedürfnisse:Von Außen abgeleitete Site-Zielsetzungen, welche durchBenutzerforschung erhoben werden(ethno-, techno-, psychografisch etc.)Inhaltsziele:Interne Zielsetzungen der Site, wie etwaBusiness, künstlerische oder andere 17
  17. 17. Weiterbearbeitung der AufgabeVorarbeit:Ihr habt jeweils drei ähnliche Systeme verglichen, die nach eurerEinschätzung unterschiedlich gute User Experiences liefern und sieim Blog beschrieben. Quelle 18
  18. 18. Weiterbearbeitung der AufgabeSzenario: Du leitest ein Designteam.1. Auf welchen der von dir analysierten Dienste setzt du wen aus deinem Team an? Mit welcher Aufgabe?2. Wen aus dem Team eines von dir analysierten Dienstes versuchst du für dein Team abzuwerben? Quelle 19
  19. 19. Euer TeamMichael, Visual Sue, Interface- David, Content- Patrice, InteractionDesigner designerin manager / -strategist DesignerinCharles, Ingrid, Dave, Chuck,Informations- Konzeptionerin Produktmanager Abwicklungsexpertearchitekt (wenn nichts mehr hilft) Quelle 20 Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!
  20. 20. Concept Models / Concept Map 21
  21. 21. Wozu? Inhaltliche Anforderungen: Definition der notwendigen Inhaltselemente der Site zur Befriedigung der Benutzerbedürfnisse Spezifizierung der Funktionen: ‚Feature-Set‘ als detaillierte Beschreibung der Funktionalität der Site, um die Benutzeranforderungen zu befriedigen 22
  22. 22. Concept MapsIn der Analysephase werden kulturelle,kontextuelle und benutzerbezogeneInformationen gesammelt.Diese können zur Spezifizierung in die Form eines Konzeptmodellsüberführt werden (bietet sich z. B. nach Anwendung der AOF-Methode an). 23
  23. 23. Concept MapsKonkrete Funktion:- Überlegungen spezifizieren- Zusammenhänge reflektieren- Priorisieren / CM: nur Wichtigstes- Visualisieren- Konzept Anderen erläutern 24
  24. 24. Concept Maps 25
  25. 25. Concept Maps 26
  26. 26. Concept Maps Quelle 27
  27. 27. Concept Maps: Flickr (von Bryce Glass) 28
  28. 28. Concept Maps - Vorgehensweise1. Reduktion2. Strukturierung & Visualisierung3. Elaboration 29
  29. 29. Concept Models 30
  30. 30. Concept Models 31
  31. 31. 32
  32. 32. ÜbungLegt eine Concept Map für Pacman auf dem Whiteboard an! Quelle 33
  33. 33. 34
  34. 34. 35
  35. 35. Concept Models übenLegt ein Concept Model eines euch bekannten Dienstes an undstellt es kurz vor.Ca. 20 Minuten. Quelle 36
  36. 36. Marcus HaberkornAkademischer Rat, M.A.Lehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fachbereich GestaltungFachhochschule TrierIrminenfreihof 8Postfach 1826D-54208 TrierTel. +49 651 8103-839Mail: m.haberkorn@fh-trier.de 37

×