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
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
• ……
www.hipermediaciones.com / www.digitalismo.com - [email protected]
De Arpanet a Internet
www.hipermediaciones.com / www.digitalismo.com - [email protected]
• ¿Qué es una interfaz?
¿Qué es una interfaz?
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?
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Metáforas de la interfaz
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Evolución
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
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
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
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).
www.hipermediaciones.com / www.digitalismo.com - [email protected]
ENIAC (1944)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
A partir de los 1960s se difunden las interfaces
alfa-numéricas (MS-DOS, 1980)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Primera interfaz gráfica (Douglas Engelbart, 1960s - Stanford)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Xerox Star (1979) Apple Lisa (1980)
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.
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Apple Macintosh (1984)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Windows 1.0
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Windows 2.0
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Windows 3.1
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Windows 95
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)
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Contaminaciones de interfaces
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
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Para ver esta película, debedisponer de QuickTime™ y de
un descompresor YUV420 codec.
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Semiótica de las interfaces
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?
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?
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?
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.)
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…
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Labolsa.com
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Neovision
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Smartmoney.com
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Smartmoney.com
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)
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
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
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
www.hipermediaciones.com / www.digitalismo.com - [email protected]
Sintaxis de la interacción: condensación
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
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 …
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 …
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
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
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)
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
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…
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).
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!!
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
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.
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.
Top Related