Update 03/12: Folien zur 1. 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
1. Sitzung
Marcus Haberkorn | Intermedia Design | 2012
Seminar | User Experience Design | für Semester 3-5

2. Eine sehr kurze Geschichte der
Mensch-Maschine-Interaktion
12

3. Technologiezyklen: Elektronische Datenverarbeitung
Groß- Klein- Personal Desktop & Mobiler
rechner rechner Computer Internet PC Internet PC
1950er 1960er 1980er 1990er 2000er
13

4. Technologiezyklen: Gewinner
Groß- Klein- Personal Desktop & Mobiler
rechner rechner Computer Internet PC Internet PC
IBM Digital Microsoft Google Google
NCR Equipment Cisco AOL Apple
Control Data Data General Intel Ebay Amazon
Honeywell HP Apple Yahoo ?????
Honeywell IBM Amazon ????
Prime Oracle Alibaba ???
HP Baidu ??
Dell Rakuten ?
Compaq
1950er 1960er 1980er 1990er 2000er
14

5. Mensch-Maschine-Interaktion (HCI): Die Anfänge
Ziel: Bediene die Maschine ENIAC4 Röhrenrechner (1946)
Design als Ingenieursarbeit
Designaufgabe: Maschine über
Bedienelemente kontrollierbar machen
Menschen passen sich an Maschine an
und sprechen Sprache der Maschine,
bereiten Probleme für Maschine vor
15

6. Input: Schalter

7. Input: Lochkarten mit Stanzer vorbereiten (1960er)
Lochkartengenerator
17

8. Input: Lochkarten (1960er)
18

9. Input/Output: Remote Terminals (1970er)
IBM 3270

10. Text-In/Output: Kommandozeilen (1970er)
Benutzerfreundlich hieß:
verständliche und gut
merkbare Befehle,
verständliche Hilfe

11. Grafische Benutzeroberflächen
…
aber es entwickelten sich auch andere Ansätze
…
21

12. Vannevar Bush: Der Memex (1945)
"Ein Memex ist ein Gerät, in dem ein
Individuum all seine Bücher, Akten und
seine gesamte Kommunikation
speichert und das so konstruiert ist,
dass es mit außerordentlicher
Geschwindigkeit und Flexibilität
benutzt werden kann. Es stellt eine
vergrößerte persönliche Ergänzung zum
Gedächtnis dar."
Bush, Vannevar: As we may think, 1945
22

13. Der Memex: Konzept
23

14. Der Memex: Input per Handschrift & 'Scan'
Animation
Auf der Oberseite des Memex sind zwei Glasplatten eingelassen, die zum Einen der
Projektion gespeicherter Dokumente dienen, zum Anderen können die Platten auch
als Eingabegerät genutzt werden. Der Benutzer kann darauf zeichnen, schreiben oder
Notizen, Fotografien und Ähnliches auflegen. Per Knopfdruck wird die Platte von
hinten abfotografiert und auf Microfilm gespeichert.
24

15. Douglas Engelbart: oN-Line-System NLS (1968)
Arbeit mit komplexen
Informationsstrukturen
- Dokumentverlinkung
- Bedienprinzip der Maus
- Objekte & Fenster im Interface
Teleconferencing:
eigens für die Präsentation
entworfenes System von Kameras,
Projektionen, AV-Übertragung
Demonstration (Video)
25

16. Mensch-Maschine-Interaktion 1970er (Bild: Visicalc)
Ziel: Benutze die Software z.B.
Tabellenkalkulation, Textverarbeitung
Design immer noch primär
Ingenieursarbeit
Designaufgabe :
Anpassungsanfordernis für Menschen
minimieren
26

17. Visicalc 1979
WYSIWYG
(what you see is what you get)
- Eingabe direkt in der Tabelle
- Automatische Neuberechnung
- Scrollbars horizontal & vertikal
- Textformatierung
- Formeleingabe mit minimaler
Tastatureingabe
27

18. Lotus 1-2-3 (1982)
Die 1. “Killer-Anwendung”
für die Verbreitung des IBM
PC in Unternehmen
28

19. Mensch-Maschine-Interaktion 1980er Jahre
Durchsetzung von Software mit guter Usability
(hier: Erlernbarkeit, Anwenderfreundlichkeit,
wenige Fehler, gesparte Zeit)
Ziel: Erledige eine Aufgabe z.B. verwalte einen
Etat, erstelle eine Broschüre, komponiere Musik
Designaufgabe:
Anpassungsanfordernis für Menschen minimieren
29

20. Grafische Benutzeroberflächen: Xerox Alto 1974
30

21. Grafische Benutzeroberflächen: Xerox Star 1981
Xerox STAR, 1981
31

22. Grafische Benutzeroberflächen: Windows & Mac
Microsoft Windows 1.01, 1985
Apple Mac UI 1984
Microsoft Windows 1.01 1985
32

23. Grafische Benutzeroberflächen: Mac
Xerox Alto, 1972
33

24. Mensch-Maschine-Interaktion: 2000er Jahre
Ziel: Anpassung der Umwelt, während
wir durchs Leben gehen und lernen,
arbeiten, spielen, uns unterhalten …
Designaufgabe: Anpassung der
Maschine an den Menschen und seine
Aktivitäten in ihrem Nutzungskontext.
34

29. Evolution von Interfaces
(am Beispiel von Game Controllern)
39

30. Binärer Input
Zwei Inputs
0-1
On / Off
40

31. Binärer Controller: Analogie
41

32. Canabalt: One Button Game
siehe z. B.
http://www.kongregate.com/one-button-games
42

33. Analoger Input
viele Inputs
0-n
(häufig 16, 32,
64, 128 …)
43

34. Analoger Input: Analogie
44

35. Analoger Input: Analogie
45

36. Analoger Input
Wichtiges Feature:
Begrenzungen!
46

37. Motion Controller: Wii
quasi unendlich viele Inputs
(x y z) (Position)
(x y z) (Ausrichtung)
Beschleunigung
Trägheit
Drehung
Neigung
Gierung
47

38. Motion Controller: Kinect
Skeletal mit 25 Punkten
und Raumtiefe (xyz)
48

39. Motion Controller: Analogie
49

40. Bedienelemente datenverarbeitender Systeme
- Röhren
- Lochkarten
- Tastatur (QWERTY seit 1868)
Texteingabe / Befehlszeilen
- Maus (1968)
- GUIs & WYSIWYG-Prinzip (1979)
- Touchpad, Scrollrad …
- Multitouchscreens
- Augmented Reality
- Tangible Interfaces
50

41. Systematisierung von Gesten: Gesturecons
51

42. Systematisierung von Gesten: Cue / Touchmark
http://gesturecons.com/
52

43. Microsoft: Future Vision 2011
http://www.microsoft.com/office/vision/
53

44. Microsoft: Future Vision 2011
Welche euch bekannten Trends greift
diese Designstudie auf und entwickelt sie
weiter?
Was ist am Dargestellten und der
Darstellung kritisierbar?
54

45. Usability und User Experience
55

46. Definition Usability
Das Ausmaß, in dem ein Produkt durch bestimmte
Benutzer in einem bestimmten Nutzungskontext genutzt
werden kann, um bestimmte Ziele effektiv, effizient und
mit Zufriedenheit zu erreichen.
DIN EN ISO 9241-210
Ergonomie der Mensch-System-Interaktion
56

47. Definition Usability: Grundsätze
Recherchiert die in der DIN Norm definierten Grundsätze
und erklärt sie mit Beispielen:
• Aufgabenangemessenheit
• Selbstbeschreibungsfähigkeit
• Steuerbarkeit
• Erwartungskonformität
• Fehlertoleranz
• Individualisierbarkeit
• Lernförderlichkeit
57

48. Definition User Experience (UX)
Die Wahrnehmungen und Reaktionen einer Person, die
aus der Benutzung oder angenommenen Benutzung
eines Produktes, eines Systems oder einer
Dienstleistung hervorgehen.
ISO FDIS 9241-210
58

49. Der Unterschied
Im Gegensatz zur Usability behandelt UX auch
nicht-instrumentelle Aspekte der Produktnutzung.
UX zielt auch auf positive Lebensaspekte:
Freude, Spaß, Herausforderung, Selbstausdruck u.a.
59

50. UX Design
Designe eine Vase.
Designe eine bessere Art
und Weise, wie Menschen
zuhause Blumen genießen
können.
60

51. UX Design
Designe eine Trefferliste Fokus auf Produkt
für Suchmaschinen. oder Aufgaben
Designe eine bessere Art Fokus auf Erlebnis
und Weise, wie sich
Menschen zu einem Thema
informieren können.
Im Job: Was der Kunde als konkrete Aufgabe/Produkt verlangt, ist nicht unbedingt die
richtige Lösung für sein eigentliches Ziel! Er denkt vielleicht nur, dass „man das so
macht“. Deshalb: Immer hinterfragen, querdenken und eigene Expertise einbringen.
61

52. Beispiel: Suchmaschinen-Interface von Yippy
62

53. Beispiel: Suchmaschinen-Interface von Spezify
63

54. Beispiel: Suchmaschinen-Interface von Cooliris
64

55. Beispiel: Cooliris
65

56. S.P. Anderson: Bedürfnishierarchie im UX Design

57. Kritik am Modell
Hierarchie suggeriert, dass obere Ebenen
die unteren bedingen. Es ist jedoch z.B.
nicht unüblich, dass User bedeutsame
Erlebnisse mit Software haben, die eine
schlechte Usability hat.
Einprägsam muss nicht angenehm sein.
73

58. Aufgabe
Findet drei verschiedene Anwendungen / Medieninhalte,
die für die gleiche Aktivität, das gleiche Ziel oder Thema
erstellt wurden, aber unterschiedliche Niveaus der User
Experience (nach dem Anderson-Modell) bieten.
Erstellt einen kurzen Blogpost dazu: 2-3 Sätze für die
jeweilige Einordnung, Links zu den Anwendungen, ggfs.
Screenshots / Fotos, wenn nicht allgemein bekannt oder
über Link nicht direkt einsehbar.
74

59. Lösungsbeispiel 1.1.: Personas Web
Personas Web: Daten- und Prozessvisualisierung http://personas.media.mit.edu
75

60. Lösungsbeispiel 1.2.: Take this Lollipop
Take this Lollipop: Personalisierter Kurzfilm http://takethislollipop.com
76

61. Lösungsbeispiel 1.3.: Smokescreen
Smokescreen Game
77

62. Lösungsbeispiel 2.1.: Thunderbird/Lightning
Thunderbird-Erweiterung Lightning
78

63. Lösungsbeispiel 2.2.: Wunderlist
Wunderlist
79

64. Lösungsbeispiel 2.3.: Epic Win App
Epic Win App
80

65. Bild- und Quellennachweise nach Foliennummern
Screenshots sind in der Regel verlinkt
Angaben, soweit nicht bereits auf der Folie angegeben, nach Foliennummern
BILDER
3 http://it-material.de/Material/Geschichte/eniac4.jpg
4 http://miamoody.blogspot.com/2011/02/as-we-may-think-by-vannevar-bush.html
5 http://2.bp.blogspot.com/_pm9teaH8uZ0/S7p28Bu5qjI/AAAAAAAAAmk/mxLit6lSQZY/s1600/memex_picture.jpg
6 http://www.computerhistory.org/revolution/input-output/14/346/1876
7 http://memoryfailure.net/portfolio/nls.html
8 www.greentreegazette.com/uploads/visicalc.jpg
9 www.aresluna.org/attached/computerhistory/articles/spreadsheets/lotus123review/
10 http://www.digibarn.com/collections/software/alto/
http://upload.wikimedia.org/wikipedia/commons/3/33/Atari-2600-Joystick.jpg
http://upload.wikimedia.org/wikipedia/commons/8/83/NES-controller.jpg
22 http://www.spielhaus-spielzeug.de /prod_images/car_go_controller.jpg
22 http://www.berliner-akzente.de/imperia/md/images/berlinerakzente2/2011/amazon05-11/carrera/carrera_bahn2.jpg
24 http://upload.wikimedia.org/wikipedia/commons/5/56/N64-Controller-Gray.jpg
24 http://upload.wikimedia.org/wikipedia/commons/8/83/NES-controller.jpg
82

66. Bild- und Quellennachweise nach Foliennummern
Screenshots sind in der Regel verlinkt
Angaben, soweit nicht bereits auf der Folie angegeben, nach Foliennummern
BILDER
25 http://lh6.ggpht.com/-LBYYNT71c4Y/SdfWgZEO2FE/AAAAAAAAA3o/rapUJX2zn3U/ModellautoRennenDesMSC.jpg
26 http://lh3.ggpht.com/-7cWp0TvVhu0/S8syBuk2uxE/AAAAAAAAL7k/dJBmgT7hktY/ModellautorennenAnDerWeser18042010.jpg
28 http://paulbourke.net/miscellaneous/domefisheye/Wii/
29 http://www.osculator.net/doc/_media/faq:pry-wiimote.gif
30 http://dubaidunebashing.com/
29 http://www.computerworld.ch/fileadmin/images/artikelbilder/KinectSDK1.jpg
32 http://gesturecons.com/
33 http://somerandomdude.com/work/cue/
LITERATUR
Anderson, Stephen P. (2011): Seductive Interaction Design
83

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