{"id":15186,"date":"2020-12-15T12:36:18","date_gmt":"2020-12-15T10:36:18","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/interaccio-tangible\/"},"modified":"2021-02-09T16:30:10","modified_gmt":"2021-02-09T14:30:10","slug":"interaccion-tangible","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/interaccion-tangible\/","title":{"rendered":"Interacci\u00f3n tangible"},"content":{"rendered":"<h2>Introducci\u00f3n<\/h2>\n<p>La interacci\u00f3n tangible es un t\u00e9rmino paraguas que abarca sistemas digitales basados en:<\/p>\n<ul>\n<li>interacci\u00f3n con todo el cuerpo<\/li>\n<li>manipulaci\u00f3n tangible<\/li>\n<li>representaci\u00f3n f\u00edsica de los datos digitales<\/li>\n<li>integraci\u00f3n de la interfaz en espacios reales y aumento digital de los espacios f\u00edsicos<\/li>\n<\/ul>\n<p>En la interacci\u00f3n tangible, el mundo digital no se observa mediante una \u00abventana\u00bb, como puede ser el monitor o la pantalla de un dispositivo m\u00f3vil, sino que est\u00e1 mezclado con la realidad.<\/p>\n<p>Un ejemplo paradigm\u00e1tico de interacci\u00f3n tangible es la <em>marble answering machine<\/em>, un contestador autom\u00e1tico basado en canicas, ideado por Durrell Bishop en 1992.<\/p>\n<p>Este contestador autom\u00e1tico utiliza canicas como representaciones de los mensajes. Con cada mensaje nuevo aparece una canica que el usuario puede coger y situar en una muesca del dispositivo para escuchar el mensaje. Si el usuario quiere borrarlo introduce la canica por un agujero del dispositivo, mientras que si lo quiere guardar se puede dejar donde estaba o en otro sitio que considere oportuno.<\/p>\n<p><iframe title=\"Durrell Bishop Marble Answer Machine\" src=\"https:\/\/player.vimeo.com\/video\/19930744?dnt=1&amp;app_id=122963\" width=\"500\" height=\"380\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p style=\"font-size: 17px; line-height: 17px;\">V\u00eddeo demostrativo de la <em>marble answering machine<\/em> producido por Luckybite (Durrell Bishop y Tom Hulbert).<br \/>\nFuente: <a href=\"https:\/\/vimeo.com\/19930744\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vimeo.com\/19930744<\/a>.<\/p>\n<h2>Marco de trabajo<\/h2>\n<p>Con el objetivo de proporcionar conceptos y perspectivas para poder reflexionar sobre varios aspectos de la interacci\u00f3n tangible, en especial aquellos m\u00e1s sociales y de colaboraci\u00f3n, los investigadores en HCI, Eva Hornecker y Jacob Buur, propusieron un marco de trabajo basado en cuatro puntos:<\/p>\n<h3>Manipulaci\u00f3n tangible<\/h3>\n<p>La manipulaci\u00f3n tangible hace referencia a c\u00f3mo podemos operar f\u00edsicamente con las representaciones materiales con cualidades t\u00e1ctiles.<\/p>\n<p>Siguiendo con el ejemplo de la <em>marble answering machine<\/em>, en una hipot\u00e9tica <em>Graphical user interface<\/em> (GUI) de un contestador autom\u00e1tico, para manipular un mensaje identificar\u00edamos tres elementos distintos:<\/p>\n<ul>\n<li>El objeto de inter\u00e9s, que ser\u00eda el propio mensaje.<\/li>\n<li>La interfaz o el conjunto de representaciones gr\u00e1ficas (iconos, men\u00fas, barras, etc.), que describen y nos permiten interactuar con el mensaje.<\/li>\n<li>El dispositivo de interacci\u00f3n, que ser\u00edan el rat\u00f3n y el monitor en el caso de estar usando un ordenador de escritorio.<\/li>\n<\/ul>\n<p>En una interacci\u00f3n tangible, el objeto de inter\u00e9s, su interfaz y el dispositivo de interacci\u00f3n pasan a ser el mismo objeto \u2014la canica\u2014, que podemos coger, mover, levantar y definitivamente manipular a nuestro antojo sin intermediarios.<\/p>\n<div id=\"attachment_12301\" style=\"width: 575px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12301\" loading=\"lazy\" class=\"my-image wp-image-12301\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp32-1024x782-1.jpg\" alt=\"\" width=\"565\" height=\"432\" \/><p id=\"caption-attachment-12301\" class=\"wp-caption-text\">Los mensajes del contestador son representaciones materiales manipulables de forma f\u00edsica. Fotograma del v\u00eddeo demostrativo de la <em>marble answering machine<\/em>. <br \/>Fuente: <a href=\"https:\/\/vimeo.com\/19930744\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vimeo.com\/19930744<\/a>.<\/p><\/div>\n<h3>Interacci\u00f3n espacial<\/h3>\n<p>La interacci\u00f3n espacial hace referencia al hecho de que la interacci\u00f3n ocurre en el espacio real, esto implica que esta ha de ser realizada mediante el movimiento corporal del usuario en el espacio aprovechando las capacidades espaciales naturales de los humanos.<\/p>\n<p>As\u00ed, en el ejemplo del contestador autom\u00e1tico, un usuario no debe utilizar abstracciones como las carpetas de un sistema de ficheros para organizar los mensajes de voz, sino que puede ordenarlos f\u00edsicamente a su antojo mediante objetos cotidianos tangibles.<\/p>\n<div id=\"attachment_12299\" style=\"width: 581px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12299\" loading=\"lazy\" class=\"my-image wp-image-12299\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp33-1024x780-1.jpg\" alt=\"\" width=\"571\" height=\"435\" \/><p id=\"caption-attachment-12299\" class=\"wp-caption-text\">El usuario organiza espacialmente los mensajes situ\u00e1ndolos en platos con el nombre del destinatario. Fotograma del v\u00eddeo demostrativo de la marble answering machine. <br \/>Fuente: <a href=\"https:\/\/vimeo.com\/19930744\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vimeo.com\/19930744<\/a>.<\/p><\/div>\n<h3>Moderaci\u00f3n material<\/h3>\n<p>El uso del espacio f\u00edsico-digital define una estructura que facilita, proh\u00edbe o dificulta algunas acciones, por lo que permite, dirige y limita el comportamiento de los usuarios (individualmente y en conjunto).<\/p>\n<p>As\u00ed, el agujero \u00fanico del contestador autom\u00e1tico para reintroducir las canicas-mensajes dirige el comportamiento, pero a la vez lo limita, puesto que impide que el usuario saque una canica del agujero y, por lo tanto, recupere un mensaje borrado.<\/p>\n<div id=\"attachment_12297\" style=\"width: 583px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12297\" loading=\"lazy\" class=\"my-image wp-image-12297\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp34-1024x779-1.jpg\" alt=\"\" width=\"573\" height=\"436\" \/><p id=\"caption-attachment-12297\" class=\"wp-caption-text\">La propia restricci\u00f3n material indica al usuario que no podr\u00e1 sacar la canica del agujero una vez que la introduzca. Fotograma del v\u00eddeo demostrativo de la marble answering machine. <br \/>Fuente: <a href=\"https:\/\/vimeo.com\/19930744\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vimeo.com\/19930744<\/a>.<\/p><\/div>\n<p>Esta moderaci\u00f3n material puede tambi\u00e9n contribuir a que varios usuarios interact\u00faen a la vez con el producto interactivo, situaci\u00f3n que, en otros entornos, como en un dispositivo m\u00f3vil o un ordenador, suele ser mucho m\u00e1s dif\u00edcil.<\/p>\n<h3>Representaci\u00f3n expresiva<\/h3>\n<p>La representaci\u00f3n expresiva hace referencia a la capacidad expresiva y legibilidad de las representaciones materiales que se utilizan en el sistema interactivo.<\/p>\n<p>Tanto si las representaciones son \u00fanicamente f\u00edsicas como si son h\u00edbridas (combinando elementos materiales con proyecciones digitales), deben tener significado y contribuir a que los usuarios piensen a trav\u00e9s de ellas.<\/p>\n<p>En el ejemplo del contestador, el n\u00famero de canicas representa el n\u00famero de mensajes, lo que permite que el usuario obtenga esta informaci\u00f3n sin que deba ser expresada de otra forma.<\/p>\n<div id=\"attachment_12295\" style=\"width: 604px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12295\" loading=\"lazy\" class=\"my-image wp-image-12295\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp35-1024x779-1.jpg\" alt=\"\" width=\"594\" height=\"452\" \/><p id=\"caption-attachment-12295\" class=\"wp-caption-text\">La expresividad de las canicas es evidente: no hay canicas, por lo tanto, no hay mensajes. Fotograma del v\u00eddeo demostrativo de la marble answering machine. <br \/>Fuente: <a href=\"https:\/\/vimeo.com\/19930744\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vimeo.com\/19930744<\/a>.<\/p><\/div>\n<p>Esta expresividad no se debe entender \u00fanicamente de forma est\u00e1tica. La interacci\u00f3n o manipulaci\u00f3n de las representaciones materiales debe ser tambi\u00e9n expresiva y no romper las met\u00e1foras que pudieran existir. As\u00ed, como las canicas son la materializaci\u00f3n de los mensajes, si el usuario esconde una canica, debe tener la certeza de que nadie m\u00e1s podr\u00e1 escuchar el mensaje; o si la pierde, lamentablemente, el mensaje no podr\u00e1 ser escuchado jam\u00e1s.<\/p>\n<h2>Otros ejemplos<\/h2>\n<h3><em>Reactable<\/em><\/h3>\n<p>La <a href=\"http:\/\/reactable.com\" target=\"_blank\" rel=\"noopener noreferrer\"><em>Reactable<\/em><\/a> es un instrumento musical desarrollado por el <a href=\"https:\/\/www.upf.edu\/web\/mtg\" target=\"_blank\" rel=\"noopener noreferrer\">Music Technology Group<\/a> de la Universitat Pompeu Fabra.<\/p>\n<p>Consiste en un tablero en el que se pueden situar objetos f\u00edsicos predeterminados que, al ser movidos y relacionados entre s\u00ed, generan distintos sonidos.<\/p>\n<p><iframe title=\"Reactable Sessions - Matt Robertson\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/jtjNU0Fs3og?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p style=\"font-size: 17px; line-height: 17px;\">V\u00eddeo de <em>Reactable<\/em> con una sesi\u00f3n del m\u00fasico Matt Robertson.<br \/>\nFuente: <a href=\"https:\/\/www.youtube.com\/watch?v=jtjNU0Fs3og\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.youtube.com\/watch?v=jtjNU0Fs3og<\/a>.<\/p>\n<p>El dise\u00f1o de la <em>Reactable<\/em> como un espacio de trabajo f\u00edsico facilita que sean varios los m\u00fasicos que sit\u00faen y manipulen las representaciones materiales y contribuyan as\u00ed a la composici\u00f3n colaborativa.<\/p>\n<div id=\"attachment_12293\" style=\"width: 657px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-12293\" loading=\"lazy\" class=\"my-image wp-image-12293\" src=\"\/wp-content\/uploads\/2020\/12\/26414_amp36-1024x686-1.jpg\" alt=\"\" width=\"647\" height=\"433\" \/><p id=\"caption-attachment-12293\" class=\"wp-caption-text\">Foto de Daniel Williams licenciada bajo CC BY-NC-SA 2.0. <br \/>Fuente: <a href=\"https:\/\/www.flickr.com\/photos\/84466661@N00\/539568298\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.flickr.com\/photos\/84466661@N00\/539568298<\/a> y <a href=\"https:\/\/www.flickr.com\/photos\/84466661@N00\/539568298\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/creativecommons.org\/licenses\/by-nc-sa\/2.0\/<\/a>.<\/p><\/div>\n<h3>Dynamicland<\/h3>\n<p>Un ambicioso proyecto en el \u00e1mbito de la interacci\u00f3n tangible es el laboratorio de investigaci\u00f3n <a href=\"https:\/\/dynamicland.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dynamicland<\/a>, fundado por el dise\u00f1ador de interfaces Bret Victor, que aspira a crear un \u00abmedio humano computacional en el mundo real para permitir el aprendizaje profundo\u00bb.<\/p>\n<p>Los prototipos de Dynamicland proyectan informaci\u00f3n digital en elementos f\u00edsicos como papeles y los convierte en artefactos virtuales que los usuarios pueden manipular para experimentar y observar las consecuencias de sus acciones, de esta manera se crea un entorno de aprendizaje colaborativo.<\/p>\n<p><iframe title=\"Gapminder in the world\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/zBzxyUkKo_s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p style=\"font-size: 17px; line-height: 17px;\">V\u00eddeo de Dynamicland mostrando una exploraci\u00f3n din\u00e1mica de datos mediante la manipulaci\u00f3n de tarjetas en papel.<br \/>\nFuente: <a href=\"https:\/\/www.youtube.com\/watch?v=zBzxyUkKo_s\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.youtube.com\/watch?v=zBzxyUkKo_s<\/a>.<\/p>\n<h2>Referencias<\/h2>\n<p><strong>Dragicevic, P.; Jansen, Y.<\/strong> (2012). <em>List of physical visualizations<\/em>. &lt;<a href=\"http:\/\/dataphys.org\/list\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/dataphys.org\/list\/<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n<p><strong>Hornecker, E.;\u00a0 Buur, J. <\/strong>(Abril, 2006). \u00abGetting a grip on tangible interaction: a framework on physical space and social interaction\u00bb. <em>Proceedings of the SIGCHI conference on Human Factors in computing systems<\/em> (p\u00e1gs. 437-446). ACM.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n La interacci\u00f3n tangible es un t\u00e9rmino paraguas que abarca sistemas digitales basados en: interacci\u00f3n con todo el cuerpo manipulaci\u00f3n tangible representaci\u00f3n f\u00edsica de los datos digitales integraci\u00f3n de la interfaz en espacios reales y aumento digital de los espacios f\u00edsicos En la interacci\u00f3n tangible, el mundo digital no se observa mediante una \u00abventana\u00bb, como [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[24],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15186\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=15186"}],"version-history":[{"count":6,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15186\/revisions\/"}],"predecessor-version":[{"id":18005,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15186\/revisions\/18005\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18159\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15186"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}