5 técnicas populares de animación web


La interacción es la base de toda la experiencia de usuario, pues se trata de la “conversación” entre éste y la página o aplicación, pero si esa conversación es aburrida el usuario la dejará para ir a buscar otra más interesante. Sin embargo, el diseño de interacción comprende múltiples disciplinas, ya que no es tan sencillo crear un sistema de objetos y texto que sea a la vez amigable, comprensible y funcional.

No obstante, siempre existen técnicas que, conociéndolas bien, pueden ayudarnos a crear un mundo interesante para el usuario, y precisamente sobre eso vengo a comentarte hoy, pues esta entrada está dedicada a mostrarte las técnicas de animación web más utilizadas en la actualidad, con lo cual te asegurarás de pisar siempre sobre terreno seguro cuando se trate de hacer entretenida la interacción de los usuarios con tu diseño.

Así que no nos demoremos más y comencemos nuestra recopilación:

1. Para atraer la atención

El ojo humano es atraído por el movimiento, y esto hace que la animación sea la herramienta perfecta para arrastrar la atención del usuario y controlar la jerarquía visual de los elementos de la página. Además, es una manera muy sencilla de aportarle interés a las formas, los call-to-action, e incluso las partes del menú.

Y si necesitas un ejemplo fíjate en MY/STATIC/SELF, que explota a conciencia todo el potencial de la animación:
01enter image description here

El cubo del centro rebota sin ruido y parpadea, convirtiéndose en el elemento más interesante de esa escala de grises. Además, cada una de sus capas representa un enlace hacia las diferentes páginas que se muestran clara y suavemente en el menú de navegación de arriba, haciendo que todo el conjunto parezca ameno y elegante.

2. En navegación y menús

Las tendencias más recientes abogan por ocultar el menú de navegación para tener más espacio, donde el patrón más utilizado es el menú hamburguesa (el de las tres líneas). Aquí la animación se utiliza para prevenir que la transición sea muy dura, estableciendo una conexión entre las vistas del menú escondido y desplegado.

Como ejemplo mira el sitio de Brian Hoff Design, que oculta su menú en un botón circular con una flecha, y si el usuario hace clic en él, la barra de navegación se desliza desde la derecha, logrando una transición muy suave:
![02][2]

3. Como animación de carga

Una de las preocupaciones principales del mundo web es distraer al usuario durante los tiempos de carga de la página, y en ello la animación cumple un rol primordial, por lo que es una de las técnicas más utilizadas.

¿Por qué es recomendable? En el mejor de los casos la animación de carga influencia de manera positiva al usuario, haciéndole pensar que la tecnología utilizada es mejor de lo que realmente es; y en el peor de los casos lo entretiene mientras espera, mejorando la experiencia general, así que se trata de un recurso con el que siempre vas a ganar.

Por ejemplo, visitando el sitio de Tom Cole Architecture el usuario comienza con una página negra, y al momento múltiples líneas blancas comienzan a formar el logo y la marca del sitio, luego aparece la foto de fondo, y finalmente el usuario es libre de navegar:
![03][3]

4. Hover

El hover es ese efecto que puede cambiar la apariencia de un elemento cuando el usuario interactúa con él, ya sea cliqueándolo, pasando el ratón por encima, etc., y constituye la animación más utilizada por los diseñadores, pues los usuarios están acostumbrados a mover el ratón por toda la página para descubrir los elementos cliqueables.

Si te fijas en la web de Alectia verás que poner el ratón sobre una tarjeta provoca que el título de la misma se deslice para dar paso a otro título idéntico, al igual que pasa con la flecha de “leer más”, lo cual constituye una animación sencilla pero muy elegante que además es suficiente para indicar la función de la tarjeta:
![04][4]

5. Galerías y slideshows

La animación e interacción mediante galerías animadas es muy utilizada, pero este es un punto en el que hay que tener mucho cuidado, pues no siempre lleva al resultado que queremos. Las galerías pueden sobrecargar al usuario con demasiada información, y las imágenes pasadas en slide atraen toda la atención, además de que alargan el tiempo de carga de la página.

No se trata de obviar esta tendencia, sino de utilizarla con tacto y no sólo porque sea visualmente atractiva, pues su uso dependerá siempre de cuánta atención deseas arrastrar hacia la información de las imágenes. Y para que te lleves una idea fíjate en Big Active, que utiliza muy bien esta tendencia como patrón principal:
![05][5]

Conclusiones

De acuerdo a cómo se mueve el mundo del diseño web hoy en día, es posible que en el futuro la animación ya no sea opcional, sino que se convierta en un elemento imprescindible. Por ello siempre es bueno revisar cuáles son las tendencias más seguidas y cómo se utilizan, pues esto te dará una idea de lo que debes hacer para lograr una web exitosa.

Precisamente esto es lo que he querido mostrarte en el día de hoy, pero si necesitas más puedes acudir a Material Design Animation Examples Gallery, donde encontrarás una galería de diseños útiles basados en la animación para inspirarte. Y eso es todo por hoy, si te ayudé no olvides hacérmelo saber y compartir tus impresiones con todos.