El investigador en interfaces y medios digitales Carlos Scolari explica que la interfaz tiene tantos significados que es adecuado entenderla principalmente como una met\u00e1fora. As\u00ed, la interfaz puede ser una superficie, un espacio, una conversaci\u00f3n, etc., y cada una de estas met\u00e1foras contribuye a interpretar la interacci\u00f3n entre el usuario y el sistema digital desde una perspectiva distinta.<\/p>\n
Scolari acaba proponiendo como met\u00e1fora preferible para entender la interfaz la de un \u00ablugar de interacci\u00f3n\u00bb, es decir, el espacio donde el usuario y el sistema digital realizan acciones que tienen efecto el uno sobre el otro.<\/p>\n
Modelos conceptuales y estilos de interacci\u00f3n<\/h2>\n
Estas acciones bidireccionales, las interacciones, pueden explicarse bajo distintos modelos conceptuales que describen el producto digital en funci\u00f3n de qu\u00e9 puede hacer, c\u00f3mo se comporta y qu\u00e9 aspecto tiene.<\/p>\n
Si nos basamos en el tipo de actividades que los usuarios van a realizar, podemos diferenciar entre cuatro modelos conceptuales<\/strong> o tipos de interacci\u00f3n no excluyentes:<\/p>\n A un nivel m\u00e1s bajo de abstracci\u00f3n con respecto a los modelos conceptuales encontramos los estilos de interacci\u00f3n<\/strong>, que exponen el m\u00e9todo que va a usar el usuario para interactuar con el sistema digital y establecen tipos espec\u00edficos de interfaces<\/strong>. Los m\u00e1s convencionales son:<\/p>\n Los modelos conceptuales admiten varios estilos de interacci\u00f3n, pero no todas las combinaciones son usuales o representativas. Por ejemplo, es habitual un estilo de interacci\u00f3n typing<\/em> en modelos instructing<\/em> o conversing<\/em>, pero resultar\u00e1 mucho menos arquet\u00edpico en un modelo manipulating<\/em>.<\/p>\n En la siguiente tabla se resumen las principales combinaciones entre modelos y estilos de interacci\u00f3n:<\/p>\n Ejemplo: l\u00ednea de \u00f3rdenes, como MS-Dos.<\/td>\n Ejemplo: chatbot <\/em>textual.<\/td>\n Ejemplo: sistema manos libres para realizar llamadas en el coche.<\/td>\n Ejemplo: asistente por voz Siri, de Apple.<\/td>\n Ejemplo: sensor de movimiento Kinect de Microsoft.<\/td>\n Ejemplo: Wii Sports de la consola Nintendo Wii.<\/td>\n Ejemplo: men\u00fa contextual en Apple iOS.<\/td>\n Ejemplo: Apple Books, el lector de libros electr\u00f3nicos en iPad.<\/td>\n Ejemplo: aplicaci\u00f3n Pinterest para dispositivos m\u00f3viles.<\/td>\n<\/tr>\n Ejemplo: men\u00fa contextual en Microsoft Windows.<\/td>\n Ejemplo: la interfaz de escritorio de Microsoft Windows.<\/td>\n Ejemplo: sitio web inmobiliario.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Se debe tener presente que otras combinaciones son posibles, por ejemplo, muchos videojuegos se pueden considerar modelos manipulating<\/em> y se juegan mediante un teclado; o se puede usar un modelo conversing<\/em> mediante la selecci\u00f3n entre varias opciones con un estilo touch<\/em> o GUI.<\/p>\n Hoy en d\u00eda es habitual que los productos digitales combinen distintos modelos conceptuales y estilos de interacci\u00f3n.<\/p>\n Tomemos como ejemplo un tel\u00e9fono de la familia Moto G de Motorola. Podemos identificar los siguientes modelos:<\/p>\n El uso de acciones r\u00e1pidas y men\u00fas en el tel\u00e9fono son ejemplos del modelo instructing<\/em>.<\/p>\n Captura de pantalla con acciones r\u00e1pidas en la zona superior representadas mediante iconos. Un toque ordena al tel\u00e9fono apagar la wifi, entrar en modo \u00abno molestar\u00bb, encender la linterna, etc.<\/p><\/div>\n Emitir las \u00f3rdenes de la siguiente figura admite varios estilos de interacci\u00f3n; por ejemplo, para iniciar el modo \u00abno molestar\u00bb se puede tocar el icono correspondiente (touch<\/em>), o bien coger el tel\u00e9fono y ponerlo al rev\u00e9s encima de una mesa (gesture<\/em>).<\/p>\n El asistente personal del tel\u00e9fono permite crear recordatorios o realizar b\u00fasquedas de informaci\u00f3n bajo un modelo conversing<\/em>.<\/p>\n Captura de pantalla de Google Assistant. La misma interfaz presenta en la zona inferior la elecci\u00f3n expl\u00edcita entre dos estilos de interacci\u00f3n: un micr\u00f3fono iniciar\u00e1 una interacci\u00f3n speech<\/em> y el teclado una interacci\u00f3n typing<\/em>.<\/p><\/div>\n El propio asistente permite varios estilos de interacci\u00f3n: podemos hablar (speech<\/em>), teclear mensajes (typing<\/em>), o bien tocar las opciones que se presentan en pantalla (touch<\/em>).<\/p>\n El uso de iconos que representan aplicaciones y la posibilidad de organizarlos espacialmente arrastr\u00e1ndolos de un sitio a otro es un ejemplo del modelo manipulating<\/em>.<\/p>\n Si el usuario toca un icono puede manipularlo y arrastrarlo a otro punto de la pantalla.<\/p><\/div>\n En este caso, la manipulaci\u00f3n debe hacerse arrastrando con el dedo (touch<\/em>) y no admite otros estilos de interacci\u00f3n.<\/p>\n Si bien el m\u00f3vil en s\u00ed no incluye un modelo de interacci\u00f3n exploring<\/em>, muchas de las aplicaciones que se usar\u00e1n en el mismo s\u00ed entran en este modelo: redes sociales, aplicaciones de consulta e incluso navegadores.<\/p>\n Los estilos de interacci\u00f3n en estos escenarios tambi\u00e9n ser\u00edan h\u00edbridos, ya que se puede iniciar la interacci\u00f3n mediante una b\u00fasqueda por palabras (estilo speech<\/em> o typing<\/em>) y continuar la exploraci\u00f3n mediante recursos de filtrado situados en pantalla (touch<\/em>).<\/p>\n Algunas combinaciones de modelos conceptuales y estilos de interacci\u00f3n, junto con soluciones tecnol\u00f3gicas espec\u00edficas y otros aspectos definitorios, establecen paradigmas de experiencias interactivas que han sido objeto de estudio a lo largo de los a\u00f1os y merecen menci\u00f3n aparte.<\/p>\n Algunos paradigmas populares son:<\/p>\n Preece, J.; Rogers, Y.; Sharp, H.<\/strong> (2002).\u00a0Interaction design: beyond human-computer interaction<\/em>. Nueva York\u202f: J. Wiley & Son (p\u00e1g. 519).<\/p>\n Scolari, C. A.<\/strong> (2018). Las leyes de la interfaz\u202f: dise\u00f1o, ecolog\u00eda, evoluci\u00f3n, complejidad<\/em>. Barcelona: Gedisa.<\/p>\n","protected":false},"excerpt":{"rendered":" Introducci\u00f3n La palabra interfaz proviene del ingl\u00e9s interface, formada por el prefijo inter (\u2018entre\u2019) y face (\u2018cara\u2019): entre caras. M\u00e1s all\u00e1 de esto, definir con precisi\u00f3n interfaz y, en particular, interfaz de usuario, no es tarea f\u00e1cil. El investigador en interfaces y medios digitales Carlos Scolari explica que la interfaz tiene tantos significados que es […]<\/p>\n","protected":false},"author":4,"featured_media":18157,"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\/15060\/"}],"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=15060"}],"version-history":[{"count":4,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15060\/revisions\/"}],"predecessor-version":[{"id":18004,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15060\/revisions\/18004\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18157\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15060"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n
\n <\/td>\n Instructing<\/em><\/td>\n Conversing<\/em><\/td>\n Manipulating<\/em><\/td>\n Exploring<\/em><\/td>\n<\/tr>\n \n Typing<\/em><\/td>\n \u2714<\/p>\n \u2714<\/p>\n <\/td>\n <\/td>\n<\/tr>\n \n Speech<\/em><\/td>\n \u2714<\/p>\n \u2714<\/p>\n <\/td>\n <\/td>\n<\/tr>\n \n Gesture<\/em><\/td>\n \u2714<\/p>\n <\/td>\n \u2714<\/p>\n <\/td>\n<\/tr>\n \n Touch<\/em><\/td>\n \u2714<\/p>\n <\/td>\n \u2714<\/p>\n \u2714<\/p>\n \n GUI<\/td>\n \u2714<\/p>\n <\/td>\n \u2714<\/p>\n \u2714<\/p>\n Ejemplo h\u00edbrido<\/strong><\/h2>\n
Modelo<\/strong> instructing<\/em><\/strong><\/h3>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/26414_amp29.jpg\")
Modelo<\/strong> conversing<\/em><\/strong><\/h3>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/26414_amp30.jpg\")
Modelo<\/strong> manipulating<\/em><\/strong><\/h3>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/26414_amp31.jpg\")
Modelo<\/strong> exploring<\/em><\/strong><\/h3>\n
Otros paradigmas de experiencias interactivas<\/h2>\n
\n
Referencias<\/h2>\n