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

1. Einführung
User Experience Design für interaktive Systeme
2. Sitzung
Marcus Haberkorn | Intermedia Design | 2012
Seminar | User Experience Design | für Semester 3-5

2. Jesse James Garrett:
The Elements of User Experience

3. Jesse James Garrett
Die Elemente der User Experience
"Standardwerk" für UX (2002)
umfassende Systematisierung
ursprünglich für Websysteme
Homepage/Blog http://jjg.net

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. 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. 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. Jesse James Garrett: Web als Hypertextsystem
Inhaltliche Anforderungen:
Definition der notwendigen
Inhaltselemente der Site zur
Befriedigung der
Benutzerbedürfnisse

8. Jesse James Garrett: Web als Hypertextsystem
Informations-Architektur:
Strukturierte Gestaltung des
Informationsraumes zur
Vereinfachung des intuitiven
Zugangs der Benutzer zu den
Inhalten

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. Jesse James Garrett: Web als Hypertextsystem
Visuelle Gestaltung:
Grafische Bearbeitung von Text,
grafischen Elementen und
Navigationskomponenten

11. Jesse James Garrett: Softwareschnittstelle
Die Perspektive auf Systeme als
Software-Schnittstelle
(aufgabenorientiert, linke Hälfte
der Grafik) fügt weitere Aspekte
hinzu.

12. Jesse James Garrett: Web als Softwareschnittstelle
Visuelle Gestaltung:
Grafische Bearbeitung der
Schnittstellenelemente

13. Jesse James Garrett: Web als Softwareschnittstelle
Interface/Schnittstellen-
gestaltung:
Gestaltung der Schnittstellen-
Elemente zur Erleichterung der
Handhabung der Funktionen,
wie in der klassischen Human
Computer Interaction (HCI)
Informationsgestaltung:
Informationsgestaltung zur
Erleichterung
des Verständnisses

14. Jesse James Garrett: Web als Softwareschnittstelle
Interaktionsdesign:
Gestaltung der
Anwendungsflüsse zur
erleichterten Wahrnehmung von
Benutzeranforderungen, sowie
Definition des Umgangs mit den
Funktionen

15. Jesse James Garrett: Web als Softwareschnittstelle
Spezifizierung der Funktionen:
‚Feature-Set‘ als detaillierte
Beschreibung der Funktionalität
der Site, um die
Benutzeranforderungen zu
befriedigen

16. Jesse James Garrett: Web als Softwareschnittstelle
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 Business,
künstlerische oder andere

17. Weiterbearbeitung der Aufgabe
Vorarbeit:
Ihr habt jeweils drei ähnliche Systeme verglichen, die
nach eurer Einschätzung unterschiedlich gute User
Experiences liefern und sie im Blog beschrieben.

18. Weiterbearbeitung der Aufgabe
Szenario:
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. Euer Team
Michael, Sue, Interface- David, Texter / Patrice, Interaction
Visualdesigner designerin Contentmanager Designerin
Charles, Ingrid, Dave, Chuck,
Informations- Konzeptionerin Produktmanager Abwicklungsexperte
architekt
Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!

20. Joshua Porter:
Aktivität, Objekte, Funktionen

21. Hier setzen wir jetzt an:

22. Featuritis, Feature Creep …

23. Joshua Porter: Aktivität-Objekte-Funktionen
Methode zur Priorisierung von
Features für Social Services
Buchauszug im Semesterapparat
Homepage/Blog: http://bokardo.com/
23

24. Aktivität, Objekte, Funktionen (Joshua Porter)
1. Definiere die Aktivität
2. Identifiziere die sozialen Objekte,
die die Menschen in dieser Aktivität gebrauchen
3. Finde heraus, was die Menschen mit diesen
Objekten tun und stelle Funktionen dafür bereit
24

25. AOF liefert …
Objekt Funktion Aktivität

26. AOF liefert …
Objekt Funktion Aktivität
26

27. AOF liefert …
Objekt Funktion Aktivität

28. Aktivität ermitteln
unprä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. Aktivität ist nicht gleich Ziel!
Eine Aktivität kann ganz unterschiedlichen Zielen dienen.
Beispiel Aktivität Einkaufen
Ziele:
Grundbedürfnis befriedigen (z.B. Nahrungsaufnahme)
Soziale Beziehung stärken (z.B. Geschenk machen)
Selbstmotivation erzeugen (z.B. Eigenbelohnung)
u.v.a.
29

30. Beispiele für Aktivitäten
Benennt die Aktivitäten,
die die von euch untersuchten Webdienste unterstützen.
30

31. Aktivität bestimmen
Kurzversion:
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. Wie beschreibt man eine Aktivität?
Aktivität: Einkaufen als Prozess aus fünf Schritten:
A Ein Bedürfnis erkennen
B zum Bedürfnis angebotene Produkte abwägen
C Produkt auswählen
D optional den besten Preis für das Produkt suchen
E Produkt kaufen
32

33. Wie beschreibt man eine Aktivität?
33

34. Wie beschreibt man eine Aktivität?
WIRKLICH?
34

35. Wie beschreibt man eine Aktivität?
EHER SO?

36. Vorsicht vor Simplifizierung oder Verkomplizierung
Zentrale Designaufgabe ist Komplexitätsreduktion!
Schlechtes Vorgehen:
Oberflächliche Analyse
ergibt > wenige Merkmale
ergibt > simples Prozessdesign aber am Nutzer vorbei
36

37. Vorsicht vor Simplifizierung oder Verkomplizierung
Zentrale Designaufgabe ist Komplexitätsreduktion!
Besseres Vorgehen:
detaillierte, methodengeleitete Analyse
ergibt > Identifizierung aller relevanten Merkmale
ergibt > Zusammenspiel der Merkmale erkennen
ergibt > simples Prozessdesign auf Nutzer abgestimmt
Methoden üben wir in späteren Sitzungen!
37

38. Soziale Objekte
38

39. Soziale Objekte
… können Menschen, Objekte (virtuell, physisch)
oder Ideen sein.
39

40. Soziale Objekte
… beeinflussen die soziale Interaktion, sie ändern, wie
Menschen miteinander interagieren
40

41. Soziale Objekte
… Durch die Interaktion mit / durch soziale Objekte
treffen sich Menschen, die sich möglicherweise sonst
nicht kennen
41

42. Soziale Objekte
… Durch die Interaktion mit / durch soziale Objekte
treffen sich Menschen, die sich möglicherweise sonst
nicht kennen
42

43. Soziale Objekte
… können der Grund sein, warum / wegen dem
Menschen eine soziale Interaktion / Beziehung haben.
43

44. Analyseaufgabe
Identifiziere die sozialen Objekte
eines beliebigen Social Web-Services
oder eines der von euch untersuchten.
44

45. 45

46. Soziales Objekt: Video
Soziale Objekte: Sharing
Soziales Objekt:
Verwandte Videos
46

47. Soziales Objekt: Kommentare
Soziales Objekt: Videoantworten Soziales Objekt:
Verwandte Videos
Soziales Objekt: Kommentare
47

48. Soziale Funktionen und Aktionen
Die "Verben zu den Objekten" finden:
Aktionen identifizieren, die User mit den Objekten
durchführen. Davon konkrete Funktionen ableiten.
Soziale Aktionen & Funktionen:
Wenn das Verb mehr als eine Person betrifft.
48

49. Soziale Funktionen vs Aktionen
Aktionen sind nicht gleich Funktionen!
Z.B. User haben im Web schon lange Aktionen wie
'weiterempfehlen' durchgeführt, ohne dazu eine
spezifische Funktion in der Anwendung vorzufinden.
Die Empfehlungsaktion "Link per Mail weitersenden"
wurde häufig mit Kopieren der URL-Angabe aus der
Adresszeile des Browsers (also nicht von der
Anwendung heraus unterstützt) realisiert.
49

50. Soziale Funktionen: Aktionen
Nomen (Objekte) Verben (Aktionen) Soziale Verben (soziale
Aktionen)
Videos starten, stoppen, teilen, kommentieren,
bearbeiten, speichern einbetten, bewerten,
hochladen beantworten
Artikel lesen, archivieren, teilen, kommentieren,
zitieren, ausdrucken, annotieren, verlinken,
bewerten
Fotos speichern, ansehen, teilen, kommentieren,
merken/bookmarken, einbetten, bewerten,
editieren, ausdrucken verschlagworten
Produkte lesen, in Warenkorb / teilen, diskutieren,
Wunschliste legen, rezensieren,
kaufen, bezahlen
50

51. Beispiel Amazon-Produktseite: 17 soziale Funktionen
51

52. Screenshots sind in der Regel verlinkt
Angaben, soweit nicht bereits auf der Folie angegeben, nach Foliennummern
BILDER
3 JJG http://www.flickr.com/photos/martin-kliehm/536545606/
15 http://www.jjg.net/elements/translations/elements_de.pdf
16 J. Porter: http://chinposin.wordpress.com/about
21 Swiss Army Knife: http://www.techcekirdek.com/tech-apps/ios-android/cebinizdeki-isvec-cakisi-swiss-army-knife
LITERATUR
Garrett, Jesse James (2010): The Elements of User Experience
Porter, Joshua (2010): Social Web Design
54

53. Marcus Haberkorn
Akademischer Rat
Lehrgebiet Hypermedia: Interaktive & vernetzte Systeme
Studiengang Intermedia Design im Fachbereich Gestaltung
Fachhochschule Trier
Irminenfreihof 8
Postfach 1826
D-54208 Trier
Tel. +49 651 8103-839
Mail: m.haberkorn@fh-trier.de
55