Un sitio web no es un folleto estático. Ofrece todo tipo de oportunidades para la animación y la interactividad. Pero el hecho de que puedas animarlo todo no significa que debas hacerlo.
Internet constituye una forma de medio completamente diferente, la que más rápido evoluciona de todas las que hemos creado. Solo tienes que cargar un sitio web de los años 90, como el de Space Jam, y compararlo con el sitio en el que estás ahora mismo.
Gran diferencia, ¿verdad?
Probablemente notarás que el uso del espacio en blanco, la tipografía, el color y las imágenes ha mejorado drásticamente con el tiempo. Afortunadamente.
Lo que quizás no notes a primera vista es la incorporación del movimiento. Los elementos de la página se animan al aparecer. Los enlaces cambian de color. Y los botones crecen, brillan y se mueven de un lado a otro cuando pasas el cursor sobre ellos.
El poder del dinamismo
A diferencia del trabajo de los diseñadores gráficos, tus diseños no son estáticos; son dinámicos, moldeados por la forma en que las personas interactúan con ellos. Eso es lo que distingue al diseño web.
Así que, ahora que tenemos este poder dinámico, ¿deberíamos empezar a hacer que todo gire, dé vueltas, rebote y cambie de color? Absolutamente no. Eso es como añadir un nuevo sonido y efecto de transición a cada diapositiva y viñeta en PowerPoint. A nadie le cae bien ese tipo.
La verdadera pregunta es: ¿cómo podemos añadir eficazmente animaciones e interacciones a nuestros diseños? Vamos a descubrirlo.
Las animaciones e interacciones web eficaces poseen 5 cualidades. Son:
- Sutiles – Las animaciones deben realzar, no dominar. Los visitantes apenas deberían darse cuenta de que están ocurriendo.
- Naturales – Las animaciones deben verse y sentirse naturales, no robóticas ni discordantes.
- Informativas – Aunque siempre debes esforzarte por hacer que tus diseños sean evidentes por sí mismos, cuando intentas algo nuevo, las animaciones pueden proporcionar pistas sutiles para dar contexto.
- Poco frecuentes – Si todo se mueve y exige atención, nada la conseguirá.
- Rápidas – Las animaciones lentas pueden hacer que la gente piense que un sitio está roto o no responde, lo que los lleva a abandonarlo.
Exploremos cada uno de estos puntos con más detalle para que puedas aprovechar al máximo tus animaciones e interacciones.
Anima con sutileza
El buen diseño es obvio. El gran diseño es transparente. – Joe Sparano
Siempre me asombra que algo que requiere incontables horas de ajustes para quedar perfecto pueda ser digerido en segundos.
«Esto es genial. ¿Cuándo podemos lanzarlo?»
Solo le echaron un vistazo y les gustó. No tuvieron ni que pensarlo.
Pero ese es el resultado final ideal en el diseño. Un diseño fantástico es sutil. La gente ni siquiera debería notar tus animaciones de forma consciente.
Entonces, ¿por qué añadir animaciones si se supone que la gente ni siquiera debe notarlas? La palabra clave es consciente. Porque el subconsciente de tus visitantes sí que nota las animaciones. Unas animaciones sutiles y eficaces hacen que tu sitio se sienta mejor y más intuitivo. Las animaciones deben mejorar la interacción sin eclipsar el contenido.
Los mejores diseños son los que no estorban y permiten que la gente haga lo que necesita hacer de la forma más sencilla posible.
Las interacciones deben ir acorde al tono del sitio
Tus animaciones siempre deben encajar con la estética y el tono del sitio que estás creando. Si diseñas para niños, puedes permitirte algo más llamativo y saltarín. Si es para una marca de relojes de lujo, sé sutil y elegante.
Las animaciones deben ser naturales
Las animaciones nunca deberían ser lineales. Las animaciones lineales son bruscas y artificiales. Recuerdan a robots y máquinas, y de naturales no tienen nada. De hecho, resultan un poco incómodas de ver.
En su lugar, haz que tus animaciones e interacciones sean fluidas y que su aceleración (su velocidad a lo largo del tiempo) sea natural. Por ejemplo, una aceleración «ease-in» empieza despacio y acelera hasta el final. Una «ease-out» empieza de golpe, pero se ralentiza al final. Las aceleraciones lineales tienen una velocidad constante durante toda la animación.
Mantén la naturalidad usando aceleraciones más orgánicas como «ease», «ease-in-out» y otras más complejas como «ease-in-sine».
Las interacciones y animaciones deben ser informativas, no solo efectos especiales
Tu sitio no es una película de Transformers donde las explosiones, los robots gigantes y Megan Fox tapan un guion simplista y trillado.
Tus sitios tienen un propósito: transmitir información o facilitar una transacción. Por eso, tus animaciones deben ayudar a los visitantes con estas tareas, y no ser solo adornos llamativos diseñados para impresionar.
Existen sitios llenos de animaciones espectaculares y pueden ser muy chulos, pero los clientes rara vez pagan por ellos. Suelen ser obra de diseñadores y desarrolladores que experimentan un martes por la noche. Si el sitio es para un cliente, limítate a animaciones informativas.
Pero, ¿qué es una interacción informativa? Una animación informativa mejora la experiencia de usuario (UX). Por ejemplo, los botones y enlaces deben indicar claramente que se pueden hacer clic. Eso ayuda a eliminar las dudas.
El movimiento atrae la mirada. Eso significa que las animaciones también pueden usarse para guiar a los visitantes al siguiente paso o informarles de algo que pueda resultar confuso.
En un mundo ideal, tus sitios serían clarísimos en cada página. Pero si haces algo un poco diferente, como una sección principal a pantalla completa, una pista visual —como una flecha sutil que rebota en la parte inferior— puede ser de gran ayuda.
Anima con moderación
No puedes ser sutil ni informativo si todo tiene algún tipo de animación. Esto es especialmente cierto si haces que cada animación sea única.
Por ejemplo, si haces que los elementos de la página aparezcan al desplazarte hacia abajo, no hagas que el primero se desvanezca, el segundo se deslice, el tercero gire y el cuarto aparezca en damero.
Haz que todos sean iguales. Si debes añadir variedad, haz que los elementos de la izquierda se deslicen desde la izquierda y los de la derecha desde la derecha. Anima elementos similares de forma similar.
Y añade una interacción al pasar el ratón solo cuando los usuarios realmente puedan hacer algo con ese elemento. Las animaciones al pasar el ratón resultan confusas si no puedes hacer clic, arrastrar o interactuar con el elemento.
En otras palabras, añade una animación solo cuando realmente ayude a tus visitantes.
No hagas esperar a la gente
La gente no tiene paciencia en internet. Cada segundo de retraso en la carga de una página reduce la satisfacción del cliente en un 16% y las ventas en un 7%. Hacer esperar a los usuarios puede arruinar la rentabilidad de un sitio.
Y la gente no se vuelve más paciente una vez que el sitio ha cargado.
Nota: ¿Quieres retener a los visitantes en tu sitio? Aprende a mejorar el rendimiento de tu sitio.
¿Qué significa esto para tus animaciones e interacciones? Que deben ser rápidas.
Al fin y al cabo, nadie va a pasar el ratón sobre un botón durante 2 segundos, por muy espectacular que sea el efecto.
Vale, quizá algunos lo hagan... la primera vez. ¿Pero qué pasa a la tercera? ¿O a la vigésima? ¿Crees que seguirán teniendo la paciencia necesaria para una animación lenta?
Lo mismo ocurre con las complejas animaciones de carga y presentaciones de varias etapas que solíamos crear en la época de Flash. Nadie quiere perder el tiempo con eso. La gente usa la web para encontrar la información que necesita o el producto que busca, y luego seguir con su vida.
Resumen: Mantén tus animaciones por debajo de los 500 ms para que sean ágiles.
¡Ahora sal ahí fuera y empieza a animar!
Abre uno de tus proyectos actuales y empieza a aplicar estos consejos para mejorar tus animaciones e interacciones. Marcará la diferencia.
Las interacciones bien hechas realmente llevan a un sitio de bueno a excelente. Aprovechan el poder único que tienen los sitios web sobre los medios impresos al hacerlos más reales y atractivos. Y tanto a los clientes como a los visitantes les encantan.
Nota: Para saber más sobre cómo añadir animaciones a tu página usando la herramienta de diseño visual de Webflow, echa un vistazo a nuestro curso sobre interacciones en Webflow.
¿Tienes ejemplos geniales de animaciones e interacciones bien hechas? ¡Mándanos un tuit!
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
