Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React

Bienvenidos a todos. Hoy voy a hablar sobre las animaciones de UI emocionales y funcionales en React. Mi nombre es Elisa Beto Oliveira. Soy de Portugal, Lisboa. Nací en Mozambique, de ascendencia portuguesa y mozambiqueña. Soy una diseñadora de productos senior. Actualmente trabajo para el equipo de Elastic UI, un sistema de diseño utilizado en Elastic.

La agenda de hoy es explicar qué es la animación de UI, por qué es importante y cómo podemos crear animaciones en React. En esta parte, mostraré algunos ejemplos con código y luego compartiré algunas reflexiones finales. Disculpen.

Entonces, ¿qué es la animación de UI? Básicamente, es el proceso de agregar movimiento a los elementos de la interfaz de usuario. También ayuda a reducir la carga cognitiva, que es la cantidad de esfuerzo que los usuarios experimentan cuando quieren hacer algo. Además, la animación de UI agrega personalidad y encanto a una interfaz, y ayuda a superar las barreras de idioma y cultura en el diseño de interacción.

Las animaciones de UI pueden ser funcionales o emocionales. Las animaciones de UI funcionales son aquellas que pueden mejorar la UI al proporcionar retroalimentación visual. Mejoran la usabilidad, brindan retroalimentación sobre las acciones del usuario y pueden proporcionar retroalimentación cuando cambian los estados de la aplicación. Las animaciones de UI emocionales, por otro lado, pueden deleitar al usuario y ayudar a establecer una conexión con la marca. Si se hacen correctamente, los usuarios pueden tener experiencias más memorables.

Pero, ¿por qué es importante la animación de UI? En primer lugar, pueden proporcionar una experiencia de usuario más natural al simular la experiencia de interactuar con un objeto físico en la vida real. También pueden reducir el estrés al proporcionar actualizaciones y retroalimentación en tiempo real. Además, pueden hacer que tu UI sea más divertida y atractiva. ¿Y cómo podemos crear animaciones en React? Puedes usar CSS puro con un framework o simplemente el estilo. Para mis demos, voy a usar Emotion. También puedes utilizar una biblioteca de animaciones para animaciones más complejas. En las demos que mostraré a continuación, estoy utilizando Framer Motion.

Veamos los ejemplos. Y esto es como mi sitio web de blog. Y al final de la charla, tal vez por la tarde, puedo compartir esta publicación. Aún no está publicada. Pero la idea es mostrar las animations aquí.

Este primer ejemplo es una animación funcional. Y es una animación funcional porque proporciona retroalimentación al usuario. Imaginemos que podría tener un botón como este. Digamos, sin estilos, nada. Y al pasar el cursor, sin ninguna retroalimentación del usuario, sería extraño. No sabrías que puedes hacer clic, solo el cursor cambia. Y en este caso, tengo una mejor retroalimentación del usuario. Entonces, cuando paso el cursor sobre el botón, se oscurece más, y el botón se desliza un poco, se desliza hacia arriba. Este es un buen ejemplo de una animación funcional. Y es muy fácil lograrlo. Solo estoy usando CSS y básicamente, al pasar el cursor, tengo esta transformación translate-y. Que básicamente dice que quiero que el botón se mueva un píxel hacia arriba. Y luego tengo esta transformación con una duración de 250 milisegundos y una función de temporización de easing out y sin retraso.

Ahora puedo mostrar otro ejemplo diferente. En este caso, hay un botón que muestra una línea al hacer clic, y puedes ver, imagina que esto podría ser una barra de navegación. Sin ninguna animación, sería extraño porque tal vez no verías que al hacer clic o al pasar el cursor, no sucedería nada. En realidad, en mi computadora, esto es de color rosa. Y hay un tono morado oscuro, pero es rosa. Entonces, cuando haces clic, esta es la animación. Tenemos esta línea que se expande. Y para hacer esto, también estoy usando... Entonces tengo este componente de demostración donde estoy pasando el estado exacto para cada elemento. Y luego tengo esta línea de botón. Y en la línea de botón, estoy usando un SVG aquí. Y este SVG es básicamente la línea.

Y luego tengo esta animación CSS donde tengo esta animación de expansión que ocurre en 0.3 segundos. Y tiene esta función de temporización llamada ease in. Básicamente, la expansión la estoy haciendo con estas keyframes de Emotion, pero podrías hacer lo mismo con CSS normal. Y básicamente estoy animando desde hasta. Entonces, el ancho de ese SVG, comienza cuando hago clic, cuando no hago clic va desde, cuando hago clic va desde cero hasta el 100%. Así que también es muy fácil de lograr. Y es una buena retroalimentación para el usuario.

Solo una nota para los usuarios, ahora mismo estoy en esta página sobre, y luego esta es una animación más compleja. Entonces, para este ejemplo, que llamo una campana sonando en un encabezado, estoy utilizando Framer Motion. Y cuando hago clic, la campana suena. Y estoy usando este botón, pero en una aplicación del mundo real, este estado, para animarlo puede provenir, no sé, de una API de tu base de datos. Básicamente, recibes una notificación, y la animación debería activarse. Así que estoy usando Framer Motion, y esta animación es un poco más compleja. Entonces, básicamente con Framer Motion, tienes estos componentes, casi como componentes estilizados. Entonces, en este caso, envuelvo el icono con el span. Entonces, lo que hago es motion.span, y luego tengo varias variantes. En este caso, tengo dos variantes de animación, una llamada activa y la otra llamada inactiva. Entonces, en mi estado activo, básicamente lo que quiero animar es la rotación, transform, rotate. Entonces, en mi estado inactivo, solo quiero decir que quiero rotar cero. Y en mi estado activo, quiero rotar todos estos grados diferentes en un array, cero, 30 grados, menos 10, 28, y solo doy números aleatorios porque en el mundo real, una campana suena al azar. Así que eso es lo que estoy tratando de imitar. Así que tengo estas dos variantes y los estados activos, como puedes ver, voy a llamar a ese array de grados. Pero en este caso, si te das cuenta, esta animación es muy frenética y no podemos olvidar que tenemos algunos usuarios que pueden tener algún trastorno y cosas como náuseas y vértigo. Se llaman trastornos vestibulares. Entonces, en OSX y otros sistemas operativos, puedes tener esto, que es parte de la accesibilidad. Puedes hacer clic para reducir el movimiento. Entonces, cuando reduces el movimiento y si hago clic, no sucede nada porque ahora mismo el usuario tiene esa opción habilitada. Pero si desactivo la opción, vuelve a animarse. Entonces, con Framer Motion, incluso con CSS puro, tienes una consulta de medios llamada PreferReduceMotion y debes usarla para verificar si el usuario tiene esa opción habilitada o no. Entonces, si el usuario tiene reducción de movimiento habilitada, no deberías animar.

Entonces, lo que hago es utilizar el gancho useReduceMotion que proviene de FramerMotion y si el usuario tiene la opción habilitada, no ocurre ninguna rotación. Si está deshabilitada, se ejecuta ese array. Y esto es muy importante hacerlo.

Y luego, el siguiente ejemplo es una animación funcional pero al mismo tiempo emocional. Y este lo tomé como inspiración del sitio web de Josh Kamau. Creo que cuando fui por primera vez a su sitio web y vi su blog con este lindo corazón, quise descubrir qué hizo para lograr eso. Así que intenté hacer algo similar.

En este ejemplo, tengo dos componentes. El primero es básicamente donde tengo dos estados. Los likes del usuario y los likes totales. Los likes totales son actualmente 117 y los likes del usuario son uno, dos, tres, cuatro, cinco. Y cuando llego a cinco, no permito que los usuarios hagan clic. Así que paso esos dos estados al componente llamado love button y estoy utilizando Framer Motion. Aquí suceden varias cosas. La primera es cuando se pasa el cursor. Los ojos cambian y se hacen más grandes. Para hacer eso, utilizo los eventos onMouseEnter y onMouseLeave de React. Tengo el estado isOver y cuando el cursor entra, establezco el estado isOver en verdadero. Luego, con SVG, puedo cambiar los ojos. Si isOver es verdadero, muestro una mascota con algunos ojos. Si no es así, muestro los ojos en forma de arco. Y luego hay otra animación. Cuando haces clic, puedes ver estos emojis aquí. Para hacer eso, tengo un array de emojis y luego recorro ese array de emojis. Y luego verifico. Solo quiero mostrar cinco likes. Entonces, si es el primer like y es el primer emoji del array, se vuelve visible.

Y luego se anima con una de las variantes. La variante visible que básicamente, que básicamente muestra ese emoji yendo hacia arriba. Así que esta es la animación visible. Básicamente estoy usando nuevamente el translate Y y algo de opacidad. En este caso, va desde cero hasta 16 y luego de 16 a 32 así, y luego tengo algo de opacidad. Va desde cero hasta 0.8 y luego desaparece de nuevo a cero.

Y luego hay otra animación que básicamente el botón se va llenando con este color rosa y para hacer eso, básicamente cuando diseñé esto, así que estoy usando una máscara y la máscara tiene esta forma de corazón y en la máscara hay un cuadrado y el cuadrado es rosa. Así que ahora mismo ese cuadrado es rosa, está en la parte inferior y cuando comienzo a hacer clic ese cuadrado comienza a subir, subir, subir, subir. Así que cada vez que hago clic, básicamente estoy trasladando ese cuadrado. Así que la posición cero en realidad son 42 píxeles, está aquí, es cero, está aquí. Así que quiero hacer que ese cuadrado vaya a los 42 píxeles. Así que cuando está en cero, ahora está en 42, cuando hago clic de nuevo, va a 32, 24, 16, ocho y cero. Así que este fue el ejemplo de una animación emocional de la interfaz de usuario.

Y luego este es el último ejemplo que voy a mostrar. Y se trata de una barra de búsqueda con un planeta que se anima. Y uso esta animación con un proyecto que hice con Sara Vieira hace algunos años. Básicamente es `¿Hay Uber en?` Y la idea del proyecto era verificar en cualquier ciudad del mundo si se podía tener Uber. Como el sitio web estaba tan vacío, solo teníamos el campo de entrada para buscar la ciudad. Tuve esta idea, vamos a poner un planeta que represente al mundo y el planeta puede animarse. Así que la idea es que cuando comienzas a escribir, se anima un poco. Si haces clic, gira. Y también tienes los ojos y la boca que se animan con el tiempo de espera establecido. Así que para hacer esta animación, una vez más, estoy usando Framer Motion. También uso useMotion. Así que si hago clic de nuevo, la animación no ocurre, no gira porque creo que es demasiado. Así que en este caso doy esta opción para mejorar la accesibilidad para algunos usuarios. Para hacer eso, tengo este componente demo. Y en ese componente, tengo tres estados. Buscando, búsqueda completa. Básicamente, cuando está buscando, la idea es que vaya de 0 a 5, 0, también hay rotación, menos 0.

Y cuando la búsqueda se completa, gira completamente. Y cuando no está buscando, gira en 0. Y estoy usando el useEffect solo para verificar los estados que provienen del componente principal. Entonces, si está buscando, tengo otro estado llamado animación del planeta. Y si está buscando, establezco la variante como búsqueda completa o no está buscando. Y eso es básicamente lo que sucede.

Y luego, para los ojos y la boca, no necesito usar ninguna variante. Básicamente, estoy animando la escala y. Así que básicamente, va desde 1. Este es un ejemplo de la boca. La boca está completamente abierta. Luego se cierra a 0.1. Y luego vuelve a 1. Estoy diciendo que quiero repetir esta animación varias veces, infinitas veces. La dirección es 0.3. Imaginemos si fuera 4. Tomaría algún tiempo. Así que pongamos 0.3. Cuando cargamos este componente, hay un retraso de 3 segundos. Y luego, cada 5 segundos, la animación ocurre nuevamente. Y este es el ejemplo. Y tengo un minuto.

Y estos son los pensamientos finales de las animaciones que mostré. Deberías usar esas animaciones funcionales, como la que mostré con el botón, el timbre y esa barra de navegación, como una forma de proporcionar retroalimentación al usuario. Entonces, cuando tienes este tipo de animaciones, la idea es que no necesitas hacer demasiado. Solo usa microinteracciones, muy simples, solo para indicar, por ejemplo, en un botón, que el botón se puede hacer clic, o intenta hacer algo que represente el mundo real. Entonces, cuando tienes muchos elementos en una página, no intentes hacer y tener muchas animaciones. Imagina si tuviera el planeta, el corazón y muchas cosas sucediendo al mismo tiempo. Sería demasiado. Pero cuando tu interfaz de usuario no tiene demasiados elementos, como en el caso de '¿Hay Uber en?', solo tienes un texto, un campo de entrada de texto o una búsqueda.

En ese caso, tal vez puedas tener algo sucediendo, una animación frenética que represente tu marca, por ejemplo. Y cuando tienes esas animaciones frenéticas, como el timbre sonando o algo que sea demasiado, no olvides verificar si el usuario tiene la opción de reducir el movimiento habilitada. Puedes hacerlo con una consulta de medios, con CSS puro. O si usas una biblioteca como Frame o Motion, tienes ese hook. No olvides esto. Es muy importante para la accesibilidad.

Y eso fue la charla. Gracias a todos. Muchas gracias, Eva. ¿Te gustaría acompañarme en una breve sesión de preguntas y respuestas? Vamos a restablecer esa mesa. Alguien la movió. Excelente. Muchas gracias, Eva. Me pareció realmente interesante y perspicaz.

Ahora, tenemos algunas preguntas en Slido. Y para aquellos de ustedes que se han unido a esta sala desde la pequeña introducción, en esta pista, vamos a hacer preguntas usando el mismo enlace de Slido que antes. Así que eso es sli.do en tu navegador. Y puedes usar el código 0212, que es la fecha, para ingresar al evento. Hay un par de pistas. Asegúrate de elegir la pista mnemotécnica para hacer preguntas en esta pista. Y idealmente, si puedes incluir el nombre del orador en tu pregunta, sería genial. Aquellos de ustedes que enviaron preguntas y no lo hicieron, lo hice por ustedes. Así que no se preocupen. Pero de manera continua, sería muy útil. Con eso en mente, en realidad tenemos algunas preguntas que se plantearon durante tu charla. La primera es, ¿tienes alguna idea sobre cómo documentar animaciones en bibliotecas de patrones o sistemas de diseño? Sí. Creo, y esto es algo que estamos tratando de hacer ahora con Elastic UI. En Elastic UI, cuando lo presento, digo que es un sistema de diseño. Pero en realidad, aún no es un sistema de diseño real. Es solo una biblioteca, porque nos faltan algunas cosas.

Nos faltan algunas directrices de design. Tampoco tenemos directrices de animations. Y creo que es realmente importante, porque cuando no creas esas directrices, entonces tu aplicación comenzará a tener muchas formas diferentes de hacer las cosas. Así que imagina que tal vez implementes un botón, y ya viene, porque es un design system. Ya tiene animación. Pero luego, si en una aplicación, si tienen que implementar un botón personalizado o un fly out o un pop over o algo, pueden usar cualquier tipo de animación. Y luego comenzaremos a tener cosas extrañas, creo. Demasiadas diferencias.

Sí, absolutamente. Como cualquier componente en un design system. Una pregunta, que en realidad se ha hecho un par de veces de formas ligeramente diferentes, es que la opción preferida de reducción de movimiento no prefiere la falta de movimiento. Pero ¿cómo sabemos cuándo es demasiado? Eso es. Eso también es algo en Elastic UI, tenemos una regla que hacemos para todas las animations y todas las transiciones. Básicamente, tenemos una función que envolvemos. También estamos usando motion. Y usamos eso para envolver todas las animations. Y básicamente la animación no sucede. A veces creo que probablemente estas micro animations como botones, no hacen ninguna diferencia. Creo que tal vez no necesitamos hacer eso. Pero algunas de estas cosas las seguimos aprendiendo. Y probablemente en el futuro podamos hacer algunas pruebas de usuario. Tenemos a alguien especializado en accessibility con quien podemos hablar. Y tal vez podamos averiguar si los botones realmente necesitan tener esto. O simplemente, no sé, modelos, fly outs, tal vez esos grandes componentes que aparecen deslizándose, deslizándose hacia afuera, este tipo de animations, tal vez solo esos componentes lo necesiten. Pero en realidad creo que cada sistema de design tiene sus propias reglas. Si estuviera tomando mis propias decisiones, pero es una decisión de equipo, tal vez no envolvería estas micro interacciones.

Excelente. Y supongo que con todo lo relacionado con la accessibility, no solo las animations, las pruebas de usuario son realmente clave para comprender las mejores prácticas. Excelente. ¿Es mejor idea usar bibliotecas como Frame-O-Motion o simplemente CSS básico o vanilla? Mi regla es, siempre trato de usar primero CSS, solo cuando tengo dificultades y comienzo a ver, como, esto se está volviendo complejo. Tengo que inyectar esta clase y hacer esto y aquello.

Y también soy diseñador, así que mis habilidades de JavaScript no son tan buenas. Y a veces, cuando empiezo a complicar las cosas, simplemente uso CSS. Eso es lo que sé. Es mejor usar una biblioteca, porque ya se encargan de algunas partes del código. Y es entonces cuando tomo esa decisión. Tiene todo el sentido del mundo.

¿Existen, esto puede ser un poco profundo en conocimientos, pero según tu conocimiento, ¿hay alguna propiedad de CSS que consideres que es mejor no animar por razones de rendimiento o accesibilidad? Tuvimos muchos problemas, de hecho, con transform. Esos tipos de animaciones de transformación, a veces el rendimiento no es bueno, especialmente cuando está dentro de componentes flexibles y otros componentes. Tuvimos algunos problemas en algunas aplicaciones como Kibana. Y tal vez, no sé, tal vez noté que, en Shakra UI, en realidad estaba usando Shakra UI para las demostraciones. Solo tienen estas animaciones cambiando el color de fondo. No hacen que este botón suba y use esta transformación. Entonces, una vez más, creo que cuando estamos implementando y comenzamos a tener muchos problemas con esas animaciones y transiciones de transformación, tal vez deberíamos considerar eliminarlas. Y también, ¿qué estás admitiendo? Actualmente no admitimos más IE 11. Siempre hacemos algunas pruebas y no tenemos ningún problema con el tipo de animaciones que estamos usando. Pero creo que, una vez más, es probar y ver qué funciona mejor.

Genial. Creo que respondiste esto durante tu charla, pero solo para aclarar, ¿cómo puede acceder nuestra querida audiencia hoy al artículo con toda la información que utilizaste en tu demostración? Puedes ir a mi sitio web que tiene este nombre, MewkiMew. Y el nombre MewkiMew, es porque tenía este gato. Y Elisabet Oliva, mi nombre real, ya estaba tomado. Así que voy a comprar este dominio llamado MewkiMew. Y sigue hasta hoy. Creo que en ese momento tenía, no sé, 18 años cuando hice eso. Sí, pero puedes ir allí. Voy a publicar tal vez a las 5 PM. Sí, me preguntaba de dónde venía tu nombre de usuario. Realmente me gusta esa historia. Probablemente tengamos tiempo para solo una o dos más. ¿Deberíamos abstenernos de tener animaciones para emociones negativas? ¿O cómo sugieres manejar esto? Sí, en realidad tengo este proyecto, React Huawei, donde tengo componentes que son como ilustraciones, y tienen diferentes estados de ánimo. Entonces, cuando es un estado de error, puedes cambiar el estado de ánimo del planeta o el helado que es una ilustración, a una cara triste.

Entonces creo que, sí, cuando tienes una página de error 404, en lugar de simplemente mostrar 'página no encontrada', tal vez puedas mostrar 'página no encontrada' y tener una ilustración que esté llorando. Es negativo, pero al mismo tiempo, puede ser tierno. Y tal vez... O fantasioso. Sí. Sí.

Bien, creo que ya casi se acaba el tiempo. Y siento que las preguntas que aún se plantean son similares a las preguntas que ya hemos respondido. Así que voy a aprovechar esta oportunidad para, en nombre de toda nuestra audiencia, los organizadores, y yo mismo, dar un enorme, enorme agradecimiento por brindar una charla tan excelente. Demos un gran aplauso. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias.