5 formas de aumentar el compromiso con la animación
La animación es una forma divertida e interesante de darle vida a un sitio web. Si se usa correctamente, puede captar la atención de la audiencia, hacer que su sitio web sea más atractivo e incluso mejorar sus posibilidades de generar conversiones para sus clientes.
Desafortunadamente, como muchas cosas en el mundo del diseño web, también es fácil dejarse llevar por la animación. Como diseñadores y desarrolladores profesionales, depende de nosotros encontrar la línea entre aprovechar al máximo la animación en los proyectos de nuestro sitio web y crear un sitio que esté abrumado por demasiada actividad.
Afortunadamente, cuando haya terminado de leer este artículo, tendrá una visión más profunda de cómo puede usar la animación en el diseño web, sin tener que ir demasiado por encima.
Introducción a la animación en el diseño web
Las animaciones son virtualmente En todas partes en la web hoy.
En el pasado, cuando los diseñadores descubrieron por primera vez que podían insertar movimiento en sus sitios web, la cantidad de animación que veíamos era a menudo mayor de lo necesario. No era raro encontrar algunos sitios web que se ejecutaban completamente en Flash, donde todos los elementos podían animarse.
Afortunadamente, las tendencias del diseño web moderno han dejado atrás esas prácticas. En estos días, es mucho más común hacer que la animación sea parte de la experiencia general del usuario, en lugar de enfocarse en ellos como una atracción central. Por ejemplo, probablemente haya notado muchos controles deslizantes animados que muestran imágenes en una galería o animaciones de transición cuando las personas se desplazan sobre un botón.
Dado que es completamente posible construir un sitio web completo sin ninguna animación, la clave para crear un sitio web atractivo hoy en día es asegurarse de que cada animación que utilice tenga un propósito específico. Sus animaciones deberían hacer que un sitio web sea más atractivo, más fácil de usar y mejor para la navegación. Agregue demasiados e incluso podría arriesgarse a ralentizar un sitio.
Entonces, ¿dónde tiene sentido usar la animación para el diseño web?
1. Cargando animaciones
Una de las mejores formas de utilizar animaciones en un sitio web es distraer y deleitar a los usuarios a medida que se carga una página. Puede utilizar la animación para ofrecer una experiencia única, o incluso simplemente resaltar la naturaleza lúdica de su marca. Por ejemplo, echa un vistazo a este clásico cargar la animación llamada «Cuerda floja».
También puede usar cosas como animaciones de partículas para captar la atención de un cliente y ayudar a sus visitantes a relajarse cuando visitan un sitio web. Las animaciones de partículas pueden ser interactivas o no, y son una excelente manera de evitar que los visitantes se sientan frustrados cuando una página tarda demasiado en cargarse.
Un sitio web de Edan Kwan llamado «Particle Love» le muestra exactamente qué tipo de experiencia puede crear con animaciones en tiempo real.
Cuanto más pueda deleitar a los visitantes con experiencias que los mantengan comprometidos mientras se carga la información que necesitan, menos probable será que las personas presionen el botón «Atrás».
2. Animaciones de microinteracción
Las microinteracciones son animaciones rápidas y simples que vienen con casos de uso específicos. Por lo general, esta animación funciona para proporcionar información y comentarios visuales cuando interactúa con un elemento específico.
Por ejemplo, este diseño de microinteracción de Colin Garven alienta a los usuarios a ingresar su dirección de correo electrónico y contraseña en un campo de inicio de sesión:
Idealmente, la mejor manera de utilizar las microinteracciones es hacerlas lo más sutiles posible. Estas herramientas no están aquí para robar la atención de otra información en la página. Sin embargo, a veces pueden alentar a los espectadores a pasar a la siguiente etapa en su viaje de conversión.
Las microinteracciones animadas pueden ser tan complejas o básicas como usted elija. Por ejemplo, puede usarlos cuando:
- Resaltando si una función está activada o desactivada;
- Informar a los usuarios cuando las acciones tuvieron éxito (como enviar un mensaje en un formulario de contacto);
- Mostrar información importante, como precios en una mesa;
- Animar íconos en su sitio para fomentar la acción;
- Dependiendo de su experiencia con las animaciones, incluso puede encontrar temas y complementos que vienen con opciones ya integradas.
3. Fondos dinámicos
Un fondo animado puede ser una excelente manera de hacer que su sitio web se destaque entre la multitud. Sin embargo, es importante recordar que la animación excesiva tiene la costumbre de hacer que su sitio sea más lento y más torpe de lo necesario.
El fondo animado en el sitio web mystaticself.com es fantástico para presentarles a los clientes nueva información con un práctico menú dinámico.
A menudo, la única razón por la que debe crear su propio fondo dinámico para un sitio web es si va a mejorar la experiencia de sus clientes de alguna manera.
Recuerde, asegúrese de que las animaciones que está utilizando en su sitio web no dificulten el uso de ningún aspecto de su sitio. Los fondos animados deben ofrecer un complemento a su sitio web existente, en lugar de distraer a los clientes de lo que quieren hacer.
Antes de hacer todo lo posible con sus animaciones de fondo, concéntrese en animar pequeñas secciones de una imagen, una pieza a la vez. También puede animar componentes con movimientos muy pequeños.
4. Revelar mensajes ocultos
Otra forma excelente de utilizar la animación en el diseño web es aprovecharla para mostrar información importante. Por ejemplo, un menú de navegación es un componente importante en el diseño de su sitio web, pero también puede ocupar mucho espacio valioso.
En algunos casos, un menú oculto que aparece cuando un cliente se desplaza sobre un pequeño cuadro o icono podría tener mucho sentido. También puede pensar en menús desplegables animados si está trabajando con un sitio web que tiene una gran cantidad de páginas.
Mira este divertido ejemplo de un menú CSS3 animado:
Las secciones cambian de color y se mueven al pasar el cursor sobre ellas, lo que facilita ver exactamente dónde está haciendo clic.
Depende de usted exactamente qué tan creativo quiere ser cuando juega con menús animados. La opción más sencilla suele ser simplemente tener un componente que cambie de color o forma con un efecto de desplazamiento. Sin embargo, también puede exponer menús ocultos e información adicional.
Por ejemplo, con algunos sitios web, puede crear imágenes que se voltean para mostrar información en el otro lado. Eso significa que puede crear una página de información con imágenes de los miembros del equipo, que se voltea para mostrar información de la biografía.
Solo asegúrese de que todo funcione sin problemas, tanto en el escritorio como en el móvil.
5. Prueba los carruseles
Finalmente, llegamos a quizás la forma más simple y popular de usar la animación en el diseño web. Los carruseles son un componente común de casi todos los temas de la web en la actualidad. Son excelentes para mostrar información útil, como lo que ofrece un sitio web o las ofertas disponibles.
Al crear un carrusel, puede darles a sus usuarios el control sobre la rapidez con la que se realiza la transición de una imagen, o puede implementar el movimiento automático. Sobre el sitio web de heathfield.co.uk, el diseñador ha agregado botones para permitirle retroceder y avanzar entre fotos, al tiempo que se asegura de que la animación sea automática.
Sin la animación para mostrarle las imágenes deslizándose hacia el espacio, las transiciones entre cada imagen serían instantáneas, lo que es un poco más discordante para los espectadores.
Los controles deslizantes son un componente tan común del diseño web hoy en día que los clientes casi esperan verlos en muchos sitios web. Eso significa que puede disfrutar de una experiencia muy efectiva si desea evitar hacer algo demasiado dramático con sus sitios web.
Puede usar controles deslizantes para todo, desde mostrar productos hasta mostrar testimonios de clientes y más. Es una excelente manera de comprimir mucha información útil en un espacio pequeño en un sitio.
Utilice la animación del sitio web con cuidado
Lo más importante que la mayoría de los diseñadores deben recordar con la animación y el diseño web es que es muy posible tener demasiado de algo bueno. Cuando se trata de crear diseños asombrosos para sus clientes, puede aprovechar la animación para fomentar un mayor compromiso y una experiencia única. Sin embargo, no debes permitirte exagerar demasiado.
En lugar de animar todos los aspectos de una página para captar constantemente la atención de los visitantes, piense en cómo puede hacer que la experiencia del visitante sea más atractiva con las opciones de animación adecuadas. Si una página completa de animación en el fondo no es adecuada para su público objetivo, tal vez las animaciones personalizadas en una barra de navegación o un control deslizante serían una buena opción.
Al mismo tiempo, recuerde aprovechar las últimas tecnologías del mercado para agregar animación al diseño web. Una buena combinación de CSS3, JavaScript y HTML5 a menudo facilita la creación de animaciones más inmersivas y de alta calidad con las que los usuarios pueden interactuar tanto en computadoras de escritorio como en dispositivos móviles.
