Por qué el movimiento comunica causalidad y jerarquía

En 1944, dos psicólogos proyectaron a un grupo de personas una película de dos minutos con un triángulo grande, un triángulo pequeño y un círculo moviéndose sobre un fondo blanco. Prácticamente todos los espectadores describieron una historia con intenciones, persecuciones y miedo. No había personajes: había tres formas geométricas y un patrón de movimiento. Ese experimento es la base de por qué la animación de interfaces funciona, y entender el mecanismo permite usarlo con precisión en lugar de por intuición.

El mecanismo de la causalidad

La percepción de causalidad no es una inferencia consciente: es un proceso automático del sistema visual, con umbrales medidos. Un objeto A se mueve, toca a un objeto B, B empieza a moverse. Si el intervalo entre el contacto y el arranque de B está por debajo de unos 70 milisegundos, prácticamente todo el mundo percibe que A empujó a B. Si el intervalo supera unos 140, la percepción se rompe y se ven dos eventos independientes que casualmente ocurrieron cerca. Entre ambos hay una zona ambigua.

Esto no es una metáfora útil para diseñar interfaces: es literalmente el mecanismo que hace que tu usuario entienda que el panel salió del botón que pulsó. Y tiene tres condiciones, las tres necesarias.

Proximidad temporal. El efecto tiene que empezar dentro de la ventana. Un panel que aparece 300 milisegundos después de la pulsación no se percibe causado por ella; se percibe como algo que ocurrió después.

Continuidad espacial. El movimiento del efecto tiene que empezar donde acabó la causa. Un menú que se despliega desde el borde opuesto de la pantalla al botón que lo abrió no comunica relación, por muy rápido que lo haga.

Coherencia de dirección. El efecto tiene que moverse en una dirección compatible con la causa. Si el botón está arriba y el panel desciende, hay coherencia. Si el panel sube hacia el botón, la lectura se invierte: parece que el panel arrastró al botón.

Las tres juntas producen una regla operativa muy concreta: la animación de un elemento que aparece por acción del usuario debe empezar en el punto de la acción y dentro de los primeros 100 milisegundos.

/* El menu crece desde el punto donde esta el boton que lo abrio,
   no desde su propio centro. */
.menu {
  transform-origin: var(--origen-x, 50%) var(--origen-y, 0);
  scale: 0.94;
  opacity: 0;
  transition:
    scale 180ms cubic-bezier(0.2, 0, 0, 1),
    opacity 120ms linear;
}

.menu[data-abierto] {
  scale: 1;
  opacity: 1;
}

// Situar el origen de la transformacion en el boton disparador.
function abrirMenu(boton, menu) {
  const b = boton.getBoundingClientRect();
  const m = menu.getBoundingClientRect();
  menu.style.setProperty('--origen-x', `${b.left + b.width / 2 - m.left}px`);
  menu.style.setProperty('--origen-y', `${b.top + b.height / 2 - m.top}px`);
  menu.dataset.abierto = '';
}

Ese cálculo de dos líneas hace más por la comprensibilidad de un menú que cualquier curva. El elemento crece desde donde el usuario acaba de pulsar, y la relación queda establecida sin que nadie tenga que pensarla.

La jerarquía se lee en el orden y en la velocidad relativa

Si la causalidad responde a “esto provocó aquello”, la jerarquía responde a “esto manda sobre aquello”. Y se comunica con dos señales.

El orden. Lo que se mueve primero se lee como principal. En un panel que se abre con una cabecera y una lista, si la cabecera entra primero y la lista después, la cabecera es el contenedor y la lista su contenido. Si se invierte, la lectura se invierte: la lista parece haber traído consigo la cabecera. Esto es lo mismo que el escalonado que vimos en la lección de anticipación y continuación, pero aplicado a la relación entre partes en vez de a elementos iguales.

La velocidad relativa. Dos elementos que recorren distancias distintas en el mismo tiempo se leen como estando a profundidades distintas. Es el mismo mecanismo del paralaje: lo que se mueve más deprisa está más cerca. En una interfaz plana esto se usa al revés de lo que dice la intuición: el elemento secundario debe moverse menos, no más, para que se lea como fondo.

/* Un dialogo y su fondo. El fondo recorre menos y llega antes:
   se lee como algo lejano que se limita a oscurecerse. */
.velo {
  opacity: 0;
  transition: opacity 160ms linear;
}

.dialogo {
  translate: 0 16px;
  opacity: 0;
  transition:
    translate 260ms cubic-bezier(0.2, 0, 0, 1) 40ms,
    opacity 180ms linear 40ms;
}

[data-abierto] .velo { opacity: 1; }
[data-abierto] .dialogo { translate: 0 0; opacity: 1; }

El retardo de 40 milisegundos del diálogo respecto al velo no es estético: coloca el velo como causa y el diálogo como efecto, dentro de la ventana de causalidad. Invertirlo produce una sensación de desorden que cuesta nombrar.

Diagnosticar una animación que confunde

Cuando una animación no acaba de quedar bien y las curvas y duraciones parecen razonables, casi siempre el problema es de lectura, no de temporización. Cuatro preguntas lo localizan.

¿De dónde parece venir? Mira el punto donde empieza el movimiento y compáralo con el punto donde el usuario actuó. Si no coinciden y no hay una razón explícita —el elemento pertenece a otra región de la pantalla y eso es lo que se quiere comunicar—, tienes un problema de continuidad espacial.

¿Cuántas cosas se mueven a la vez? Cuenta. Si son más de dos grupos independientes, el sistema visual va a intentar relacionarlos, y probablemente construya una relación falsa. La solución es secuenciar, no acelerar.

¿La cosa importante se mueve más o menos que el resto? Si el elemento principal se mueve menos que su fondo, la jerarquía está invertida. Es el error clásico de los efectos de paralaje aplicados a contenido.

¿Qué pasa si lo veo dos veces seguidas? Muchas animaciones que comunican bien la primera vez comunican ruido la segunda, porque la información que transmitían ya la tiene el usuario. Las que solo funcionan una vez son candidatas a desaparecer o a acortarse mucho.

Ninguna de las cuatro preguntas es sobre milisegundos. La temporización se ajusta al final, cuando la lectura ya es correcta; ajustarla antes es afinar un instrumento desafinado.