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!
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
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
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
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
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
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