Hoy en día todo el mundo está navegando por Internet, buscando información, chateando con amigos, haciendo negocio, aprendiendo algo nuevo.
Porque no hacemos que esta navegación sea un poco más divertida y dinámica usando animaciones en nuestra web?
¿Qué es la animación web?
La definición de animación sería: conjunto de gráficos o imágenes que, a una determinada velocidad, crean la ilusión de movimiento.
En caso de la animación web es: efectos que vemos cuando navegamos por la página web.
¿Para que sirve la animación?
La animación web ayuda a atraer la atención del cliente.
Según las estadísticas, cuando el usuario llega a nuestra página web solo tenemos 5 segundos para captar su atención y que no se vaya de la web.
Sirve para dar relevancia a una frase o apartado del copy que no se pueden perder.
Los botones call to action y los mensajes claves son los elementos más importantes de la web. Tenemos que destacarlos.
Animar los textos principales, los botones o formularios es buena solución para centrar la atención del usuario.
Aumenta el tiempo de permanencia en la web.
Cuando el usuario ve ciertos elementos en la web que se mueven, eso lo incita a hacer scrolling y mirar qué más hay en la web.
Aumenta el tiempo de permanencia en la web consiguiendo así que el usuario tenga más posibilidades de encontrar su objetivo.
La animación contribuye a otorgar un aspecto profesional a la página.
Cuando la animación está bien hecha la página web crea más confianza, parece más profesional y más atractiva.
Técnicas de animaciones
1. Animación de la carga (o Preloader)
Si la página se carga un rato para que el usuario no vea los estilos rotos de la web o las imágenes medio cargadas se puede poner un preloader para animar y crear expectación al usuario.
Normalmente es un icono que se mueve de forma infinita.
Importante: No usar animación de carga si no es necesario, puede ser tedioso.
2. Navegación y menú
El menú es una parte importante de la web. Casi siempre el usuario está navegando por el menú.
La animación del menú puede ser muy variada. Se puede ocultar menú, animarlo haciendo scrolling, hacer más grande/más pequeño, añadir un efecto de animación pasando ratón por encima, etc.
Lo único que hay que tener en cuenta es que la navegación siempre tiene que ser cómoda y debe ser fácil de encontrar.
3. Animación scrolling
El scroll por la página es una acción muy importante que realiza el usuario, porque todos los usuarios hacen scroll para encontrar algo que destaque y le llame la atención.
Al hacer scroll los elementos de la web se pueden mover, girar, aparecer, desaparecer, etc.
Hay un efecto que es muy conocido también que es el parallax effect. Es cuando hacemos scroll el fondo parece moverse a una velocidad distinta que el contenido.
Este efecto da la sensación de que la web tiene volumen. Es una tendencia muy actual en el mundo web.
4. Animación al pasar ratón o hacer clic
Se refiere a la animación de cualquier elemento de la web al pasar el ratón o al hacer clic. Pueden ser botones, textos, formularios o cualquier bloque de la web.
La animación puede ser fácil o más compleja pero nunca debe molestar al usuario.
5. Pop-up ventana (ventana emergente)
Es una ventana nueva con mensajes, formularios, textos que aparecen por encima de toda la web después de algún tipo de acción.
Es interesante animar un pop-up porque normalmente estas ventanas llevan mensajes claves que empujan a la acción.
Desventajas de usar animación o ¿qué hay tener en cuenta?
Tiempo web. Para aplicar animaciones en toda una web se necesita más tiempo. A la hora de desarrollar un proyecto hay que tenerlo en cuenta. Además, dependiendo de la complicidad el tiempo puede variar, es difícil de contar el tiempo exacto al principio del desarrollo.
Puede pesar mucho.Usando plugins, scripts y estilos propios de animación aumentamos la cantidad de recursos que tenemos que cargar en la web. Es por eso que el tiempo de carga de la página también aumenta y este no es nuestro objetivo.
Hay que tener en cuenta que unos plugins de animación pueden pesar más que otros. Siempre hay que probar y adaptar todos los cambios que subimos a la web.
Experiencia de usuario. Usar muchas animaciones en la web puede molestar al usuario. Hay que tratarlo con atención y cuidado. Tenemos que tener en cuenta la temática y audiencia de la página web, lo que es bueno para uno puede ser demasiado para otro.
¿Que alternativas hay?
Se requiere un análisis previo antes de desarrollarlo. Y si no siempre hay alternativas. De hecho no es necesario usar animaciones web siempre.
Una alternativa de la animación puede ser una imagen en formato .gif y que tiene sus ventajas. La primera es que no pesa mucho en comparación con las plugins. Y la segunda es que la imagen en formato .gif es tan fácil de implementar como una imagen .jpg o .png.
Otra alternativa de las animaciones es poner un video. Lo podemos meter en el slider principal de la web o como fondo de un bloque.
Conclusiones
- La animación web sirve para captar la atención del usuario y mejorar la experiencia de usuario.
- Se puede utilizar en cualquier parte de la web y en cualquier elemento pero no es obligatorio.
- Los elementos más importantes son el menú, la animación scroll, la animación de botones y los pop-Up destacados.
- No hay reglas definitivas para usar animaciones web pero hay que usarlas con cuidado, no sobrecargar las páginas y hacer que todo tenga su sentido.
- Una web bien hecha con animaciones se ve más profesional y moderna.
