Semiótica de las interfaces

8,388 views

Published on

PPT asignatura "Llenguatge audiovisual i narrativa interactiva" - Universitat Pompeu Fabra / 2010

Published in: Education

Semiótica de las interfaces

  1. 1. Semiótica de las interfaces La construcción de sentido en entornos interactivos Universitat Pompeu Fabra Llenguatge audiovisual i narrativa interactiva
  2. 2. Index <ul><li>Interfaz: definición y metáforas </li></ul><ul><li>Evolución </li></ul><ul><li>Construcción de sentido: semiótica de las interfaces </li></ul><ul><li>…… </li></ul>
  3. 3. <ul><li>De Arpanet a Internet </li></ul>
  4. 4. <ul><li>¿Qué es una interfaz ? </li></ul>¿Qué es una interfaz?
  5. 5. <ul><li>¿Qué es una interfaz ? Concepto introducido por Bottomley en 1898 (“Hydrostatics”): superficie que separa dos substancias (ósmosis). </li></ul><ul><li>Para McLuhan, “el Renacimiento fue la interfaz entre la Edad Media y la Moderna”. </li></ul><ul><li>Concepto utilizado por los informáticos (interfaz USB, serial), los diseñadores e investigadores de la interacción (interfaz-usuario, interfaz gráfica) y los expertos en marketing (interfaz empresa-cliente). </li></ul><ul><li>La interfaz se expresa en varias metáforas… </li></ul>¿Qué es una interfaz?
  6. 6. Metáforas de la interfaz
  7. 7. <ul><li>Evolución </li></ul>
  8. 8. Interfaces <ul><li>Antes la evolución de las interfaces de la lectura-escritura era muy lenta … </li></ul><ul><li>También la co-evolución lectores / interfaces se desarrollaba a través de los siglos. </li></ul>4000 AC 1000 AC 0 1000 1500
  9. 9. Interfaces <ul><li>Esta evolución se ha acelerado en los últimos 25 años … </li></ul><ul><li>También la co-evolución es más rápida. </li></ul>1980 1990 2000
  10. 10. Interfaces <ul><li>La evolución de las interfaces web también ha sido rápida... </li></ul>1995 2000 2010
  11. 11. Interfaces <ul><li>La línea histórica: </li></ul><ul><ul><li>J. Licklider : “ man-machine symbiosis” (1960) </li></ul></ul><ul><ul><li>D. Engelbart : interfaces gráficas + mouse (1968) Objetivo: re-diseñar la estructura conceptual y metodológica con la cual operamos para poder afrontar de manera eficiente situaciones problemáticas. </li></ul></ul><ul><ul><li>Apple Mac / Windows (1980s) </li></ul></ul><ul><ul><li>Netscape / Explorer (1990s) </li></ul></ul><ul><ul><li>Evolución de las interfaces y los dispositivos de input/output (1984-2010). </li></ul></ul>
  12. 12. ENIAC (1944)
  13. 13. A partir de los 1960s se difunden las interfaces alfa-numéricas (MS-DOS, 1980)
  14. 14. Primera interfaz gráfica (Douglas Engelbart, 1960s - Stanford)
  15. 15. Xerox Star (1979) Apple Lisa (1980)
  16. 16. Apple Macintosh (1984)
  17. 17. Apple Macintosh (1984)
  18. 18. Windows 1.0
  19. 19. Windows 2.0
  20. 20. Windows 3.1
  21. 21. Windows 95
  22. 22. <ul><li>Ambas interfaces han expandido </li></ul><ul><li>al máximo la filosofía de </li></ul><ul><li>la manipulación directa </li></ul><ul><li>de objetos (Schneiderman) </li></ul>Windows 2000 Mac System 10 (2002)
  23. 23. Contaminaciones de interfaces
  24. 24. <ul><li>Interfaces 3D (videojuegos, Second Life) </li></ul><ul><li>Input : scanner, micrófonos, tablillas gráficas, lápices ópticos, guantes realidad virtual (VR), etc. </li></ul><ul><li>Output : cascos y gafas VR, “impresoras” tridimensionales, etc. </li></ul><ul><li>Unión input/output : touch-screens, cascos VR, etc. </li></ul><ul><li>La nueva generación: Multi-touch screen (Jeff Han) y Sixth sense ( Pranav Mistry). </li></ul>El futuro, ahora
  25. 26. <ul><li>Pausa de </li></ul><ul><li>5 minutos !! </li></ul>
  26. 27. <ul><li>Semiótica de las interfaces </li></ul>
  27. 28. Semiótica de las interfaces: nivel semántico <ul><li>El significado de los elementos/signos que componen la interfaz… </li></ul><ul><li>Diccionario: signo, código (codificar/decodificar), tipos de signos, iconicidad, arbitrariedad, etc. </li></ul>¿Para qué sirve? ¿Para pintar? ¿Para copiar estilo? ¿Zoom? ¿Buscar?
  28. 29. Semiótica de las interfaces: nivel sintáctico <ul><li>Relaciones entre los elementos/signos que componen la interfaz… </li></ul><ul><li>Diccionario: affordances, constricciones, sintaxis acción-objeto / objeto-acción, secuencia de interacción, condensación , etc. </li></ul>¿Por qué no está activo? ¿Qué debo hacer antes para activarlo? ¿Y después ?
  29. 30. Semiótica de las interfaces: nivel pragmático <ul><li>Instrucciones para el usuario dentro de la interfaz … </li></ul><ul><li>Diccionario: affordances, constricciones, guiones (frames), usuario implícito, propuesta de interacción, contrato de interacción , etc. </li></ul>¿Para quién fue diseñada esta interfaz? ¿Dónde se aprende a utilizarla? ¿Contiene instrucciones? ¿Para quién? ¿Utilizan los usuarios sus experiencias anteriores para interactuar?
  30. 31. Nivel semántico <ul><li>Algunos principios: </li></ul><ul><li>El significado se construye por oposiciones y diferencias . </li></ul><ul><li>Al principio el sujeto reconoce elementos básicos (puntos, líneas, formas, etc.) ( nivel plástico ) y en un segundo momento le atribuye un significado ( nivel figurativo ). </li></ul><ul><li>Cada elemento posee una serie de atributos o características: una línea puede ser corta/larga, contínua/discontínua, curva/recta, etc. </li></ul><ul><li>Las relaciones jerárquicas entre elementos también sirven para construir un significado (centro/periferia, cercano/lejano, en foco/fuera de foco, etc.) </li></ul>
  31. 32. Atributos de la imagen (Jacques Bertin) <ul><li>Atributos : color, forma, textura, dimensión, intensidad, orientación, encuadre, marco, composición, etc. </li></ul><ul><li>Relaciones temporales, espaciales o cooperativas-contrastantes. </li></ul><ul><li>Veamos un par de ejemplos… </li></ul>
  32. 33. Labolsa.com
  33. 34. Neovision
  34. 35. Smartmoney.com
  35. 36. Smartmoney.com
  36. 37. Nivel sintáctico <ul><li>Algunos principios: </li></ul><ul><li>Secuencia de acciones que el usuario de la interfaz debe ejecutar para completar una tarea (task). </li></ul><ul><li>Aspecto fundamental de los procesos de interacción: muchos errores de diseño se deben a sintaxis equivocadas. </li></ul><ul><li>Dos sintaxis (programación): </li></ul><ul><ul><li>Action–object (verbo-nombre): poco flexible, ideal para usuarios con poca experiencia o usuarios ocasionales (“abrir ...” + “hypertext.doc”) </li></ul></ul><ul><ul><li>Object–action (nombre -verbo): muy flexible, fácil de entender, útil para usuarios expertos, (seleccionar + modificar) </li></ul></ul>
  37. 38. Sintaxis de la interacción: condensación <ul><li>Tarea: bajar 5 líneas un bloque de 10 líneas de texto </li></ul><ul><ul><li>Word 3.2 for Windows (1986): </li></ul></ul><ul><ul><ul><li>Con teclado: 26 acciones </li></ul></ul></ul><ul><ul><li>Word 5.0 for Mac (1992): </li></ul></ul><ul><ul><ul><li>Con mouse: 2 acciones (drag’n’drop) </li></ul></ul></ul><ul><ul><ul><li>drag'n'drop = condensación de acciones </li></ul></ul></ul>
  38. 39. Sintaxis de la interacción: condensación <ul><li>Sistema One-click en Amazon.com </li></ul>1-click = condensación de acciones
  39. 40. Sintaxis de la interacción: condensación
  40. 41. Sintaxis de la interacción: condensación
  41. 42. Sintaxis de la interacción: condensación
  42. 43. Sintaxis de la interacción: condensación
  43. 44. Sintaxis de la interacción: condensación
  44. 45. Sintaxis de la interacción: condensación
  45. 46. Sintaxis de la interacción: condensación <ul><li>Tarea: : explorar la isla </li></ul><ul><ul><li>Primera vez: </li></ul></ul><ul><ul><ul><li>4 acciones </li></ul></ul></ul><ul><ul><li>Segunda vez: </li></ul></ul><ul><ul><ul><li>1 acción (Modo Zip) </li></ul></ul></ul>Modo Zip de Myst = Condensación de acciones
  46. 47. Sintaxis de la interacción: extensión Pero los desarrolladores de videojuegos no son esclavos de la ideología de la usabilidad : a menudo ellos extienden las secuencias de interacción …
  47. 48. Sintaxis de la interacción: extensión Pero los desarrolladores de videojuegos no son esclavos de la ideología de la usabilidad : a menudo ellos extienden las secuencias de interacción …
  48. 49. Sintaxis de la interacción: extensión <ul><li>Pero los desarrolladores de videojuegos no son esclavos de la ideología de </li></ul><ul><li>la usabilidad : a menudo ellos extienden las secuencias de interacción … </li></ul>Prolongación de acciones = crear tensión / estados emocionales
  49. 50. Sintaxis de la interacción: extensión <ul><li>Este dispositivo retórico que acabamos de ver es una traducción desde el lenguaje </li></ul><ul><li>cinematográfico a un entorno interactivo. </li></ul><ul><li>Rear Window (1954) </li></ul><ul><li>Alfred Hitchcock </li></ul>
  50. 51. Pragmática de las imágenes <ul><li>Además de instrucciones semánticas , también existen las instrucciones pragmáticas : ellas le dicen al usuario qué debe hacer … </li></ul><ul><li>En el mundo de la Interacción-Persona Ordenador estas instrucciones pragmáticas se conocen como affordances ... </li></ul>prohibición (no poder hacer) order (deber hacer) autorización (poder hacer)
  51. 52. Pragmática de las interfaces: affordances <ul><li>“ Son las propiedades reales y percibidas de las cosas materiales, especialmente las propiedades que determinan cómo usar un objeto…” </li></ul><ul><li>Don Norman </li></ul>
  52. 53. Pragmática de las interfaces: affordances <ul><li>Las affordances le dan al usuario instrucciones sobre cómo usar la interfaz… </li></ul>
  53. 54. Pragmática de las interfaces: affordances <ul><li>Las affordances le dan al usuario instrucciones sobre cómo usar la interfaz… </li></ul><ul><li>Las affordances son un paquete virtual de instrucciones --> el usuario aplica un modelo mental (también llamado frame, guión, marco) (Eco, Schank, Minsky). </li></ul>
  54. 55. Pragmática de las interfaces: affordances <ul><li>Unas affordances mal diseñadas generan confusión y falsas expectativas en los usuarios -->El usuario aplica un modelo mental equivocado !! </li></ul><ul><li>Buenas affordances --> mejor interacción !! </li></ul>
  55. 56. Conclusiones <ul><li>Las interfaces son complejos dispositivos de significación. </li></ul><ul><li>La interacción es un proceso cooperativo : el diseñador “pone algo” y el usuario “lo completa”. </li></ul><ul><li>Las interfaces no son neutrales y expresan una ideología (la del diseñador). </li></ul><ul><li>Las interfaces generan estados cognitivos y emotivos. </li></ul><ul><li>Las interfaces dialogan entre sí y forman parte de un sistema: el sistema de las interfaces . </li></ul><ul><li>En las interfaces convergen sistemas semióticos --> Multimodalidad </li></ul>
  56. 57. Bibliografía <ul><li>Obligatoria </li></ul><ul><li>Scolari, C. (2004) Hacer Clic. Hacia una semiótica de las interacciones digitales , DeSignis 5, Disponible en: www . designisfels . net </li></ul><ul><li>Eugeni, R. y Bittanti, M. (2004) Sim-Biosis. Di-simulando The Sims , DeSignis 5, Disponible en: www.designisfels.net </li></ul><ul><li>Complementaria </li></ul><ul><li>Scolari, C. (2004) Hacer Clic. Hacia una semiótica de las interacciones digitales , Barcelona: Gedisa </li></ul><ul><li>Scolari, C. (2008) Hipermediaciones. Elementos para una teoría de la comunicación digital interactiva , Barcelona: Gedisa. </li></ul><ul><li>Scolari, Carlos (2008) “El sentido de las interfaces. Una aproximación semiótica a las webs de los museos de arte”. En Mateos, S. (ed.) La comunicación global del patrimonio cultural. Madrid: Trea. </li></ul>
  57. 58. Ejercicio <ul><li>Para ir trabajando … </li></ul><ul><li>Los grupos deberán pensar en cómo traducir en una experiencia interactiva la narrativa construida en la primera parte de la asignatura. </li></ul><ul><li>Objetivo: hacerle vivir/experimentar al usuario los mismos sentimientos/emociones que la narrativa audiovisual generaba en sus espectadores . </li></ul><ul><li>El output final debe ser el prototipo de una instalación interactiva . </li></ul>

×