Motion que convierte: micro-interacciones

Casi todo el motion que se ve en producto sobra. Elementos que entran flotando, tarjetas que rebotan, secciones que aparecen con retardo porque queda bien en el vídeo de presentación. Nada de eso ayuda a nadie a hacer lo que vino a hacer.

La diferencia entre decorar y explicar

Una animación útil responde a una pregunta que el usuario se estaba haciendo. Qué acaba de pasar. De dónde salió esto. Dónde estaba antes lo que ahora veo aquí. Si no responde ninguna de esas tres, es decoración, y está cobrando un peaje en tiempo de espera.

Si quitas la animación y nadie se pierde, la animación no estaba explicando nada.

Las cuatro que sí valen la pena

• Continuidad espacial: un panel que se abre desde el botón que lo invoca mantiene la relación entre causa y efecto. El usuario no tiene que reconstruir de dónde vino.
• Confirmación de acción: que un botón cambie de estado al pulsarlo evita el segundo clic por duda, que es una de las causas más comunes de acciones duplicadas.
• Percepción de velocidad: una transición de 200 ms bien puesta hace que una espera de 800 ms se sienta más corta que la misma espera con un salto seco.
• Dirección de la atención: cuando algo cambia fuera del campo de visión, un movimiento pequeño es la única forma de avisar sin interrumpir.

El coste de animar de más

Cada animación tiene un precio en milisegundos que el usuario paga cada vez que repite la acción. Media segundo de transición en un flujo que alguien recorre cuarenta veces al día son veinte segundos diarios de espera que impuso el diseño, no el sistema.

Por eso el motion en herramientas de uso intensivo tiene que ser más corto que en una landing. En una landing el visitante pasa una vez y la impresión importa. En un CRM el usuario pasa cien veces y lo único que importa es que no estorbe.

Reducir movimiento no es un extra

Hay personas para quienes el movimiento en pantalla provoca mareo o migraña. El sistema operativo ya expone esa preferencia y el navegador la entrega. Respetarla cuesta una línea de código, y no respetarla convierte una animación bonita en una razón para cerrar la pestaña.

La regla que seguimos es simple: si al desactivar todas las animaciones la interfaz deja de entenderse, el problema no era el motion. Era que la estructura se estaba apoyando en él.