semiótica de las interfaces

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


Index

• Interfaz: definición y metáforas

• Evolución

• Construcción de sentido: semiótica de las interfaces

• ……


De Arpanet a Internet


• ¿Qué es una interfaz?

¿Qué es una interfaz?


• ¿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?


Metáforas de la interfaz


Evolución


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


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


Interfaces

• La evolución de las interfaces web también ha sido rápida...

1995 2000 2010


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).


ENIAC (1944)


A partir de los 1960s se difunden las interfaces

alfa-numéricas (MS-DOS, 1980)


Primera interfaz gráfica (Douglas Engelbart, 1960s - Stanford)


Xerox Star (1979) Apple Lisa (1980)


Apple Macintosh (1984)

Para ver esta película, debedisponer de QuickTime™ y de

un descompresor Compact Video.


Apple Macintosh (1984)


Windows 1.0


Windows 2.0


Windows 3.1


Windows 95


Windows 2000

Mac System 10 (2002)

Ambas interfaces han expandido

al máximo la filosofía de

la manipulación directa

de objetos (Schneiderman)


Contaminaciones de interfaces


• 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


Para ver esta película, debedisponer de QuickTime™ y de

un descompresor YUV420 codec.


Pausa de

5 minutos !!


Semiótica de las interfaces


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?


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?


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?


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.)


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…


Labolsa.com


Neovision


Smartmoney.com


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)


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



• Sistema One-click en Amazon.com

1-click = condensación de acciones



• Tarea:: explorar la isla

– Primera vez: • 4 acciones

– Segunda vez: • 1 acción (Modo Zip)

Modo Zip de Myst=

Condensación de acciones


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 …



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



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


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)


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



• Las affordances le dan al usuario

instrucciones sobre cómo usar

la interfaz…



• 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).



• 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!!


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


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.


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.

semiótica de las interfaces

Education