Romper la simetría proporciona contraste y atractivo a tus proyectos. Descubre cuándo y cómo aplicarlo a tus proyectos.
La sincronización asimétrica de animaciones mejora la experiencia del usuario, ya que te permite expresar personalidad y, al mismo tiempo, responder rápidamente a las interacciones del usuario. Además, se genera un contraste en la experiencia, lo que hace que la interfaz sea más atractiva.
- Usa la animación asimétrica para agregar personalidad y contraste a tu trabajo.
- Siempre debes favorecer la interacción del usuario. Para ello, utiliza duraciones más cortas cuando respondas a toques o clics, y reserva duraciones más largas para los momentos en los que no lo hagas.
Al igual que la mayoría de las "reglas" de animación, debes experimentar para averiguar qué funciona para tu aplicación, pero cuando se trata de la experiencia del usuario, los usuarios son notablemente impacientes. La regla general es que siempre se debe responder rápidamente a una interacción del usuario. Dicho esto, la mayoría de las veces la acción del usuario es asimétrica y, por lo tanto, la animación también puede serlo.
Por ejemplo, cuando un usuario presiona para mostrar la navegación de la barra lateral, deberías mostrarla lo más rápido posible, con una duración de alrededor de 100 ms. Sin embargo, cuando el usuario descarta el menú, puedes permitirte animar la vista un poco más lentamente, por ejemplo, alrededor de la marca de 300 ms.
Por el contrario, cuando se activa una vista modal, normalmente se usa para mostrar un error o algún otro mensaje importante. En esos casos, querrás mostrar la vista un poco más lentamente, nuevamente alrededor de la marca de 300 ms, pero el descarte, que el usuario activa, debería ocurrir muy rápido.
Por lo tanto, la regla de oro general es la siguiente:
- En el caso de las animaciones de la IU activadas por la interacción del usuario, como las transiciones de vistas o la visualización de un elemento, realiza una introducción rápida (duración corta), pero un cierre lento (duración más larga).
- En el caso de las animaciones de la IU que se activan con tu código, como errores o vistas modales, utiliza una introducción más lenta (duración más larga), pero un cierre rápido (duración corta).