Un botón que no reacciona a un toque hace que la gente toque otra vez. Ese segundo toque es el que produce pedidos duplicados y formularios enviados dos veces, además de una pequeña pérdida de confianza difícil de medir y fácil de sentir.
Las microinteracciones son las respuestas pequeñas que da una interfaz a cada acción. Casi nadie las nota cuando funcionan, y se notan enseguida cuando faltan.
Qué es una microinteracción
El libro Microinteractions de Dan Saffer las describe en cuatro partes: un disparador que las inicia, reglas que deciden qué pasa, una respuesta que lo muestra, y ciclos y modos que cubren lo que pasa con el tiempo. Un botón de me gusta, un interruptor, deslizar para actualizar y un medidor de seguridad de contraseña siguen ese patrón.
La parte en la que más productos fallan es la respuesta. La regla se ejecuta, pero la persona no ve que algo haya pasado.
Cada acción necesita una respuesta
Cuando alguien presiona algo, la interfaz debería mostrar que recibió el toque, que está trabajando y que terminó. Prueba los dos botones: el primero no da respuesta, el segundo muestra cada paso.
Los estados de un botón
Un botón bien hecho tiene más estados que su aspecto por defecto. Necesita un estado al pasar el cursor en escritorio, uno presionado, uno de carga que bloquee toques repetidos, uno de éxito y uno de error claro. Diseñarlos juntos mantiene el botón legible en cada momento del flujo.
El tiempo importa tanto como el movimiento
Los límites de tiempo de respuesta de Jakob Nielsen siguen siendo una buena guía. Cerca de 0,1 segundos se siente instantáneo, alrededor de 1 segundo mantiene el ritmo aunque la persona note la espera, y cerca de 10 segundos la atención empieza a irse. Por eso el estado presionado tiene que aparecer de inmediato, y todo lo que tarde más de un segundo necesita un estado de carga visible.
Movimiento que explica
Un buen movimiento muestra de dónde salió algo o qué cambió. En el brand kit que hicimos para Simply Andy, cambiar un color en el generador de firma actualiza la vista previa al instante, así Andreina ve el resultado antes de copiarlo en Gmail. Las animaciones largas y decorativas en medio de una tarea estorban, así que las guardamos para momentos como la primera apertura.
Respeta la preferencia de menos movimiento
Algunas personas activan la opción de reducir movimiento en su sistema porque la animación las marea o las distrae. Los navegadores exponen esa elección con la media query prefers-reduced-motion. Cada animación de este sitio la revisa y pasa a un fundido simple o a no moverse.
