REACCIÓN VS INTERACCIÓNpersonales.upv.es/.../download/interactivo_reactivo.pdf · 2011-10-11 ·...

REACCIÓN VS INTERACCIÓN ALGUNOS ASPECTOS SOBRE INTERACTIVIDAD

Interactividad Prof: Moisés Mañas

[email protected]

INTERACTIVIDAD: f. Cualidad de interactivo


INTERACTIVO, VA: Adj. Que procede por interacción

2. Inform. Dicho de un programa: Que permite una interacción, a modo de diálogo, entre el ordenador y el usuario.


INTERACTIVO, VA: Adj. Que procede por interacción

2. Inform. Dicho de un programa: Que permite una interacción, a modo de diálogo, entre el ordenador y el usuario.

INTERACCIÓN: f. Acción que se ejerce recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc.

REACCIÓN: Acción que resiste o se opone a otra acción, obrando en sentido contrario a ella.

2.Forma en que alguien o algo se comporta ante un determinado estímulo.

REACTIVO, VA: Adj. Que produce reacción

2. Química. Sustancia empleada para descubrir y valorar la presencia de otra, con la que reacciona de forma peculiar.

"Estamos pasando de la estética del mensaje a la estética de la interactividad."

Pierre Lévy

Lévy, Pierre: Historiador / sociólogo francés, autor del texto “¿qué es lo virtual?”, Paidós, Barcelona, 1999

Hasta hace poco, representando los bits en forma humanamente legible se ha limitado principalmente a los teclados y pantallas -

sensoriales privados y físicamente limitada. Por el contrario, "bits tangibles" nos permiten interactuar con ellos con nuestros

músculos, así como nuestras mentes y de la memoria Nicholas Negroponte

Negroponte, Nicholas, científico de la computación estadounidense fundador del Media Lab del MIT

En los campos de las ciencias de la información, de la comunicación, y del diseño industrial, hay discusión sobre el significado de la interactividad. En la “punto de vista de la contingencia” de la interactividad, hay tres niveles:

No interactivo, cuando un mensaje no se relaciona con anterior mensajes.

INTERACTIVIDAD


No interactivo, cuando un mensaje no se relaciona con anterior mensajes.(Cine clásico)

INTERACTIVIDAD



Reactivo, cuando un mensaje se relaciona solamente con un mensaje inmediatamente anterior.

INTERACTIVIDAD



Reactivo, cuando un mensaje se relaciona solamente con un mensaje inmediatamente anterior.(Puerta)

INTERACTIVIDAD




Interactivo, cuando un mensaje se relaciona con un número de mensajes anteriores y con la relación entre ellos.

INTERACTIVIDAD




Interactivo, cuando un mensaje se relaciona con un número de mensajes anteriores y con la relación entre ellos (Wikipedia)

INTERACTIVIDAD

INTERACTIVIDAD

Fijémonos en estas dos imágenes/situaciones

1. No hay preguntas (o no se responden): no hay bidireccionalidad

2. Se responden preguntas: hay bidireccionalidad y reacción (no necesariamente interacción)

3. Las respuestas del profesor a las preguntas de los alumnos, suscitan nuevas preguntas por parte de los alumnos, que el profesor responden a su vez … se abre el diálogo -> interactividad

Ejemplo basado en la idea de rueda de prensa de Sergi Jordá

INTERACTIVIDAD

“privar al hombre de su libre arbitrio y de encadenarlo a un sistema de preguntas-respuestas

sin salida”

Reflexión

Paul Virilio

Conceptos relacionados

• Multidireccionalidad • Velocidad de respuesta • Ancho de banda • Actividad del usuario • Capacidad de control • Transparencia

INTERACTIVIDAD

KEY WORDS

Cantidad

Variedad

Cualidad

Etc...

IHM/IPO/HCI

¿Dónde enmarcamos esto?, Marco de estudio

¿HCI?

Prof: Moisés Mañas. BBAA-UPV

http://www.youtube.com/watch?v=VV2N4KSh3x4&feature=related

Woody Allen , Sleeper (1973)

La Interacción Humano-Máquina (IHM) [ Human Computer Interaction HCI ],

Conjunto de procesos, diálogos y acciones mediante los cuales un usuario utiliza e interactúa con el ordenador

IHM /HCI

IHM /HCI


Conjunto de procesos, diálogos y acciones mediante los cuales un usuario utiliza e interactúa con el ordenador

Disciplina que estudia el diseño, la evaluación y la

implementación de sistemas de ordenador interactivos para uso humano y de los fenómenos que lo rodean.

DISCIPLINA DE ESTUDIO


El objetivo fundamental de HCI es:

mejorar la calidad de los sistemas informáticos a través de tres factores: facilidad de uso, eficiencia y seguridad.

En este contexto, sistema no sólo se refiere al hardware y al software sino al entorno entero de trabajo.

En HCI: el usuario es lo primero, es decir, debe ser el sistema el que se adapte a las necesidades del usuario y no al revés.

IHM /HCI DISCIPLINA DE ESTUDIO

IPO/IHM/HCI

INFORMATICA

LENGUAJE

SOCIOLOGIA

ETNOGRAFIA SEMIÓTICA

DISEÑO

INGENIERIA

ERGONOMIA +

FACTORES HUMANOS

PSICOLOGIA

HCI

CA

MP

OS

DE

ES

TU

DIO

BÁ

SIC

OS

DE

L H

CI

DISEÑO INDUSTRIAL

DISEÑO GRAFICO

ERGONOMÍA FÍSICA

HCI DISEÑO WEB

DISEÑO DE INTERACCIÓN

INGENIERÍA MECÁNICA

INGENIERÍA DE LA PRODUCCIÓN

INGENIERÍA DEL HARDWARE

INGENIERÍA DEL SOFTWARE

CIENCIAS FÍSICAS

CIENCIAS DE LA COMPUTACIÓN

Humano y Subjetividad Técnico y Objetivo

Diseño Físico

Diseño Digital

Human Computer Interaction HCI

CLI

GUI TUI

COMMAND LINE INTERFACE

TANGIBLE USER INTERFACE GRAPHICAL USER INTERFACE

USUARIO

• Kinestesia/Movimiento de las manos: reconocimiento de La Escritura • Kinestesia/Movimiento corporal: reconocimiento de gestos, computer vision, etc. • Táctil (sensores presión) • Vista (eyegaze) • Expresiones faciales (computer vision) • + Sensores (tensión muscular, temperatura…)

• Vista (forma, color, tamaño … texto…) • Oído (frecuencia, timbre, intensidad … voz…) • Tacto (haptics) • Kinestésico (kinesthesia): en músculos, tendones, articulaciones posición del cuerpo, movimiento, peso de un objeto.

• Táctil (tactile): en receptores piel • forma de objetos • tacto de una superficie • temperatura • Sabor y olfato.

H C H C

Sentidos Input Humano

• Kinestesia/teclado, click, drag&drop; (normalmente feedback ) • Sonido: reconocimiento de voz, frecuencia/altura (instrumentos musicales)

Otros:

Fuente: Sergi Jordá

FUENTES, APUNTES INTERESANTES, PLANTEAMIENTOS

Licklider y Clark (1962) elaboraron una lista de 10 problemas que deberían ser resueltos para facilitar la interacción personas-ordenador. (HCI)

Según el los cinco primeros problemas deberían ser resueltos de manera inmediata, el sexto en un tiempo intermedio y los cuatro últimos, a largo plazo:

J.C.R. Licklider y W. Clark ,"On-line Man Computer Communications“, MIT, 1962.

FUENTES

Licklider y Clark (1962) elaboraron una lista de 10 problemas

1. Compartir el tiempo de uso de los ordenadores entre muchos usuarios. 2. Un sistema de entrada-salida para la comunicación mediante datos simbólicos y gráficos. 3. Un sistema interactivo de proceso de las operaciones en tiempo real. 4. Sistemas para el almacenamiento masivo de información que permitan su rápida recuperación. 5. Sistemas que faciliten la cooperación entre personas en el diseño y programación de grandes sistemas. 6. Reconocimiento por parte de los ordenadores de la voz, de la escritura manual impresa y de la introducción de datos a partir de escritura manual directa. 7. Comprensión del lenguaje natural, sintáctica y semánticamente. 8. Reconocimiento de la voz de varios usuarios por el ordenador. 9. Descubrimiento, desarrollo y simplificación de una teoría de algoritmos. 10. Programación heurística o a través de principios generales.

J.C.R. Licklider y W. Clark ,"On-line Man Computer Communications“, MIT, 1962.

(ENSAYO ERROR, POR TANTEO)

W.Hansen (1971) en su libro "User Engineering Principles for Interactive Systems" hace la primera enumeración de principios para el diseño de sistemas interactivos:

Hansen, Wilfred J. User engineering principles for interactive systems. AFIPS Fall Joint Computer Conference. Las

Vegas, Nevada, 1971. Proceedings, Vol. 39. AFIPS Press. Montvale, New Jersey, 1971, 523--532.


1. Conocer al usuario



2. Minimizar la memorización, sustituyendo la entrada de datos por la selección de ítems, usando nombres en lugar de números, asegurándose un comportamiento predecible y proveyendo acceso rápido a información práctica del sistema.




3. Optimizar las operaciones mediante la rápida ejecución de operaciones comunes, la consistencia de la interfaz y organizando y reorganizando la estructura de la información basándose en la observación del uso del sistema.




3. Optimizar las operaciones mediante la rápida ejecución de operaciones comunes, la consistencia de la interfaz y organizando y reorganizando la estructura de la información basándose en la observación del uso del sistema.

4. Facilitar buenos mensajes de error, crear diseños que eviten los errores más comunes, haciendo posible deshacer acciones realizadas y garantizar la integridad del sistema en caso de un fallo de software o hardware.

“La interactividad es tacto”

Derrick de Kerckhove: “Inteligencias en conexión. Hacia una sociedad de la web”, Gedisa, Barcelona, 1999 .p.21-22

Derrick de Kerckhove

Eco, Umberto , “Obra abierta”. 2a ed. – Barcelona, Ariel, 1979.

Derrick de Kerckhove/ Umberto Eco

Sybille Kramer distingue 5 características fundamentales de los medios interactivos:

KRAMER, S.: "Spielerische Interaktion" en ROTZER, F. (ed.) (1995): Schone Neue Welten? Auf den Weg zu einer neuen Spielkultur, München.

Sybille Kramer

1. Los entornos creados con ordenadores se convierten en mundos simbólicos, que surgen "de la representación visual, auditiva o táctil de expresiones aritméticas generadas por ordenador", y que tienen su propia naturaleza semiótica.

Sybille Kramer Medios interactivos

2. En la interacción entre ser humano y máquina se establece un intercambio de acciones y reacciones que presentan en su conjunto un desarrollo autárquico (autosuficiente).


3. Las consecuencias de dicha interacción son imposibles de predecir, y ello les confiere el carácter de acontecimientos emergentes.


4. Un entorno generado por ordenador es un sistema de reglas con el cual se establece una relación experimental.


5 . Se posibilita una doble función de observación y participación.


Roger Malina

Astrofísico en el Laboratorio de Astrofísica de Marsella CNRS en Francia. Editor ejecutivo de las publicaciones Leonardo divulgadas por The MIT Press

http://www.leonardo.info/

1) La posibilidad de llevar a cabo una interacción que cambia el status interno del ordenador.

2) La viabilidad del ordenador de integrar posibilidades de aprendizaje, de forma que el status interno del computador pueda cambiarse cuando se produce la interacción

3) La posibilidad de conectar varios computadores físicamente remotos a través de redes de telecomunicación.

4) La facultad de asimilar y procesar de diversas maneras señales que no son accesibles a los sentidos humanos, y conectar estas señales de forma sinestésica

5) La capacidad de almacenar gran cantidad de información que sea accesibles de forma sencilla. A éstas deberíamos añadir la factibilidad de autogenerar información significativa original (no preoprogramada, como en los sistemas de IA) y la capacidad de simular comportamientos como si de organismos vivos se tratara ( como los agentes inteligentes o seres de VA/IA)

Roger Malina elabora 5 criterios o características esenciales de los medios interactivos:

Entrevista a Roger Malina (Director de leonardo) http://www.uoc.edu/artnodes/esp/art/malina.html

NIVELES DE INTERACIÓN

2

1

0


2

1

0 Navegación

Permite moverse en diferentes líneas y rutas a través de contenidos preestablecidos que no varían. ( CD-ROMs / WEB SITE / DVD)


2

1

0 Navegación Permite moverse en diferentes líneas y rutas a través de contenidos preestablecidos que no varían. ( CD-ROMs / WEB SITE / DVD)

Generación La interacción produce comportamientos

emergentes que determinan el curso de la pieza ( video juegos )


2

1

0

Modificación La interacción no solamente permite lecturas multilineales y comportamientos emergentes, sino que además su resultado modifica permanentemente la naturaleza de la pieza. ( bases de datos/ inserción usuario )

Navegación Permite moverse en diferentes líneas y rutas a través de contenidos preestablecidos que no varían. ( CD-ROMs / WEB SITE / DVD)

Generación La interacción produce comportamientos

emergentes que determinan el curso de la pieza ( video juegos )


Explorativa: Walk throught


A

B

C

Desde una aspecto físico/material



Contributiva: Modificar objetos con restricciones

A

B

C




A

B

C Manipulativa: Modificar objetos y cosas

Contributiva: Modificar objetos con restricciones


a

b

c

COMO PUNTO DE REFENCIA EL COMPORTAMIENTO Y LA CONSCIENCIA


PETER WEIBEL http://en.wikipedia.org/wiki/Peter_Weibel

a

b

c


INTERACCIÓN SINESTÉSICA

consiste en la interacción entre materiales y elementos, como por ejemplo imagen y sonido, color y música

NIVELES DE INTERACIÓN PETER WEIBEL

a

b

c




INTERACCIÓN SINÉRGICA

se produce entre estados energéticos, como en obras que reaccionan al cambio en el entorno


a

b

c




INTERACCIÓN SINÉRGICA

se produce entre estados energéticos, como en obras que reaccionan al cambio en el entorno

INTERACCIÓN COMUNICATIVA O CINÉTICA

entre personas y entre objetos.


ESTILOS DE INTERACCIÓN


Manipulación directa

EJ: Metáforas de escritorio, herramientas de diseño asistido, sistemas de control y juegos.

Se caracterizan por la representación visual de objetos y acciones, los usuarios pueden de una manera inmediata interactuar con los elementos y observar sus resultados.

ESTILOS DE INTERACCIÓN Ventajas y desventajas

VENTAJAS DESVENTAJAS

Presenta los conceptos de tarea visualmente Puede resultar difícil de programar

Permite un fácil aprendizaje Puede ser necesario la visualización gráfica

de dispositivos señaladores

Permite fácil retención

Permite evitar errores

Estimula la exploración

Proporciona una alta satisfacción subjetiva

Manipulación directa


Selección de menús

Se caracterizan por que el usuario lee una lista de elementos, seleccionan el más adecuado y observan el efecto.

El mayor beneficio es la estructura clara para toma de decisiones, puesto que todas las posibilidades se presentan a un mismo tiempo.



Acorta el aprendizaje Presenta peligro de tener muchos menús

Reduce el número de clicks Puede ralentizar a usuarios habituales

Estructura la toma de decisiones Ocupa espacio en pantalla

Permite el uso de herramientas de gestión de diálogos Requiere velocidad de visualización rápida

Permite soporte fácil de manejo de errores

Selección de menús


Formularios

Se caracterizan por la constante entrada de datos, normalmente incómodos utilizando una única selección de menú y la obligatoriedad del rellenado de los mismos



Simplifica la entrada de datos Ocupa espacio en pantalla

Necesita cierto aprendizaje

Ofrece ayuda práctica

Permite el uso de herramientas de gestión de

formularios

Formularios


Lenguaje de ordenes

Para usuarios habituales, los lenguajes de ordenes proporcionan una fuerte sensación de poseer el control. Los usuarios aprenden la sintaxis y pueden expresar posibilidades complejas.

Los porcentajes de error de estos sistemas son bastante altos.



Es flexible Tiene un manejo de errores pobre

Atractivo para usuarios avanzados Requiere mucho aprendizaje y memorización

Apoya la iniciativa del usuario (haz lo que quieras)

Permite la creación práctica de macros definidas por

el usuario. ( uso de reglas)

Lenguaje de órdenes


Lenguaje natural (NLI, Natural language interaction)

Estilo de interacción donde la computadora y el usuario se interrelacionan de una manera natural, interlocutando entre ellos sin obstáculos de relación, por ejemplo de manera oral.


VENTAJAS (hoy) DESVENTAJAS (hoy)

Aligera la carga de aprendizaje de la sintaxis Requiere diálogo de aclaración

Puede no mostrar el contexto

Puede necesitar introducción de ordenes por

teclado

Es impredecible

Lenguaje natural

Modelos de impacto del tiempo de respuesta

TIEMPO

Velocidad de visualización: Es la velocidad, en caracteres por segundo (Velocidades bajas 120 cps)

Velocidad de visualización gráfica: La velocidad de visualización para gráficos se mide en bytes*segundos

CPS

Bytes*segundos

TIEMPO

Modelo de tiempo de respuesta del sistema,

TIEMPO REAL

Tiempo

Modelo de tiempo de respuesta del sistema, tiempo de planificación

del usuario y tiempo de pensamiento del usuario

TIEMPO REAL

Tiempo

• David Rokeby interactuando con “VNS” (Very Nervious System) 1986.

TIEMPO REAL

Tiempo

Tiempo Recomendaciones sobre le tiempo de respuesta:

• Los usuarios prefieren tiempos de respuesta más cortos.

• Los tiempo de respuesta largos (>15 segundos) impiden al usuario trabajar con normalidad.

• Los usuarios cambian los perfiles de uso según el tiempo de respuesta

• Un tiempo de respuesta más corto conduce a un tiempo de pensamiento más corto

• Un ritmo más rápido puede incrementar la productividad, pero también puede incrementar el porcentaje de error.

• La facilidad de respuesta debería ser adecuado apara la tarea:

•Mecanografiado, movimiento del cursor, selección con el ratón: 50-150 milisegundos

•Tareas sencillas y frecuentes: 1 segundo

•Tareas habituales: 2-4 segundos

•Tareas complejas: 8.-12 segundos

• Se debería notificar a los usuarios los retardos grandes (loadings).

• Procurar que la puesta en marcha sea rápida.

• La variabilidad pequeña en el tiempo de respuesta es aceptable.

• Los retardos inesperados resultan molestos

• Ofrecer a los usuarios la posibilidad de el ritmo de interacción.

• Las pruebas empíricas pueden ayudar a establecer tiempos de respuesta adecuados.

Tiempo Reducir la frustración del usuario:

• Incrementar la capacidad, en el caso web > del servidor, la velocidad de la red y la fiabilidad del modem.

• Mejorar la formación del usuario, la ayuda en línea y los tutoriales en línea.

• Rediseñar las instrucciones y los mensajes de error

• Organizar grupos de protección del consumidor

• Incrementar la investigación sobre frustración del usuario.

• Catalizar discusiones públicas para aumentar la concienciación

“la obra artística se efectúa dentro de un tiempo ideal, no existencial. “ [1]

BURNHAM, J, “Real Time Systems”, Artforum, septiembre de 1969, pp 49-53

“Global City”, Sawad Brooks.2002

Tiempo

http://artport.whitney.org/commissions/codedoc/Brooks/globalcity.html http://www.open-work.com/sawad/portfolio/general/index.html

TIEMPO SIMULADO

TIEMPO REAL TIEMPO HIBRIDO

Sin referencias directas a la realidad de nuestro mundo,

Confunde el tiempo de la máquina con el del sujeto, que no existe autónomamente, puesto que está vinculado con usuario del sistema interactivo

Sirve para designar la respuesta instantánea y continua de una máquina a un comando

Tiempo

Fuente: Giannetti, Claudia, Estética Digital , l'angelot Edt, Barcelona 2002

¿CÓMO ORGANIZO ESTO?

¿DISEÑO?

¿MULTI - MEDIA? ¿CONTENIDOS?

DISEÑO DE LA INFORMACIÓN

DISEÑO DE LA INTERACCIÓN

“Creatividad no quiere decir improvisación sin método: de esta forma sólo se genera confusión y los jóvenes se hacen ilusiones de ser artistas libres e independientes ... el método proyectual para el diseñador no es algo absoluto y definitivo; es algo modificable si se encuentran otros valores objetivos que mejoren el proceso..”

¿Cómo nacen los objetos?. Bruno Munari

Munari, Bruno, “¿Cómo nacen los objetos?”, GG Diseño , Barcelona, 1993

MULTIMEDIA/INTERACTIVOS

Esta basado en la integración de disciplinas

MULTIMEDIA/INTERACTIVOS

PROCESO DE ELABORACIÓN INTERFAZ/GRÁFICO

Diseño de

la Información

Diseño de

la interacción

Diseño de

la presentación

- Definir el producto ( Artístico, Comercial,......)

- Organizar el Contenido en Diagramas de Flujos.

- Definir Estilo

- Crear una beta o prototipo

- Definir la Navegación ( Tipos de Interacción, Controles...)

- Trazar un Guión

Diseño de

la Información

Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA

1.A Organización del información. ( listas de Contenidos, plan de proyecto,

Crear un diagrama de Flujos ...)

2.A Planificación de recursos ( Presupuesto/recursos/Tiempo)

3.A Elección de la Herramienta. ( Online /Off line)

4.A Público ( necesidades e intereses del público)

5.A Objetivos. ( ¿Qué quiero Conseguir?)


- Objetivos del Diseño:

El Usuario quiere:

•1. APRENDER - Ser claro, sencillo,directo,reiterativo,utilizar pruebas y correcciones.

•2. DIVERSIÓN - Ser Variado, aleatorio e ingenioso

•3. COMPRENSIÓN - Explicaciones conceptuales , ilustraciones, gráficos, etc....

•4. EXPERIMENTACIÓN — Alto nivel de Interacción, control del usuario sobre acciones y hechos, imágenes y sonidos

•5. ACTUAR O COMPRAR.Opciones claras, teléfonos gratuitos, formularios claros de pedido interactivo.

Diseño de

la Información

Diseño de

la Información


-Objetivos del Diseño:

-Entorno:

- Público: A que usuario se dirige (Edad, Género,etc...)

- Utilización: Uso doméstico, empresa, en grupo, solitario...

- Entorno: Ruidoso , Silencioso,etc...

Diseño de

la Información


-Objetivos del Diseño:

-Entorno:

-Diagrama de Flujos:

Es un esbozo presentando como diagrama, con líneas que muestran las rutas de acceso entre sus partes.

Diseño del Diagrama:

- El Contenido, organización y estructuras de la información.

- La utilización: Categorías temáticas y las rutas de acceso

La sencillez, diseño claro. Sencillez-Principio de economía de Guillermo de Ockham, SXIV)

Diseño de

la Información

-Diagramas de Flujos (Workflow):

Diseño de

la interacción

La interacción en un proyecto multimedia interactivo, significa que el usuario, no el diseñador controla la secuencia, la velocidad y lo más importante, lo que mirar y lo que ignorar.

Diseño de la interacción TAREAS DEL DISEÑO

- Crear un sistema, guía para orientar al usuario.

- Diseñar la navegación y rutas.

- Definir pantallas.

- Diseñar Controles para la interacción (botones)

- Crear un guión.

Todo esto esta basado en el diagrama de Flujos

1

Flecha. Indica el sentido y trayectoria del proceso de información o tarea.

Rectángulo. Se usa para representar un evento o proceso determinado. Éste es controlado dentro del diagrama de flujo en que se encuentra. Es el símbolo más comúnmente utilizado.

Rectángulo redondeado. Se usa para representar un evento que ocurre de forma automática y del cuál generalmente se sigue una secuencia determinada.

Rombo. Se utiliza para representar una condición. Normalmente el flujo de información entra por arriba y sale por un lado si la condición se cumple o sale por el lado opuesto si la condición no se cumple. Lo anterior hace que a partir de éste el proceso tenga dos caminos posibles.

Círculo. Representa un punto de conexión entre procesos. Se utiliza cuando es necesario dividir un diagrama de flujo en varias partes, por ejemplo por razones de espacio o simplicidad. Una referencia debe de darse dentro para distinguirlo de otros. La mayoría de las veces se utilizan números en los mismos.

DIAGRAMAS DE FLUJOS

ENTIENDO LA LECCIÓN

HE APRENDIDO EL TEMA

SI NO

GUARDO EN MEMORIA

2

2

LEO LA LECCIÓN 1

ANALIZO

1

Diseño de

la interacción

TAREAS DEL DISEÑO

Ej: Definir pantallas

AREA DE NAVEGACIÓN

AREA DE TITULARES

AREA DE INFORMACIÓN

INTERACTIVA

Diseño de la interacción

1

TAREAS DEL DISEÑO

Ej: Definir pantallas


1

http://www.ed-dolmen.com/arte/ayuda.htm

TAREAS DEL DISEÑO Diseño de la interacción

2 PUNTOS ATENER EN CUENTA

- Motivar para tener una experiencia .

- Crear un viaje interesante

- Dar controles a los usuarios que les permitan navegar.

- Hacer una experiencia clara e intuitiva.

Usabilidad

3 Problemática de la frustración (“esto no lo puedo manejar”)

Esto se resuelve orientándolos desde el principio.

Consejos :

- Primeras pantallas proporcionaran al usuario información sobre lo que va a hacer, ver o experimentar.

- Necesita un equilibrio de imágenes y palabras que le proporcionen una guía.

ORIENTACIÓN

TAREAS DEL DISEÑO

4 MAPAS DE IMÁGENES Y METÁFORAS. ( General)

Usabilidad

1._Mapas . Tiene dos propósitos :

- Imágenes que representan un contenido.

- Imágenes que conducen hacia él.

2._ Metáforas.

Tipo de imágenes , estas representan información.

Su función es crear significado. ( Ej: edificio= empresa, mapa= localización, impresora= imprimir)

Las metáforas funcionaran si el público esta familiarizado con ellas y con el contenido conceptual de la misma.


TAREAS DEL DISEÑO

4b MAPAS DE IMÁGENES Y METÁFORAS. CREACIÓN DE ICONOS

Usabilidad

Teorías de la semiótica que Marcus (*) aplica como guía para cuatro niveles en el diseño de iconos .

1. Cualidades léxicas: Marcas generadas por computadora – silueta de píxeles, color, brillo, parpadeo.

2. Sintaxis. Apariencia y movimiento, líneas , patrones, partes modulares, tamaño, forma.

3. Semántica. Objetos representados –concreto frente abstracto, parte frente a todo

4. Pragmática. Legibilidad, utilidad, facilidad para identificarlo, facilidad para memorizarlo y agradabilidad a nivel global

5. Dinámica. Predisposisción a los clics. Resaltar, arrastrar, combinar.


(*) Marcus, Aaron, Graphic Design for electronic documents and User Interfaces, ACM, New York, 1992

TAREAS DEL DISEÑO

5 NAVEGACIÓN


Tipos de Estructuras

A) Jerárquica B) lineal C) lineal con jerarquía D) red

La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio.

La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.

Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de saber que, con forme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.

TAREAS DEL DISEÑO

5 NAVEGACIÓN




La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior.

Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas.

Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.

Este tipo de estructura sería válido para tours de visita guiada.

TAREAS DEL DISEÑO

5 NAVEGACIÓN




Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea.

Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro.

TAREAS DEL DISEÑO

5 NAVEGACIÓN




La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente.

Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar.

Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad. ( asociar la metáfora creativa de la que partimos con la estructura ).

NAVEGACIÓN INVISIBLE

NAVEGACIÓN VISIBLE

NAVEGACIÓN Diseño de la interacción

NAVEGACIÓN VISIBLE

Estructuras y mapas mentales, SENCILLOS de seguir o de dibujar mentalmente en un simple vistazo.

• Ofrecer lo mínimo imprescindible

• Procurar que le usuario parezca qe esta en el mismo sítio, trabajando a medida que avanza

• Da seguridad y control

• Minimizar niveles

• Evita mapas y herramientas de navegación

EJ: WORK FLOW

Diseño de la interacción NAVEGACIÓN

http://www.apple.com/es/itunes/

NAVEGACIÓN INVISIBLE

EVITARLA PRODUCTO COMERCIAL

Estructuras y mapas mentales, imposibles de seguir o de dibujar mentalmente en un simple vistazo

• Rhizomática

• Espacios ocultos y avanzados sin control

• inseguridad y pérdida

• creación de niveles innecesarios

• Necesidad de mapas y herramientas de navegación

EJ: LA PROPIA RED


Yucef Merhi , Maximum Security, 1998-2004 Hugo Chavez' E-mails, Hacking on Paper

http://marumushi.com/apps/newsmap/ Marcos Weskamp

NAVEGACIÓN

• Estandarizar secuencias de tareas.

(Permitir a los usuarios realizar tareas en el mismo orden y de la misma manera en situaciones parecidas.)

Compra online


CONSEJOS 5

•Asegurar que los enlaces embebidos son descriptivos. (Cuando se incluyen enlaces, el texto del enlace debería describir con exactitud el destino del enlace.)

5 CONSEJOS


• Usar encabezados únicos y descriptivos.

(Usar encabezados que sean diferentes de cualquier otro y relacionados conceptualmente con el contenido)

5 CONSEJOS


• Usar casillas de selección para elecciones binarias.

•(proporcionar un control de casillas de selección para que los usuarios elijan entre dos estado claramente distinguibles, como son “encedido” y “apagado, “on” “off”.)

5 CONSEJOS


• Usar imágenes en miniatura (thumbnails) para dar una vista previa de imágenes grandes.

Trama de thumbnails

5 CONSEJOS


• Desarrollar páginas que se imprimirán correctamente.

1. Procurar tener las tablas e imagenes con tamaño fijo inferiores a los 750 pixels de ancho.

2. Si usas tamaño en % no hay problemas.

3. No uses frames.

Esquema de web con frames

5 CONSEJOS


TAREAS DEL DISEÑO Diseño de la interacción

6 Proporcionar el camino más sencillo entre dos puntos cualesquiera del producto

Tipos ( Menús , listas, líneas cronológicas, iconos, mapas, botones...)

ACCESOS DIRECTOS

TAREAS DEL DISEÑO

7


-Acceso a un tema nuevo, puede ser un salto de magnitud y cambio de escenario completo.

-Acceso a un mismo tema: Cambios Sutiles

Para crear una guía utilizar un anclaje visual

- Titulares, fondos y otros gráficos.

NIVELES DE ACCESO

- Quitar obstáculos. No ser reiterativo con los gráficos y los textos en la misma pantalla. Deje que el usuario pique lo que quiera.

- Proporcione información: Inmediata y apropiada, subrayar los textos los elementos, sonidos, etc....

- Ser Explicito: Hacer obvios los elementos lo que se puede actuar y los que no.

- Ser Flexible: Deje que usuario use atajos o pueda salir cuando quiera.

8 USOS

TAREAS DEL DISEÑO

9 -Es una herramienta que hará que todo el grupo que trabaja en el proyecto funcione de acuerdo al proyecto.

-En el se proyectaran toda la navegación, diseño e interacción de la pieza final.

GUIÓN

1. Formulación del Objetivo

2. Formulación de la intención

3. Especificación de la acción

4. Ejecución de la acción

5. Interpretación del estado del sistema

6. Evaluación del resultado

10 RESUMEN


Interactividad Prof: Moisés Mañas

[email protected] :)

• Laurel, B. (ed.) The Art of Human-Computer Interface Design. MA: Addison-Wesley, 1990. • Laurel, B. Computers as Theatre. Reading, MA: Addison-Wesley, 1993 • Norman, D. A. The Design of Everyday Things. New York: Doubleday, 1990. • Claude Ghaoui, Encyclopedia of human computer interaction, Idea Group Reference, 2006 • Moggridge, Bill , Designing interactions, MIT Press, 2007 • Cooper, Alan, About face 3: the essentials of interaction design, Wiley, 2007 • Barber, R, E and lucas, HC, System reponse time, operator productivity, and job satisfaction, Comunications of the ACM, 26,11(Noviembre 1983), 972-986 • Giannetti, Claudia, Estética Digital , l'angelot Edt, Barcelona 2002 • BURNHAM, J, “Real Time Systems”, Artforum, septiembre de 1969, pp 49-53 • Derrick de Kerckhove: Inteligencias en conexión. Hacia una sociedad de la web, Gedisa, Barcelona, 1999 .p. 117

Bibliografía

REACCIÓN VS INTERACCIÓNpersonales.upv.es/.../download/interactivo_reactivo.pdf · 2011-10-11 ·...

Documents

Transcript of REACCIÓN VS INTERACCIÓNpersonales.upv.es/.../download/interactivo_reactivo.pdf · 2011-10-11 ·...