Animaciones en la web

Las animaciones web parecen ser una línea de futuro en la web y sus interfaces. Todas las conferencias de desarrollo web frontend incluyen una conferencia sobre el tema, como en An Event Apart Nashville.

La mayoría de las animaciones web se basan en animar imágenes SVG y en transiciones CSS. Ambas tecnologías son complejas de usar por la curva de aprendizaje necesaria para poder hacer una simple animación. En ese sentido, los animadores de interacción eligen librerías de Javascript como GreenSock para hacer más sencilla esta tarea, y construir lo que ahora se denomina microinteracciones y que están tan de moda en productos digitales como Twitter y Facebook.

Una conferencia sobre el estado de la animación de Rachel Nabors en Fronteers 2014. Foto de mischahr

La estandarización de animaciones web

SVG sigue siendo el estándar de facto de animaciones web, ya que tanto GreenSock como SnapSVG (la otra libreria de javascript para animaciones web) se basan en el formato SVG.

Sin embargo, en su esfuerzo por estandarizar la web, el W3C ha publicado una API de animaciones web  que unifica las animaciones y transiciones CSS con las animaciones en SVG (SMIL) en un solo motor de animación. Aunque sea ya la versión previa a la publicación final de la especificación, todavía está en construcción en Github y es previsible que haya mejoras y cambios en breve.

A pesar de los esfuerzos del W3C por estandarizar las tecnologías de animación de la web, las empresas de desarrollo de navegadores siguen en sus guerras propias. Cuando Edge (el navegador de Microsoft) ha dicho que soportará SMIL, Chrome (el navegador de Google) ha dicho que dejará de soportarlo en favor de la nueva API.

Afortunadamente, algunos de los bugs de las librerías de animación de SVG con los CSS han sido resueltos, por lo que las librerías de animación de SVG independientes en Javascript serán cada dia mas comunes, con el aumento del soporte de SVG en los navegadores y los problemas de compatibilidad que hemos comentado con las nuevas tecnologías que van más allá e intentan unificar todas las tecnologías actuales.

Usar una librería de animación externa en javascript basada en SVG será cada día un opción más viable y más usada, hasta que haya un estándar que se implemente en todos los navegadores que dé posibilidades y flexibilidad similares a las librerías que existen.

Reduciendo la curva de aprendizaje de las animaciones web

Como decíamos antes, las animaciones web se enfrentan al desafío de su curva de aprendizaje con CSS y SVG, para conseguir resultados bastante primitivos en comparación a lo que con Flash se podía aprender en poco tiempo.

Los navegadores van aumentando su nivel de compatibilidad con la API de Animación Web, dos ejemplos son la versión para desarrolladores de Firefox y Chrome Canary (la versión para desarrolladores de Chrome). Es razonable pensar que, conforme la API de animación web sea más conocida, aparezcan nuevas herramientas de terceros para editar CSS y SVG que hagan uso de ella y simplifiquen su aprendizaje.

Empresas como IBM y Salesforce, están introduciendo microinteracciones en sus sistemas de diseño. Además han añadido una guía de microinteracciones a la guía de UI, por lo que el interés por las microinteracciones y la animación puede que no decaiga en fechas próximas, al estar apoyadas por empresas que las implementarán en el mundo empresarial.

Al diseñar animaciones para interfaces de usuario, tenemos que considerar una experiencia del usuario completa. Esto también supondrá un reto al tratarse de una tecnología emergente, pero a buen seguro las animaciones serán un elemento crucial que haga más gratificante el uso de los productos y servicios digitales y mejorando considerablemente la experiencia de uso.

En Torresburriel Estudio ayudamos a nuestros clientes a mejorar sus diseños de interfaces de usuario mediante una consultoría de acompañamiento en el proceso de diseño de interacción. Contáctanos para contarnos tu proyecto.