Reglas básicas para animaciones web.

Las animaciones pueden hacer que un sitio se destaque. O pueden acabar con la experiencia con la misma facilidad. Cuando se trabaja con animaciones web, hay algunas cosas que podrían salir mal, como agregar animaciones que no sirven para nada, establecer duraciones demasiado largas o demasiado rápidas o no utilizar el tipo correcto de animación en primer lugar. Incluso si todas estas cosas se hacen correctamente, es posible que un estilo de animación no se sienta bien, especialmente si no está sincronizado con otras animaciones o no está en línea con la personalidad general del sitio.

Otra cosa importante a tener en cuenta es que no todas las experiencias digitales deben compartir exactamente las mismas animaciones. Un sitio web de marketing puede necesitar animaciones diferentes a las de un sitio web de producto o una aplicación móvil. Aunque los mismos principios básicos de movimiento se aplican a todos, existen algunos matices según el tipo de contenido y el tamaño de la pantalla.

Por ejemplo, supongamos que deseamos hacer que un formulario aburrido sea más interesante de completar. Agrega algunas animaciones encantadoras en cada paso hacia adelante, pero ¿es una buena idea para un formulario que sabe que un usuario debe visitar y completar con frecuencia? En ese caso, ver las mismas animaciones una y otra vez puede resultar molesto.

Claramente, existen condiciones y consideraciones que serán útiles para las animaciones. En este artículo, analizaremos cómo agregar animaciones a los sitios web de productos. Profundizamos un poco en eso y establecemos algunas reglas básicas para trabajar con ellos. No es tanto un manifiesto, sino más bien una línea de base a la que podemos hacer referencia y en torno a la cual podemos unirnos.

En primer lugar, ¿cuál es una buena situación para una animación?

Cuando se usa bien, una animación es casi como contenido: proporciona contexto y tiene un significado que ayuda a informar al usuario que algo ha sucedido e incluso qué esperar a continuación. Aquí hay algunas buenas situaciones en las que la animación puede hacer exactamente eso.

Transición de bloques de UI

Este podría ser el caso de uso más común de las animaciones. Cuando un bloque de UI se mueve desde su posición original, o se agrega o elimina del DOM, es una buena idea dejar que los usuarios vean lo que sucede.

Cargando contenido

¡Una animación de carga es algo que todos hemos visto y encontrado en algún momento! Si no, un rápido viaje a CodePen le mostrará cuán populares son las animaciones de carga. Son ideales como marcadores de posición para contenido, donde los usuarios no sólo reciben una pista de qué esperar cuando se carga el contenido, sino también la confianza de que algo se está cargando.

Además de hacer que el sitio parezca rápido, también evita el reflujo de contenido desagradable, que puede resultar muy desorientador ya que los elementos se representan en diferentes momentos.

La representación del lado del cliente es muy interesante. Mire esta extraña experiencia de carga. La página en sí no es particularmente lenta, pero se carga con mucha dificultad. Todo un asunto en el que los desarrolladores front-end tendrán que ser buenos. pic.twitter.com/sMcD4nsL98

– Chris Coyier (@chriscoyier) 30 de octubre de 2018

Por supuesto, es mejor cargar marcadores de posición cuando se conoce de antemano la altura de los bloques de contenido.

reticente

Generalmente se trata de una animación única cuyo objetivo es dar a los usuarios una pista sobre dónde buscar o qué hacer a continuación. Algunas UI son complejas por naturaleza. Un pequeño brillo u ondulación puede ayudar a guiar a los usuarios a través del proceso de completar una tarea o resaltar una característica en particular.

No es necesario que todo esté en la cara del usuario. En cambio, una pequeña pista visual que informe sin capacitar toda la experiencia funcionará bien.

Microinteracciones

Generalmente utilizadas en elementos individuales, las microinteracciones brindan a los usuarios retroalimentación visual instantánea después de realizar una acción. Infunden confianza en que se ha realizado una acción y que algo sucedió como resultado, y al mismo tiempo añaden un poco de deleite.

Estos no tienen que ser atractivos, como la animación del corazón de Twitter, pero deben indicar algún tipo de retroalimentación o respuesta a la acción del usuario. Simplemente observe lo sutil, pero encantador, que es cuando un usuario hace algo tan pequeño como agregar un elemento de una línea a otra:

Bien, entonces, ¿cuándo deberíamos evitar las animaciones?

Acabamos de ver algunas situaciones en las que las animaciones tienen mucho sentido. Expliquemos las condiciones opuestas en las que las animaciones generalmente contribuyen muy poco o nada a la experiencia del usuario. En otras palabras, se vuelven visibles por malas razones y probablemente sea mejor dejarlos fuera de la ecuación.

Transiciones de ruta

Sí, normalmente no vemos este tipo de animaciones en los sitios web de productos, pero vale la pena mencionarlo para entender por qué no tienen sentido. Estas transiciones funcionan mejor en aplicaciones móviles debido al área de pantalla pequeña. En las pantallas de escritorio hay un área mucho mayor para animar. Para animar todo el contenido sin problemas, deberás establecer una duración mayor que en la pantalla del móvil. Esto simplemente molestará a los usuarios, haciendo esperar para ver el contenido, ya que ya están acostumbrados a ver la visibilidad instantánea del contenido en la web. Y en el peor de los casos, las transiciones de ruta no solo pueden distraer, sino también representan un grave problema de accesibilidad en lo que respeta a la sensibilidad al movimiento.

En la carga inicial del contenido de la página

Puede hacerlo en sitios web de marketing cuando desee educar a los usuarios o centrar su atención en un bloque en particular. Para los sitios web de productos, volverá a resultar molesto ver la misma animación cada vez que los usuarios naveguen entre páginas.

Cuando es inesperado

Es una buena idea considerar el estado mental del usuario mientras utiliza una función en particular. ¿Se espera retroalimentación visual donde se utiliza la animación? De lo contrario, puede confundir más de lo que ayuda.

Por ejemplo, consulte esta aplicación de calculadora. No hay nada nuevo en el patrón de la interfaz de usuario cuando se ingresan números y se ejecutan cálculos. Los usuarios ya saben dónde centrarse. No tiene sentido hacer esperar a los usuarios antes de poder ver resultados o sorprenderlos con algo que no aporta ningún significado o beneficio adicional.

Cuando no estás seguro de qué tan bien funciona

Vale la pena tener en cuenta que no todos los dispositivos, conexiones a Internet y navegadores son iguales a los ojos de la animación. Eric Bailey resume esto muy bien en su análisis profundo de la prefers-reduced-motionconsulta de los medios:

También debemos reconocer que no todos los dispositivos que pueden acceder a la web también pueden renderizar animaciones o renderizarlas sin problemas. Cuando la animación se utiliza en un dispositivo de bajo consumo o baja calidad que “técnicamente” la admite, la experiencia general del usuario se ve afectada. Algunas personas incluso buscan deliberadamente esta experiencia como característica.

El título encima de esa cita es un sabio recordatorio: la animación es una mejora progresiva. Si planeamos usar una animación, especialmente aquellas que amenazan con dominar la experiencia, debemos al menos considerar una forma de optar por no participar y si la experiencia aún funciona sin la animación. prefers-reduced-motiones el mejor lugar para empezar.

Cuando el propósito no está claro

Por último, diría que no agregues animaciones cuando no estés absolutamente seguro del propósito que tienen. La animación superflua puede distraer y perjudicar más de lo que ayuda. Este tweet de 2018 sigue siendo muy cierto:

Diseño web en 2018

428 dependencias
142 segundos de tiempo de compilación
5 MB de JavaScript
0 pistas sobre las interacciones básicas de la interfaz de usuario pic.twitter.com/1GAAQS4td8

— Thomas #BlackLivesMatter (@thomasfuchs) 27 de marzo de 2018

¿Cuánto tiempo debe durar una animación?

La duración de una animación es tan importante como el tipo de animación que se utiliza. Si espera demasiado, puede parecer que la animación se prolonga. Si va demasiado rápido, los bonitos detalles de la animación pueden perderse (en el mejor de los casos) o desorientar completamente al usuario (en el peor de los casos).

Entonces, ¿cuánto tiempo debemos establecer la duración de una animación? Te daré una respuesta clásica: depende.

Cuanto mayor es la distancia, generalmente mayor es la duración.

Las animaciones (como las que vimos anteriormente) se pueden limitar a una duración corta. Pero si estamos hablando de una transición masiva en la que un objeto viaja una larga distancia, podemos sentir que necesita algo un poco más de tiempo para asegurarnos de que las cosas no se muevan demasiado rápido. Pero evite utilizar una duración superior a 400 ms.

Mira este ejemplo. Observe cómo el contenido tarda un poco más en realizar la transición porque tiene una mayor distancia que recorrer. Pero también tenga en cuenta que no tiene que durar demasiado porque el objeto que sale se desvanece en el objeto que entra, y el objeto que entra viene a una distancia más corta en lugar de hacerlo recorrer toda la pantalla.

Esto demuestra que incluso las animaciones grandes se pueden optimizar de manera que parezcan más cortas sin perderse en la mezcla.

Utilice una duración más corta cuando el usuario desencadene la acción.

Esto es importante y un error común. Si el usuario ya espera que algo suceda (y el enfoque ya está claramente donde debería estar), entonces no tiene sentido hacer que el usuario espere unos segundos para completar lo que ya espera.

Por otro lado, si el sistema activa automáticamente el cambio, tiene sentido una duración más larga, ya que permitirá al usuario ponerse al día con el cambio que se está produciendo. Piense en información sobre herramientas o modales que no son activados por el usuario y no requieren su atención inmediata.

Las animaciones de entrada y salida pueden tener diferentes duraciones.

A veces tiene sentido mantener la animación de un objeto que ingresa a la vista un poco más rápido que una animación de un objeto que sale, especialmente cuando el usuario espera ver ese cambio de contenido.

Tome el ejemplo anterior de menú desplegable. Cuando un usuario hace clic en él, querrá ver los elementos del menú de inmediato; al menos, yo no tendría que esperar para ver los elementos del menú. Cuando el usuario haga clic, deje que el submenú entre rápidamente y luego salga suavemente cuando se cierre para evitar distraer al usuario al salir, cuando ya no sea necesario.

Pero esto no se aplica a bloques grandes de UI. En bloques más grandes, en la mayoría de los casos, se requiere una duración superior a 200 ms. En tales casos, invertir las duraciones y permitir que un bloque salga más rápido de lo que entró garantiza que no bloqueará la vista de página existente.

La duración de la animación en todo el producto debe estar sincronizada entre sí y con la personalidad de la marca.

Me he encontrado con muchos productos en los que una función tiene animaciones realmente agradables y otra es simplemente demasiado rápida, lenta o carece de animación.

Aún peor es cuando las animaciones dentro de la misma función no están sincronizadas.

Ahí es donde puede ser de gran ayuda tener una guía de estilo con pautas de animación bien pensadas que se puedan utilizar de forma coherente durante toda la experiencia.

¿Qué tan simple es demasiado simple? ¿O cuán complejo es demasiado complejo?

La complejidad de una animación debería basarse en la frecuencia con la que se espera que los usuarios la encuentren, entre otras cosas que hemos visto hasta ahora. Cuanto más a menudo se espera que los usuarios la vean, más sencilla debería ser la animación. Esto debería anular las reglas anteriores de duración cuando sea necesario.

Por ejemplo, la siguiente animación funcionaría en un menú principal, pero usar el mismo efecto asombroso en los menús desplegables de todo el producto es demasiado para asimilar. De hecho, existe un punto de rendimiento decreciente en las animaciones, al igual que lo hay. en economía.

Pero bueno, si este tipo de animación compleja se usa con moderación en casos intencionales, ¡puede ser increíblemente deliciosa!

Pero sí, puedes ser creativo con las animaciones donde hay una decisión pendiente del usuario o mientras procesa datos. Esto hace que los tiempos de espera sean más interesantes, como cuando la red se interrumpe o se envía una contraseña incorrecta.

¿Qué función de aceleración debería utilizar?

¿Facilidad? ¿Facilidad en? ¿Facilitarse? ¿Entrar y salir fácilmente? ¿Alguna curva de Bézier cúbica?

La relajación correcta se adhiere a las leyes de la física. Los principios de animación de Disney son el estándar de oro cuando se trata de eso.

Para ingresar animaciones, use el efecto de rebote si desea la atención inmediata del usuario; de lo contrario, use una aceleración suave (y desaceleración, de hecho) que sea incremental en lugar de lineal. El rebote debe reflejar la gravedad. La publicación de Brandon Gregory sobre animaciones de sensación natural proporciona todo tipo de ejemplos que se ajustan a las leyes de la física.

Puede consultar este Gist de Adam Argyle para definir las flexibilizaciones en CSS.

Luces, cámara y… ¡acción intencionada!

La atención al detalle es lo que separa las animaciones sobresalientes de las ordinarias (o incluso rotas). Si estás en el proceso de aprender animaciones web o actualmente estás trabajando en un proyecto que las requiere, espero que esta publicación pueda servirte como un conjunto de reglas básicas útiles para ayudarte a aprovechar al máximo tu trabajo.

Aparte de las reglas, también mencionaría que las buenas animaciones requieren tiempo y práctica. Claro, muchas de las cosas que cubrí aquí son algo anecdóticas y se basan en experiencias personales, pero ese es el resultado de desarrollar un ojo para las animaciones después de años de trabajar con ellas. Aprende, prueba, mejora y sigue aprendiendo. De lo contrario, puede terminar con una colección de animaciones que brinden malas experiencias de usuario e incluso perjudiquen la accesibilidad de su sitio.