test  

Design Space

Prof. Kirstin Kohler, Prof. Dr. Till Nagel

Human Data Interaction, WS 2017/18

Hochschule Mannheim

2

Heute

*  (The big picture – Strömungen in der Wissenschaft; die Entwicklung, Geschichte des Post-WIMP Interfaces )

*  Die Reichhaltigkeit der Interaktion

3

Lernziele

*  Den Gestaltungsspielraum für Post-WIMP Interfaces _  durch Klassifikationen/Taxonomien kennen lernen _  durch Beispielprojekte kennen lernen

4

Ubiquitous computing *  „Ubiquitous computing names the third wave in

computing, just now beginning. First were mainframes, each shared by lots of people. Now we are in the personal computing era, person and machine staring uneasily at each other across the desktop. Next comes ubiquitous computing, or the age of calm technology, when technology recedes into the background of our lives.“

*  „Machines that fit the human environment, instead of forcing humans to enter theirs“

"The Computer for the 21st Century" - Scientific American Special Issue on Communications, Computers, and Networks, September, 1991

Mark Weiser

5

Ubiquitous computing

Principles describing ubiquitous computing (nach Weiser): *  The purpose of a computer is to help you do something else. *  The best computer is a quiet, invisible servant. *  The more you can do by intuition the smarter you are; the computer

should extend your unconscious. *  Technology should create calm.

6

Tangible User Interfaces - TUI

„ TUIs will augment the real physical world by coupling digital information to everyday physical objects and environments ... Tangible User Interfaces which will change the world itself into an interface.“ „We see the locus of computation is now shifting from the desktop in two major directions:

i) onto our skins/bodies (wearable computers) ii) into the physical environments we inhabit. „

Published  in  the  Proceedings  of  CHI  '97,  March  22-­‐27,  1997,  Tangible  Bits:  Towards  Seamless  Interfaces  between  People,  Bits  and  Atoms,Hiroshi  Ishii  and  Brygg  Ullmer  

7

Die Idee hinter - Tangible Bits

Ishii: „ ... Humans have evolved a heightened ability to sense and manipulate the physical world, yet the GUI based on intangible pixels takes little advantage of this capacity. The TUI builds upon our dexterity by embodying digital information in physical space. TUIs expand the affordances of physical objects, surfaces, and spaces so they can support direct engagement with the digital world ....“

8

Tangible Bits

*  Schaffen eine Brücke zwischen „Cyberspace“ und physikalischer Umgebung, in dem digitale Information anpassbar („tangible“) wird : _  Interaktive Oberflächen: Transformation aller Oberflächen in der

architekturellen Umgebung (Wände, Tische, Türen, Fenster, ....) in aktive Oberflächen zwischen physikalische und virtueller Welt.

_  Verbindung von Bits und Atomen: Nahtloser Übergang zwischen angreifbaren Objekten (Büchern, Karten, etc.) und zugehöriger digitaler Information.

_  Umgebung als Medium: Verwendung von Medien wie Ton, Licht, Luftbewegungen und Wasserbewegungen als Interfaces im Hintergrund, die die periphere Wahrnehmung des Menschen ansprechen.

Published in the Proceedings of CHI '97, March 22-27, 1997, Tangible Bits: Towards Seamless Interfaces between People, Bits and Atoms,Hiroshi Ishii and Brygg Ullmer

THE TANGIBLE USER INTERFACE AND ITS EVOLUTION, h. Ishii, June 2008/Vol. 51, No. 6 COMMUNICATIONS OF THE ACM

10

Tangibles vs. Intangibles

Versionen von Daten/Information: *  Physikalische Repräsentationen von Informationen (Rep-T, T = tangible):

_  greifbare Version eines digitalen Datums *  Digitale Repräsentationen von Informationen (Rep-i, i = intangible) Kontrollmechanismen: *  zur interaktiven Manipulation von Rep-T und Rep-i (Controls):

11

Tangible User Interfaces

input   output   output  

physikalisch  digital  

Control  

RepräsentaConen  

Daten  

FunkConalität  

Daten-­‐repräsentaCon  

THE  TANGIBLE  USER  INTERFACE  AND  ITS  EVOLUTION,  h.  Ishii,  June  2008/Vol.  51,  No.  6  COMMUNICATIONS  OF  THE  ACM  

12

GUI versus TUI

AkCon   ReakCon  

Control  

RepräsentaConen  

Daten  

FunkConalität  

DatenrepräsentaCon  

digital  Control      

Daten  

FunkConalität  

Datenrep.  

AkCon   ReakCon  

physikalisch  

13

*  Das war 1997 !!!

14

Was erwartet uns in der Zukunf?

   Radical  Atoms:  Beyond  Tangible  Bits,  Toward  Transformable  Materials,  ACM  InteracCons  magazine,  Jan.  2012    

 

15

Post TUI Material Interface (MUI) Radical Atoms instead of Tagible Bits *  ... assuming a hypothetical generation of materials that can change form and appearance

dynamically, becoming as reconfigurable as pixels on a screen. Radical Atoms is a computationally transformable and reconfigurable material that is bidirectionally coupled with an underlying digital model (bits) so that dynamic changes of physical form can be reflected in digital states in real time, and vice versa.

*  Radical Atoms is the future material that can transform their shape, conform to constraints, and inform the users of their affordances. Radical Atoms is a vision for the future of human-material interaction, in which all digital information has a physical manifestation so that we can interact directly with it. We no longer think of designing the interface, but rather of the interface itself as material....

   Radical  Atoms:  Beyond  Tangible  Bits,  Toward  Transformable  Materials,  ACM  InteracCons  magazine,  Jan.  2012    

 

16

Topobo

   Radical  Atoms:  Beyond  Tangible  Bits,  Toward  Transformable  Materials,  ACM  InteracCons  magazine,  Jan.  2012    

 

17

Zukunftsvision oder schon Realität?

18

Microsoft Future Video 2019

Microsoft Office Labs - Vision 2019 Microsoft Corp

ProducCvity  Future  Vision  (2011)    

19

Skinput

Skinput: Appropriating the Body as an Input Surface

Harrison, C., Tan, D. Morris, D. 2010. Skinput: Appropriating the Body as an Input Surface. In Proceedings of the 28th Annual SIGCHI Conference on Human Factors in Computing Systems (Atlanta, Georgia, April 10 - 15, 2010). CHI '10. ACM, New York, NY. 453-462.

20

SixthSense

SixthSense – A Wearable Gestural Interface

Pranav Mistry - MIT Media Laboratory

Pattie Maes - MIT Media Laboratory

21

Existierende Produkte & Prototypen

22

Smartphone - Tabletts

Apple Produkten Steve Jobs - Apple

23

Inamo Restaurant Bar in London sports has touchscreen dining tables http://www.newlaunches.com/  

Pervasive Displays

25

Sifteos

26

Tiptoi

27

Osmo

https://www.playosmo.com/

28

Freehand 3D Interaction

Digits  Hand  Tracker:  Freehand  3D  Computer  InteracCon  Without  Gloves  //  Microso\  research  

29

Forcepad

h]p://video.golem.de/mobil/9013/flachere-­‐ultrabooks-­‐dank-­‐forcepad-­‐und-­‐thintouch.html:  Forcepad  von  SynapCc  (21.10.2012)  

30

3D Touch

31

Magic Finger

h]p://www.golem.de/news/magic-­‐finger-­‐jede-­‐oberflaeche-­‐wird-­‐zum-­‐eingabegeraet-­‐1210-­‐95236.html  

32

Multi-Touchfähiges Gewebe

*  A Multi-Touch Sensor Customizable with Scissors *  http://www.youtube.com/watch?v=wnTG_ZTYdVk

33

Ozobot

Ozobot.com

34

Planung von Manövern

35

36

Bit Planner http://www.creativeapplications.net/objects/lego-calendar-by-vitamins-design-syncs-with-google-calendar/

37

M-Blocks

38

Klassifikationen im Gestaltungsraum

39

Gestaltung von Post WIMP Interfaces

*  Reichhaltigkeit der Interaktion _  Atomare Interaktionen _  Proxemics _  Implizite vs. Explizite Interaktion _  Interaktion mit physikalischen Objekte

40

Reichhaltigkeit der Interaktion *  Keine Standardisierung *  Über 100 Patterns und Richtlinie *  Touch

–  Single-Touch –  Multi-Touch

•  Multi-finger (one hand) •  Multi-finger/-hands

(multiple hands, multiple fingers) –  Tangible Gesten

•  Free-Form Gesten •  Multimodal •  Sprache

41

Reichhaltigkeit der Interaktion

Google erhält Herz-Patent für eine einfachere Auswahl von Objekten

http://www.engadget.com/2013/10/15/google-gesture-patent-would-let-glass-wearers-heart-objects/

42

Reichhaltigkeit der Interaktion Durch das Senken und Anheben der Linse wird in einem ausgewählten Bereich eines Bildes hinein- bzw. herausgezoomt. Als eine mögliche Anwendung ist hier ein Stadtplan aufgeführt.

Durch beliebiges Neigen und Halten der Papierlinse können verschiedene Volumendatensätze erkundet werden, wie hier der MRT-Scan eines menschlichen Kopfes.

Spindler, M., Dachselt, R. (2009). PaperLense: Advanced Magic Lens Interaction Above the Tabletop. ITS ’09, November 23-25 2009

43

Gestaltung von Post WIMP Interfaces

*  Reichhaltigkeit der Interaktion _  Atomare Interaktionen _  Proxemics _  Implizite vs. Explizite Interaktion _  Interaktion mit physikalischen Objekte

44

Feinheiten der Interaktion

*  Abgeleitet von Microinteractions (Siehe: Microinteractions, Dan Saffer) _  Beispiel: Pull to Refresh

< Trigger < Rules < Feedback

*  Atomare Interaktionen _  Kleine (kleinsten) Interaktionsschritte. _  Events auf Betriebssystem Ebene

45

Atomare Interaktionen – Swipe-to-Give

Swipe-to-Give: Swipe in Richtung des Empfängers sendet Daten •  Atomare Interaktionen 1: Touch •  Atomare Interaktionen 2: Move •  Atomare Interaktionen 3: Release •  Atomare Interaktionen 4: Receive

46

Animationsprinzipien - Disney

*  Anticipation _  Zu Deutsch: Erwartung, Vorwegnahme _  Vermittelt dem Nutzer was geschehen wird _  Macht Animationen leichter verfolgbar _  Laut Frank Thomas (Disney), die wichtigste Entdeckung in der Animation _  Verleiht leblosen Gegenständen Leben _  Volumen sollte unverändert bleiben

47

Animationsprinzipien *  Timing / Natural Acceleration

_  Wenn gut gemacht: < Verleiht Objekten Masse und

Lebendigkeit _  Wenn schlecht gemacht:

< Wirkt mechanisch < Zieht ungewollt Aufmerksamkeit auf sich

*  Entrances and Exits _  Schnelles Eintreten und Verlassen des Bildschirms _  Veränderungen der Geschwindigkeit ziehen Aufmerksamkeit auf sich _  Bremsen bei Verlassen des Bildschirms signalisiert Position nahe des

Bildschirmrands *  Lift on Touch

_ 

48

Ablauf der Animationen - Senden

•  Flip Animation •  Ausgegrautes Abbild bleibt •  Rotation um 180° •  Bild zu Postkarte wechseln •  “Anheben des Bildes” (Lift on Touch) •  Drag & Drop

•  Bild folgt der Bewegung des Fingers in Y-Richtung •  Bewegt sich an Anfangsposition zurück wenn losgelassen

49

Ablauf der Animationen - Senden

*  Sendeanimation _  Stauchen des Bildes (Anticipation, Squash & Stretch) _  Ziehen des Bildes (Squash & Stretch) _  Schnelle Bewegung nach Norden (Natural Acceleration, Entrances & Exits) _  “Entgrauen” der Kopie

50

Ablauf der Animationen - Empfangen

*  Empfangsanimation _  Eintreten der Postkarte (Entrances & Exits) _  Overshoot

< Abbremsen bis zum Umschwungpunkt < Rückkehr zur gewünschten Position

*  Flip Animation wie zuvor *  Absenken des Bildes wie zuvor

53

Gestaltung von Post WIMP Interfaces

*  Reichhaltigkeit der Interaktion _  Atomare Interaktionen _  Proxemics _  Implizite vs. Explizite Interaktion _  Interaktion mit physikalischen Objekte

54

Proxemics

Edward T. Hall (the cultural anthropologist) „ the interrelated observations and theories of humans use of space as a specialized elaboration of culture“

55

Proxemics

*  Intemate Zone: Enge Beziehung, Umarmungen

*  Personal Space: Freunde und Familie, ...

*  Social Distance: Kollegen, Postbote, ...

*  Public Distance: Ansprache, Vortrag halten

56

Nach  Vogel  et  al.  aus    Greenberg,  S.,  Marquardt,  N.,  Ballendat,  T.,  Diaz-­‐Marino,  R.  and  Wang,  M.  Proxemic  interacCons:  the  new  ubicomp?.  interac(ons  18,  1  (2011),  42-­‐50    

Interaction Zones

57

Proxemic

Greenberg, S., Marquardt, N., Ballendat, T., Diaz-Marino, R. and Wang, M. Proxemic interactions: the new ubicomp?. interactions 18, 1 (2011), 42-50

58

Proxemic

Proxemic

Till Ballendat – LMU München Nicolai Marquardt – University of Calgary Saul Greenberg – University of Calgary

Proxemic Interaction: Designing for a Proximity and Orientation-Aware Environment

59

Gestaltung von Post WIMP Interfaces

*  Reichhaltigkeit der Interaktion _  Atomare Interaktionen _  Proxemics _  Implizite vs. Explizite Interaktion _  Interaktion mit physikalischen Objekte

60

Gestaltung von Post WIMP Interfaces

*  Reichhaltigkeit der Interaktion _  Atomare Interaktionen _  Proxemics _  Implizite vs. Explizite Interaktion _  Interaktion mit physikalischen Objekte

61

Implicit & Explicit Interactions

*  Zwei Dimensionen _  Aufmerksamkeit (Fokus, Kontrolle, Bewusstsein)

<  forground vs. background _  Initiative (durch den Nutzer oder das System angestoßen)

< reactive vs. proactive

*  Beispiel: _  Licht am Schalter anschalten: foreground & reactive _  Raum betreten und das Licht geht automatisch an : background & proactive

62

Implicit & Explicit Interactions

63

Implicit & Explicit Interactions

Choose  the  save  command  

Auto-­‐Save  is  set  to  „every  10  min“  

Auto-­‐Save  because  a  lot  of  changes  have  been  made  

Dialog  opens  to  remind  you  that  save  is  needed  

64

Beispiel - Wecker

2)  Clock  indicates  alarm  set  User  may  of  may  not  noKce  

3.)  Alarm  rings!  User  wakes  4)  User  presses  SNOOZE  

Alarm  turns  off  

5)  Clock  does  not  indicate  alarm  set  User  may  of  may  not  noKce  

1)  User  sets  alarm  clock    Alarm  clock  is  set  

65

Diskussion

*  Sie sitzen in einem Frühstücksrestaurant. Wie könnten Interaktionen aussehen, die dazu führen eine weitere Tasse Kaffee zu bekommen? Nennen Sie Varianten impliziter und expliziter Interaktionen.

*  Ihr Rechner benötigt von Zeit zu Zeit neue Updates. Welche unterschiedlichen Lösungen können in Ihrem Betriebssystem, Ihrer Back-up Lösung im Hinblick auf implizite und explizite Interaktion realisiert sein?

Ordnen Sie die Interaktionen in den Quadraten ein.

66

Implicit & Explicit Interactions

Ju,  W.,  &  Leifer,  L.  (2008).  The  design  of  implicit  interacCons:  Making  interacCve  systems  less  obnoxious.  Design  Issues,  24(3),  72-­‐84.  

67

Gestaltung von Post WIMP Interfaces

*  Reichhaltigkeit der Interaktion _  Atomare Interaktionen _  Proxemics _  Implizite vs. Explizite Interaktion _  Interaktion mit physikalischen Objekte

68

*  Offene Gestaltungsfrage: _  Was wird digital, was wird physikalisch? _  Wo liegen die Vorteile der einen oder anderen Repräsentationen? _  Systematische Funktionsallokation zwischen digitaler und physikalischen

Schnittstellenelementen wünschenswert!

Digitale vs. physikalische Objekte

69

Digitale vs. physikalische Objekte

70

Digitale vs. physikalische Objekte

71

Digitale vs. physikalische Objekte Zipper  hat  eine  FunkConalität,  kann  jedoch  mit  beliebig  vielen  digitalen  Objekten  gekoppelt  werden    

72

Digitale vs. physikalische Objekte

Kohärenz *  Klassifiziert die Kopplung zwischen digitaler und physikalischer Welt *  Hilfreich zur Gestaltung von Tangibles und den damit gekoppelten

digitalen Informationen *  Differenzieren entlang einer Skala zwischen sechs Arten von Kohärenz *  Beschreibt das Ausmaß innerhalb dessen die physikalische und digitale

Repräsentation als das gleiche wahr genommen werden. _  als verschiedene Objekte, die temporär verbunden sind _  als ein Objekt

73

Quelle:  Koleva,  B.,  Benford,  S.,  Ng,  K.  H.  &  Rodden,  T.  (2003).  A  Framework  for  Tangible  User  Interfaces.  In:  Workshop  Proceedings  on  Real  World  User  Interfaces,  Mobile  HCI  Conference  03.  Udine:  Springer,  S.  257-­‐264  

Maus und Joystick Family Planner Physical Buildings in MetaDesk

74

Zusammenfassung *  Gestaltung neuer Interaktionsformen bedeutet oftmals

_  Interaktion erschaffen, die Analogien zu Interaktion in der realen Welt aufgreifen. _  Es werden nicht nur existierende Interaktionskonzepte aus der physikalischen Welt

übernehmen, sondern auch neue Konzepträume geschaffen. _  Also: Die Vorteile der analogen Welt (Intuitivität von Interaktionen) mit den Vorteilen

der digitalen Welt vereinen (das physikalisch Unmögliche möglich machen) *  Mit den neuen Interaktionsformen vergrößert sich der Gestaltungsspielraum/ damit wächst

die Gestaltungsaufgabe <  Der Raum und Material erweitern den Gestaltungsspielraum <  Die Physikalität gewinnt an Bedeutung

75

Literatur/Quellen *  Post WIMP – Interfaces (Begriffe und Beispiele)

_  Ishii, H. (2008) The tangible user interface and its evolution. Hiroshi Ishii (pp. 32-36), Communications of the ACM - Organic user interfaces Volume 51 Issue 6, June 2008.

_  Ishii, H (2012) Radical Atoms: Beyond Tangible Bits, Toward Transformable Materials, ACM Interactions magazine, Jan. 2012

_  Projekte mit Beispielen für natürliche Interaktion <  Microsoft: http://channel9.msdn.com/Events/Build/2012/2-007 <  http://www.patrickbaudisch.com/projects/index.html <  Web-Seiten des MIT: Gruppen von P. Maes und H. Ishii

*  Reichhaltigkeit der Interaktion _  Gesten: www.gestureworks.com _  Forschungsprojektes FUN-NI: Fun for Natural Interaction – www.fun-ni.org _  S. Greenberg, N.Marquardt, Ti. Ballendat, R. Diaz-Marino, and M. Wang. Proxemic interactions: the new ubicomp?.

interactions18, 1 (2011), 42-50. _  Principles of UX in Motion: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-

manifesto-a87a4584ddc

76

Literatur *  Physical vs. Digital

_  Koleva, B., Benford, S., Ng, K. H. & Rodden, T. (2003). A Framework for Tangible User Interfaces. In: Workshop Proceedings on Real World User Interfaces, Mobile HCI Conference 03. Udine: Springer, S. 257-264.

*  Implicit Interactions _  Ju, W. (2015). The design of implicit interactions. Synthesis Lectures on Human-Centered Informatics, 8(2), 1-93.