EinführungUser Experience Design für interaktive Systeme1. SitzungMarcus Haberkorn | Intermedia Design | 2012Seminar | Use...
Eine sehr kurze Geschichte derMensch-Maschine-Interaktion                                 12
Technologiezyklen: Elektronische Datenverarbeitung   Groß-     Klein-    Personal   Desktop &       Mobiler  rechner   rec...
Technologiezyklen: Gewinner    Groß-         Klein-       Personal    Desktop &       Mobiler   rechner       rechner     ...
Mensch-Maschine-Interaktion (HCI): Die AnfängeZiel: Bediene die Maschine             ENIAC4 Röhrenrechner (1946)Design als...
Input: Schalter
Input: Lochkarten mit Stanzer vorbereiten (1960er)Lochkartengenerator                                                     17
Input: Lochkarten (1960er)                             18
Input/Output: Remote Terminals (1970er)IBM 3270
Text-In/Output: Kommandozeilen (1970er)Benutzerfreundlich hieß:verständliche und gutmerkbare Befehle,verständliche Hilfe
Grafische Benutzeroberflächen…aber es entwickelten sich auch andere Ansätze…                                              ...
Vannevar Bush: Der Memex (1945)"Ein Memex ist ein Gerät, in dem einIndividuum all seine Bücher, Akten undseine gesamte Kom...
Der Memex: Konzept                     23
Der Memex: Input per Handschrift & Scan                                                   AnimationAuf der Oberseite des M...
Douglas Engelbart: oN-Line-System NLS (1968)Arbeit mit komplexenInformationsstrukturen- Dokumentverlinkung- Bedienprinzip ...
Mensch-Maschine-Interaktion 1970er (Bild: Visicalc)Ziel: Benutze die Software z.B.Tabellenkalkulation, TextverarbeitungDes...
Visicalc 1979WYSIWYG(what you see is what you get)- Eingabe direkt in der Tabelle- Automatische Neuberechnung- Scrollbars ...
Lotus 1-2-3 (1982)Die 1. “Killer-Anwendung”für die Verbreitung des IBMPC in Unternehmen                              28
Mensch-Maschine-Interaktion 1980er JahreDurchsetzung von Software mit guter Usability(hier: Erlernbarkeit, Anwenderfreundl...
Grafische Benutzeroberflächen: Xerox Alto 1974                                                 30
Grafische Benutzeroberflächen: Xerox Star 1981Xerox STAR, 1981                                                 31
Grafische Benutzeroberflächen: Windows & Mac                                Microsoft Windows 1.01, 1985Apple Mac UI 1984M...
Grafische Benutzeroberflächen: Mac      Xerox Alto, 1972                                     33
Mensch-Maschine-Interaktion: 2000er JahreZiel: Anpassung der Umwelt, währendwir durchs Leben gehen und lernen,arbeiten, sp...
Evolution von Interfaces(am Beispiel von Game Controllern)                                     39
Binärer InputZwei Inputs0-1On / Off                40
Binärer Controller: Analogie                               41
Canabalt: One Button Gamesiehe z. B.http://www.kongregate.com/one-button-games                                            ...
Analoger Inputviele Inputs0-n(häufig 16, 32,64, 128 …)                  43
Analoger Input: Analogie                           44
Analoger Input: Analogie                           45
Analoger InputWichtiges Feature:Begrenzungen!                     46
Motion Controller: Wiiquasi unendlich viele Inputs(x y z) (Position)(x y z) (Ausrichtung)BeschleunigungTrägheitDrehungNeig...
Motion Controller: KinectSkeletal mit 25 Punktenund Raumtiefe (xyz)                            48
Motion Controller: Analogie                              49
Bedienelemente datenverarbeitender Systeme- Röhren- Lochkarten- Tastatur (QWERTY seit 1868)  Texteingabe / Befehlszeilen- ...
Systematisierung von Gesten: Gesturecons                                           51
Systematisierung von Gesten: Cue / Touchmark           http://gesturecons.com/                                            ...
Microsoft: Future Vision 2011http://www.microsoft.com/office/vision/                                          53
Microsoft: Future Vision 2011Welche euch bekannten Trends greiftdiese Designstudie auf und entwickelt sieweiter?Was ist am...
Usability und User Experience                                55
Definition UsabilityDas Ausmaß, in dem ein Produkt durch bestimmteBenutzer in einem bestimmten Nutzungskontext genutztwerd...
Definition Usability: GrundsätzeRecherchiert die in der DIN Norm definierten Grundsätzeund erklärt sie mit Beispielen:• Au...
Definition User Experience (UX)Die Wahrnehmungen und Reaktionen einer Person, dieaus der Benutzung oder angenommenen Benut...
Der UnterschiedIm Gegensatz zur Usability behandelt UX auchnicht-instrumentelle Aspekte der Produktnutzung.UX zielt auch a...
UX Design            Designe eine Vase.            Designe eine bessere Art            und Weise, wie Menschen            ...
UX DesignDesigne eine Trefferliste                 Fokus auf Produktfür Suchmaschinen.                        oder Aufgabe...
Beispiel: Suchmaschinen-Interface von Yippy                                              62
Beispiel: Suchmaschinen-Interface von Spezify                                                63
Beispiel: Suchmaschinen-Interface von Cooliris                                                 64
Beispiel: Cooliris                     65
S.P. Anderson: Bedürfnishierarchie im UX Design
Kritik am ModellHierarchie suggeriert, dass obere Ebenendie unteren bedingen. Es ist jedoch z.B.nicht unüblich, dass User ...
AufgabeFindet drei verschiedene Anwendungen / Medieninhalte,die für die gleiche Aktivität, das gleiche Ziel oder Themaerst...
Lösungsbeispiel 1.1.: Personas WebPersonas Web: Daten- und Prozessvisualisierung http://personas.media.mit.edu            ...
Lösungsbeispiel 1.2.: Take this LollipopTake this Lollipop: Personalisierter Kurzfilm http://takethislollipop.com         ...
Lösungsbeispiel 1.3.: SmokescreenSmokescreen Game                                    77
Lösungsbeispiel 2.1.: Thunderbird/LightningThunderbird-Erweiterung Lightning                                              78
Lösungsbeispiel 2.2.: WunderlistWunderlist                                   79
Lösungsbeispiel 2.3.: Epic Win App                                     Epic Win App                                       ...
Bild- und Quellennachweise nach FoliennummernScreenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der F...
Bild- und Quellennachweise nach FoliennummernScreenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der F...
Marcus HaberkornAkademischer RatLehrgebiet Hypermedia: Interaktive & vernetzte SystemeStudiengang Intermedia Design im Fac...
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)
Nächste SlideShare
Wird geladen in …5
×

UX Design - Einführung (1. Sitzung)

1.840 Aufrufe

Veröffentlicht am

Update 03/12: Folien zur 1. 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
1.840
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
569
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

UX Design - Einführung (1. Sitzung)

  1. 1. EinführungUser Experience Design für interaktive Systeme1. SitzungMarcus Haberkorn | Intermedia Design | 2012Seminar | User Experience Design | für Semester 3-5
  2. 2. Eine sehr kurze Geschichte derMensch-Maschine-Interaktion 12
  3. 3. Technologiezyklen: Elektronische Datenverarbeitung Groß- Klein- Personal Desktop & Mobiler rechner rechner Computer Internet PC Internet PC 1950er 1960er 1980er 1990er 2000er 13
  4. 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. 5. Mensch-Maschine-Interaktion (HCI): Die AnfängeZiel: Bediene die Maschine ENIAC4 Röhrenrechner (1946)Design als IngenieursarbeitDesignaufgabe: Maschine überBedienelemente kontrollierbar machenMenschen passen sich an Maschine anund sprechen Sprache der Maschine,bereiten Probleme für Maschine vor 15
  6. 6. Input: Schalter
  7. 7. Input: Lochkarten mit Stanzer vorbereiten (1960er)Lochkartengenerator 17
  8. 8. Input: Lochkarten (1960er) 18
  9. 9. Input/Output: Remote Terminals (1970er)IBM 3270
  10. 10. Text-In/Output: Kommandozeilen (1970er)Benutzerfreundlich hieß:verständliche und gutmerkbare Befehle,verständliche Hilfe
  11. 11. Grafische Benutzeroberflächen…aber es entwickelten sich auch andere Ansätze… 21
  12. 12. Vannevar Bush: Der Memex (1945)"Ein Memex ist ein Gerät, in dem einIndividuum all seine Bücher, Akten undseine gesamte Kommunikationspeichert und das so konstruiert ist,dass es mit außerordentlicherGeschwindigkeit und Flexibilitätbenutzt werden kann. Es stellt einevergrößerte persönliche Ergänzung zumGedächtnis dar."Bush, Vannevar: As we may think, 1945 22
  13. 13. Der Memex: Konzept 23
  14. 14. Der Memex: Input per Handschrift & Scan AnimationAuf der Oberseite des Memex sind zwei Glasplatten eingelassen, die zum Einen derProjektion gespeicherter Dokumente dienen, zum Anderen können die Platten auchals Eingabegerät genutzt werden. Der Benutzer kann darauf zeichnen, schreiben oderNotizen, Fotografien und Ähnliches auflegen. Per Knopfdruck wird die Platte vonhinten abfotografiert und auf Microfilm gespeichert. 24
  15. 15. Douglas Engelbart: oN-Line-System NLS (1968)Arbeit mit komplexenInformationsstrukturen- Dokumentverlinkung- Bedienprinzip der Maus- Objekte & Fenster im InterfaceTeleconferencing:eigens für die Präsentationentworfenes System von Kameras,Projektionen, AV-Übertragung Demonstration (Video) 25
  16. 16. Mensch-Maschine-Interaktion 1970er (Bild: Visicalc)Ziel: Benutze die Software z.B.Tabellenkalkulation, TextverarbeitungDesign immer noch primärIngenieursarbeitDesignaufgabe :Anpassungsanfordernis für Menschenminimieren 26
  17. 17. Visicalc 1979WYSIWYG(what you see is what you get)- Eingabe direkt in der Tabelle- Automatische Neuberechnung- Scrollbars horizontal & vertikal- Textformatierung- Formeleingabe mit minimaler Tastatureingabe 27
  18. 18. Lotus 1-2-3 (1982)Die 1. “Killer-Anwendung”für die Verbreitung des IBMPC in Unternehmen 28
  19. 19. Mensch-Maschine-Interaktion 1980er JahreDurchsetzung von Software mit guter Usability(hier: Erlernbarkeit, Anwenderfreundlichkeit,wenige Fehler, gesparte Zeit)Ziel: Erledige eine Aufgabe z.B. verwalte einenEtat, erstelle eine Broschüre, komponiere MusikDesignaufgabe:Anpassungsanfordernis für Menschen minimieren 29
  20. 20. Grafische Benutzeroberflächen: Xerox Alto 1974 30
  21. 21. Grafische Benutzeroberflächen: Xerox Star 1981Xerox STAR, 1981 31
  22. 22. Grafische Benutzeroberflächen: Windows & Mac Microsoft Windows 1.01, 1985Apple Mac UI 1984Microsoft Windows 1.01 1985 32
  23. 23. Grafische Benutzeroberflächen: Mac Xerox Alto, 1972 33
  24. 24. Mensch-Maschine-Interaktion: 2000er JahreZiel: Anpassung der Umwelt, währendwir durchs Leben gehen und lernen,arbeiten, spielen, uns unterhalten …Designaufgabe: Anpassung derMaschine an den Menschen und seineAktivitäten in ihrem Nutzungskontext. 34
  25. 25. Evolution von Interfaces(am Beispiel von Game Controllern) 39
  26. 26. Binärer InputZwei Inputs0-1On / Off 40
  27. 27. Binärer Controller: Analogie 41
  28. 28. Canabalt: One Button Gamesiehe z. B.http://www.kongregate.com/one-button-games 42
  29. 29. Analoger Inputviele Inputs0-n(häufig 16, 32,64, 128 …) 43
  30. 30. Analoger Input: Analogie 44
  31. 31. Analoger Input: Analogie 45
  32. 32. Analoger InputWichtiges Feature:Begrenzungen! 46
  33. 33. Motion Controller: Wiiquasi unendlich viele Inputs(x y z) (Position)(x y z) (Ausrichtung)BeschleunigungTrägheitDrehungNeigungGierung 47
  34. 34. Motion Controller: KinectSkeletal mit 25 Punktenund Raumtiefe (xyz) 48
  35. 35. Motion Controller: Analogie 49
  36. 36. 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
  37. 37. Systematisierung von Gesten: Gesturecons 51
  38. 38. Systematisierung von Gesten: Cue / Touchmark http://gesturecons.com/ 52
  39. 39. Microsoft: Future Vision 2011http://www.microsoft.com/office/vision/ 53
  40. 40. Microsoft: Future Vision 2011Welche euch bekannten Trends greiftdiese Designstudie auf und entwickelt sieweiter?Was ist am Dargestellten und derDarstellung kritisierbar? 54
  41. 41. Usability und User Experience 55
  42. 42. Definition UsabilityDas Ausmaß, in dem ein Produkt durch bestimmteBenutzer in einem bestimmten Nutzungskontext genutztwerden kann, um bestimmte Ziele effektiv, effizient undmit Zufriedenheit zu erreichen.DIN EN ISO 9241-210Ergonomie der Mensch-System-Interaktion 56
  43. 43. Definition Usability: GrundsätzeRecherchiert die in der DIN Norm definierten Grundsätzeund erklärt sie mit Beispielen:• Aufgabenangemessenheit• Selbstbeschreibungsfähigkeit• Steuerbarkeit• Erwartungskonformität• Fehlertoleranz• Individualisierbarkeit• Lernförderlichkeit 57
  44. 44. Definition User Experience (UX)Die Wahrnehmungen und Reaktionen einer Person, dieaus der Benutzung oder angenommenen Benutzungeines Produktes, eines Systems oder einerDienstleistung hervorgehen.ISO FDIS 9241-210 58
  45. 45. Der UnterschiedIm Gegensatz zur Usability behandelt UX auchnicht-instrumentelle Aspekte der Produktnutzung.UX zielt auch auf positive Lebensaspekte:Freude, Spaß, Herausforderung, Selbstausdruck u.a. 59
  46. 46. UX Design Designe eine Vase. Designe eine bessere Art und Weise, wie Menschen zuhause Blumen genießen können. 60
  47. 47. UX DesignDesigne eine Trefferliste Fokus auf Produktfür Suchmaschinen. oder AufgabenDesigne eine bessere Art Fokus auf Erlebnisund Weise, wie sichMenschen zu einem Themainformieren können.Im Job: Was der Kunde als konkrete Aufgabe/Produkt verlangt, ist nicht unbedingt dierichtige Lösung für sein eigentliches Ziel! Er denkt vielleicht nur, dass „man das somacht“. Deshalb: Immer hinterfragen, querdenken und eigene Expertise einbringen. 61
  48. 48. Beispiel: Suchmaschinen-Interface von Yippy 62
  49. 49. Beispiel: Suchmaschinen-Interface von Spezify 63
  50. 50. Beispiel: Suchmaschinen-Interface von Cooliris 64
  51. 51. Beispiel: Cooliris 65
  52. 52. S.P. Anderson: Bedürfnishierarchie im UX Design
  53. 53. Kritik am ModellHierarchie suggeriert, dass obere Ebenendie unteren bedingen. Es ist jedoch z.B.nicht unüblich, dass User bedeutsameErlebnisse mit Software haben, die eineschlechte Usability hat.Einprägsam muss nicht angenehm sein. 73
  54. 54. AufgabeFindet drei verschiedene Anwendungen / Medieninhalte,die für die gleiche Aktivität, das gleiche Ziel oder Themaerstellt wurden, aber unterschiedliche Niveaus der UserExperience (nach dem Anderson-Modell) bieten.Erstellt einen kurzen Blogpost dazu: 2-3 Sätze für diejeweilige Einordnung, Links zu den Anwendungen, ggfs.Screenshots / Fotos, wenn nicht allgemein bekannt oderüber Link nicht direkt einsehbar. 74
  55. 55. Lösungsbeispiel 1.1.: Personas WebPersonas Web: Daten- und Prozessvisualisierung http://personas.media.mit.edu 75
  56. 56. Lösungsbeispiel 1.2.: Take this LollipopTake this Lollipop: Personalisierter Kurzfilm http://takethislollipop.com 76
  57. 57. Lösungsbeispiel 1.3.: SmokescreenSmokescreen Game 77
  58. 58. Lösungsbeispiel 2.1.: Thunderbird/LightningThunderbird-Erweiterung Lightning 78
  59. 59. Lösungsbeispiel 2.2.: WunderlistWunderlist 79
  60. 60. Lösungsbeispiel 2.3.: Epic Win App Epic Win App 80
  61. 61. Bild- und Quellennachweise nach FoliennummernScreenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der Folie angegeben, nach FoliennummernBILDER3 http://it-material.de/Material/Geschichte/eniac4.jpg4 http://miamoody.blogspot.com/2011/02/as-we-may-think-by-vannevar-bush.html5 http://2.bp.blogspot.com/_pm9teaH8uZ0/S7p28Bu5qjI/AAAAAAAAAmk/mxLit6lSQZY/s1600/memex_picture.jpg6 http://www.computerhistory.org/revolution/input-output/14/346/18767 http://memoryfailure.net/portfolio/nls.html8 www.greentreegazette.com/uploads/visicalc.jpg9 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.jpghttp://upload.wikimedia.org/wikipedia/commons/8/83/NES-controller.jpg22 http://www.spielhaus-spielzeug.de /prod_images/car_go_controller.jpg22 http://www.berliner-akzente.de/imperia/md/images/berlinerakzente2/2011/amazon05-11/carrera/carrera_bahn2.jpg24 http://upload.wikimedia.org/wikipedia/commons/5/56/N64-Controller-Gray.jpg24 http://upload.wikimedia.org/wikipedia/commons/8/83/NES-controller.jpg 82
  62. 62. Bild- und Quellennachweise nach FoliennummernScreenshots sind in der Regel verlinktAngaben, soweit nicht bereits auf der Folie angegeben, nach FoliennummernBILDER25 http://lh6.ggpht.com/-LBYYNT71c4Y/SdfWgZEO2FE/AAAAAAAAA3o/rapUJX2zn3U/ModellautoRennenDesMSC.jpg26 http://lh3.ggpht.com/-7cWp0TvVhu0/S8syBuk2uxE/AAAAAAAAL7k/dJBmgT7hktY/ModellautorennenAnDerWeser18042010.jpg28 http://paulbourke.net/miscellaneous/domefisheye/Wii/29 http://www.osculator.net/doc/_media/faq:pry-wiimote.gif30 http://dubaidunebashing.com/29 http://www.computerworld.ch/fileadmin/images/artikelbilder/KinectSDK1.jpg32 http://gesturecons.com/33 http://somerandomdude.com/work/cue/LITERATURAnderson, Stephen P. (2011): Seductive Interaction Design 83
  63. 63. 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 84

×