{"id":499,"date":"2023-01-05T14:22:54","date_gmt":"2023-01-05T12:22:54","guid":{"rendered":"http:\/\/quadern-int-int-recursos-test.azurewebsites.net\/?page_id=499"},"modified":"2023-02-14T13:04:12","modified_gmt":"2023-02-14T11:04:12","slug":"6-1-relaciones-con-el-hecho-interactivo","status":"publish","type":"page","link":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/6-1-relaciones-con-el-hecho-interactivo\/","title":{"rendered":"6.1. Relaciones con el hecho interactivo"},"content":{"rendered":"<p>C\u00f3mo hemos ido viendo,<strong> toda interacci\u00f3n es un proceso que pasa en el tiempo<\/strong>. De hecho, varios investigadores usan la expresi\u00f3n \u00abforma temporal\u00bb para referirse a la estructura computacional que hay detr\u00e1s y que permite expresar el dise\u00f1o de interacci\u00f3n. Adem\u00e1s, consideran el <strong><a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"Vallg\u00e5rda, Anna, <em>et al. <\/em>\u00abTemporal form in interaction design\u00bb. International Journal of Design 9.3 (2015).\" data-placement=\"top\" data-html=\"true\" >elemento temporal<\/a> como el rasgo distintivo del dise\u00f1o de interacci\u00f3n<\/strong> respecto de otros tipos de dise\u00f1o.<\/p>\n<div class=\"featured featured-blue\"><p>Como <strong>proceso<\/strong>, la interacci\u00f3n no solo se desarrolla en el <strong>tiempo<\/strong>, sino que, como hemos ido explicando, se basa en la <strong>reciprocidad<\/strong>. Es por eso que cuando pensamos en el tiempo asociado con la interacci\u00f3n, no estamos hablando de un tiempo continuo con un principio y un final sin fisuras, sino que este intercambio tiene m\u00e1s matices y se despliega de manera m\u00e1s abierta.<\/p>\n<\/div>\n<p>A continuaci\u00f3n, iremos diseccionando los diferentes aspectos que unen tiempos y hecho interactivo e iremos viendo que est\u00e1n ligados desde m\u00faltiples perspectivas como el dise\u00f1o, el uso y las din\u00e1micas de relaci\u00f3n que establecemos.<\/p>\n<p>Desde el punto de vista del dise\u00f1o de la interacci\u00f3n, <strong>el tiempo siempre es presente<\/strong>. En un primer momento, podemos decir que habitualmente conceptualizamos el <strong>flujo de interacci\u00f3n<\/strong> como algo ininterrumpido en que entran m\u00faltiples variables. Usamos la idea de <strong>continuidad<\/strong>, es decir, explicamos la interacci\u00f3n en <strong>diferentes pasos o fases<\/strong>, como si fuera una historia organizada en una <strong>l\u00ednea de tiempo<\/strong>.<\/p>\n<p><strong>M\u00e9todos para representar la interacci\u00f3n<\/strong><\/p>\n<p>A la hora de mostrar <strong>c\u00f3mo se estructura la interacci\u00f3n a lo largo del tiempo<\/strong>, podemos usar m\u00e9todos como un <strong><em>user journey<\/em><\/strong>, un <strong>diagrama de flujo<\/strong> o un <strong><em>storyboard<\/em><\/strong>. Un <a href=\"http:\/\/design-toolkit.recursos.uoc.edu\/es\/user-journey\/\" target=\"_blank\" rel=\"noopener\"><em>user journey<\/em><\/a> consiste en un recorrido que muestra paso a paso la interacci\u00f3n de la persona usuaria y describe sus experiencias, emociones y reacciones en cada punto de contacto (<em>touchpoint<\/em>) con el producto o servicio. En cambio, un <a href=\"http:\/\/design-toolkit.recursos.uoc.edu\/es\/diagrama-de-flujo\/\" target=\"_blank\" rel=\"noopener\">diagrama de flujo<\/a> disecciona en pasos la navegaci\u00f3n, sobre todo en una aplicaci\u00f3n o web. Por su parte, el <a href=\"http:\/\/design-toolkit.recursos.uoc.edu\/es\/storyboard\/\" target=\"_blank\" rel=\"noopener\"><em>storyboard<\/em><\/a> es una herramienta que nos permite ense\u00f1ar visualmente ideas, en este caso, flujos con pasos que se orientan a cumplir un objetivo o mostrar c\u00f3mo se lleva a cabo una tarea. Es especialmente \u00fatil cuando hagamos proyectos de interacci\u00f3n con objetos porque nos permite un acceso directo y visual a c\u00f3mo se desarrolla la interacci\u00f3n. Pero no solo esto, sino que est\u00e1 directamente ligado al componente narrativo. Es por eso que se trata de una herramienta muy empleada en otros \u00e1mbitos creativos, como el cine.<\/p>\n<p>El <em>\u00a0toryboard<\/em> es un m\u00e9todo muy vinculado al elemento narrativo. En el libro <em>El dise\u00f1o como storytelling<\/em>, Ellen Lupton examina la psicolog\u00eda de la comunicaci\u00f3n visual desde la <strong>perspectiva narrativa<\/strong> y parte de la premisa que la <em>storytelling<\/em> puede ayudar a <strong>estimular la imaginaci\u00f3n<\/strong> de las personas usuarias e <strong>influir en ciertos comportamientos<\/strong>. Para hacer un <em>storyboard<\/em>, hay que planear el arco de una narraci\u00f3n y decidir c\u00f3mo se puede resumir esta historia en un n\u00famero limitado de im\u00e1genes.<\/p>\n<p>Estos m\u00e9todos (los <em>user journeys<\/em>, diagramas de flujo y <em>storyboards<\/em>) forman una primera capa del dise\u00f1o de la interacci\u00f3n porque nos sirven para mostrar <strong>c\u00f3mo se despliega en diferentes pasos<\/strong> y, por lo tanto, <strong>a lo largo del tiempo<\/strong>. No siempre se trata de un tiempo lineal y cerrado, sino que tambi\u00e9n pueden incluir procesos c\u00edclicos o ramificaciones diversas, por ejemplo.<\/p>\n<p>En el <a href=\"http:\/\/design-toolkit.uoc.edu\/es\/\" target=\"_blank\" rel=\"noopener\"><em>Design Toolkit<\/em><\/a> de la UOC encontrar\u00e9is m\u00e1s informaci\u00f3n de los tres m\u00e9todos explicados: <em>user journeys<\/em>, diagramas de flujo y <em>storyboard<\/em>.<\/p>\n<p><div class='content-column one_fifth'><div style=\"\">\u00a0<\/div><\/div><div class='content-column one_fifth'><div style=\"\"><a href=\"http:\/\/design-toolkit.recursos.uoc.edu\/es\/user-journey\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-76 size-thumbnail\" src=\"\/wp-content\/uploads\/2023\/02\/PID_00293914_46.jpg\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/div><\/div><div class='content-column one_fifth'><div style=\"\"><a href=\"http:\/\/design-toolkit.recursos.uoc.edu\/es\/diagrama-de-flux\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-76 size-thumbnail\" src=\"\/wp-content\/uploads\/2023\/02\/PID_00293914_47.jpg\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/div><\/div><div class='content-column one_fifth'><div style=\"\"><a href=\"http:\/\/design-toolkit.recursos.uoc.edu\/es\/storyboard\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-76 size-thumbnail\" src=\"\/wp-content\/uploads\/2023\/02\/PID_00293914_48.jpg\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/div><\/div><div class='content-column one_fifth last_column'><div style=\"\">\u00a0<\/div><\/div><div class='clear_column'><\/div><\/p>\n<p><strong>Retroacci\u00f3n<\/strong><\/p>\n<p>Otra capa en relaci\u00f3n con el tiempo est\u00e1 vinculada a la <strong>retroacci\u00f3n<\/strong> (o <strong><em>feedback<\/em><\/strong> en ingl\u00e9s). Son aquellas <strong>respuestas que se manifiestan como efecto de nuestras acciones<\/strong>. Es decir, si la interacci\u00f3n, dec\u00edamos, es un proceso de ida y vuelta entre humanos y m\u00e1quinas, la retroacci\u00f3n es uno de los elementos que hace posible esta reciprocidad, puesto que hace visible informaci\u00f3n sobre cu\u00e1les son los resultados de las acciones que estamos llevando a cabo.<\/p>\n<p>La retroacci\u00f3n puede pasar de diferentes maneras en t\u00e9rminos temporales y est\u00e1n vinculadas al <strong>tiempo de respuesta<\/strong>, es decir, al <strong>momento en que se proporciona la retroalimentaci\u00f3n<\/strong>. Puede ser de manera inmediata, con retraso o, incluso, se puede dar al final de la interacci\u00f3n. Tenemos muchos ejemplos de retroacci\u00f3n a tiempo real: cuando hacemos <em>scroll<\/em> en una interfaz gr\u00e1fica o cuando jugamos a un videojuego y movemos el personaje con un mando. Cuando los resultados de nuestra acci\u00f3n no son inmediatos, sino que hay un cierto tiempo de procesamiento o retraso en la respuesta, a menudo hay alg\u00fan tipo de mensaje que nos facilita la informaci\u00f3n del proceso que se est\u00e1 llevando a cabo. Un ejemplo ser\u00eda cuando movemos muchos archivos de carpeta a carpeta, si pesan mucho nos mostrar\u00e1 el progreso de la acci\u00f3n. En cambio, un ejemplo de retrorespuesta al final es, por ejemplo, un test del que solo vemos las respuestas cuando lo hemos terminado.<\/p>\n<p>En el caso del \u00e1mbito art\u00edstico, es especialmente importante pensar en el <strong>ritmo<\/strong> que queremos crear con los tiempos de respuesta y, m\u00e1s ampliamente, con el dise\u00f1o de interacci\u00f3n. Sobre todo, hay que pensar en el <strong>contexto<\/strong> en que se mostrar\u00e1 nuestro proyecto y en el <strong>tipo de personas<\/strong> que interactuar\u00e1n. No es lo mismo pensar en un ritmo para una exposici\u00f3n en un centro de arte donde tendr\u00e1 que convivir con otras piezas, que en una propuesta, por ejemplo, en forma de p\u00e1gina web a que podremos acceder desde cualquier lugar y dispositivo, y que ser\u00e1 m\u00e1s bien una experiencia individual.<\/p>\n<p><strong>Temas y tipos de tiempos<\/strong><\/p>\n<p>Si nos fijamos en la relaci\u00f3n entre la experiencia interactiva y la realidad f\u00edsica, <a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"Giannetti, Claudia. <em>Est\u00e9tica digital: Sintop\u00eda del arte, la ciencia y la tecnolog\u00eda<\/em>. L\u2019Angelot, 2002.\" data-placement=\"top\" data-html=\"true\" >Claudia Giannetti<\/a> propone tres nociones vinculadas al tiempo: el <strong>tiempo real<\/strong> (respuestas instant\u00e1neas y continuadas de un sistema), <strong>tiempo simulado<\/strong> (no tiene relaci\u00f3n concreta con el tiempo de nuestra realidad f\u00edsica) y <strong>tiempo h\u00edbrido<\/strong> (el tiempo del sistema se confunde con el que tenemos en la realidad f\u00edsica, y ambos tiempos est\u00e1n vinculados).<\/p>\n<p>La investigadora <a href=\"javascript:void(0);\" class=\"tooltip\" data-toggle=\"popover\" data-placement=\"bottom\" data-content=\"Lundgren, Sus. \u00abToying with time: considering temporal themes in interactive artifacts\u00bb. Proceedings of the SIGCHI Conference on Human Factores in Computing Systems. 2013.\" data-placement=\"top\" data-html=\"true\" >Sus Lundgren<\/a> hace una distinci\u00f3n en esta l\u00ednea y propone lo que llama \u00abtemas temporales\u00bb. Es un conjunto de vocabulario para ser empleado como herramienta en el dise\u00f1o desde un punto de vista temporal. Concretamente, sugiere los t\u00e9rminos siguientes:<\/p>\n<ul>\n<li><strong>Tiempo vivo (<em>Live time<\/em>)<\/strong>: el tiempo en que vivimos fluye a velocidad normal en un ahora. Pone como ejemplo los juegos que tienen en cuenta el tiempo que pasa tambi\u00e9n cuando no jugamos, como por ejemplo el CityVille o el World of Warcraft.<\/li>\n<li><strong>Tiempo real (<em>Real time<\/em>)<\/strong>: el tiempo tambi\u00e9n fluye a velocidad normal, pero la diferencia con el tiempo vivo es que no importa que el tiempo de funcionamiento sea espec\u00edficamente ahora.<\/li>\n<li><strong>Flujo ininterrumpido (<em>Unbroken time<\/em>):<\/strong> flujo continuo de secuencia o acontecimientos, no se puede liminar nada, pero s\u00ed alterar la velocidad a la que pasan.<\/li>\n<li><strong>Tiempo secuencial (<em>Sequential time<\/em>): <\/strong>los acontecimientos son cronol\u00f3gicos, pero hay elipsis.<\/li>\n<li><strong>Tiempo fragmentado (<em>Fragmented time<\/em>): <\/strong>los acontecimientos no son cronol\u00f3gicos, hay saltos.<\/li>\n<li><strong>Tiempo yuxtapuesto (<em>Juxtaposed time<\/em>): <\/strong>acontecimientos que han pasado uno tras otro, son mostrados de manera simult\u00e1nea.<\/li>\n<\/ul>\n<p>Con estas aproximaciones, queremos dar un panorama bastante amplio sobre el tiempo y la interacci\u00f3n. La distinci\u00f3n entre diferentes tiempos es \u00fatil para organizar las interacciones<\/p>\n<p>Aun as\u00ed, a continuaci\u00f3n, queremos ir m\u00e1s all\u00e1 y plantear otras relaciones y significados temporales que quiz\u00e1s son menos evidentes, pero igualmente importantes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u00f3mo hemos ido viendo, toda interacci\u00f3n es un proceso que pasa en el tiempo. De hecho, varios investigadores usan la expresi\u00f3n \u00abforma temporal\u00bb para referirse a la estructura computacional que hay detr\u00e1s y que permite expresar el dise\u00f1o de interacci\u00f3n. Adem\u00e1s, consideran el como el rasgo distintivo del dise\u00f1o de interacci\u00f3n respecto de otros tipos [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/499"}],"collection":[{"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":3,"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/499\/revisions"}],"predecessor-version":[{"id":836,"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/499\/revisions\/836"}],"wp:attachment":[{"href":"http:\/\/quadern-interaccio-interactivitat-test.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}