Post on 24-Jan-2019
REACCIÓN VS INTERACCIÓN ALGUNOS ASPECTOS SOBRE INTERACTIVIDAD
Interactividad Prof: Moisés Mañas
Moimacar@esc.upv.es
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.
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.
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
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.(Cine clásico)
INTERACTIVIDAD
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.(Cine clásico)
Reactivo, cuando un mensaje se relaciona solamente con un mensaje inmediatamente anterior.
INTERACTIVIDAD
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.(Cine clásico)
Reactivo, cuando un mensaje se relaciona solamente con un mensaje inmediatamente anterior.(Puerta)
INTERACTIVIDAD
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.(Cine clásico)
Reactivo, cuando un mensaje se relaciona solamente con un mensaje inmediatamente anterior.(Puerta)
Interactivo, cuando un mensaje se relaciona con un número de mensajes anteriores y con la relación entre ellos.
INTERACTIVIDAD
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.(Cine clásico)
Reactivo, cuando un mensaje se relaciona solamente con un mensaje inmediatamente anterior.(Puerta)
Interactivo, cuando un mensaje se relaciona con un número de mensajes anteriores y con la relación entre ellos (Wikipedia)
INTERACTIVIDAD
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...
¿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
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
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
La Interacción Humano-Máquina (IHM) [ Human Computer Interaction HCI ],
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
• 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á
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.
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:
1. Conocer al usuario
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:
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.
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:
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.
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:
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.
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).
Sybille Kramer Medios interactivos
3. Las consecuencias de dicha interacción son imposibles de predecir, y ello les confiere el carácter de acontecimientos emergentes.
Sybille Kramer Medios interactivos
4. Un entorno generado por ordenador es un sistema de reglas con el cual se establece una relación experimental.
Sybille Kramer Medios interactivos
5 . Se posibilita una doble función de observación y participación.
Sybille Kramer Medios interactivos
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
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)
NIVELES DE INTERACIÓN
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 )
NIVELES DE INTERACIÓN
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 )
NIVELES DE INTERACIÓN
Explorativa: Walk throught
NIVELES DE INTERACIÓN
Contributiva: Modificar objetos con restricciones
A
B
C
Desde una aspecto físico/material
Explorativa: Walk throught
NIVELES DE INTERACIÓN
A
B
C Manipulativa: Modificar objetos y cosas
Contributiva: Modificar objetos con restricciones
Desde una aspecto físico/material
a
b
c
COMO PUNTO DE REFENCIA EL COMPORTAMIENTO Y LA CONSCIENCIA
NIVELES DE INTERACIÓN
PETER WEIBEL http://en.wikipedia.org/wiki/Peter_Weibel
a
b
c
COMO PUNTO DE REFENCIA EL COMPORTAMIENTO Y LA CONSCIENCIA
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
COMO PUNTO DE REFENCIA EL COMPORTAMIENTO Y LA CONSCIENCIA
INTERACCIÓN SINESTÉSICA
consiste en la interacción entre materiales y elementos, como por ejemplo imagen y sonido, color y música
INTERACCIÓN SINÉRGICA
se produce entre estados energéticos, como en obras que reaccionan al cambio en el entorno
NIVELES DE INTERACIÓN PETER WEIBEL
a
b
c
COMO PUNTO DE REFENCIA EL COMPORTAMIENTO Y LA CONSCIENCIA
INTERACCIÓN SINESTÉSICA
consiste en la interacción entre materiales y elementos, como por ejemplo imagen y sonido, color y música
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.
NIVELES DE INTERACIÓN PETER WEIBEL
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
ESTILOS DE INTERACCIÓN
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.
ESTILOS DE INTERACCIÓN Ventajas y desventajas
VENTAJAS DESVENTAJAS
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
ESTILOS DE INTERACCIÓN
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
ESTILOS DE INTERACCIÓN Ventajas y desventajas
VENTAJAS DESVENTAJAS
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
ESTILOS DE INTERACCIÓN
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.
ESTILOS DE INTERACCIÓN Ventajas y desventajas
VENTAJAS DESVENTAJAS
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
ESTILOS DE INTERACCIÓN
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.
ESTILOS DE INTERACCIÓN Ventajas y desventajas
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
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 de planificación
del usuario y tiempo de pensamiento del usuario
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
“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
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?)
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
- 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
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
-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
Proceso de Clasificar sus objetivos comunicativos y organizar la información. > IDEA
-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 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
Diseño de la interacción
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.
Diseño de la interacción
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.
Diseño de la interacción
(*) Marcus, Aaron, Graphic Design for electronic documents and User Interfaces, ACM, New York, 1992
TAREAS DEL DISEÑO
5 NAVEGACIÓN
Diseño de la interacció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
Diseño de la interacción
Tipos de Estructuras
A) Jerárquica B) lineal C) lineal con jerarquía D) red
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
Tipos de Estructuras
A) Jerárquica B) lineal C) lineal con jerarquía D) red
Diseño de la interacció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
Tipos de Estructuras
A) Jerárquica B) lineal C) lineal con jerarquía D) red
Diseño de la interacció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 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
Diseño de la interacción NAVEGACIÓN
Yucef Merhi , Maximum Security, 1998-2004 Hugo Chavez' E-mails, Hacking on Paper
• Estandarizar secuencias de tareas.
(Permitir a los usuarios realizar tareas en el mismo orden y de la misma manera en situaciones parecidas.)
Compra online
Diseño de la interacción NAVEGACIÓN
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
Diseño de la interacción NAVEGACIÓN
• Usar encabezados únicos y descriptivos.
(Usar encabezados que sean diferentes de cualquier otro y relacionados conceptualmente con el contenido)
5 CONSEJOS
Diseño de la interacción NAVEGACIÓN
• 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
Diseño de la interacción NAVEGACIÓN
• Usar imágenes en miniatura (thumbnails) para dar una vista previa de imágenes grandes.
Trama de thumbnails
5 CONSEJOS
Diseño de la interacción NAVEGACIÓN
• 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
Diseño de la interacción NAVEGACIÓN
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
Diseño de la interacción
-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
Diseño de la interacción
Interactividad Prof: Moisés Mañas
Moimacar@esc.upv.es :)
• 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