interaccion

**Interactividad**

 * La interacción hombre-máquina (human computer interaction o man machine interaction) o interactividad **

El término Interactividad se refiere a la participación en relaciones comunicativas establecidas entre las personas. Sin embargo el término interactividad también se refiere a la relación que se establece entre los seres humanos y las máquinas, esto es, el método por el cual un usuario se comunica con el ordenador, sea local o remoto. Esto se llama //Human Computer Interaction//.

A la confusión entre estas dos acepciones contribuye el hecho de que en la primera definición, las relaciones entre las personas a menudo se establecen utilizando un medio tecnológico, por ejemplo, el teléfono y ahora se ha convertido en un acto cotidiano y corriente la comunicación entre personas mediada por el ordenador y sus dispositivos y por una serie de aplicaciones o programas que hacen posible establecer una comunicación a través de las redes.

Así pues, un sistema de información mediado por ordenador tiene 3 componentes: //hardware//, //software// y usuario/os (ya sea en la comunicación persona-máquina o en la comunicación persona A -máquina- persona B).

Cuando el usuario emplea un material interactivo, se establece una comunicación entre el sujeto y la maquina; una interación resultante de la presentación de unos estimulos a través del ordenador, ante los cuales el sujeto emite una determinada respuesta, a la que el programa reacciona presentando una nueva situación perceptiva.

Para que se establezca esta comunicación entre sujeto y materiales es necesario que el código simbólico que utiliza el material sea comprendido por el usuario.

La **interacción** del hombre con la computadora se lleva a cabo gracias a los elementos de la **interfaz**.



**La navegación**

Cualquier estructura hipertextual requiere interactividad, entonces hablamos de **navegacion**. La navegación es el hecho de explorar o recorrer los diferentes nodos de una estructura hipertextual.

Puedes consultar este vídeo acerca de la interactividad.

media type="custom" key="21009426" media type="youtube" key="6Cf7IL_eZ38" height="282" width="504"


 * La interfaz **

Es el área que permite la comunicación entre el hombre y la máquina o dicho de otro modo, son los **dispositivos** que conectan dos sistemas diferentes.

La interacción es posible gracias a la interfaz.

Existen dos tipos de interfaces:

• **interfaces físicas** • **interfaces gráficas**

<span style="font-family: Arial,Helvetica; font-size: 14px;">Las **interfaces físicas** son dispositivos o aparatos reales,más o menos complejos:

Cualquier dispositivo tiene su propia //interfaz//. ¿Cual es la interfaz en el caso de una puerta, una lavadora o un móvil?

Otros ejemplos de interfaz más sofisticadas:

<span style="font-family: Arial,Helvetica; font-size: 14px;">@http://www.reactable.com

<span style="font-family: Arial,Helvetica; font-size: 14px;">@http://camilleutterback.com/projects/text-rain/

<span style="font-family: Arial,Helvetica; font-size: 14px;">Las i**nterfaces gráficas** son aquellas que emplean como soporte la pantalla, y emplean **elementos gráficos e imágenes**, no elementos físicos.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Presentan ante el usuario gran número de comandos para que pueda navegar. <span style="font-family: Arial,Helvetica; font-size: 14px;">Las interfaces gráficas también se denominan GUI ( Graphical User Interface) traducido como Interfaz Gráfica de usuario.

** Iconos y metáforas **
Las interfaces gráficas se basan en i**conos** y **metáforas** <span style="font-family: Arial,Helvetica; font-size: 14px;">Una metáfora es una figura del lenguaje donde se realiza una comparación entre dos objetos que no tienen ninguna relación aparente. Un objeto es sustituído en una frase por un segundo objeto transmitiendole al primer objeto sus características explícitas e implícitas. Un ejemplo de metáfora es la conocída frase “El tiempo es oro” donde se transfieren las características de la palabra “oro” (valioso, escaso, preciado) a la palabra “tiempo” para dar a entender su valor.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Originalmente //metáfora// es una palabra griega que significaba **//transferír//**. Su etimología viene de //meta// que significa “cambio” y //pherein// que significa “llevar o trasladar”. Asi, la palabra Metáfora tiene a su vez un significado metáforico: “llevar o transferir un significado de una cosa a otra”.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Las metaforas visuales funcionan de una manera similar, se sustituye un mensaje complejo mediante una imágen más simple pero evocatíva que le transfiere a éste su significado. Por ejemplo cuando una empresa que produce jugos de frutas enlatados le pone a su producto una marca con un pictográma representando a un árbol está pretendiendo sustituír en la mente del receptor las características del producto (enlatado, industrializado, producido en serie etc.) por las del árbol (naturaleza,frescura,saludable). Eso es una metáfora visual.

Estamos muy acostumbrados a <span style="font-family: Arial,Helvetica; font-size: 14px;">Las metáforas visuales en las GUI, por ejemplo, el entorno de windows es un ejemplo de metáfora visual. Traduce todos los comandos y elementos del ordenador a elementos visuales fáciles de entender: un archivo de datos es una carpeta, la accion de borrar los documentos es una papelera.. El "lugar" en el que actuamos es el "escritorio"

<span style="font-family: Arial,Helvetica; font-size: 14px;">Las metáforas relacionan elementos de la vida cotidiana con aspectos nuevos. Por ejemplo, el caso de "Autopistas de la información", se utiliza el término "autopistas" para brindar la idea de los caminos hacia la información. Las metáforas pueden utilizarse para explicar, motivar y persuadir al auditorio sobre la asimilación o introducción de nuevas propuestas.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Existen **tres tipos de metáforas** que pueden aplicarse al diseño de sitios web, estas son:

<span style="font-family: Arial,Helvetica; font-size: 14px;">~1) **Metáforas organizacionales**: facilitan el entendimiento de la organización de un nuevo sistema a partir de relacionar su estructura organizativa con la de un sistema existente y conocido. Los usuarios que tengan conformado el modelo mental sobre cómo está organizada una tienda por departamentos se verán identificados si al entrar en una web, que ofrezca este tipo de servicios, pueden identificar la misma estructura organizativa que la anteriormente conocida.

<span style="font-family: Arial,Helvetica; font-size: 14px;">~1) **Metáforas funcionales**: establecen una conexión entre las tareas realizadas en un entorno tradicional y las que se desarrollarán en un nuevo ambiente. Tal es el caso de las tareas que realiza un usuario de una biblioteca: búsqueda en el catálogo, consulta al referencista, etcétera.

<span style="font-family: Arial,Helvetica; font-size: 14px;">~1) **Metáforas visuales**: se apoyan en el uso de elementos gráficos conocidos como imágenes, íconos y colores para establecer una conexión con lo nuevo que se desea introducir. Un ejemplo interesante sería colocar un fondo amarillo a las páginas del directorio web de un sitio, con el fin de establecer una similitud con las "páginas amarillas" del directorio telefónico tradicional.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Este enlace os lleva a un ejemplo del empleo del uso de la metáfora en la Interfaz:

**[|http:srarushmore.com]**

<span style="font-family: Arial,Helvetica; font-size: 14px;">Una interface confusa hace que el usuario pierda interés en utilizarla, de tener varias opciones elegirá aquella que le resulte más clara y sencilla de usar. Si por el contrario la interfaz está diseñada no sólo para ser fácil de usar sino además para guiar al usuario de forma amigable esto se traducirá en una mejora de comunicación entre el producto y el usuario.

<span style="font-family: Arial,Helvetica; font-size: 14px;">El uso de metáforas visuales ayudará al usuario a comprender mejor el funcionamiento de las interfaces ya que hará una conexión mental entre los objetos físicos que ya está acostumbrado a usar. <span style="font-family: Arial,Helvetica; font-size: 14px;">Una interface gráfica tiene como función servir de mediador entre las aplicaciones y las personas que las usan, nunca deben tener un rol protágonico que opaque la importancia mayor del contenido.

<span style="font-family: Arial,Helvetica; font-size: 14px;">** ¿Por qué usar metáforas visuales en Interfaces Gráficas de Usuario? **

<span style="font-family: Arial,Helvetica; font-size: 14px;">Una manera simple de presentarle al usuario una funcion abstracta dentro de la funcionalidad de una aplicación es estableciendo una comparación entre esa funcionalidad y un objeto tangible del mundo real con el que estè familiarizado. Esto se logra mediante el uso de metáforas.

<span style="font-family: Arial,Helvetica; font-size: 14px;">uchas de los lenguajes de las culturas antiguas eran visuales o ideográficos al menos en parte. Tomemos por ejemplo los jeroglíficos egipcios, los pictogramas mayas y la escritura china son todos por necesidad un tipo de atajos visuales.

<span style="font-family: Arial,Helvetica; font-size: 14px;">La clave de estos lenguajes era representar visualmente solo la cantidad necesaria para sugerir el objeto en cuestión. Lo que significa que mucha de la responsabilidad de completar los detalles faltantes reside en el lector, aunque este esfuerzo de descifrado se vuelve innecesario con el tiempo al acostumbrarse éste a saltar (mentalmente) de la imágen a la idea.

<span style="color: #993300; font-family: Arial,Helvetica; font-size: 14px;">**Recomendaciones para diseñar sistemas de metáforas para una interfaz.**

<span style="font-family: Arial,Helvetica; font-size: 14px;">Cuando existan metáforas estandarizadas, está bien usarlas. Si bien, no existen manuales internacionales con estandares establecidos, algunos estándares están surgiendo. Es bueno estár informado de como avanza la comunidad de diseño en éste sentido.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Usar una metafora en toda su extensión. Una implementación incompleta puede llevarnos a confusión, frustración y el desarrollo de estructuras pobremente formadas. <span style="font-family: Arial,Helvetica; font-size: 14px;">Esto es claro sobre todo al usar sistemas metafóricos complejos como en el caso del escritorio, un elemento perteneciente a otro campo semántico — como una sartén, por ejemplo— creará confusión en cuanto a su uso y le restará seriedad a la aplicación.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Evitar metáforas similares cuando uses multiples metáforas. Obviamente, metáforas similares están propensas a provocar confusión en situaciones donde se producen íconos que podrían ser igualmente aplicables a una u otra metáfora.

<span style="font-family: Arial,Helvetica; font-size: 14px;">No use referencias alusivas a un lenguaje específico. Esto es especialmente importante al diseñar aplicaciones con alcance internacional como puede ser un sitio web. Por ejemplo, en inglés se utiliza la palabra home (casa) para designar a la página principal de un sitio, pero en otros idiomas se utiliza otra palabra para describirlas, en español por ejemplo, decímos portada, índice o simpelmente página principal. <span style="color: #3366ff; font-family: Arial,Helvetica; font-size: 14px;">Así que el uso de un ícono que representa una casa será confuso para todo aquel que no domine el idioma inglés.

Iconos
El uso de iconos en la interfaz es muy útil, por que el usuario puede comprender visualmente el significado de un comando o de los elementos de un sistema de navegación de forma más rápida que si lo hacemos unicamente con texto. Es interesante crear un sistema de iconos, que mantengan coherencia en el estilo grafico. Esto también da consistencia al diseño de la interfaz.

Así debe tener un tamaño relativo adecuado a la página, los sistemas de navegación (menús) deben ser lo suficientemente grandes como para ser vistos y manejados con facilidad, pero no tanto que resten importancia al contenido informativo de la página, etc.

Un error muy común es ente sentido es el de los iconos, que deben ser suficientemente grandes como para que no pierden sus rasgos diferenciadores ni su zona activa si actúan como enlaces, pero nunca tanto que destaquen en exceso, sobre todo si van acompañados de un texto explicativo.



GRÁDOS DE INTERACCIÓN
<span style="font-family: Arial,Helvetica; font-size: 14px;">Podemos determinar el grado de interactividad de nuestro proyecto, esto también marcará el diseño de la interfaz. <span style="font-family: Arial,Helvetica; font-size: 14px;">La interacción no es una cualidad binaria (se tiene o no se tiene) sino un continuo con una amplio espectro de posibilidades. En general, las diferentes intensidades con que se habla, se piensa y se escucha definen los diversos niveles de interacción, pero es especialmente significativa la //calidad de la escucha//. No interactuamos del mismo modo con todas las aplicaciones, podemos hablar de niveles o grados de interaccion

interaccion de nivel bajo, el interactor se limita a escoger ante un menu de opciones.

interaccion media.<span style="font-family: Arial,Helvetica; font-size: 14px;">n nivel algo superior consiste en tener que localizar esas opciones o, aún más, tener que responder a determinadas pruebas o superar ciertos obstáculos para poder avanzar en la exploración del interactivo.

<span style="font-family: Arial,Helvetica; font-size: 14px;">En los niveles altos, el interactor se ve sometido a demandas todavía mayores: participar como protagonista en el entorno interactivo, contribuir en él e incluso modificarlo. <span style="font-family: Arial,Helvetica; font-size: 14px;">El usuario puede modificar el sistema.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Se puede hablar, pues, de una interacción //débil// -así es actualmente la de la mayoría de webs- y de una interacción //fuerte// cuya máxima expresión (participativa, contributiva y comunitaria) se conoce como //realidad virtual//.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Pero no se trata, necesariamente, de maximizar la //intensidad// de la interacción. A cada género interactivo, y a cada programa en particular, corresponde una interacción más o menos //fuerte//. La difusión de información, por ejemplo, precisa un grado débil (sería absurdo, por ejemplo, poner obstáculos para encontrar el significado de una palabra en una enciclopedia). Por su parte, el documental y la no ficción se prestan a una interacción media (idónea para regular el ritmo de asimilación), mientras que la ficción y, en general, la creación libre, permite la interacción en el sentido más fuerte.

<span style="font-family: Arial,Helvetica; font-size: 14px;">El diseño de un interactivo consiste pues en hallar el grado óptimo con el que el ordenador //habla//, //piensa// y, en particular, //escucha//. Para ello se deben aunar, en una o varias personas, habilidades audiovisuales y habilidades informáticas.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Mientras que el resultado final es bien distinto, el punto de partida del autor de un interactivo es similar al del autor de un audiovisual: un conjunto más o menos caótico de elementos visuales, aurales y textuales. Pero mientras que el programa audiovisual exige la estructuración de estos elementos en forma lineal, el programa interactivo exige estructuras no lineales (árbol, red...) y, en general, la organización del contenido en forma de //base de datos//, según el término procedente de la informática.

<span style="font-family: Arial,Helvetica; font-size: 14px;">La idea de programa audiovisual como base de datos, como //constelación// de imágenes y sonidos cuyas relaciones son significativas, es consustancial al medio interactivo. En contraste con la contemplación en un orden determinado, la base de datos audiovisual posibilita el acceso directo a los elementos que la componen y permite que el interactor los explore como si manejara la cámara y, a la vez, hiciera de montador.

<span style="font-family: Arial,Helvetica; font-size: 14px;">De ficción o de no ficción, los programas interactivos tienden a ser inconclusos y colaborativos, en este sentido, se emparentan con los programas informáticos públicos, el llamado //software abierto//, que configura todo un paradigma cultural. En cuanto a su //espíritu//, se emparentan con cierto cine experimental, aunque van más allá de la renovación puramente formal que en general supuso este cine. El precedente más cercano, en este aspecto, sería el movimiento denominado del //tercer cine//, promovido en ciertos ambientes latinoamericanos durante los años setenta, impulsor de un cine participativo y //nunca acabado//.

<span style="font-family: Arial,Helvetica; font-size: 14px;">El medio interactivo demanda la complicidad para descubrir, elegir, reflexionar, participar, e incluso crear; nada que ver, pues, con la tendencia audiovisual imperante que parece perseguir la paralización mental del espectador. Sin embargo, constituye una prolongación de ese mismo medio audiovisual, una nueva //vuelta de tuerca// a la ambición, primero literaria, después cinematográfica, de describir la realidad común o fantaseada, una realidad que además de sonora y coloreada es, precisamente, interactiva. Los espectadores de este nuevo medio, ahora interactores, ganan en presencia e identificación, intervienen en la experiencia audiovisual y, a la vez, la comparten con otros.

<span style="font-family: Arial,Helvetica; font-size: 14px;">Esta primera década de interactivos culturales evoca los primeros años del cine, cuando el lenguaje cinematográfico estaba por definir. La novedad de la imagen en movimiento de entonces, a la búsqueda de autores y espectadores, es análoga a la novedad de la interacción de ahora, y la consideración de entretenimiento //vulgar// que recibió el cine en sus primeros tiempos se corresponde con la consideración análoga que reciben los juegos electrónicos.

Texto extraido de <span style="font-family: Arial,Helvetica; font-size: 14px;">http://www.iua.upf.edu/formats/formats1/a01et.htm