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

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

2. Jesse James Garrett:
The Elements of User Experience
2

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
3

5. 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

6. 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

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

8. Jesse James Garrett: Web als Hypertextsystem
Inhaltliche Anforderungen:
Definition der notwendigen
Inhaltselemente der Site zur
Befriedigung der Benutzerbedürfnisse
8

9. Jesse James Garrett: Web als Hypertextsystem
Informations-Architektur:
Strukturierte Gestaltung des
Informationsraumes zur
9

10. 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

11. Jesse James Garrett: Web als Hypertextsystem
Visuelle Gestaltung:
Grafische Bearbeitung von Text,
grafischen Elementen und
Navigationskomponenten
11

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

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

14. 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

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

16. 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

17. 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

18. 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.
Quelle 18

19. 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 von dir analysierten
Dienstes versuchst du für dein Team abzuwerben?
Quelle 19

20. Euer Team
Michael, Visual Sue, Interface- David, Content- Patrice, Interaction
Designer designerin manager / -strategist Designerin
Charles, Ingrid, Dave, Chuck,
Informations- Konzeptionerin Produktmanager Abwicklungsexperte
architekt (wenn nichts mehr hilft)
Quelle 20
Fotos: http://www.ideo.com/people/ - die Abgebildeten nehmen bei DEO andere Funktionen wahr!

21. Concept Models / Concept Map
21

22. 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

23. Concept Maps
In der Analysephase werden kulturelle,
kontextuelle und benutzerbezogene
Informationen 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

24. Concept Maps
Konkrete Funktion:
- Überlegungen spezifizieren
- Zusammenhänge reflektieren
- Priorisieren / CM: nur Wichtigstes
- Visualisieren
- Konzept Anderen erläutern
24

25. Concept Maps
25

26. Concept Maps
26

27. Concept Maps
Quelle 27

28. Concept Maps: Flickr (von Bryce Glass)
28

29. Concept Maps - Vorgehensweise
1. Reduktion
2. Strukturierung & Visualisierung
3. Elaboration
29

30. Concept Models
30

31. Concept Models
31

32. 32

33. Übung
Legt eine Concept Map für Pacman auf dem Whiteboard an!
Quelle 33

34. 34

35. 35

36. Concept Models üben
Legt ein Concept Model eines euch bekannten Dienstes an und
stellt es kurz vor.
Ca. 20 Minuten.
Quelle 36

37. Marcus Haberkorn
Akademischer Rat, M.A.
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
37