semiótica de las interfaces

www.hipermediaciones.com / www.digitalismo.com - carlosalberto.scolari@upf.edu

Semiótica de las interfaces

La construcción de sentido en entornos interactivos

Universitat Pompeu Fabra

Llenguatge audiovisual i narrativa interactiva

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

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:

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

semiótica l. vazquez - el oficio de las...

~: semiÓtica

informe sobre las interfaces

análisis semiótico del web site político. el caso de los...

perspectiva cultural y semiótica de las dismorfias y su

semiótica de la acción: textualización y notación ·...

tramar el gnos narrar las acciones una mirada semiótica...

bendita entre las mujeres. semiótica de lo femenino en el

por una semiótica materialista. las teorías fundantes de

c( ·· ·: 9...3.6. narratividad y semiótica de las...

projeto de interfaces de usuário: perspectivas cognitivas e...

lims and las interfaces

semiÓtica de las comunicaciones

bases teórico-prácticas para una semiótica de las...

historia de las interfaces

semiótica, marketing y comunicación. bajo los signos las...

las interfaces de un router.pptx

semiótica semiótica general

interfaces pantallas · el proyecto interfaces en...

las interfaces y la complejidad