La escala de duraciones, con los números y su justificación

“Usa trescientos milisegundos” es el consejo más repetido y más inútil sobre duración, porque no dice para qué ni por qué, y porque trescientos milisegundos son excesivos para un cambio de color y escasos para una transición a pantalla completa. Una escala de duraciones no es una lista de números bonitos: es un conjunto de valores separados lo suficiente para que la diferencia se perciba, anclados a umbrales perceptivos conocidos, con una regla clara sobre cuál usar cuándo.

Por qué geométrica

La percepción de la duración se comporta como casi todas las magnitudes sensoriales: la diferencia que se nota es proporcional al valor, no absoluta. Veinte milisegundos separan claramente 100 de 120, y son invisibles entre 400 y 420. Una escala con pasos constantes —100, 200, 300, 400— tiene los primeros escalones demasiado separados y los últimos indistinguibles, que es exactamente lo contrario de lo que se necesita.

La escala tiene que ser multiplicativa, con una razón lo bastante grande para que cada paso se note y lo bastante pequeña para que la escala no tenga huecos. En la práctica, una razón cercana a 1,5 funciona: por debajo de 1,3 los valores contiguos se confunden y la gente elige uno u otro al azar; por encima de 1,8 quedan huecos donde alguien va a inventarse un valor intermedio, que es como se rompen los sistemas.

Y hay una segunda razón, menos evidente, para que los pasos se noten: si dos tokens producen resultados indistinguibles, dejan de ser una decisión y pasan a ser una fuente de inconsistencia. Dos componentes equivalentes acaban con 220 y 250 milisegundos, nadie nota la diferencia, nadie la corrige, y el sistema tiene ya dos valores para lo mismo. Una escala cuyos escalones se distinguen se autocorrige, porque un valor mal elegido se ve.

Los cinco valores

:root {
  --mov-instante: 0ms;
  --mov-micro: 100ms;
  --mov-corta: 150ms;
  --mov-media: 250ms;
  --mov-larga: 400ms;
  --mov-extra: 600ms;
}

La justificación de cada anclaje, que es lo que convierte la tabla en un sistema defendible:

100 ms, el umbral de causalidad. Una respuesta que llega dentro de los primeros cien milisegundos de una acción se atribuye a esa acción de forma automática y preconsciente. Pasado ese margen, la conexión se debilita y el sistema empieza a percibirse como que “tarda”. Por eso todo lo que responde directamente a un dedo o a un cursor —el estado de hover, el anillo de foco, el hundido de un botón— vive aquí y no más allá.

150 ms, el suelo del movimiento. Por debajo de unos ochenta o cien milisegundos, un desplazamiento deja de leerse como trayectoria y se lee como salto: el ojo no llega a seguirlo. Si quieres que se entienda de dónde viene algo, necesitas al menos este orden de magnitud. Ciento cincuenta es el primer valor donde una entrada corta se lee cómodamente.

250 ms, el valor por defecto. No hay ningún umbral perceptivo aquí; es el punto donde converge el compromiso. Suficiente para leer una trayectoria de unos cientos de píxeles, corto para no acumular espera cuando se repite. Si en tu producto hay un solo token que se use en el ochenta por ciento de los sitios, tiene que ser este.

400 ms, el umbral de Doherty. Un sistema que responde por debajo de unos cuatrocientos milisegundos mantiene a la persona en el flujo de la tarea; por encima, la atención se suelta y empieza a esperar. Es el techo para cualquier cosa que forme parte de una tarea en curso, y por eso las transiciones a pantalla completa se sitúan justo debajo.

600 ms, la excepción. Todo lo que pase de medio segundo tiene que justificarse por sí mismo: una animación de bienvenida, una celebración que ocurre una vez. Si aparece en algo que se hace más de una vez por sesión, está mal elegida.

Entrada y salida no duran lo mismo

La regla: la salida dura entre el sesenta y el ochenta por ciento de la entrada.

La razón es funcional, no estética. Una entrada tiene que comunicar: de dónde viene el elemento, qué es, dónde se queda. Eso requiere que el ojo lo siga y lo procese. Una salida solo tiene que confirmar: el elemento se va, y a nadie le interesa adónde. Toda la duración que le des por encima del mínimo es tiempo en el que la persona ya ha terminado con ese elemento y está esperando a que desaparezca.

.hoja {
  transition:
    translate var(--mov-media) var(--mov-entrada),
    opacity var(--mov-corta) linear;
}

/* La salida usa el escalon inmediatamente inferior. */
.hoja:not([data-abierta]) {
  transition:
    translate var(--mov-corta) var(--mov-salida),
    opacity var(--mov-micro) linear;
}

Fíjate en que la asimetría se expresa bajando un escalón de la escala, no inventando un número. Es la disciplina que mantiene el sistema cerrado: cualquier variación se construye con los valores que ya existen.

Hay una excepción que confirma la regla: cuando la salida es la información —un elemento que se descarta y quieres enseñar hacia dónde, para que la persona sepa dónde recuperarlo— entonces la salida sí tiene que comunicar y merece la duración de una entrada.

La frecuencia manda sobre todo

El factor que más veces se ignora y más determina si una animación envejece bien: cuántas veces al día se ve.

Una transición de doscientos cincuenta milisegundos vista tres veces por sesión es un detalle de calidad. La misma transición en la acción principal de una herramienta de trabajo, que alguien ejecuta cuatrocientas veces al día, son cien segundos diarios de espera y una fuente real de irritación. Y lo peor es que quien la diseñó nunca lo va a percibir, porque la vio veinte veces en una tarde.

La regla operativa: duración inversamente proporcional a la frecuencia.

Esta tabla resuelve casi todas las discusiones sobre duración sin apelar al gusto de nadie, porque la frecuencia es un dato y no una opinión. Y tiene un efecto secundario muy sano: obliga a preguntar cuántas veces se usa algo, que es una pregunta que en las revisiones de diseño casi nunca se hace.