Download - Semiótica de las interfaces
![Page 1: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/1.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Semiótica de las interfaces
La construcción de sentido en entornos interactivos
Universitat Pompeu Fabra
Llenguatge audiovisual i narrativa interactiva
![Page 2: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/2.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Index
• Interfaz: definición y metáforas
• Evolución
• Construcción de sentido: semiótica de las interfaces
• ……
![Page 4: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/4.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
• ¿Qué es una interfaz?
¿Qué es una interfaz?
![Page 5: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/5.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
• ¿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?
![Page 8: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/8.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 9: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/9.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 10: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/10.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Interfaces
• La evolución de las interfaces web también ha sido rápida...
1995 2000 2010
![Page 11: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/11.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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).
![Page 13: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/13.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
A partir de los 1960s se difunden las interfaces
alfa-numéricas (MS-DOS, 1980)
![Page 14: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/14.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Primera interfaz gráfica (Douglas Engelbart, 1960s - Stanford)
![Page 15: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/15.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Xerox Star (1979) Apple Lisa (1980)
![Page 16: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/16.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Apple Macintosh (1984)
Para ver esta película, debedisponer de QuickTime™ y de
un descompresor Compact Video.
![Page 22: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/22.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Windows 2000
Mac System 10 (2002)
Ambas interfaces han expandido
al máximo la filosofía de
la manipulación directa
de objetos (Schneiderman)
![Page 24: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/24.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
• 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
![Page 25: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/25.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Para ver esta película, debedisponer de QuickTime™ y de
un descompresor YUV420 codec.
![Page 28: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/28.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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?
![Page 29: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/29.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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?
![Page 30: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/30.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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?
![Page 31: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/31.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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.)
![Page 32: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/32.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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…
![Page 37: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/37.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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)
![Page 38: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/38.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 39: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/39.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
• Sistema One-click en Amazon.com
1-click = condensación de acciones
![Page 40: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/40.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
![Page 41: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/41.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
![Page 42: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/42.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
![Page 43: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/43.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
![Page 44: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/44.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
![Page 45: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/45.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
![Page 46: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/46.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 47: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/47.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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 …
![Page 48: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/48.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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 …
![Page 49: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/49.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 50: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/50.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 51: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/51.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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)
![Page 52: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/52.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 53: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/53.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Pragmática de las interfaces: affordances
• Las affordances le dan al usuario
instrucciones sobre cómo usar
la interfaz…
![Page 54: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/54.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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).
![Page 55: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/55.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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!!
![Page 56: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/56.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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
![Page 57: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/57.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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.
![Page 58: Semiótica de las interfaces](https://reader036.vdocumento.com/reader036/viewer/2022081512/5549eeeeb4c9050d488b51de/html5/thumbnails/58.jpg)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
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.