Semiótica de las interfaces

La construcción de sentido en entornos interactivos

 ¿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…
Metáforas de la interfaz
 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: “simbiosis hombre-máquina” (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)
Apple Macintosh (1984)
Windows 1.0
Windows 2.0
Windows 3.1
Windows 95
 Ambas interfaces han expandido
al máximo la filosofía de
la manipulación directa
de objetos (Schneiderman)

Windows 2000

Mac System 10
(2002)
 Contaminaciones de interfaces

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

El futuro, ahora

• 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).
 Semiótica de las interfaces: nivel pragmático

• Instrucciones para el usuario dentro de la interfaz …

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

• Diccionario: affordances, constricciones, guiones (frames), usuario implícito,

propuesta de interacción, contrato de interacción, etc.
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.)
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

• Sistema One-click en Amazon.com

1-click = condensación de acciones

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

order autorización prohibición

(deber hacer) (poder hacer) (no poder hacer)

• En el mundo de la Interacción-Persona Ordenador estas instrucciones pragmáticas se

conocen como affordances ...
 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
 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).
 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 - carlosalberto.scolari@upf.edu
Interfaz Netflix en un Smart TV
Interfaz Netflix en un Smart TV
Interfaz Netflix en una PC (app)
Interfaz Netflix en una PC (app)
Interfaz Netflix en una PC (Web)
La interfaz de Netflix en una PC (web)
La interfaz de Netflix en una Tablet (modo horizontal)
La interfaz de Netflix en una Tablet (modo horizontal)
La interfaz de Netflix en una Tablet (modo vertical)
La interfaz de Netflix en un Smartphone
Orden de los listados en cada una de las interfaces

INTERFAZ LISTADO 1 LISTADO 2 LISTADO 3 LISTADO 4

Populares en
SMART TV Mi lista
Netflix

Nuestra selección Agregados

PC APP Mi lista
para Usuario recientemente

Agregados Continuar viendo

PC WEB Mi lista Tendencias
recientemente contenido de Usuario

Populares en
TABLET (MH) Mi lista
Netflix

Populares en Continuar viendo

TABLET (MV) Mi lista Tendencias
Netflix contenido de Usuario

Populares en
SMARTPHONE Mi lista Tendencias
Netflix
Orden de los botones de la barra en cada una de las
interfaces

INTERFAZ BOTÓN 1 BOTÓN 2 BOTÓN 3 BOTÓN 4 BOTÓN 5

Menú (4
SMART TV Buscar Inicio
listas)
Menú Configuración y
PC APP Inicio Buscar
desplegable cerrar cesión
Menú (Inicio Opciones de
PC WEB Inicio Buscar Notificaciones
+ 4 listas) cuenta y perfil
Menú
TABLET (MH) Inicio Buscar
desplegable
Menú
TABLET (MV) Inicio Buscar
desplegable
Próximament Menú
SMARTPHONE Inicio Buscar Descargas
e desplegable