logo
Alguna vez se pensó en la animación como simple decoración. Pero a medida que avanza la tecnología y se aceleran las conexiones a Internet, los diseñadores están aprovechando los beneficios prácticos. En este artículo, nos centraremos en uno de los beneficios particulares de la animación: la animación de marketing o animaciones que venden. A pesar de que dicha animación no tiene la intención de mejorar la usabilidad, puede impresionar al usuario y brindarle algo de contexto para el tema.
Los diseñadores pueden utilizar este tipo de animación de las siguientes formas:
1. Demostrar artesanía
La gente nota los detalles. La atención a la animación puede hacer que la experiencia se sienta hecha a mano. Cuando las aplicaciones / sitios crean una experiencia visualmente estimulante, aporta un nivel de emoción al usuario.
Cargar animación de pantalla
La carga de animación es uno de los usos más antiguos de la animación que se supone que distrae al usuario de los tiempos de carga. Pero incluso este tipo de animación puede demostrar que su producto es excelente. Por ejemplo, cuando un usuario inicia la aplicación Uber, inmediatamente nota una gota animada que se convierte en el pin en un mapa. Esta animación no es puramente agradable, sino que también influye en los ojos del usuario y en el control de dónde deben enfocarse los usuarios. Este rápido momento de apertura deja una primera impresión limpia y atrae al usuario a interactuar más.
Animación de firma
Algunas empresas van más allá y utilizan la animación como rasgo distintivo de la marca. MailChimp es una de las empresas que utiliza la animación de esta forma. La empresa cumple un nicho bastante técnico, creando y enviando campañas de correo electrónico, pero utilizando la animación transforma esta tarea seca en una experiencia atractiva. El servicio agrega pequeñas y agradables sorpresas a lo largo del viaje del usuario y hace que el envío de correos electrónicos sea mucho más divertido.
2. Transmitir mejor un mensaje clave
Los efectos animados ayudan a transmitir su mensaje con mayor claridad. Con la animación puede tomar ideas o procesos complejos y hacerlos fácilmente digeribles de una manera divertida y gráfica.
Animación interactiva
La animación puede resaltar las fortalezas de un producto. Bellroy es una empresa que vende carteras. Dicen que se esfuerzan por crear un diseño delgado para reducir el volumen del bolsillo. En el siguiente ejemplo, puede ver cómo la animación utilizada en Bellroy indica claramente el comportamiento de un producto y demuestra sus beneficios.
Animación de desplazamiento
Las animaciones flotantes son muy prácticas para brindar información adicional sobre sus productos. Este tipo de animación hace que la revelación sea menos discordante y brinda la oportunidad de agregar un personaje encantador a su sitio.
Animación narrativa
El potencial narrativo de las animaciones puede agregar una conexión emocional a una interfaz que de otro modo sería aburrida. Algunos ejemplos comunes de narración de historias son páginas que mostrarán un nuevo producto «ensamblándolo» ante sus ojos. Por ejemplo, la página dedicada a Mac Pro en el sitio web de Apple le muestra exactamente lo que hay debajo del capó mientras se desplaza hacia abajo:
Las animaciones narrativas también pueden dar vida y diversión al pergamino largo. En lugar de las animaciones de paralaje que son muy comunes, opte por algo más sutil. Considere dividir su sitio en «partes» desplazables. Dentro de cada fragmento, puede presentar el contenido a través de animaciones. Las animaciones del siguiente ejemplo del sitio web de Le Mugs hacen que el contenido «cobre vida» animando ilustraciones artísticas simples.
3. Involucrar a los usuarios para que tomen medidas adicionales
El uso de la animación influirá en los ojos de sus usuarios y puede controlar dónde centran su atención en su página. Un ojo humano es atraído naturalmente por el movimiento y esto hace que la animación sea la herramienta perfecta para controlar su jerarquía visual.
Atención directa al usuario
Los elementos móviles son una herramienta poderosa para atraer la atención de los usuarios. Si el objetivo es llamar la atención del usuario sobre un solo elemento entre varios o alertar al usuario sobre información actualizada, entonces una animación funcionará. Siempre que no haya muchos otros elementos en competencia en la pantalla, incluso el más mínimo movimiento llamará la atención. El sitio Space Needle de Seattle aprovecha esta sutileza. El sitio llama la atención sobre las instrucciones con una animación menor, pero efectiva, en las flechas hacia arriba.
Fomentar la acción del usuario
La animación fina y los efectos interactivos animan a los usuarios a hacer clic. Mire el diseño utilizado para el sitio «Chekhov is Alive» a continuación. El diseño te pide que hagas clic para encontrar tu personaje.
Cosas para considerar
La animación es un arma de doble filo. Si se usa incorrectamente, puede arruinar la experiencia del usuario.
Evite la animación que distraiga al usuario de su tarea. En el mundo de las ventas y el marketing online, la distracción puede ser mortal.
Un aspecto muy importante a considerar al diseñar una animación es la frecuencia con la que probablemente ocurrirá dentro de una sola sesión de usuario. La animación puede ser agradable la primera vez que un usuario la ve, pero después del 100º intento, puede resultar molesta, especialmente cuando no tiene otro propósito que ser «divertido».
Hay muchos elementos de la interfaz de usuario que puede animar de manera divertida y práctica. Pero recuerde una cosa, si desea crear una animación de marketing, debe establecer el objetivo de crear una animación que tenga tanto estilo y objetivo.
