EinführungUser Experience Design für interaktive Systeme2. SitzungMarcus Haberkorn | Intermedia Design | 2012Seminar | Use...
Jesse James Garrett:The Elements of User Experience
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                      ...
Jesse James Garrett: Web als Hypertextsystem                           Benutzer-Bedürfnisse:                           Von...
Jesse James Garrett: Web als Hypertextsystem                           Inhaltliche Anforderungen:                         ...
Jesse James Garrett: Web als Hypertextsystem                           Informations-Architektur:                          ...
Jesse James Garrett: Web als Hypertextsystem                           Navigations-Gestaltung:                           G...
Jesse James Garrett: Web als Hypertextsystem                           Visuelle Gestaltung:                           Graf...
Jesse James Garrett: SoftwareschnittstelleDie Perspektive auf Systeme alsSoftware-Schnittstelle(aufgabenorientiert, linke ...
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 derAnwendungsflüsse zurerleichterten Wahrn...
Jesse James Garrett: Web als SoftwareschnittstelleSpezifizierung der Funktionen:‚Feature-Set‘ als detaillierteBeschreibung...
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, dienach eurer Einschätzung unter...
Weiterbearbeitung der AufgabeSzenario:      Du leitest ein Designteam.1.    Auf welchen der von dir analysierten Dienste  ...
Euer TeamMichael,         Sue, Interface-                  David, Texter /                     Patrice, InteractionVisuald...
Joshua Porter:Aktivität, Objekte, Funktionen
Hier setzen wir jetzt an:
Featuritis, Feature Creep …
Joshua Porter: Aktivität-Objekte-FunktionenMethode zur Priorisierung vonFeatures für Social ServicesBuchauszug im Semester...
Aktivität, Objekte, Funktionen (Joshua Porter)1. Definiere die Aktivität2. Identifiziere die sozialen Objekte,   die die M...
AOF liefert … Objekt   Funktion   Aktivität
AOF liefert … Objekt   Funktion   Aktivität                                 26
AOF liefert … Objekt   Funktion   Aktivität
Aktivität ermittelnunpräzise:• Was wollen die User von der Site?genauer:• Was tut der ideale Nutzer leidenschaftlich gerne...
Aktivität ist nicht gleich Ziel!Eine Aktivität kann ganz unterschiedlichen Zielen dienen.Beispiel Aktivität EinkaufenZiele...
Beispiele für AktivitätenBenennt die Aktivitäten,die die von euch untersuchten Webdienste unterstützen.                   ...
Aktivität bestimmenKurzversion:Modelliere die Interaktionen, die es schon gibt.Langversion:1. Starte mit der zu unterstütz...
Wie beschreibt man eine Aktivität?Aktivität: Einkaufen als Prozess aus fünf Schritten:A Ein Bedürfnis erkennenB zum Bedürf...
Wie beschreibt man eine Aktivität?                                     33
Wie beschreibt man eine Aktivität?WIRKLICH?                                     34
Wie beschreibt man eine Aktivität?   EHER SO?
Vorsicht vor Simplifizierung oder VerkomplizierungZentrale Designaufgabe ist Komplexitätsreduktion!Schlechtes Vorgehen:Obe...
Vorsicht vor Simplifizierung oder VerkomplizierungZentrale Designaufgabe ist Komplexitätsreduktion!Besseres Vorgehen:detai...
Soziale Objekte                  38
Soziale Objekte… können Menschen, Objekte (virtuell, physisch)  oder Ideen sein.                                          ...
Soziale Objekte… beeinflussen die soziale Interaktion, sie ändern, wie  Menschen miteinander interagieren                 ...
Soziale Objekte… Durch die Interaktion mit / durch soziale Objekte  treffen sich Menschen, die sich möglicherweise sonst  ...
Soziale Objekte… Durch die Interaktion mit / durch soziale Objekte  treffen sich Menschen, die sich möglicherweise sonst  ...
Soziale Objekte… können der Grund sein, warum / wegen dem  Menschen eine soziale Interaktion / Beziehung haben.           ...
AnalyseaufgabeIdentifiziere die sozialen Objekteeines beliebigen Social Web-Servicesoder eines der von euch untersuchten. ...
45
Soziales Objekt: VideoSoziale Objekte: Sharing                            Soziales Objekt:                           Verwa...
Soziales Objekt: KommentareSoziales Objekt: Videoantworten    Soziales Objekt:                                  Verwandte ...
Soziale Funktionen und AktionenDie "Verben zu den Objekten" finden:Aktionen identifizieren, die User mit den Objektendurch...
Soziale Funktionen vs AktionenAktionen sind nicht gleich Funktionen!Z.B. User haben im Web schon lange Aktionen wieweitere...
Soziale Funktionen: AktionenNomen (Objekte)   Verben (Aktionen)       Soziale Verben (soziale                             ...
Beispiel Amazon-Produktseite: 17 soziale Funktionen                                                      51
Screenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der Folie angegeben, nach FoliennummernBILDER3    ...
Marcus HaberkornAkademischer RatLehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fac...
Nächste SlideShare
Wird geladen in …5
×

UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)

2.264 Aufrufe

Veröffentlicht am

Update 3/12: Folien zur 2. Sitzung der Veranstaltung "User Experience Design" im Studiengang Intermedia Design der FH Trier im Sommersemester 2012

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

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

Keine Notizen für die Folie

UX Design - Elemente der UX & die AOF-Methode (2. Sitzung)

  1. 1. EinführungUser Experience Design für interaktive Systeme2. SitzungMarcus Haberkorn | Intermedia Design | 2012Seminar | User Experience Design | für Semester 3-5
  2. 2. Jesse James Garrett:The Elements of User Experience
  3. 3. Jesse James GarrettDie Elemente der User Experience"Standardwerk" für UX (2002)umfassende Systematisierungursprünglich für WebsystemeHomepage/Blog http://jjg.net
  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 an den Umfang: Welche Features wird die Site beinhalten? Strategie ist der Anfang: Was will der User von der Site? Was wollen wir?
  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. 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. Jesse James Garrett: Web als Hypertextsystem Inhaltliche Anforderungen: Definition der notwendigen Inhaltselemente der Site zur Befriedigung der Benutzerbedürfnisse
  8. 8. Jesse James Garrett: Web als Hypertextsystem Informations-Architektur: Strukturierte Gestaltung des Informationsraumes zur Vereinfachung des intuitiven Zugangs der Benutzer zu den Inhalten
  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. Jesse James Garrett: Web als Hypertextsystem Visuelle Gestaltung: Grafische Bearbeitung von Text, grafischen Elementen und Navigationskomponenten
  11. 11. Jesse James Garrett: SoftwareschnittstelleDie Perspektive auf Systeme alsSoftware-Schnittstelle(aufgabenorientiert, linke Hälfteder Grafik) fügt weitere Aspektehinzu.
  12. 12. Jesse James Garrett: Web als SoftwareschnittstelleVisuelle Gestaltung:Grafische Bearbeitung derSchnittstellenelemente
  13. 13. Jesse James Garrett: Web als SoftwareschnittstelleInterface/Schnittstellen-gestaltung:Gestaltung der Schnittstellen-Elemente zur Erleichterung derHandhabung der Funktionen,wie in der klassischen HumanComputer Interaction (HCI)Informationsgestaltung:Informationsgestaltung zurErleichterungdes Verständnisses
  14. 14. Jesse James Garrett: Web als SoftwareschnittstelleInteraktionsdesign:Gestaltung derAnwendungsflüsse zurerleichterten Wahrnehmung vonBenutzeranforderungen, sowieDefinition des Umgangs mit denFunktionen
  15. 15. Jesse James Garrett: Web als SoftwareschnittstelleSpezifizierung der Funktionen:‚Feature-Set‘ als detaillierteBeschreibung der Funktionalitätder Site, um dieBenutzeranforderungen zubefriedigen
  16. 16. Jesse James Garrett: Web als SoftwareschnittstelleBenutzer-Bedürfnisse:Von Außen abgeleitete Site-Zielsetzungen, welche durchBenutzerforschung erhobenwerden (ethno-, techno-,psychografisch etc.)Inhaltsziele:Interne Zielsetzungen der Site,wie etwa Business,künstlerische oder andere
  17. 17. Weiterbearbeitung der AufgabeVorarbeit:Ihr habt jeweils drei ähnliche Systeme verglichen, dienach eurer Einschätzung unterschiedlich gute UserExperiences liefern und sie im Blog beschrieben.
  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 der von dir analysierten Dienste versuchst du für dein Team abzuwerben?
  19. 19. Euer TeamMichael, Sue, Interface- David, Texter / Patrice, InteractionVisualdesigner designerin Contentmanager DesignerinCharles, Ingrid, Dave, Chuck,Informations- Konzeptionerin Produktmanager Abwicklungsexpertearchitekt Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!
  20. 20. Joshua Porter:Aktivität, Objekte, Funktionen
  21. 21. Hier setzen wir jetzt an:
  22. 22. Featuritis, Feature Creep …
  23. 23. Joshua Porter: Aktivität-Objekte-FunktionenMethode zur Priorisierung vonFeatures für Social ServicesBuchauszug im SemesterapparatHomepage/Blog: http://bokardo.com/ 23
  24. 24. Aktivität, Objekte, Funktionen (Joshua Porter)1. Definiere die Aktivität2. Identifiziere die sozialen Objekte, die die Menschen in dieser Aktivität gebrauchen3. Finde heraus, was die Menschen mit diesen Objekten tun und stelle Funktionen dafür bereit 24
  25. 25. AOF liefert … Objekt Funktion Aktivität
  26. 26. AOF liefert … Objekt Funktion Aktivität 26
  27. 27. AOF liefert … Objekt Funktion Aktivität
  28. 28. Aktivität ermittelnunpräzise:• Was wollen die User von der Site?genauer:• Was tut der ideale Nutzer leidenschaftlich gerne?• Was verbessert der Anbieter für die User?• Was müssen die User tun, damit der Anbieter erfolgreich ist? 28
  29. 29. Aktivität ist nicht gleich Ziel!Eine Aktivität kann ganz unterschiedlichen Zielen dienen.Beispiel Aktivität EinkaufenZiele:Grundbedürfnis befriedigen (z.B. Nahrungsaufnahme)Soziale Beziehung stärken (z.B. Geschenk machen)Selbstmotivation erzeugen (z.B. Eigenbelohnung)u.v.a. 29
  30. 30. Beispiele für AktivitätenBenennt die Aktivitäten,die die von euch untersuchten Webdienste unterstützen. 30
  31. 31. Aktivität bestimmenKurzversion:Modelliere die Interaktionen, die es schon gibt.Langversion:1. Starte mit der zu unterstützenden Aktivität.2. Beobachte, wie Menschen sie jetzt durchführen.3. Wie interagieren sie jetzt miteinander?4. Welche Probleme haben sie jetzt?5. Wie beheben sie sie jetzt?6. Mit wem kommunizieren sie? 31
  32. 32. Wie beschreibt man eine Aktivität?Aktivität: Einkaufen als Prozess aus fünf Schritten:A Ein Bedürfnis erkennenB zum Bedürfnis angebotene Produkte abwägenC Produkt auswählenD optional den besten Preis für das Produkt suchenE Produkt kaufen 32
  33. 33. Wie beschreibt man eine Aktivität? 33
  34. 34. Wie beschreibt man eine Aktivität?WIRKLICH? 34
  35. 35. Wie beschreibt man eine Aktivität? EHER SO?
  36. 36. Vorsicht vor Simplifizierung oder VerkomplizierungZentrale Designaufgabe ist Komplexitätsreduktion!Schlechtes Vorgehen:Oberflächliche Analyseergibt > wenige Merkmaleergibt > simples Prozessdesign aber am Nutzer vorbei 36
  37. 37. Vorsicht vor Simplifizierung oder VerkomplizierungZentrale Designaufgabe ist Komplexitätsreduktion!Besseres Vorgehen:detaillierte, methodengeleitete Analyseergibt > Identifizierung aller relevanten Merkmaleergibt > Zusammenspiel der Merkmale erkennenergibt > simples Prozessdesign auf Nutzer abgestimmtMethoden üben wir in späteren Sitzungen! 37
  38. 38. Soziale Objekte 38
  39. 39. Soziale Objekte… können Menschen, Objekte (virtuell, physisch) oder Ideen sein. 39
  40. 40. Soziale Objekte… beeinflussen die soziale Interaktion, sie ändern, wie Menschen miteinander interagieren 40
  41. 41. Soziale Objekte… Durch die Interaktion mit / durch soziale Objekte treffen sich Menschen, die sich möglicherweise sonst nicht kennen 41
  42. 42. Soziale Objekte… Durch die Interaktion mit / durch soziale Objekte treffen sich Menschen, die sich möglicherweise sonst nicht kennen 42
  43. 43. Soziale Objekte… können der Grund sein, warum / wegen dem Menschen eine soziale Interaktion / Beziehung haben. 43
  44. 44. AnalyseaufgabeIdentifiziere die sozialen Objekteeines beliebigen Social Web-Servicesoder eines der von euch untersuchten. 44
  45. 45. 45
  46. 46. Soziales Objekt: VideoSoziale Objekte: Sharing Soziales Objekt: Verwandte Videos 46
  47. 47. Soziales Objekt: KommentareSoziales Objekt: Videoantworten Soziales Objekt: Verwandte Videos Soziales Objekt: Kommentare 47
  48. 48. Soziale Funktionen und AktionenDie "Verben zu den Objekten" finden:Aktionen identifizieren, die User mit den Objektendurchführen. Davon konkrete Funktionen ableiten.Soziale Aktionen & Funktionen:Wenn das Verb mehr als eine Person betrifft. 48
  49. 49. Soziale Funktionen vs AktionenAktionen sind nicht gleich Funktionen!Z.B. User haben im Web schon lange Aktionen wieweiterempfehlen durchgeführt, ohne dazu einespezifische Funktion in der Anwendung vorzufinden.Die Empfehlungsaktion "Link per Mail weitersenden"wurde häufig mit Kopieren der URL-Angabe aus derAdresszeile des Browsers (also nicht von derAnwendung heraus unterstützt) realisiert. 49
  50. 50. Soziale Funktionen: AktionenNomen (Objekte) Verben (Aktionen) Soziale Verben (soziale Aktionen)Videos starten, stoppen, teilen, kommentieren, bearbeiten, speichern einbetten, bewerten, hochladen beantwortenArtikel lesen, archivieren, teilen, kommentieren, zitieren, ausdrucken, annotieren, verlinken, bewertenFotos speichern, ansehen, teilen, kommentieren, merken/bookmarken, einbetten, bewerten, editieren, ausdrucken verschlagwortenProdukte lesen, in Warenkorb / teilen, diskutieren, Wunschliste legen, rezensieren, kaufen, bezahlen 50
  51. 51. Beispiel Amazon-Produktseite: 17 soziale Funktionen 51
  52. 52. Screenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der Folie angegeben, nach FoliennummernBILDER3 JJG http://www.flickr.com/photos/martin-kliehm/536545606/15 http://www.jjg.net/elements/translations/elements_de.pdf16 J. Porter: http://chinposin.wordpress.com/about21 Swiss Army Knife: http://www.techcekirdek.com/tech-apps/ios-android/cebinizdeki-isvec-cakisi-swiss-army-knifeLITERATURGarrett, Jesse James (2010): The Elements of User ExperiencePorter, Joshua (2010): Social Web Design 54
  53. 53. Marcus HaberkornAkademischer RatLehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fachbereich GestaltungFachhochschule TrierIrminenfreihof 8Postfach 1826D-54208 TrierTel. +49 651 8103-839Mail: m.haberkorn@fh-trier.de 55

×