La magia de la animación web

La animación está en todas partes. Ya sea un anuncio en la calle, en la tv, en las redes sociales, en todo. Somos constantemente atacados con imágenes en movimiento que intentan captar nuestra atención.

Es así como páginas webs, empresas y personas intentan vendernos sus productos o servicios. Para ello necesitan capturar y mantener nuestra atención. Y una forma de poder aumentar la conversión es la animación web.

‍

Un poco de historia

Animación proviene del latín <Anima>que significa "alma". Por lo tanto, la animación es el intento de darle vida a elementos estáticos.

‍

‍

‍

En el inicio en las páginas web todo era estático y aburrido. Era bastante difícil adherir algo que no fuera una imagen para poder resaltar algo, ya sea por el ancho de banda o por las dificultades técnicas de esa época.

Pero el deseo de querer avivar y dar dinamismo a las webs era muy fuerte. Fue así como en 1995 la primera página web en adherir un gif animado, fue la web de Batman Forever de Jeffrey Zeldman.  

Esta página fue muy popular en su época, lo que sirvió de inspiración para que diseñadores y desarrolladores integraran gifs como algo llamativo en sus páginas.

‍

‍

‍

Con el tiempo, las herramientas para la creación de animaciones web han ido cambiando. Pasando por Flash, el cual fue lanzado en 1996 por Macromedia (anteriormente SmartSketch), hasta nuestros días, donde la utilización de medios tales como HTML5, CSS3, JavaScript y SVG predomina. Esto se debe a la gran cantidad de dispositivos nuevos que existen hoy en día, por lo tanto, el cuidado que hay que tener con el responsive de las páginas.

‍

‍

‍

¿Por qué utilizar la animación web?

‍

Hoy en día intentamos crear sitios webs más atractivos y que generen una mejor conversión para atraer a nuestros usuarios objetivo.

Si la animación la usamos de una manera correcta, esta podría ayudar a fortalecer la experiencia del usuario. Y una mejor experiencia de usuario puede generar mayores conversiones.

Aquí una lista de algunas animaciones que podrían ayudar al UX y a incrementar la conversión.

‍

1. Carga progresiva para mantener a los usuarios interesados

‍

Bueno… a nadie le gusta esperar. Existe una gran probabilidad de que si al usuario no le haces ver que algo está pasando en la pagina mientras espera, probablemente se vaya.

Como ejemplo tomaremos la página de médium. Aquí podemos observar que, al recién cargar la web, se muestra el header y el “esqueleto”, mientras va cargando por secciones. Luego al hacer click a algún artículo, hay una animación de una barra verde que nos indica que algo esta pasando. Finalmente se carga el texto mientras la imagen carga en fases. Todos estos indicadores son muy buenos para mantener al usuario atento a lo que está ocurriendo y evitar que se fugue.

‍

‍

‍

‍

Y en apps también puede implementarse, aquí un ejemplo de una buena práctica.

‍

‍

‍

‍

2.   Animar el desplazamiento de elementos

‍

Podemos utilizar la animación para captar la atención del usuario. Una buena práctica es ayudar a las personas a guiar su vista luego de haber desencadenado una acción, ya sea hacer click en una nueva página o movernos a otra sección.

Aquí un ejemplo de la diferencia entre hacerlo con animación y sin ella.

‍

‍

‍

‍

Otra parte que podríamos resaltar es el título, probablemente la parte más importante de una página web. Aquí es donde se intenta enganchar al usuario y lograr que siga leyendo. Un tip para mantener aún más su atención, es el desvanecimiento gradual de los elementos que componen esta parte.

Aquí un ejemplo donde la aparición gradual de los elementos guía su atención a distintos elementos, para luego invitarle a seguir explorando.

‍

‍

‍

‍

3. Animar el feedback

‍

Animar la retroalimentación es una manera mas efectiva para que el usuario entienda de mejor manera alguna acción o advertencia. Los sitios donde más vemos esto es en los e-commerce. Ya que debemos guiar a los compradores por todos los pasos para la compra, es importante disminuir la frustración que esto pueda traer y hacer más fácil la finalización de cada paso. Para esto la animación de botones, ventanas y textos puede ayudar a hacer más claro ciertas acciones.

Aquí un ejemplo de una buena utilización de animación para dar un feedback al usuario.

‍

‍

Conclusión

‍

Sin duda la animación se ha convertido en una herramienta que puede ayudar a mejorar la experiencia de usuario. Sin embargo, esto no significa que debemos usar en exceso o no analizar antes el por qué queremos agregar tal animación. Existen varios factores que debemos estudiar antes, como, por ejemplo, si la animación afecta en consideración los tiempos de carga o si genera confusión.

No es una buena idea agregar animación, sólo por seguir tendencias. Debemos tener muy claro si realmente ayudará a la experiencia de usuario y a la conversión de la página web.

‍

‍

‍