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.