Caracterización y diseño de interactivos multimedia de difusión cultural

1. Caracterización y diseño de interactivos multimedia de difusión cultural J. Ignasi Ribas (ribas@iua.upf.edu) Master en Artes Digitales 04-05 Diseño de Interactivos / Módulo Producción Multimedia

2. El hipertexto y las aplicaciones multimedia interactivas Aproximacionesdiversas al guión y diseño de interactivos: eficacia y estímulo. Tipología de las aplicaciones interactivas.

3. Hipertexto: algunas ideas • Precedentes: • Bush. Memex: estructura no lineal de documentos correspondiente a la naturaleza asociativa del espíritu humano • Engelbart. Mejora de las capacidades intelectuales del hombre • Nelson. Hipertexto: cualquier pieza de escritura no lineal (Xanadu) • Los ordenadores posibilitan la realización práctica de los hipertextos. • Hipertexto: una nueva forma de acceder a la información, moviéndose a su través a base de asociaciones.

4. Hipertexto: navegar por asociación • Asociaciones de cualquier tipo: • Jean-Pierre Balpe: “ ...les hypertextes ont mis en évidence la navigation libre et son imposés comme moyen original d’appréhender l’information en permettant des associations entre informations, associations non nécessairement guidées par des nécessités déductives – de cause à effet ou de tout autre nature logique – mais par des nécessités purement intuitives ou d’associations d’idées”. • José Antonio Marina: “Interpretamos las palabras desde nuestros conocimientos lingüísticos, y también desde nuestros prejuicios, y también – lo que supone una complicación añadida – desde nuestro estado afectivo.”

5. Hipertexto, nodos y enlaces • Hipertexto: red de piezas interconectadas de información textual. • Nodos: las piezas básicas, los documentos elementales, atómicos, de la red. Son unidades semánticas: cada nodo expresa una sola idea o concepto. El criterio, bàsico pero no único, para esta diferenciación atómica es el significado desde el punto de vista característico del contenido. • Enlaces: (links) son los elementos de la red que conectan los nodos entre ellos permitiendo al usuario desplazarse nodo a nodo. El criterio para la elección de enlaces es característico del hipertexto (de su autor). • Ancla: la pequeña porción del nodo origen (palabra, frase, fragmento de imagen) a la que está conectado el enlace.

6. Semántica del hipertexto • La elección de nodos es un proceso basado en criterios relativamente “objetivos”: semántica propia del contenido, presentación (tamaño de pantalla), funcionalidad (archivo informático diferenciado). • La elección de enlaces es siempre subjetiva. Aquí se halla la carga de significado, la semántica procedente del hecho de estructurar la información como un hipertexto. • Una manera muy elegante de considerar los hipertextos es como contenedores a la vez de información y de conocimiento. Los nodos son el soporte de la información, los enlaces el soporte del conocimiento, las anclas la articulación entre ambos. La idea original es de M. Nanard.

7. Hipertexto e hipermedia • Multimedia: digitalización común e integración consiguiente en un mismo soporte informático, de texto, sonido, gráficos, fotografías e imágenes animadas. • Hipermedia: multimedia gestionado como hipertexto. Red de piezas interconectadas de información multimedia. • La homogeneidad propia de la digitalización hace que sea estructuralmente irrelevante el contenido de los archivos. • Hablaremos indistintamente de hipertexto e hipermedia. • George P. Landow: “Puesto que el hipertexto, al poder conectar un pasaje de un discurso verbal a imágenes, mapas, diagramas y sonido tan fácilmente como a otro fragmento verbal, expande la noción de texto más allá de lo meramente verbal, no haré la distinción entre hipertexto e hipermedia.”

8. Sistemas y aplicaciones • Sistema hipermedia: herramienta generadora de aplicaciones hipertextuales. • Ejemplos: Director, Hypercard, Dreamweaver • Aplicación hipermedia: red específica de información multimedia interconectada. • Ejemplos: “Moi Cézanne” (CD-ROM), www.iua.upf.es (web) • Sinónimos “ad-hoc”: • Documento, hiperdocumento • Aplicaciones interactivas multimedia • Interactivos multimedia • Interactivos • etc.

9. Aplicaciones estructuradas con una finalidad • “Nubes” informativas, grandes bases de datos con información difusa. Recuperación de información no condicionada. Conocimiento adquirido por exploración libre. • Aplicaciones con una finalidad específica: dirigidas a la “resolución de problemas” específicos y por tanto con una mayor estructuración y constricciones de navegación. • Esta estructuración permite controlar el ritmo, el aprendizaje, el disfrute del usuario. • Brenda Laurel: “...a system in which people is encouraged to do whatever they want will probably not produce pleasant experiences.” • David Riordan: “Infinite choice equals a database. Just because you can make a choice doesn’t mean it’s an interesting one.”

10. Autor/ lector y la pragmática del hipertexto • Autor/lector: eje clave para analizar la interactividad. • Sinónimos: • Autor: diseñador, guionista, emisor. • Lector: usuario, participante, aprendiz, receptor. • El autor escoge los enlaces entre nodos con una intención. Crea la semántica propia del hipertexto. • El lector recibe en función de unas intenciones y un entorno o contexto. • Pragmática de la comunicación interactiva.

11. Hipertexto y bases de datos • Piezas discretas de información con atributos concretos: base de datos. • La mayoría de autores definen inicialmente el hipertexto como una base de datos. Ben Shneiderman: ” ...a database that has active cross-references and allows the reader to "jump" to other parts of the database as desired. This makes the reading (and writing) process nonsequential.” • La navegación permite una exploración libre e informal del espacio de la información. La interrogación o recuperación ofrece un acceso formal y analítico a base de la formulación de preguntas sucesivas. • Las dos aproximaciones son complementarias. • Ejemplo: la combinación de ambas en la World Wide Web.

12. CLIENTE PRODUCTOR EJECUTIVO PRODUCTOR Equipo de desarrollo del proyecto DISEÑADOR INTERACTIVO PRODUCTOR ANALISTA DIRECTOR EXPERTO DE AUDIOVISUAL INFORMÁTICO CREATIVO CONTENIDOS DIRECTOR DISEÑADOR PROGRAMADOR GUIONISTA AUDIOVISUAL GRÁFICO EQUIPO PRODUCCIÓN PRUEBAS FOTÓGRAFO AUDIOVISUAL DE TEXTOS POST- DIGITALIZACIÓN DIGITALIZACIÓN PRODUCCIÓN DE IMAGEN FIJA DE TEXTOS DIGITALIZACIÓN DE VÍDEO DIGITALIZACIÓN DE AUDIO El papel del diseño interactivo en el equipo de producción de interactivos

13. Organización y análisis de los hipertextos: ideas • Contenido (inventio): información de que consta el documento. Nodos y enlaces de contenido. • Estructura (dispositio): organización en una red determinada. Nodos y enlaces estructurales. • Presentación (elocutio): intermediario con el lector (interfaz). • Global, local: los dos aspectos se interelacionan en la lectura y por lo tanto en el diseño. Authoring-in-the-large versus authoring-in-the-small. (Franca Garzotto) • Modelos de hipertexto: sistemas de terminologías y mecanismos para analizar y producir aplicaciones hipertextuales de forma sistemática. • Ejemplos: HDM, RMM, RMDM, Dexter, Amsterdam.

14. Dos problemas clásicos de la relación con un hipertexto • Desorientación o pérdida en el hiperespacio • Desorientación dentro de la estructura general • Incapacidad de hallar la información deseada • Saturación cognitiva • Sobresfuerzo cognitivo inicial para aprender las funcionalidades del sistema o aplicación hipertextual • Sobresfuerzo debido a la responsabilidad de controlar el flujo • Soluciones directas: mejorar la eficacia • Soluciones indirectas: estimular al usuario

15. Aceptabilidad social Utilidad Fácil de Aprovechamiento aprender Aceptabilidad Eficacia de uso del sistema Usabilidad Fácil de Coste recordar Compatibilidad Pocos errores Aceptabilidad práctica Subjetivamente Confianza agradable Etc. Aceptabilidad de un sistema informático (Nielsen)

16. Algunos conceptos de diseño interactivo • Nielsen: • Utilidad: la manera cómo las funcionalidades de la aplicación cumplen sus objetivos. • Usabilidad: la manera cómo los usuarios usan las funcionalidades. • Eficacia de uso: grado de productividad una vez aprendido el sistema. • Satisfacción: sensación subjetiva agradable al usar la aplicación. • Eficacia: facilidad de uso, de memorización, productividad, etc. • Estímulo: el disfrute más que la satisfacción, como mecanismo central para conseguir los objetivos de la aplicación.

17. Desorientación y saturación: soluciones dirigidas a la eficacia • Soluciones heurísticas para disminuir la desorientación • Soluciones “generalistas” • Limitación estructural, linealización • Análisis topológico de estructuras, patrones de simplificación • Herramientas de ayuda a la navegación • Herramientas de visualización • Herramientas de transición global / local • Ayudas a la navegación local • Recorridos guiados y sus variantes • Búsquedas y filtros preestablecidos • Metáforas • Guías de diseño • Heurísticas • Basadas en modelos cognitivos

18. Herramientas de ayuda a la navegación: herramientas de visualización • Correspondencia entre un espacio físico y el de la información para visualizar trayectorias, estructura y dimensiones. • Hojeadores gráficos o “browsers”: para avanzar o retroceder siguiendo cualquier camino posible. Paradigma: rectángulos unidos por flechas. • Visualizadores de jerarquía o estructura: para entender la organización general y también las dimensiones. Paradigma: organigrama. • Mapas: visualizadores con una metáfora espacial. • Navegadores: mapas activos.

19. Navegadores: ejemplos Moi, Paul Cézanne Joan Miró. El color dels somnis

20. Herramientas de ayuda a la navegación: herramientas de transición global / local • Para relacionar de forma ágil ambos niveles. • Visualización local más comprensión del contexto. • Herramientas de tipos “zoom”, “ojo de pez”, panorámicas, etc. • Elisión o esconder la información no relevante.

21. Navegador + transición global/local: ejemplo Navegador + panorámicas + zoom Au cirque avec Seurat

22. Herramientas de ayuda a la navegación: ayudas a la navegación local • Ayuda inmediata para la orientación en un punto concreto • Mecanismos de marcha atrás (backup): • Paso a paso • Por saltos • Por niveles • Historia: lista de nodos visitados para recorrerla en sentido inverso o aleatoriamente. • Marcadores (bookmarks): para volver a un punto seleccionado. • Hitos (landmarks): marcadores organizados a priori por el autor.

23. Ayudas a la navegación local: ejemplo Paso a paso, marcadores, historia... Netscape Comunicator

24. Herramientas de ayuda a la navegación: recorridos guiados y sus variantes • Recursos de linealización conceptual del hipertexto. • Visita guiada: presentación secuencial de un subconjunto de la red. • Personalización en función de la “historia” del usuario (enlaces “inteligentes”) o del contexto (por ejemplo con temas relacionados). • Evolución hacia “agentes” inteligentes. Orsay, visite virtuelle

25. Recorridos guiados: ejemplo Microsoft Art Gallery

26. Herramientas de ayuda a la navegación: búsquedas y filtros preestablecidos • Lo más parecido a la gestión de la información en bases de datos y a la gestión documental escrita. • Índices • Tablas de contenido • Filtros preestablecidos: • Por categorías: nombre, título, lugar, etc. • Por tiempo: cronologías • Ligadas o no explícitamente al contenido

27. Búsquedas y filtros preestablecidos: ejemplos Le Louvre

28. Navegación por el espacio y navegación con conceptos • Dos “capas” en la navegación por un hipertexto: • Navegación por la geografía o estructura del hipertexto. Posible pérdida por la complejidad de la red. • Navegación por su contenido. Posible desorientación por incomprensión de la organización y presentación del hipertexto. • Hay herramientas dirigidas al primer tipo de desorientación (por ejemplo visualizadores): dicen dónde están las cosas. • Hay herramientas dirigidas al segundo tipo (por ejemplo visitas guiadas): dicen qué son las cosas. • Adición de herramientas de ambos tipos. Terry Mayes: “ ...extending and tailoring basic hypertext facilities, not only with the fairly standard aids to access, such as browsers, but also with tools that help the user to explore the material conceptually, such as guided tours, indexes, and quizzes.”

29. Metáforas • Un elemento “real” como referente de algunas funciones de la aplicación. • Puede permitir compartimentar y estructurar una información extensa de acuerdo con parámetros reconocibles. • Ayuda al usuario a decidir y recordar caminos. • Ben Shneidermann: “Hipertext authors use metaphor in order to establish conventions readers can follow so they can ignore the interface they need to use to find information and just find the information” • Con el uso habitual, las metáforas pueden dejar de serlo. • Ejemplos: papelera, ventana. • El uso de metáforas puede trivializar y esconder características intrínsecas de la comunicación interactiva.

30. Guías heurísticas de diseño. Un ejemplo: Nielsen • 1: Diálogo simple y natural. • 2: Hablar la lengua del usuario. • 3: Minimizar la carga memorística del usuario. • 4: Mantener la consistencia. • 5: Retorno – “feedback” – de las acciones del usuario. • 6: Salidas claramente marcadas. • 7: Uso de atajos o aceleradores. • 8: Buenos mensajes de error. • 9: Prevenir los errores. • 10: Ayuda y documentación suficientes.

31. Unas “guías” basadas en psicología cognitiva y teoría de la acción (Donald A. Norman) • 1.- El estado de l’acción y sus alternativas han de ser visibles. • 2.- Ha de haber un buen modelo conceptual con una imagen consistente del sistema. • 3.- La interfície ha de incluir buenos "mappings" (trazados, cartografías) que revelen la relación entre los diversos estados. • 4.- El usuario ha de recibir un retorno contínuo.

32. Soluciones de diseño dirigidas al estímulo • Son soluciones indirectas, dirigidas a controlar a través de estímulos el interés de la persona que interactúa. • Soluciones muy abiertas. Por ejemplo, una desorientación controlada puede ser positiva. • Mark Bernstein: “...disorientation is not inherently wrong; indeed, a degree of disorientation, deliberately introduced and thoughtfully controlled and guided, can be a powerful tool for writers” • En general, se pueden buscar ideas en ámbitos clásicos en los que la reacción del público también es vital: teatro, narrativa. • La integración en entornos multimedia de los diversos lenguajes audiovisuales es otra línea a desarrollar.

33. Desorientación y saturación: soluciones dirigidas al estímulo • Control de la desorientación y transmisión de conocimientos • Algunas estrategias de diseño interactivo para disminuir la desorientación: • Descubrimiento y creación de estructura ligada a un contenido • Descubrimientos aleatorios, intuitivos • Reiteraciones, segundas visitas • Saturación cognitiva y transmisión de conocimientos • Algunas estrategias de diseño interactivo para disminuir la saturación cognitiva: • Escalonar esfuerzos • Integrar navegación por la estructura y navegación por el contenido • Interfaces “cognitivamente invisibles”, que no aumenten - o que disminuyan - la saturación

34. Los ejes Autor/Lector y Control/Descubrimiento: niveles de interactividad • La tensión entre autor y lector se materializa en el nivel de control y descubrimiento que comparten. • Esto origina una caracterización de diversos tipos de interactividad:

35. Autoría versus actuación • Janet Murray: “... el autor escribe las reglas que determinarán el texto además de escribir el texto en sí mismo.” • “El autor de narrativa electrónica es un coreógrafo que proporciona los ritmos, el contexto, y los pasos que se pueden bailar. El usuario, ya sea navegador, protagonista, explorador o constructor, simplemente utiliza este repertorio de pasos y ritmos posibles para improvisar un baile particular entre las muchas posibilidades que el autor ha preparado.” • “El usuario no es el autor de la narrativa digital, aunque puede experimentar uno de los aspectos más emocionantes de la creación artística: el poder de moldear materiales atractivos preexistentes. Esto no es autoria sino actuación.” p. 165

36. Los ejes Autor/Lector y Control/Descubrimiento: la experiencia del lector El eje de la experiencia del lector entre el disfrute y la dificultad. (Elizabeth Boling) El eje de tratamiento de la aplicación entre información y entretenimiento (Timothy Garrand).

37. Placer y disfrute • Mihaly Csikszentmihalyi: “Los sucesos capaces de hacernos disfrutar ocurren cuando una persona no solamente ha cumplido alguna expectativa anterior o satisfizo una necesidad o un deseo, sino también cuando ha ido más allá de lo que él o ella se habían programado hacer y logran algo inesperado, tal vez algo que nunca habían imaginado. El disfrute está caracterizado por este movimiento hacia adelante: por un sentimiento de novedad, de realización.” • “En nuestros estudios encontramos que toda actividad de flujo que involucrase la competición, el azar o cualquier otra dimensión de experiencia, tenía esto en común: ofrecía una sensación de descubrimiento, un sentimiento creativo que transportaba a la persona a una nueva realidad.”

38. Disfrute / dificultad y la experiencia de interactuar • Experiencias de disfrute: • Novedad, sorpresa • Descubrimiento Csikszentmihalyi

39. Una “dinámica” del diseño interactivo • 1: Minimizar las dificultades negativas. • Soluciones directas para evitar conflictos, errores, incoherencias, violación indeseada de expectativas, etc. • 2: Generar dificultades positivas. • Implicar al usuario haciéndole intervenir, explorar, resolver situaciones, etc. • 3: Optimizar el disfrute • Sorpresa o ensanchamiento de las expectativas. • Descubrimiento. Algunos recursos: Utilización de elementos narrativos Integración de medios multimedia: de los lenguajes “aditivos” a los “expresivos”

40. Epílogo: una historia antigua • Los griegos ya consideraban la admiración como motor de la filosofía: • Platón: “... pues la admiración es lo propio del filósofo, y la filosofía empieza con la admiración.” • Aristóteles: “... la admiración impulsó a los primeros pensadores hacia las especulaciones filosóficas.” • ... el principio de todos los saberes es la admiración ante el hecho de que las cosas sean lo que son.”

41. Wonder is not precisely Knowing And not precisely Knowing not de Emily Dickinson, poema 1331

42. Una propuesta de caracterización de los interactivos de difusión cultural • Criterio de utilización: finalidad coincidente según autor y lector. • Culturales y otros • Transmisión y otros • Difusión y otros (educativos)

43. Los diversos ámbitos de la enseñanza • De la escolarización a la “red de aprendizaje” • Educación formal: sistema “curricular” puro. • Educación no formal: sistema “curricular” adicional. • Educación informal: “un proceso que dura toda la vida y en el que las personas adquieren y acumulan conocimientos, habilidades, actitudes y modos de discernimiento mediante las experiencias diarias y su relación con el medio ambiente” (P.H. Coombs y otros)

44. Difusión cultural versus educativos • Productos educativos: • Intención del emisor: educativa • Carácter del proceso: metódico o sistemático • Intención del receptor: extrínseca • Productos de difusión cultural • Intención del emisor: no explícitamente educativa • Carácter del proceso: asistemático, abierto • Intención del receptor: intrínseca

45. Los diversos tratamientos en los interactivos de difusión cultural • Los distinguiremos por la forma de integrar navegación por estructura y por contenido. • Tratamientos en interactivos de difusión cultural: • Visita o simulación. Ej. “Louvre”, “Orsay”. • Catálogo. Ej. “Microsoft Art Gallery”. • Juegos culturales. Ej. “Versailles”. • Interactivos “de autor” o ensayos interactivos. Ej. “Moi, Paul Cézanne”, “Makers of The Twenty Century”, “Opération Teddy Bear”, “Joan Miró. El color dels somnis”.

46. Aproximación a un tratamiento específico, los “ensayos interactivos” • Integración de estructura y contenido • Con elementos narrativos, pseudo-narrativos, audiovisuales. • Integración de medios multimedia: de los lenguajes “aditivos” a los “expresivos” (Janet Murray). • Ensayos interactivos • Semántica de nodos y enlaces se confunden. • Navegación por estructura y por contenido inseparables. • Un “mecanismo” o “argumento” liga y ordena las dos partes. • Con elementos narrativos y de interelación de medios.

47. Bibliografía (1) • Balpe, J. P.; Lelu, A.; Papy, F.; Saleh, I. Techniques avancees pour l'hypertexte. Paris: Hermes, 1996 • Bernstein, M. “The Navigation Problem Reconsidered”. A: Berk, E.; Hypertext / Hypermedia handbook. New York: Intertext Publications / McGraw-Hill, 1991. • Boling, E.; Kirkley, S.; “Interaction Design for multimedia software”. AAIM 4th Annual Conference on Multimedia in Education and Industry. 1995. • Csikszentmihalyi, M. Fluir. Barcelona: Kairós, 1997 • Garrand, T. Writing for Multimedia. Entertainment, Education, Training, Advertising and the World Wide Web. Boston, MA: Focal Press, 1997. • Garzotto, B.; Paolini, P.; Schwabe, D.; Bernstein, M. “Tools for Designing Hyperdocuments”. A: Berk, E.; Hypertext / Hypermedia handbook. New York: Intertext Publications / McGraw-Hill, 1991.

48. Bibliografía (2) • Landow, G. P. Hipertexto. Barcelona: Paidós, 1995 • Laurel, B. Computer as Theatre. New York: Addison-Wesley, 1998 (6ª reimpr.) • Mayes, T.; Kibby, M.; Anderson, T. “Learning about Learning from Hypertext”. A: Designing Hypermedia for Learning, NATO ASI Series, Volume F67, Springer Verlag, 1990. • Marina, J. A. La selva del lenguaje. Introducción a un diccionario de los sentimientos. Barcelona: Anagrama, 1998 • Murray, J. Hamlet en la holocubierta. El futuro de la narrativa en el ciberespacio. Barcelona: Paidós, 1999 • Nielsen, J. Usability Engineering. Boston: Academic Press, 1993 • Shneiderman, B.; Kearsley, G. Hypertext Hands-On. Reading, MA: Addison-Wesley, 1989

49. Algunos interactivos culturales “on-line” interesantes • Se vinculan en la dirección: • http://www.iua.upf.es/~ribas/GuioDisseny/Tema8/Materials/interculturals.doc • Se trata de un documento en proceso permanente de trabajo donde se apuntan o comentan diversos interactivos culturales de internet.

50. Apéndice.- Niveles de interactividad: situación de diversas producciones del eIC http://www.iua.upf.edu/eic • Dotze sentits • Joan Miró. El color dels somnis • Aracné • Ull i orella Interactius Modulars • Idees i Vincles en el segle XX. La ciència • Interactius Oberts