Design Space - hs-mannheim.deservices.informatik.hs-mannheim.de/~kohler/HDI/3-Design_space.pdf ·...

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


16

Topobo


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

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



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



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



60



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


63


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


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

67



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


70


71

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

72


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.

Design Space - hs-mannheim.deservices.informatik.hs-mannheim.de/~kohler/HDI/3-Design_space.pdf ·...

Documents

Transcript of Design Space - hs-mannheim.deservices.informatik.hs-mannheim.de/~kohler/HDI/3-Design_space.pdf ·...