Cómo crear animaciones de carga personalizadas para disminuir las tasas de rebote

Originalmente conocido como throbber, una animación de carga se usa para indicar el progreso de la recopilación de datos o la representación de la interfaz. Si bien alguna vez pudo usar una barra de progreso aburrida para indicar esto, esos días se han ido.

Hoy en día, una animación bien elaborada que aprovecha CSS, jQuery o GIF animados simples es una oportunidad para animar sus interfaces y agregar personalidad a su producto.

Las animaciones bien pensadas pueden entretener a sus usuarios mientras esperan que se cargue su contenido. Una buena animación de carga ayuda a gestionar las expectativas y mejora la experiencia del usuario al mantener el interés.

En este tutorial, usaremos Sketch para crear formas básicas y Principle para crear rápidamente animaciones de carga personalizadas simples. (Estas dos aplicaciones son para Mac). Aprenderá a crear las coloridas animaciones de carga utilizadas por Trello, Flickr, Slack y más.

Hagámoslo.

Animación de carga lenta

En Sketch, trace cuatro cuadrados redondeados con lados de 50 px o un radio de 100 px cada uno. Deberían verse como círculos perfectos, pero estamos usando cuadrados con esquinas redondeadas para crear el efecto de estiramiento de línea en la animación.

Coloque las cuatro formas de tal manera que cree un cuadrado imaginario con 150 px de espacio entre cada lado. Aplique cuatro colores diferentes (#35BA90 verde, #69CADD azul, #EBA900 amarillo y #E20661 rosa).

Importe las formas a Principio, agrúpelas y haga clic en "Crear componente" para anidar el grupo.

Vaya dentro del grupo anidado y gire la mesa de trabajo 15 grados. Luego seleccione cada círculo individual y gírelo de regreso a su posición original (hacia atrás 15 grados). Esto crea el efecto de estiramiento en línea recta.

Aplique un disparador "Auto" a la mesa de trabajo y luego estire cada rectángulo redondeado hacia el lado opuesto de la mesa de trabajo a una longitud de 295 px. Dé una opacidad del 75% a cada forma en ambas mesas de trabajo.

Aplique otro disparador "Auto" a la segunda mesa de trabajo. En la nueva mesa de trabajo, reduzca cada línea a su ancho original de 50 px, pero en el lado opuesto de su posición original.

Vincule la última mesa de trabajo a la primera con un disparador "Auto". Haga clic en el botón "Volver a principal" para obtener una vista previa del resultado final.

Sugerencia: cuando vaya a "Volver a principal", puede rotar el grupo principal en -30 grados para parecerse más a Slack. Además, puede cambiar el ritmo de la animación dentro del panel "Animar" y aplicar un efecto "Facilitar ambos" para suavizar las transiciones.

Animación de carga de Trello

Usando Sketch, trace un cuadrado azul de 100 px. Dibuja un rectángulo blanco de 60 px de ancho por 140 px de alto. Alinéelo con la parte superior izquierda del cuadrado anterior con un margen superior e izquierdo de 30 px. Duplique ese rectángulo blanco, alinéelo a la derecha del cuadrado con un margen derecho de 30 px y reduzca su altura a 70 px.

Importe la mesa de trabajo a Principio y aplique el activador "Auto" para crear un nuevo fotograma clave. En la nueva mesa de trabajo, invierta las alturas de los rectángulos blancos (haga que el rectángulo izquierdo tenga una altura de 70 px y el rectángulo derecho de 140 px). Aplique un efecto "Ease-Both" en el panel "Animar" para suavizar la transición.

círculo rodante

Traza un círculo en Sketch. Aplique un borde de 10 px con valores de "Guión" y "Espacio" y sin relleno. Use un color de "Degradado angular" para el borde que acentuará el efecto de rotación que creará más adelante.

Abra un nuevo archivo de Principio y use el botón "Importar" para transferir el círculo desde Sketch. Aplique dos disparadores "Automáticos" seguidos.

Para crear el efecto de rotación, seleccione el círculo en la mesa de trabajo central y cambie su valor de "Ángulo" a 360 grados. Luego seleccione el tercer círculo y asígnele un nombre diferente (es decir, "copiar") dentro del panel izquierdo. Esto falsificará la rotación infinita.

Finalmente, vincule la tercera mesa de trabajo a la inicial con otro disparador "Auto". Aplique una transición "Lineal" a la línea de tiempo entre las mesas de trabajo 1 y 2. Verifique la animación que acaba de crear en la ventana de vista previa.

Animación de carga de Flickr

Traza un círculo azul y un círculo rosa uno al lado del otro. Importarlos a Principio y aplicar un activador "Automático" para crear una nueva mesa de trabajo.

Invierta las posiciones de los círculos y aplique un nuevo activador "Automático" para crear una tercera mesa de trabajo. En esa nueva mesa de trabajo, invierta el orden de la capa de círculos en el panel izquierdo.

Aplique un tercer disparador "Auto" para crear una cuarta mesa de trabajo. En esa última mesa de trabajo, invierta la posición de los círculos una vez más y aplique un disparador "Automático" final desde la última mesa de trabajo hasta la inicial.

Tipo de carga

Cree un nuevo proyecto en Principio y, utilizando la herramienta Texto, escriba "CARGANDO". Alinee el texto a la izquierda y céntrelo verticalmente en la mesa de trabajo.

Aplique un activador "Automático" cinco veces seguidas. Haga que el quinto activador de la última mesa de trabajo vuelva a la mesa de trabajo inicial.

Comenzando desde la mesa de trabajo inicial y moviéndose hacia la derecha, edite el texto en cada mesa de trabajo para agregar cero, uno, dos, tres, dos y un punto, respectivamente, al lado del texto original "CARGANDO". La progresión de las mesas de trabajo debería verse así:

CARGANDO CARGANDO. CARGANDO... CARGANDO... CARGANDO... CARGANDO.

Ahora puede obtener una vista previa de la animación que acaba de crear.

Puntos pulsantes

Traza un punto de 60px. Copie y pegue un punto más y colóquelo 60px a la derecha. Asegúrese de que ambos puntos, incluido el espacio de 60 px, estén perfectamente centrados en su mesa de trabajo.

Aplique un disparador "Auto" cuatro veces seguidas.

En la segunda mesa de trabajo, reduzca el segundo punto a 30 px.

En la tercera mesa de trabajo, reduzca el segundo punto a 0px y el primero a 30px.

En la cuarta mesa de trabajo, vuelva a escalar el segundo punto hasta 30 px y reduzca el primer punto a 0 px.

En la quinta mesa de trabajo, reduzca la escala del primer punto a 30 px y vincule la mesa de trabajo de nuevo a la primera mesa con un activador "Auto".

Puntos rodantes

Coloque cinco puntos en el orden que encontraría en un dado de seis caras. Importe la mesa de trabajo a Principio y céntrela.

Aplique un disparador "Auto" en la mesa de trabajo.

En la nueva mesa de trabajo, gire el grupo de puntos 360 grados.

Vincule la segunda mesa de trabajo a la primera con un disparador "Auto".

círculo pulsante

Comience con un círculo de 50 px alineado al centro dentro de un círculo de 150 px que tenga un borde de 5 px pero sin relleno.

Aplique un disparador "Auto" tres veces seguidas.

En la primera mesa de trabajo, reduzca la escala del círculo de línea a 50 px y el círculo interior a 10 px.

En la tercera mesa de trabajo, escala el círculo de línea hasta 200px y dale 0% de opacidad. Escala el círculo interior hasta 150px y dale 50% de opacidad.

En la última mesa de trabajo, escala el círculo interior hasta 200px y dale 0% de opacidad. Escale el círculo de la línea hasta 50px y dele un 25% de opacidad.

Aplique un disparador "Auto" a la última mesa de trabajo. Reduzca el círculo interior a 10 px con un 50 % de opacidad.

Vincule la última mesa de trabajo a la primera con un activador "Auto".

Saltar puntos

Alinee tres círculos perfectos de 50 px de altura con 50 px de espacio entre ellos.

Aplicar un disparador "Auto". En la segunda mesa de trabajo, mueva el primer círculo hacia arriba 50 px.

Aplique un disparador "Auto" a la segunda placa. En la tercera mesa de trabajo, seleccione los primeros dos círculos y muévalos 50px hacia arriba. Los tres círculos deben estar en una línea diagonal.

Aplique un disparador "Auto" a la tercera placa. En la cuarta mesa de trabajo, mueva el primer círculo hacia abajo 50 px. Seleccione los dos últimos círculos y muévalos 50px hacia arriba.

Aplique un disparador "Auto" en el cuarto tablero. En la quinta mesa de trabajo, mueva los primeros dos círculos 50 px hacia abajo. Seleccione el último círculo y muévalo hacia arriba 50px.

Aplique un disparador "Auto" en el quinto tablero. En la sexta mesa de trabajo, mueva los últimos dos círculos hacia abajo 50px.

Finalmente, regrese a la primera mesa de trabajo, mueva el primer punto 50 px hacia arriba y vincule la última mesa de trabajo a la primera con un disparador "Auto". Puede obtener una vista previa del resultado final.

Cargador clásico

Traza un círculo en Sketch y dale un borde gris de 20 px sin relleno.

Pegue una copia del mismo círculo encima y cambie el relleno de la copia a un color diferente. Para este ejemplo, usaremos azul.

Traza un cuadrado superpuesto a un cuarto del círculo azul. Mueva la capa del rectángulo debajo de la capa del círculo y aplique "Máscara" a la capa del rectángulo.

Vaya a Principio e importe la obra de arte del boceto con el botón "Importar".

Aplique un disparador "Auto" a la primera mesa de trabajo y gire el círculo azul 360 grados.

Aplique un segundo disparador "Auto" a la segunda mesa de trabajo. Cambie el nombre de la capa del tercer círculo generada a "copiar" y vincúlela de nuevo a la primera mesa de trabajo con un disparador "Auto".

Conclusión

Una vez que haya practicado la creación de algunas de estas animaciones de carga probadas y verdaderas, debe sentirse seguro de sus habilidades para crear una animación única para sus propias aplicaciones utilizando las habilidades aprendidas aquí.

Con un poco de imaginación y las útiles herramientas que se encuentran en Sketch and Principle, puede crear una animación de carga única que coincida con el diseño de su aplicación en cuestión de minutos. Sus usuarios apreciarán el aspecto profesional y el indicador amigable de que su aplicación está trabajando duro.

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas