Los principios de la animación clásica que sí se traducen

En 1981, dos animadores veteranos de Disney publicaron una lista de doce principios destilados de cincuenta años de práctica. La lista es excelente y lleva cuarenta años apareciendo en charlas sobre animación de interfaces, casi siempre mal aplicada, porque se cita entera como si los doce fueran igual de válidos. No lo son. Fueron formulados para un medio donde el espectador mira sin intervenir y donde el objetivo es entretener; una interfaz es un medio donde el usuario actúa y espera respuesta. Esta lección separa lo que sobrevive al cambio de medio de lo que no.

El criterio: quién espera y quién actúa

Los doce principios se dividen limpiamente si aplicas una sola pregunta: ¿este principio existe para hacer creíble el movimiento, o para hacerlo entretenido?

Los que existen para dar credibilidad —peso, inercia, continuidad, causalidad— trasladan intactos, porque el sistema visual humano no cambia según el medio. Un objeto que arranca instantáneamente a velocidad máxima se percibe como irreal en una película y en una aplicación de contabilidad exactamente igual.

Los que existen para entretener —exageración, atractivo, personalidad— no trasladan, porque en una interfaz el coste de la atención lo paga alguien que quería hacer otra cosa. La exageración funciona en cine porque el espectador ha comprado una entrada para mirar. En una herramienta, cada milisegundo de espectáculo es tiempo robado a la tarea.

Y hay un grupo intermedio que traslada pero transformado: sigue siendo válido el objetivo y cambia radicalmente la magnitud. Ahí es donde se cometen los errores más caros, porque la técnica parece la misma y no lo es.

Los cuatro que trasladan sin tocar nada

Aceleración y desaceleración. El movimiento uniforme no existe en el mundo físico salvo en máquinas. Todo lo que tiene masa acelera para arrancar y desacelera para parar, y el sistema visual lo da por hecho hasta el punto de que un movimiento lineal se percibe como mecánico y frío incluso sin poder explicar por qué. En una interfaz esto se traduce en una regla operativa sin excepciones: linear no es una función de suavizado para movimiento. Es correcta para rotaciones continuas, para barras de progreso y para cualquier cosa que represente el paso del tiempo, y es incorrecta para cualquier cosa que se desplace de un sitio a otro.

Ritmo. El tiempo que algo tarda en moverse comunica su masa y la distancia recorrida. Dos elementos que recorren distancias distintas en el mismo tiempo se perciben como objetos de naturalezas distintas, porque el sistema visual lee la velocidad, no la duración. Este principio es el que hace que copiar una duración de un componente a otro sea un error tan frecuente: la duración correcta depende de cuánto se mueve el elemento.

Continuación y solape. Las partes de un cuerpo no se paran a la vez ni arrancan a la vez. En una interfaz esto es lo que convierte una lista de diez elementos que aparecen simultáneamente —que se lee como un bloque— en una que aparece con un escalonado corto y se lee como diez cosas. La lección de este nivel sobre causalidad y jerarquía desarrolla el mecanismo.

Puesta en escena. Dirigir la atención hacia lo que importa y apartarla de lo que no. Es el único principio que en una interfaz no solo traslada sino que gana importancia respecto al original, porque una interfaz tiene más elementos compitiendo por la mirada que un plano de dibujos animados. Cada animación que no dirige la atención hacia algo relevante la dirige hacia algo irrelevante; no hay opción neutra.

Los que se transforman, y cuánto

Anticipación en animación clásica significa moverse hacia atrás antes de saltar hacia delante. Un personaje se agacha antes de brincar. En una interfaz, ese movimiento previo introduce una latencia que el usuario percibe como lentitud, porque el usuario ya ha actuado y está esperando. La transformación correcta es sustituir la preparación por el acuse de recibo: en lugar de mover el destino antes de que llegue, se responde en el origen. Un botón que se hunde tres píxeles al pulsarlo no está anticipando nada, está confirmando que recibió la pulsación, y eso sí reduce la latencia percibida.

Deformación por aceleración. El clásico squash and stretch deforma un objeto proporcionalmente a su velocidad, y en dibujos animados es enorme. En una interfaz, un elemento que se deforma de forma visible se percibe como un fallo de renderizado. La versión que funciona es de una magnitud que cuesta describir sin medirla: del orden del dos o el tres por ciento en el eje del movimiento, y solo durante la fase de aceleración. Por encima de eso deja de leerse como física y empieza a leerse como error.

Arcos. En la naturaleza casi nada se mueve en línea recta, porque casi todo pivota sobre una articulación. En una interfaz, un arco tiene sentido cuando hay un cambio real de dirección —un elemento que sale por arriba y entra por la izquierda— y es ruido cuando el movimiento es de un punto a otro en la misma dirección. Añadir una curva a un desplazamiento vertical simple no lo hace más natural, lo hace más largo.

Acción secundaria. El movimiento acompañante que refuerza el principal. En una interfaz solo se justifica si transporta información propia: el icono de un botón que rota mientras el panel se abre está diciendo “esto se cierra girando en sentido contrario”, que es información útil. Una partícula que sale disparada no dice nada.

Los que se descartan

Exageración. Es el principio más citado y el más dañino en interfaces, porque suena a “dale personalidad” y se traduce en rebotes de 600 milisegundos y escalados del veinte por ciento. El problema no es el gusto: es que la exageración funciona por contraste con lo esperado, y por tanto se gasta. Un rebote que sorprende la primera vez es una espera la décima. Todo lo que en una interfaz se ve muchas veces tiende a la sobriedad por pura aritmética de repetición.

Atractivo. El principio original habla de que un personaje sea agradable de mirar, y en animación es una cuestión de diseño de carácter. En una interfaz, el equivalente es diseño visual —tipografía, color, espaciado— y no tiene nada que ver con el movimiento. Aplicarlo como principio de animación produce movimiento decorativo, que es el que más rápido envejece.

Método de producción. Straight ahead y pose to pose describen dos formas de dibujar una secuencia: fotograma a fotograma en orden, o dibujando primero las poses clave y rellenando después. En la web, el motor rellena siempre, así que solo existe el segundo. Es un principio sobre cómo se hace el trabajo, no sobre cómo se ve el resultado, y citarlo como principio de diseño es un error de categoría que se repite en casi todos los artículos sobre el tema.