Este documento trata sobre la interacción natural con interfaces tangibles y multi-contacto. Primero introduce los conceptos de la computación ubicua y la interacción natural. Luego describe las superficies multi-contacto, sus tecnologías y cómo detectan los dedos y gestos. Finalmente, habla sobre las interfaces tangibles, su clasificación según Hiroshi Ishii y ejemplos como Sifteo y MediaBlocks. El objetivo es que la interacción sea más intuitiva al imitar objetos físicos.
4. Interacción natural
Ubicuidad
Transparencia
Centrarse en la tarea
en vez del ordenador.
Ubicuidad
Interacción todos sitios, y en
todo momento (anywhere,
anytime)
Transparencia
Interacción "calmada" [WEIS96]
Computación ubicua + aplicaciones
sensibles al contexto
6. Computación Ubicua (1989)
Manifesto
“Las tecnologías más profundas son
aquellas que desaparecen. Se imbrican
en el tejido de la vida diaria hasta que
son indistinguibles de ella. [WEIS91]
Carácterísticas
Procesadores baratos y de bajo costo.
Conectados entre si a través de la red
Aplicaciones ubicuas
Se desarrolla el primer sistema experimental de "ubi-comp"
[WEIS99]
Parctab system
9. Manipulación directa
[Shneiderman, 1983]
Objetos digitales se diseñan de manera que la interacción sea
análoga a como se manipulan los objetos físicos.
Usuario siente que controla directamente el objeto digital
Principios:
Representación continua de los objectos y acciones de interés.
Acciones físicas (ej. pulsar botón, seleccionar, arrastar…) en vez de comandos
Acciones reversibles con retroalimentación inmediata de los objetos de interes
Ejemplos:
Herramientas de diseño gráfico
WYSIWYG
10. To Win Over Users, Gadgets Have to Be Touchable
(New York Times, sept 1, 2010)
10
http://www.nytimes.com/2010/09/01/technology/01touch.html?_r=2
13. Hw: Tecnologías multi-contacto
● Existen dos configuraciones
principales
● Diffused Illumination (DI)
● Funciona por detección de
sombras
● Permite el uso de objetos
tangibles
● Frustrated Total Internal
Reflection (FTIR)
● Funcióna por presión
● Excelente detección de
dedos
15. Sesiones
dedos
Sesiones
dedos
Sw: Uno solo dedo
Seguimiento
trayectoria
Seguimiento
trayectoria
Posición y
acelareación
Posición y
acelareación
Historia
movimiento
Historia
movimiento
Física mejoradaFísica mejorada
Persistente
mientras aprieta
Persistente
mientras aprieta
TUIO Protocol - Semantic types of set messages
s sessionID, temporary object ID, int32
i classID (e.g. marker ID), int32
x, y, z position, float32, range 0...1
a, b, c angle, float32, range 0..2PI
X, Y ,Z movement vector (motion speed & direction), float32
A, B, C rotation vector (rotation speed & direction), float32
m motion acceleration, float32
r rotation acceleration, float32
P free parameter, type defined by OSC packet header
Extracted from: http://www.tuio.org/?specification
20. Más sobre gestos
GESTO ACCIÓN
Doble toque Menú circular
Tick Correcto
Dedo fijo y otro se mueve en esquina Hojear
Encerrar con el dedo Seleccionar
Cinco dedos que se cierran Borrar
¿? ¿?
● Mismo gestos distintas acciones. Ej. Separar para
agrandar y copiar
● Anclas especiales para realizar gestos. Ej. Hojear
● Usar los bordes de la superficie
● El reverso de las ventanas se puede emplear
21. Consideraciones diseño
• Se emplean las manos y los dedos
• Diseñar controles tamaños adecuado (1cm diámetro ó 1x1cm2)
• PPI (Pixels per Inch): medida de densidad. PPI=pixels/inch (se suele
utilizar la diagonal)
• 1 cm (0.4 inch)
• Nokia N800 4.1'', 800x480, PPI 225, 1cm => 90p
• Touchscreen 15'', 1024x768, PPI 85, 1cm => 34p
• Icerberg tips y adaptive targets
• Las manos pueden cubrir la pantalla
• Diestros vs. Zurdos
22. http://amilab.ii.uam.es/fling
Main Developer
MTUI Researcher
MTUI Researcher
MTUI Researcher
Head of Lab
Graphic Designer
Pablo.Llinas@uam.es
German.Montoro@uam.es
Manuel.GarciaHerranz@uam.es
Pablo.Haya@uam.es
Xavier.Alaman@uam.es
Gemma.DeCastro@uam.es
Descargars manuales, videos, fotos…
23. Resumen de FLING
Video FeedVideo Feed
Atomic EventsAtomic Events
Visual ApplicationVisual Application
Gesture
Interpretation
Gesture
Interpretation
24. FLING en detalle
Virtual
Working Area
Virtual
Working Area
Multiple Input
Devices with
Different
Protocols
Multiple Input
Devices with
Different
Protocols
Events
Captured by
Workspace
Listeners
Events
Captured by
Workspace
Listeners
Tree
Structured
Objects
Tree
Structured
Objects
Event Target
Search
Event Target
Search
FLING
Object Detail
FLING
Object Detail
Raw Event
Unification
Raw Event
Unification
Advanced
Gesture
Interpretation
Advanced
Gesture
Interpretation
Functions
Triggered by
Gestures
Functions
Triggered by
Gestures
32. Gesture Hero – Juego
experimental
● Descripción
● Aplicación para estudiar la manipulación en una mesa multi-
contacto usando gestos con las manos
● Se compone de 6 objetos dispuestos aleatoriamente que se
activan con un gesto asociado a cada uno
● El juego solicita en cada ronda la activación de uno de los
objetos al azar y el usuasio deberá usar el gesto correcto sobre el
objeto indicado
● El objetivo es activar el mayor número de objetos durante un
tiempo cronometrado (45 segundos)
● Los objetos visuales así como sus gestos asociados son una
colección típica de actuadores en aplicaciones multi-contacto 36
33. Gesture Hero – Juego
experimental
● Usuarios destino
● El juego es apto para cualquier tipo de usuario y no
requiere ninguna experiencia previa tanto informática
como con superficies multi-contacto
● Objetivos
● Analizar la dificultad que supone el juego a distintos tipos
de usuarios
● Determinar los gestos más rápidos y sencillos de realizar, y
los que presentan más complicaciones
37
34. Gesture Hero – Juego
experimental
● 17 sujetos (13 varones, 4 mujeres) entre 24 y 35 años, alto
porcentaje con estudios superiores, elevado uso de PC.
● Alta correlación entre experiencia de uso con tecnologías
multi-contacto y los gestos efectuados correctamente
● r(14) = 0,82; p < 0,001
● Buena media de gestos por minuto de los usuarios sin
experiencia, rondando los 30 gestos / minuto; gran
diferencia entre ambos grupos.
● t(14) = 4,57; p < 0,00
● Mejora positiva en usuarios sin experiencia
● t(14) = 2,26; p < 0,05
38
Experiencia Número de
Sujetos
Gestos /
Minuto
Desviación
típica
Fallos /
Minuto
Mejora
(gestos)
media / alta 4 40,00 4,00 0,33 -0,50
nula 12 30,22 6,42 1,11 4,17
35. Desafíos
● Desafío: Más modos de interacción con aplicaciones
● El programador se enfrenta a más decisiones
● ¿Para qué usar cada gesto?
● ¿Qué gestos usar?
● Desafío: Herramienta colaborativa que requiere
soporte colaborativo
● Compartir estado entre aplicaciones, sincronización
● Desafío: Proveer de herramientas de autor para
dominios específicos
39
37. Interfaces Tangibles
Definición y Características
http://www.youtube.com/watch?v=U6qMzb3kFnc
Interfaz Tangible de Usuario (TUI)
Es aquella en la que se interacciona con la información digital a través
del entorno físico.
Trata de aprovechar las capacidades de los seres humanos para percibir
y manipular su entorno.
La interacción resulta más natural porque las interfaces tratan de imitar
objetos o movimientos existentes.
Da forma física a la información digital: representación y control.
Ej. Bloques en planificación de edificios vs. ratón del ordenador
38. Interfaces Tangibles
Hiro Ishii
Aumentan el mundo físico integrando información
digital en objetos de la vida cotidiana
"bridge the gap between bits and atoms" [Ishii, 97]
1. Superficies interactivas
2. Acoplar información digital en objetos físicos:
paredes, papel, utensilios, perchas…
40. Interfaces Tangibles
Características
Emparejamiento físico entre:
objetos físicos en vez de con entidades abstractas
especificos y especializados
Explotan el parecido físico
sugieren y guían la interacción
Interacción distribuida
Interacción a través de varios objetos
Interacción diseminada en el espacio
41. Clasificación
Hiroshi Ishii (MIT), fue quien estableció
el nombre de Interfaces Tangible
(1997) y ofreció una clasificación
(2008):
Telepresencia Tangible.
Tangibles con memoria Cinética.
Montaje Constructivo.
Fichas y Restricciones
Superficies de Interacción.
TUI plásticas continuas.
Objetos aumentados cotidianos.
Medios Ambientales.
42. Su objetivo es actuar como dispositivos de comunicación
interpersonal a través de una interacción háptica
Clasificación
Telepresencia
LumiTouch [2001] TouchCom [2002]
43. Clasificación
Tangibles con Memoria Cinética
Son interfaces en las que la entrada y la salida son
coincidentes y utilizan el movimiento y la cinética.
Usos educativos.
CurlyBot [2000]
Topobo [2004]
44. Clasificación
Montaje Constructivo
Se inspiran en los juegos de construcción.
La relación entre las piezas o su cinética sirven
para manipular la información digital.
AlgoBlock [1993]
Sifttables [2007]
http://sifteo.com/
45. Clasificación
Fichas y Restricciones
Las fichas representan información digital u operaciones mientras
que son las restricciones quienes limitan como se puede
manejar dicha información.
MediaBlocks (1998)
DataTiles (2001)
51. Diseño
de una interfaz tangible
Diseñar una interfaz tangible capaz de
gestionar un contestador
automático:
• Ver número de mensajes
• Llamar automáticamente a la persona que dejo el
mensaje
• Reproducir un mensaje
• Borrar un mensaje
• Categorizar mensajes
55. Variables físicas
Variable física Variable
Configuración
espacial
Localización (relativa a otros objetos o dentro del espacio)
Orientación (relativa a otros objetos o dentro del espacio)
Atributos
visuales
Tamaño (alto, ancho, fondo, volumen)
Forma (estructura, simetría, curvatura…)
Color (brillo, contraste, saturación)
Aumentado (anotaciones)
Atributos
táctiles
Material (suavidad, temperatura)
Textura (direccionalidad, densidad)
Masa
Deformabilidad (elasticidad, plasticidad, viscosidad)
Configuración
mecánica
Resistencia (torsión, compresión, corte, dobleces, tensión)
56. Usabilidad
Variable física Variable
Enraizamiento
(rootedness)
Hasta que punto las actividades requieren baja resistencia
a cambios en la localización de los objetos
Permanencia
(permanence)
Hasta que punto las actividades requieren preservar la
estructura física para una inspección posterior
Inestabilidad
(shakiness)
Hasta que punto las actividades requieren protección
contra la dificultad de revertir cambios en el estado físico
Parecido
(purposeful
affordances)
Hasta que punto las actividades requieren que las
posibilidades visibles del objeto puedan ser
computacionalmente interpretadas
Voluminosidad
(Bulkiness)
Hasta que punto las actividades requieren una
representación espacial que se extienda a las tres
dimensiones
57. Usabilidad
Variable física Variable
Correspondencia estructural
(structural correspondence)
Hasta que punto las actividades requieren
que las estructuras físicas y digitales se
parezcan
Juxtamodalidad
(juxtamodality)
Hasta que punto las actividades requieren
desacoplar observación y manipulación
Aumentación oculta
(hidden augmentation)
Hasta que punto las actividades requieren
una aumentación digital que físicamente es
obvia.
Rigidez
(rigidity)
Hasta que punto las actividades requieren
una baja resistencia a los cambios en la
configuración física de los objetos.
Dificultad de uso
(Unwieldy operations)
Hasta que punto las actividades requieren
bajo niveles de dificultad en cuanto a
manipulación
58. Correspondencia con
acciones
Correspondencia espacial: ¿Cómo se interpreta
computacionalmente la configuración física de los objetos?
Correspondencia acciones: ¿Cómo las acciones físicas producen
efectos digitales en términos de localización, y similitud?
Correspondencia atributos: ¿Cómo las propiedades físicas de los
objetos se relación con atributos de la información digital, en
términos de ajuste, multiplicidad, y persistencia de la asociación?
Correspondencia temporal: ¿Cómo la especificaciones físicas del
comportamiento en un momento dado conllevan un
comportamiento digital en un momento después?
59. Visualizadores periféricos
(PD)
Aporta consciencia con la mínima atención
Separados de la tarea principal
Información periférica
Permiten percibir varias fuentes de información
manteniendo un entorno no intrusivo
60. Ejemplos
Actividad remota
Guitarra social
Sensor de audio
Sensor de movimiento
"Conciencia remota"
Información de Autobuses
Bus Mobile
Bus LED
Estado del Messenger
IM Picture FrameSocial Guitar
Bus LED BusMobile
Orb showing remote
activity
http://taramatthews.org/proj
ects/ptk.html
61. Interacción sutil
Tecnologías de comunicación
La mayor parte de ellas fuerzan a los usuarios a gastar su
concentración
Llamadas telefónicas, IM, corree-e…
En cambio SMS:
Provee un canal de comunicación que redunda en una
comunicación basada en el contexto.
Interacción sutil
Interacción empática basada en mensajes simples que disparan
asociaciones basadas en el contexto.
“more is less”.
Balance entre información explícita e implícita
65. Conclusiones
Mark Weiser:
“Las tecnologías más profundas son aquellas que desaparecen.
Se tejen a ellas mismas en el tejido de la vida cotidiana hasta
que no pueden distinguirse de ella.”
“Las máquinas que se ajusten al entorno humano en lugar de
forzar a entrar en el suyo harán que el usar una computadora
sea tan agradable como un paseo por el bosque.
Hinweis der Redaktion
* Weiser + Xerox + finales de los 80.
* Las aplicaciones ubicuas deberían cumplir:
* Ubicuidad -&gt; anywhere, anytime
*Entornos inteligentes. Capaces de adquirir información de forma autónoma y adaptarse a las necesidades de sus ocupantes.
* Transparencia -&gt; Interacción como si de un humano se tratara. La transparencia precisa proactividad de forma que se pueda liberar la atención del usuario cuando no se precise -&gt; sensible contexto, circunstancias que rodean a una persona. -&gt; El desarrollo de aplicaciones sensibles al contexto es un paso hacia una ubicomp ideal.
* Ubicuidad estamos cerca, aplicaciones sensibles al contexto no.
Interacción implícita, multimodal
ParcTab: The tab location-based file browser shows how context can be used to filter information. Instead of presenting the complete file system hierarchy, it shows only files whose information is relevant to the particular room it is in. Such a mechanism can be used to provide a guided tour for a visitor or to provide information that is relevant to a location, such as the booking procedure associated with a conference room.
EXPLOTA EL CONOCIMIENTO DEL USUARIO SOBRE COMO SE MUEVE Y MANIPULA EL MUNDO FISICO
LOS OBJETOS VIRTUALES SE MANIPULAN MOVIENDOLOS, SELECCIONANDOLOS, ARRASTANDOLOS, ABRIENDOLOS, CERRANDOLOS
Tagged physical objects (e.g., bricks, blocks) that are manipulated in a physical world (e.g., placed on a surface) can result in other physical and digital events
EJEMPLOS
Pintar en el PAINT.
PAPELERA DE RECICLAJE
PRINCIPIOS: EJEMPLO ARRASTAR A LA PAPELERA
COPIAR FICHERO QUE RESPONDE A UN PATRÓN MAS LENTOS EN GENERAL
Ventajas:
Novices can learn the basic functionality quickly
Experienced users can work extremely rapidly to carry out a wide range of tasks, even defining new functions
Intermittent users can retain operational concepts over time
Error messages rarely needed
Users can immediately see if their actions are furthering their goals and if not do something else
Users experience less anxiety
Users gain confidence and mastery and feel in control
Desventajas:
Some people take the metaphor of direct manipulation too literally
Not all tasks can be described by objects and not all actions can be done directly
Some tasks are better achieved through delegating rather than manipulating
e.g., spell checking
Moving a mouse around the screen can be slower than pressing function keys to do same actions
Explotar la manipulación directa.
Habilitan un nuevo modo de interacción con interfaces gráficas
Contacto directo con elementos visuales
Uso de gestos intuitivos aplicables a objetos reales
Otros métodos de interaccionar con el sistema
Hacer uso de nuestros sentidos
… leads into the notion of tangible user interfaces …
Bits meaning the virtual world and atoms the physical world
Looking at history
The material reality of cyberspace is eluded in the delusion of virtual reality. The Live Wire is a 3D, real-time network traffic indicator. It is actually a material manifestation of cyberspace. Plugging into a local area network, it wiggles proportionally to the amount of traffic on the net. With each data package it convulses and sets up standing waves.It is placed in the spectacularly banal office environment of the glamorous Xerox Park Computer Science Lab, the place where WYSIWYG, Macintosh interface, ethernet and many other things were invented - essentially the birthplace of personal computing as we know it.
CINTURON PARA ENVIAR HUG
BROCHA PARA PINTAR
The Lumitouch system consists of a pair of interactive picture frames. When one user touches her picture frame, the other picture frame lights up. This touch is translated to light over an Internet connection. We introduce a semi-ambient display that can transition seamlessly from periphery to foreground in addition to communicating emotional content. In addition to enhancing the communication between loved ones, people can use LumiTouch to develop a personal emotional language. Based upon prior work on telepresence and tangible interfaces, LumiTouch explores emotional communication in tangible form. This paper describes the components, interactions, implementation and design approach of the LumiTouch system.
The mediaBlocks project is a tangible user interface based upon small, electronically tagged wooden blocks. The blocks serve as physical icons (&quot;phicons&quot;) for the containment, transport, and manipulation of online media. mediaBlocks interface with media input and output devices such as video cameras and projectors, allowing digital media to be rapidly &quot;copied&quot; from a media source and &quot;pasted&quot; into a media display. mediaBlocks are also compatible with traditional GUIs, providing seamless gateways between tangible and graphical interfaces. Finally, mediaBlocks act as physical &quot;controls&quot; in tangible interfaces for tasks such as sequencing collections of media elements
The metaDESK is our first platform for exploring the design of tangible user interfaces. The metaDESK integrates multiple 2D and 3D graphic displays with an assortment of physical objects and instruments, sensed by an array of optical, mechanical, and electromagnetic field sensors. The metaDESK &quot;brings to life&quot; these physical objects and instruments as tangible interfaces to a range of graphically-intensive applications.
Emerging frameworks for tangible user interfaces. B. Ullmer H. Ishii IBM SYSTEM SJOURNAL, VOL 39, NOS 3&4, 2000
Replace the “view” notion with physical representations (abbreviated “rep-p”) for the artifacts constituting the physically embodied elements of tangible interfaces, and with digital representations (“rep-d”) for the computationally mediated components of tangible interfaces without embodied physical form (e.g., video projection and audio).
Where the MVC model of Figure 2A illustrates the GUI’s distinction between graphical representation and control, MCRpd highlights the TUI’s integration of physical representation and control. This integration is present not only at a conceptual level, but also in physical point of fact—TUI artifacts (or “tangibles” physically embody both the control pathway and a central representational (information-bearing) aspect of the interface.)
coupling of physical representations to underlying digital information and computational models. Urp example, a range of digital couplings are possible, such as the coupling of data to the building models, operations to the wind tool, and property modifiers to the material wand.
Physical representations embody mechanisms for interactive control (control). The physical representations of TUIs serve simultaneously as interactive physical controls.
Physical representations are perceptually coupled to actively mediated digital representations (rep-d).
Rootedness: For example, disaster response activities, such as the flood management supported by the MapTable (Reitmayr et al., 2005), may necessarily be situated in a fixed location such as a control centre. However, activities such as the media management supported by Media- Blocks (Ullmer et al., 1998) may require greater physical portability.
Permanence: For example, tangible formulations of database queries, such as Ullmer ’s (2002) tangible query interface, might be kept for later use or reuse, but in turn such representations may need lower rootedness[viscosity] in order to be transported to archival locations.
Shakiness: For example, physically-creative activities such as the landscape sculpting of Illuminating Clay (Piper et al., 2002) may require a safeguarding of the physical creation, but storage problems can occur if such creations also require high levels of permanence[visibility] &lt;TC&gt;
Purposeful affordances: For example, activities based on tangible communication, such as the Lumen shape displays (Poupyrev et al., 2004), may require the majority of visible action possibilities to be inter- preted symbolically, but this could also increase shakiness[error proneness] &lt;TC&gt; if these actions are easy to perform accidentally.
Bulkiness: Tangible elements for media access, such as the MediaBlocks (Ullmer et al., 1998), do not need to extend far in three dimensions because physical composition is not required for meaning creation. However, the resulting interface may not exhibit the same level of purposeful affordances[role expressiveness] &lt;TC&gt; as interfaces in which tangibles are visibly de- signed to work together.
Structural correspondence: For example, a tangible interface used to visualise the forces within physical structures, such as Senspectra (LeClerc et al., 2007), may benefit from coincident physical and digital representations, but such structures also exhibit more bulkiness[diffuseness] &lt;TC&gt; than interfaces based on independently meaningful elements.
Juxtamodality: For example, activities in which localised actions have more globally-observable ef- fects may require eyes-free operation, such as the physical tools used to adjust the simulated time of day and wind direction in the Urp interface for urban planning (Underkoffler and Ishii, 1999). However, such approaches result in lower structural correspondence[closeness of mapping] &lt;TC&gt; since physical and digital representations are not coincident.
Hidden augmentation:For example, a clearly augmented TUI may improve its legibility to novices, such as Car- vey et al.’s (2006) Rubber Shark as User Interface based on weight indexing with elec- tronic scales, but such legibility is difficult to achieve in interfaces that use a high degree of juxtamodality[juxtaposition] &lt;TC&gt;
Rigidity: For example, speed-critical activities such as musical improvisation on the reacTable (Jordà et al., 2007) may require low resistance to physical reconfiguration, but this may require an increase in hidden augmentation[hidden dependencies] &lt;TC&gt; relative to interfaces whose workings are physically explicit (such as using physical connection rather than perceptual line-up).
Network Surface
Common surface augmented with conductive material to create two-dimensional network medium
Connectors
Pushpin-like physical connector for socket-less attachment of objects
Pin&Play Objects
any type of device/object with embedded computing, mounted onto connector
Network:
“Pin&Play” behaviour: discovery of objects when they become attached
Pin&Play Surface
Corkboard augmented with two conductive sheets
Ground layer on top, data/power layer hidden, cork as insulator
Low cost, off-the-shelf,deployable at large-scale
Pin&Play Connectors
Simple connector board with pushpin for two separate connection points
Steve Mann (born in Hamilton, Ontario),[1] is a tenured professor at the Department of Electrical and Computer Engineering at the University of Toronto.
While at MIT he was one of the founding members of the Wearable Computers group in the Media Lab.[3
Glasses capture audio/video that are displayed like on a monitor screen to the wearer
Wearer interacts with computer through voice commands
The PTK enables the creation of a whole range of displays that manage the attention they attract from users. For example, we can represent remote activity on an Ambient Orb, IM status on a physical picture frame, remote audio on a physical guitar, bus schedules with LEDs or moving, physical tokens.
glanceable
dynamically manage attention attracted using abstraction, notification levels, and transitions
can be created in only a few lines of code because of the PTK’s extensive library of input, output, and attention management components
Simplified display design and code re-use: several apps re-use audio and video input (orbs, guitar, ticker), two use the same bus input