Semiótica de las interfaces

  • 5,852 views
Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,852
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
191
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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