SlideShare ist ein Scribd-Unternehmen logo
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
Eine sehr kurze Geschichte der
Mensch-Maschine-Interaktion




                                 12
Technologiezyklen: Elektronische Datenverarbeitung


   Groß-     Klein-    Personal   Desktop &       Mobiler
  rechner   rechner    Computer   Internet PC   Internet PC




  1950er     1960er     1980er      1990er        2000er

                                                              13
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
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
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 gut
merkbare Befehle,
verständliche Hilfe
Grafische Benutzeroberflächen

…
aber es entwickelten sich auch andere Ansätze
…




                                                21
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
Der Memex: Konzept




                     23
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
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
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
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
Lotus 1-2-3 (1982)




Die 1. “Killer-Anwendung”
für die Verbreitung des IBM
PC in Unternehmen


                              28
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
Grafische Benutzeroberflächen: Xerox Alto 1974




                                                 30
Grafische Benutzeroberflächen: Xerox Star 1981




Xerox STAR, 1981

                                                 31
Grafische Benutzeroberflächen: Windows & Mac




                                Microsoft Windows 1.01, 1985
Apple Mac UI 1984




Microsoft Windows 1.01 1985

                                                           32
Grafische Benutzeroberflächen: Mac




      Xerox Alto, 1972

                                     33
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
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)
UX Design - Einführung (1. Sitzung)
Evolution von Interfaces
(am Beispiel von Game Controllern)




                                     39
Binärer Input

Zwei Inputs
0-1
On / Off




                40
Binärer Controller: Analogie




                               41
Canabalt: One Button Game




siehe z. B.
http://www.kongregate.com/one-button-games
                                             42
Analoger Input

viele Inputs
0-n
(häufig 16, 32,
64, 128 …)




                  43
Analoger Input: Analogie




                           44
Analoger Input: Analogie




                           45
Analoger Input

Wichtiges Feature:
Begrenzungen!




                     46
Motion Controller: Wii

quasi unendlich viele Inputs
(x y z) (Position)
(x y z) (Ausrichtung)
Beschleunigung
Trägheit
Drehung
Neigung
Gierung


                               47
Motion Controller: Kinect

Skeletal mit 25 Punkten
und Raumtiefe (xyz)




                            48
Motion Controller: Analogie




                              49
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
Systematisierung von Gesten: Gesturecons




                                           51
Systematisierung von Gesten: Cue / Touchmark




           http://gesturecons.com/




                                               52
Microsoft: Future Vision 2011




http://www.microsoft.com/office/vision/

                                          53
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
Usability und User Experience




                                55
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
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
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
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
UX Design

            Designe eine Vase.


            Designe eine bessere Art
            und Weise, wie Menschen
            zuhause Blumen genießen
            können.




                                       60
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
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 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
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
Lösungsbeispiel 1.1.: Personas Web




Personas Web: Daten- und Prozessvisualisierung http://personas.media.mit.edu

                                                                               75
Lösungsbeispiel 1.2.: Take this Lollipop




Take this Lollipop: Personalisierter Kurzfilm http://takethislollipop.com

                                                                            76
Lösungsbeispiel 1.3.: Smokescreen




Smokescreen Game

                                    77
Lösungsbeispiel 2.1.: Thunderbird/Lightning




Thunderbird-Erweiterung Lightning

                                              78
Lösungsbeispiel 2.2.: Wunderlist




Wunderlist

                                   79
Lösungsbeispiel 2.3.: Epic Win App

                                     Epic Win App




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

Weitere ähnliche Inhalte

Andere mochten auch

Digital Transformation - Play along or die
Digital Transformation - Play along or dieDigital Transformation - Play along or die
Digital Transformation - Play along or die
Stefan F. Dieffenbacher
 
Digital banking: Why are banks not performing as well as they could do?
Digital banking: Why are banks not performing as well as they could  do?Digital banking: Why are banks not performing as well as they could  do?
Digital banking: Why are banks not performing as well as they could do?
Stefan F. Dieffenbacher
 
Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...
Stefan F. Dieffenbacher
 
SXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UXSXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UX
Barkley
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
sumit singh
 
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT
 
Shopping Center Customer Experience and UX
Shopping Center Customer Experience and UXShopping Center Customer Experience and UX
Shopping Center Customer Experience and UX
Olde Lorenzen-Schmidt
 
Usability bei der Mainova AG
Usability bei der Mainova AGUsability bei der Mainova AG
Usability bei der Mainova AG
Connected-Blog
 
What Board Games can Teach Us about Designing Experiences
What Board Games can Teach Us about Designing ExperiencesWhat Board Games can Teach Us about Designing Experiences
What Board Games can Teach Us about Designing Experiences
Stephen Anderson
 
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Stefan F. Dieffenbacher
 

Andere mochten auch (10)

Digital Transformation - Play along or die
Digital Transformation - Play along or dieDigital Transformation - Play along or die
Digital Transformation - Play along or die
 
Digital banking: Why are banks not performing as well as they could do?
Digital banking: Why are banks not performing as well as they could  do?Digital banking: Why are banks not performing as well as they could  do?
Digital banking: Why are banks not performing as well as they could do?
 
Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...Digital Strategy: what it is, why it is needed & how it integrates with your ...
Digital Strategy: what it is, why it is needed & how it integrates with your ...
 
SXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UXSXSW 2016: Bridging the Gap Between CX + UX
SXSW 2016: Bridging the Gap Between CX + UX
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
UX STRAT Europe, Gianluca Brugnoli, “Transforming Financial Services Through ...
 
Shopping Center Customer Experience and UX
Shopping Center Customer Experience and UXShopping Center Customer Experience and UX
Shopping Center Customer Experience and UX
 
Usability bei der Mainova AG
Usability bei der Mainova AGUsability bei der Mainova AG
Usability bei der Mainova AG
 
What Board Games can Teach Us about Designing Experiences
What Board Games can Teach Us about Designing ExperiencesWhat Board Games can Teach Us about Designing Experiences
What Board Games can Teach Us about Designing Experiences
 
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
Keynote: "Digitale Transformation für Banken - mitspielen oder untergehen"
 

Ähnlich wie UX Design - Einführung (1. Sitzung)

Windows 8 Client - eine Vorschau
Windows 8 Client - eine VorschauWindows 8 Client - eine Vorschau
Windows 8 Client - eine Vorschau
Digicomp Academy AG
 
Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
 Ready or Not: No UI - the disappearance of the graphic user interface (Usabi... Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
Stefanie Kegel
 
Ready or not: No UI vom Verschwinden des Graphical User Interfaces
Ready or not: No UI vom Verschwinden des Graphical User InterfacesReady or not: No UI vom Verschwinden des Graphical User Interfaces
Ready or not: No UI vom Verschwinden des Graphical User Interfaces
The Geekettez – Design Studio and User Experience Consultancy
 
Human–Computer Interaction - Usability Engineering im Bildungskontext
Human–Computer Interaction - Usability Engineering im BildungskontextHuman–Computer Interaction - Usability Engineering im Bildungskontext
Human–Computer Interaction - Usability Engineering im Bildungskontext
L3T - Lehrbuch für Lehren und Lernen mit Technologie
 
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und FreiräumeGestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Tilman Zitzmann
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Webmontag MRN
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Peter Rozek
 
wissensarbeit20_lindner_20100205
wissensarbeit20_lindner_20100205wissensarbeit20_lindner_20100205
wissensarbeit20_lindner_20100205
Lindner Martin
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
Moritz Haarmann
 
Playful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. SitzungPlayful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. Sitzung
Marcus Haberkorn
 
Windows 8, Vortrag KVHS Harz am 29.11.2012
Windows 8, Vortrag KVHS Harz am 29.11.2012Windows 8, Vortrag KVHS Harz am 29.11.2012
Windows 8, Vortrag KVHS Harz am 29.11.2012
Joe Brandes
 
Digital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceDigital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User Experience
Jürg Stuker
 
BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.
.NET User Group Dresden
 
Geschichte der GUI.pdf
Geschichte der GUI.pdfGeschichte der GUI.pdf
Geschichte der GUI.pdf
FrankEsselbach
 
Interface Design – Best Practices
Interface Design – Best PracticesInterface Design – Best Practices
Interface Design – Best Practices
Stefan Nitzsche
 
Software-Ergonomie Tag1
Software-Ergonomie Tag1Software-Ergonomie Tag1
Software-Ergonomie Tag1
Marcel Zimmermann
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
Marcus Haberkorn
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
Ergosign GmbH
 
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
The Geekettez – Design Studio and User Experience Consultancy
 

Ähnlich wie UX Design - Einführung (1. Sitzung) (20)

Windows 8 Client - eine Vorschau
Windows 8 Client - eine VorschauWindows 8 Client - eine Vorschau
Windows 8 Client - eine Vorschau
 
Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
 Ready or Not: No UI - the disappearance of the graphic user interface (Usabi... Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
Ready or Not: No UI - the disappearance of the graphic user interface (Usabi...
 
Ready or not: No UI vom Verschwinden des Graphical User Interfaces
Ready or not: No UI vom Verschwinden des Graphical User InterfacesReady or not: No UI vom Verschwinden des Graphical User Interfaces
Ready or not: No UI vom Verschwinden des Graphical User Interfaces
 
Human–Computer Interaction - Usability Engineering im Bildungskontext
Human–Computer Interaction - Usability Engineering im BildungskontextHuman–Computer Interaction - Usability Engineering im Bildungskontext
Human–Computer Interaction - Usability Engineering im Bildungskontext
 
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und FreiräumeGestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
Gestaltete Interaktion von erweiterten Realitäten – Perspektive und Freiräume
 
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, NotizenWireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
Wireframes und Co.: Conceptual Design als elementarer Projektbaustein, Notizen
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Icons fürs Tablet
Icons fürs TabletIcons fürs Tablet
Icons fürs Tablet
 
wissensarbeit20_lindner_20100205
wissensarbeit20_lindner_20100205wissensarbeit20_lindner_20100205
wissensarbeit20_lindner_20100205
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
 
Playful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. SitzungPlayful & Gameful Design - 3. Sitzung
Playful & Gameful Design - 3. Sitzung
 
Windows 8, Vortrag KVHS Harz am 29.11.2012
Windows 8, Vortrag KVHS Harz am 29.11.2012Windows 8, Vortrag KVHS Harz am 29.11.2012
Windows 8, Vortrag KVHS Harz am 29.11.2012
 
Digital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User ExperienceDigital Banking: Simplicity and User Experience
Digital Banking: Simplicity and User Experience
 
BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.BUILD 2011 in Anaheim.
BUILD 2011 in Anaheim.
 
Geschichte der GUI.pdf
Geschichte der GUI.pdfGeschichte der GUI.pdf
Geschichte der GUI.pdf
 
Interface Design – Best Practices
Interface Design – Best PracticesInterface Design – Best Practices
Interface Design – Best Practices
 
Software-Ergonomie Tag1
Software-Ergonomie Tag1Software-Ergonomie Tag1
Software-Ergonomie Tag1
 
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
UX Design - Concept Maps, Flowcharts, Specs (3. Sitzung)
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
Softwarebasierte Barrieren im Designprozess einreissen. (UIG Frühjahrstagung ...
 

Mehr von Marcus Haberkorn

The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'
Marcus Haberkorn
 
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassenResonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Marcus Haberkorn
 
UX Design - Gamification Einführung
UX Design - Gamification EinführungUX Design - Gamification Einführung
UX Design - Gamification Einführung
Marcus Haberkorn
 
Transmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality GamesTransmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality Games
Marcus Haberkorn
 
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Marcus Haberkorn
 
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Marcus Haberkorn
 

Mehr von Marcus Haberkorn (6)

The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'The Making of 'Ewige Unruhe'
The Making of 'Ewige Unruhe'
 
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassenResonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
Resonanz im Social Web - Wie sich Interaktion & Partizipation optimieren lassen
 
UX Design - Gamification Einführung
UX Design - Gamification EinführungUX Design - Gamification Einführung
UX Design - Gamification Einführung
 
Transmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality GamesTransmedia Storytelling in Pervasive Games / Alternate Reality Games
Transmedia Storytelling in Pervasive Games / Alternate Reality Games
 
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
Hypermedia: Einführung Web 2.0 & Social Web (2. Sitzung)
 
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
Hypermedia: Einführung in das Lehrgebiet (1. Sitzung)
 

UX Design - Einführung (1. Sitzung)

  • 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
  • 7. Input: Lochkarten mit Stanzer vorbereiten (1960er) Lochkartengenerator 17
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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