Romper la simetría proporciona contraste y atractivo a tus proyectos. Aprende 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 sensación, lo que hace que la interfaz sea más atractiva visualmente.
- Usa una sincronización asimétrica de las animaciones para agregar personalidad y contraste a tu trabajo.
- Siempre debes priorizar la interacción del usuario. Para ello, usa duraciones más cortas cuando respondas a presiones o clics, y reserva períodos más prolongados para los momentos en los que no lo hagas.
Al igual que la mayoría de las “reglas” de animación, debes experimentar para descubrir qué funciona para tu aplicación, pero cuando se trata de la experiencia del usuario, los usuarios son notablemente impacientes. La regla de oro es siempre 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, debes mostrarla lo más rápido posible, con una duración aproximada 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 que la vista se muestre 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, realiza una introducción más lenta (duración más larga), pero un cierre rápido (duración corta).