tippen. klicken. gestikulieren

46
Tippen, Kicken, Gestikulieren Infantilisierung im Interaktionsdesign /v3 Matthias Müller-Prove, Dipl.-Inform. User Experience Principal, Oracle Fachbereich Informatik, Uni Hamburg, 26.4.2012

Upload: matthias-mueller-prove

Post on 12-May-2015

2.722 views

Category:

Design


0 download

DESCRIPTION

Mit den jüngsten Entwicklungen von mobilen Endgeräten und Spielekonsolen schließt sich in gewissem Sinne ein Kreis. Denn genau wie sich der Mensch von der Kleinkindphase (alles muss angefasst und ausprobiert werden) über die Kindheit (mit Malen und Schauen) hin zum Homo Sapiens (manchmal auch rational denkend) entwickelt, hat sich die Computer-Technik in den letzten 50 Jahren in umgekehrter Reihenfolge vom textbasierten Teletype, über die Graphischen Benutzungsschnittstellen hin zu maus- und fensterlosen Geräten à la Apple iPad und Kinect für Spiel und Unterhaltung gewandelt. Gesten und Finger-Ballett ersetzen das Klicken und Tippen, die bei GUIs und CLIs noch die Hauptinteraktionsmodalitäten waren. Der Vortrag stellt beide Entwicklungsstänge gegenüber und postuliert eine Gleichzeitigkeit der Phasen im Gegensatz zu dem sonst üblichen Begriff des Paradigmenshifts. Kolloquiumsvortrag am Fachbereich Informatik, Uni Hamburg 26.4.2012

TRANSCRIPT

Page 1: Tippen. Klicken. Gestikulieren

Tippen, Kicken, GestikulierenInfantilisierung im Interaktionsdesign /v3

Matthias Müller-Prove, Dipl.-Inform.User Experience Principal, Oracle

Fachbereich Informatik, Uni Hamburg, 26.4.2012

Page 2: Tippen. Klicken. Gestikulieren

These 1

Menschliche Entwicklung vom Baby zum Erwachsenen und die Evolution der Nutzungsschnittstellen erfolg(t)en in 3 Stufen.

Page 3: Tippen. Klicken. Gestikulieren

These 2

Die Stufen folgen nicht aufeinander, sie setzen nur nacheinander ein und überlagern sich wie ein Dreiklang.

Page 4: Tippen. Klicken. Gestikulieren

Jean Piaget 1896-1980 / Jerome Bruner *1915

Page 5: Tippen. Klicken. Gestikulieren

Bruner’s Mentality Theory

enactive mentalitiy1

Page 6: Tippen. Klicken. Gestikulieren

cc dulcelife http://ww

w.flickr.com

/photos/dulcelife/8505313/

kinesthetic/sensomotoric, enactive

Page 7: Tippen. Klicken. Gestikulieren

cc Squiggle http://www.flickr.com/photos/stephenr/2331677192/

preoperational: playing and building

Page 8: Tippen. Klicken. Gestikulieren

Bruner’s Mentality Theory

iconic mentality2

Page 9: Tippen. Klicken. Gestikulieren

operational/visual, iconiccc Minneapolis Institute of Arts

http://www.flickr.com/photos/minneapolisinstituteofarts/4926356727/

Page 10: Tippen. Klicken. Gestikulieren

Bruner’s Mentality Theory

symbolic mentality3

Page 11: Tippen. Klicken. Gestikulieren

formal, symboliccc

gai

l m ta

ng h

ttp://

ww

w.fl

ickr

.com

/pho

tos/

gailt

ang/

3252

5197

64/

Page 12: Tippen. Klicken. Gestikulieren

enactive iconic symbolic

Bruner’s Mentalities

1 1/2 4-8 12 yrs.

Page 13: Tippen. Klicken. Gestikulieren

Durch den Spiegel

Page 14: Tippen. Klicken. Gestikulieren

enactive iconic symbolic

                                 

Page 15: Tippen. Klicken. Gestikulieren

Command Line Interfaces

CLI3

Page 16: Tippen. Klicken. Gestikulieren

www.operating-system.orgsehr kryptisch, schlechte initiale Usability.Gut geeignet für Experten zum Scripten und Programmieren

Page 17: Tippen. Klicken. Gestikulieren

Graphical User Interfaces

Windows, Icons, Menus, Pointing Device & Desktop

GUIs2

Page 18: Tippen. Klicken. Gestikulieren

Ivan Sutherland *1938 - Sketchpad (1963)

Page 19: Tippen. Klicken. Gestikulieren

Timothy Johnsonein paar Jahre später.

Page 20: Tippen. Klicken. Gestikulieren

Ivan Sutherland’s PhD Thesis, 1963

Page 21: Tippen. Klicken. Gestikulieren

Use of light penInteractive line drawingsConstraints resolution engineObject-based computer aided design (CAD)

On a TX-2 computer at MIT Lincoln Lab69,632 words with 36 bits (~306 KByte)

Sketchpad

Page 22: Tippen. Klicken. Gestikulieren

Doug Engelbart *1925 NLS/Augment (1963-72)http://www.deepamehta.de/docs/talk.html

Page 23: Tippen. Klicken. Gestikulieren

Mouse (1963) and Chording Keyset

Page 24: Tippen. Klicken. Gestikulieren

Mouse (1963)Chording-KeysetWindows Interactive text editing and outlinerHypertextE-MailTime-SharingVideo Conferencing and CSCW2nd node of the ARPANet

NLS/Augment

Page 25: Tippen. Klicken. Gestikulieren

Alan Kay *1940 - Dynabook (concept 1972)http://en.wikipedia.org/wiki/File:Alan_Kay_and_the_prototype_of_Dynabook,_pt._5_(3010032738).jpg

Page 26: Tippen. Klicken. Gestikulieren

Doing with images makes symbols.Alan Kay, 1987

enactive iconic symbolic

Page 27: Tippen. Klicken. Gestikulieren
Page 28: Tippen. Klicken. Gestikulieren

CLI überlebt als Terminal-Fenster

Page 29: Tippen. Klicken. Gestikulieren
Page 30: Tippen. Klicken. Gestikulieren

Das Web hat auch sein CLI!

Page 31: Tippen. Klicken. Gestikulieren

Tangible and “Natural” User Interfaces

Physical objects combined with digital informationMulti-Touch & Gestures, Lots of sensors, Mobility

TUI & “NUI”1

Page 32: Tippen. Klicken. Gestikulieren

Reactable, U of Barcelona (2003)http://de.wikipedia.org/wiki/Reactable

Page 33: Tippen. Klicken. Gestikulieren

cc arteunporro http://www.flickr.com/photos/arteunporro/870265352/

Page 34: Tippen. Klicken. Gestikulieren
Page 35: Tippen. Klicken. Gestikulieren

Gravity and Touch at Liquid for iPad

Page 36: Tippen. Klicken. Gestikulieren

Gravitarium2 for iPad

Page 37: Tippen. Klicken. Gestikulieren

Gravitarium2 for iPad

Page 38: Tippen. Klicken. Gestikulieren

A personal dynamic medium…http://flickr.com/photos/prupert/68375339/

Page 39: Tippen. Klicken. Gestikulieren

…for children of all ages

Page 40: Tippen. Klicken. Gestikulieren

enactive iconic symbolic

                          CLI       GUI TUI

Page 41: Tippen. Klicken. Gestikulieren

Drei weitere Dreiklänge

Page 42: Tippen. Klicken. Gestikulieren

Historical Framework for…?

Page 43: Tippen. Klicken. Gestikulieren

Stammhirn/Kleinhirn

Limbische System Cortex/Neo-Cortex

Reptil Säuger Homo Sapiens

Reflexe Lernen Kognition

Piet Vroon, 1993

Page 44: Tippen. Klicken. Gestikulieren

human disposition

profession

example

visceral behavioral reflective

perceptually driven

expectation driven

intellectually driven

graphic design

usability brand/image

beautiful blue bottle used as

a vase

water in plastic bottle

Perrier table water

Emotional Design by Don Norman, 2004

Page 45: Tippen. Klicken. Gestikulieren

human disposition

profession

example

visceral behavioral reflective

perceptually driven

expectation driven

intellectually driven

graphic design

usability brand/image

beautiful blue bottle used as

a vase

water in plastic bottle

Perrier table water

Emotional Design by Don Norman, 2004

Page 46: Tippen. Klicken. Gestikulieren

cc by Steve Paine http://www.flickr.com/photos/umpcportal/4581962986/

Danke!

Matthias Müller-Prove | mprove.de/script/12/fbi/os.html