Del lenguaje a la conversación

Tienes tipografía, color y componentes con cinco estados dibujados. Esos estados eran cuadros en una hoja. Esta semana se convierten en comportamiento.

Hay una razón práctica por la que esta unidad va después y no antes: no se puede animar lo que no existe. El hover que definiste, el foco, el estado de carga y el deshabilitado son justamente el material de las microinteracciones. Sin sistema, animar es maquillaje; con sistema, animar es comunicación.

Y hay una razón de negocio. La ausencia de respuesta es la causa más común de los pedidos duplicados, de los formularios abandonados y de la sensación difusa de que "el sitio está lento" incluso cuando no lo está. La percepción de velocidad depende menos del tiempo real que de si algo confirma que el sistema te escuchó. Al terminar la unidad tendrás un prototipo que alguien puede recorrer sin que tú expliques nada al lado.

Microinteracciones: los detalles que sostienen todo

Dan Saffer las definió como los momentos mínimos en los que el producto hace una sola cosa. Son tan pequeñas que se olvidan al diseñarlas y tan determinantes que se notan cuando faltan.

Su modelo tiene cuatro partes. El disparador inicia la interacción y puede ser del usuario —un clic, un desplazamiento, un texto escrito— o del sistema, como la llegada de un mensaje. Las reglas definen qué ocurre y qué no: si el botón se bloquea mientras procesa, si el carrito acepta cantidades sin existencias. La retroalimentación es la parte visible: lo que el usuario ve, oye o siente para saber qué pasó. Y los bucles y modos gobiernan el comportamiento en el tiempo: qué sucede la centésima vez, o cuando falla la conexión.

La retroalimentación se rige por un principio simple: responder siempre, en menos de 100 milisegundos. Ese umbral es el límite en el que una respuesta se percibe como instantánea. Entre 100 milisegundos y un segundo el usuario nota la demora pero mantiene el hilo; pasado el segundo, empieza a dudar; y por encima de diez segundos, se va. De ahí que un botón necesite mostrar el estado de carga aunque el servidor tarde: no acelera nada, pero confirma que el sistema escuchó.

Qué debe comunicar

Toda microinteracción responde a una de estas cuatro preguntas: ¿me escuchó?, con la respuesta inmediata al pulsar; ¿está trabajando?, con indicadores de progreso; ¿funcionó?, con la confirmación; y ¿qué salió mal y cómo lo arreglo?, con el error explicado. Aroma Andino falla en las cuatro. Y conviene una advertencia: la microinteracción más elegante no arregla un flujo mal diseñado. Animar un proceso confuso solo lo vuelve un proceso confuso con animación.

El movimiento explica, no adorna

Toda animación de interfaz debe responder una pregunta que el usuario tenía. Si no responde ninguna, sobra.

El movimiento útil cumple tres funciones. Orienta: un panel que entra desde la derecha enseña dónde estaba y hacia dónde vuelve. Mantiene la continuidad: cuando una tarjeta se expande hasta convertirse en la página de detalle, el usuario entiende que es el mismo objeto y no una pantalla nueva. Y dirige la atención: lo que se mueve se mira, así que el movimiento es un recurso escaso que conviene gastar en lo importante.

Duración y curvas: la diferencia entre natural y torpe

Las duraciones típicas van de 100 a 500 milisegundos. Un cambio pequeño, como un hover o un botón que se hunde, pide entre 100 y 150. Una transición mediana, como un panel que aparece, entre 200 y 300. Un cambio grande de pantalla completa, entre 300 y 500. Pasado el medio segundo, la animación deja de acompañar al usuario y empieza a hacerlo esperar. Hay además una asimetría útil: la salida debe ser más rápida que la entrada, porque cuando algo se va, ya no interesa.

Las curvas de aceleración importan tanto como el tiempo. El movimiento lineal, a velocidad constante, se percibe mecánico porque en el mundo físico nada arranca ni frena de golpe. El ease-out, que entra rápido y frena suave, es el más usado para elementos que aparecen, porque el contenido llega pronto a su sitio. El ease-in-out sirve para movimientos entre dos puntos visibles. Y el rebote, con una curva que sobrepasa el destino, funciona en confirmaciones puntuales y resulta insoportable si se aplica a todo.

Accesibilidad del movimiento

Esta parte se olvida casi siempre y es normativa. Hay personas con trastornos vestibulares a las que el movimiento amplio les produce mareo o náusea real. La WCAG establece que las animaciones activadas por interacción deben poder desactivarse, y prohíbe destellos superiores a tres por segundo por riesgo de convulsiones. En la práctica se resuelve respetando la preferencia del sistema operativo mediante la consulta CSS prefers-reduced-motion: quien la tenga activada recibe cambios instantáneos o desvanecimientos suaves en lugar de desplazamientos amplios. Este mismo curso la respeta. Y una regla adicional: ninguna información puede depender solo de la animación, porque si se desactiva, el mensaje debe seguir llegando.

Prototipado avanzado: que se recorra sin explicaciones

Un buen prototipo se prueba solo. Si tienes que estar al lado diciendo "acá imaginate que aparece un mensaje", el prototipo todavía no está listo.

La fidelidad de un prototipo tiene dos ejes independientes que conviene no confundir. La fidelidad visual es cuánto se parece al producto final; la fidelidad funcional es cuánto de su comportamiento está simulado. Un prototipo puede ser visualmente perfecto y funcionalmente inútil si solo enlaza pantallas con un desvanecimiento. Para probar con usuarios en la Unidad 8, lo que necesitas es funcional.

Las tres piezas que lo hacen realista

Auto-layout anidado. Es la base técnica de todo lo demás. Un componente con auto-layout crece con su contenido: una tarjeta cuyo título ocupa tres líneas empuja el resto en lugar de romperse. Anidado —un contenedor dentro de otro— reproduce el comportamiento real del CSS y permite que el prototipo aguante contenido de distinta longitud.

Variables y estados de componente. Figma permite guardar valores que cambian durante la sesión: un contador de carrito, un campo con texto escrito, un interruptor encendido. Con eso el prototipo deja de ser una secuencia fija de pantallas y empieza a tener memoria. Es la diferencia entre una presentación y una simulación.

Smart Animate. Interpola automáticamente entre dos marcos las propiedades de las capas que comparten nombre: posición, tamaño, opacidad, rotación. Es lo que produce la sensación de continuidad de la que hablaba la sección anterior. Su condición es estricta y allí falla casi todo el mundo: las capas deben llamarse exactamente igual en ambos marcos. Nombrar bien las capas deja de ser una manía de ordenado y pasa a ser un requisito funcional.

Qué flujos prototipar

No prototipes todo el sitio. Prototipa el flujo principal completo, de principio a fin, incluyendo lo que nadie quiere dibujar: el estado de carga, el carrito vacío, el error de formulario, la búsqueda sin resultados. Esos son justamente los momentos donde los usuarios se pierden durante las pruebas, y son los que más van a enseñarte en la Unidad 8. Un prototipo del camino feliz solo demuestra que el camino feliz existe.

Cinco formas de animar mal

Cuatro por exceso y una por defecto. La última es la más grave y la más común.

Con qué se pone en marcha una interfaz

La herramienta sigue siendo la misma; lo que cambia es la parte de ella que vas a habitar esta semana.

Protagonista de la unidad: Figma · modo Prototype

Cuatro capacidades concentran el trabajo. Las conexiones entre marcos definen qué gesto lleva a dónde, y conviene usar los disparadores reales —clic, mientras se pulsa, al pasar el cursor— en vez de enlazar todo con un clic genérico. Las interacciones dentro de un componente permiten que un botón cambie de estado sin duplicar la pantalla completa, que es lo que hace manejable un prototipo grande. Las variables guardan valores durante la sesión y habilitan condicionales sencillos: si el carrito está vacío, mostrar otra cosa. Y Smart Animate interpola las capas que comparten nombre, con la curva y la duración que definas manualmente en lugar de aceptar el valor por defecto.

Su ventaja decisiva es que todo ocurre en el archivo donde ya viven tu sistema y tus pantallas, y que el enlace de prototipo se comparte para las pruebas de la Unidad 8 sin instalar nada. Su límite: no es código, así que simula el comportamiento pero no lo ejecuta, y un prototipo muy complejo se vuelve difícil de mantener. Alternativas: ProtoPie, más potente para gestos y sensores; Framer, cuando se necesita comportamiento real cercano a código; y Principle o Rive para animación fina de piezas concretas.

El resto del instrumental de la semana

• Figma Slides o el modo presentación — para recorrer el prototipo con alguien y observar sin intervenir.
• Chrome DevTools · panel Animations — permite ralentizar y examinar las animaciones de cualquier sitio real, excelente para aprender de referencias.
• Easings.net y cubic-bezier.com — catálogo visual de curvas y editor para construir la tuya.
• LottieFiles — animaciones vectoriales ligeras exportables a web, útiles para estados vacíos y confirmaciones.
• Asistentes de IA — sirven para enumerar los estados que se te escapan en un flujo y para traducir una intención de movimiento a valores concretos de duración y curva. La decisión de qué merece animarse es tuya.

Para seguir por tu cuenta

El mejor ejercicio de esta semana es gratis: abre el panel Animations de DevTools en un sitio que admires y ralentiza sus transiciones al 10 %.

Mesa de mezclas: construye la respuesta del botón

A la izquierda está el botón de Aroma Andino tal como funciona hoy: sin ninguna respuesta. A la derecha, las cuatro capas que puedes encender. Pulsa el botón después de cada cambio y fíjate en qué se siente distinto. La consigna no es encenderlo todo: es descubrir qué aporta cada capa y cuál es imprescindible.

Segunda parte: la misma acción, tres curvas

Ahora el otro parámetro. Cada botón lanza el mismo recorrido con una curva distinta. Míralos varias veces y quédate con cuál te parece que "llega" y cuál se siente mecánico.

Escribe una línea para tu proyecto: qué curva y qué duración vas a usar para tu acción principal, y por qué. Esa frase entra en la documentación de tu sistema, junto a los tokens de color de la semana pasada.

Lo que queda del movimiento

• Una microinteracción tiene disparador, reglas, retroalimentación y bucles.
• Responder siempre y por debajo de 100 ms para que se perciba instantáneo.
• El movimiento orienta, da continuidad y dirige la atención; fuera de eso, sobra.
• Duración proporcional al tamaño del cambio, con la salida más rápida que la entrada.
• Ease-out para lo que aparece; el rebote solo para celebrar.
• La preferencia de movimiento reducido es un requisito, no una opción.
• Un prototipo útil incluye estados de carga, vacío y error, y se recorre sin explicaciones.

Glosario de la Unidad 5

Lo que viene: abrir el capó

Tu prototipo se recorre, responde y confirma. Pero todavía es una simulación. Falta descubrir de qué está hecho lo real.

En la Unidad 6 — Anatomía de la web y adaptación responsiva vas a mirar por debajo. Aprenderás a leer HTML semántico y a entender por qué la etiqueta correcta importa más que el aspecto; los fundamentos de CSS —el modelo de caja, la cascada, la especificidad y los selectores— lo suficiente para dialogar con quien programa y para depurar lo que se rompa; y la lógica de las media queries y los puntos de quiebre, que es la contraparte técnica del reflujo que dibujaste en la Unidad 3. Vas a inspeccionar sitios reales con las herramientas del navegador.

La conexión es directa: cada transición que definiste aquí existe en CSS como una propiedad con su duración y su curva. Lo que esta semana ajustaste a mano en un panel, la próxima lo vas a reconocer escrito en código. La simulación se encuentra con su materia.