Cómo recreé las microinteracciones de Facebook para el descubrimiento de funciones

Para aquellos que solo desean dirigirse al ejemplo de código, está aquí.

Si desea dirigirse directamente al desafío, haga clic aquí

* Una Microinteracción es una cola visual sutil de un solo uso que llama su atención sobre un cambio de estado. Una luz de encendido en una cafetera o un cambio de color al pasar el botón son dos ejemplos.

¿Por qué? ¡¿Quien?! ¿¡Qué!? y algo de orientación

Un problema común de UX que los diseñadores y desarrolladores frontend encuentran ocasionalmente es la necesidad de introducir una nueva característica o exponer una "bien oculta" que, por alguna razón, tal vez debido al desorden de la funcionalidad, el diseño deficiente o alguna otra razón por la cual el usuario rara vez interactúa con esa área o característica de su aplicación.

Ya sea que se trate de una nueva función emocionante, a su empresa le gustaría comenzar a recibir reacciones de los datos de uso y comentarios de los usuarios o si es una función ya existente que rara vez se usa por alguna razón: este problema existe y lo encontramos de vez en cuando en nuestra industria.

Encontré esta posible solución excepcional en la aplicación móvil de Facebook. Diseñadores de interacción y desarrolladores frontend en Facebook decidieron eliminar una determinada acción de mi barra de navegación en la aplicación y agregar una nueva: el enlace rápido a mi perfil. Ya sea que hayan estudiado mi comportamiento específicamente o si se trata de un fenómeno más robusto, definitivamente es una causa digna en mi opinión.

Un problema de primera mano UX - Resuelto

A menudo me encuentro buscando la forma más rápida de navegar a mi perfil a través de la aplicación de Facebook. En la mayoría de los casos, cambio mi vista a algunas áreas de la aplicación buscando visualmente y haciendo clic en algunas áreas llenas de anticipación para llegar a mi destino final hasta que finalmente alcanzo mi perfil (varía, por supuesto, en qué estado o pantalla de la aplicación se encuentra durante su sesión) - para concluir, una experiencia no tan agradable para decir lo menos.

Facebook, y más específicamente los Diseñadores de interacción, así como los desarrolladores frontend que juntos inventaron esta solución única, resolvieron este problema perfectamente en mi opinión.

El mensaje que intentaron transmitir como lo percibo es que hay algo nuevo, brillante y divertido que fue regalado a los usuarios. Es similar a un regalo que nos indica que desentrañar y desempaquetar esta nueva acción nos llevaría a una experiencia placentera y muy deseada. Además, al mirar la pantalla estática de la aplicación móvil de Facebook, la única parte móvil es esta maravillosa microinteracción brillante y chispeante: una señal clara de una llamada a la acción.

¡Vamos a sumergirnos profundamente en cómo una Microinteracción tan poderosa y cuidadosamente diseñada y un Fanático de la Microinteracción (como yo) desencadenaron una búsqueda de exploración!

Original: Facebook me dice que ahora hay una nueva opción disponible en mi barra de tareas que uso a menudoMi versión, o espera, ¿es esta la original? Estoy un poco confundido…

Simple pero potente y seductor

Un elemento de interfaz de usuario aparentemente simple, estos 3 destellos azulados simples que aparecen brevemente sobre el ícono del avatar, insinúan que este elemento es un regalo "nuevo y brillante" para que el usuario lo desenrede, ¡Oh, qué emoción! ¡No puedo esperar!

Un retoque supuestamente simple junto con un ícono de avatar minimalista, fusionados en una microinteracción elegante, inteligente y de aspecto simple que reside en una pantalla muy estática o inactiva de la aplicación móvil de Facebook. Esto incita inmediatamente al usuario observador a interactuar con este elemento de la interfaz de usuario y descubrir sus virtudes ocultas: un llamado a la acción adaptado, diseñado e implementado adecuadamente.

Acercarse al desafío

Un análisis simple de la microinteracción lo deja bastante claro: encontrar un icono similar o exacto sería una tarea relativamente simple, mientras que diseñar un solo efecto de "chispa" sería la parte más compleja.

Los invito a que se sumen a mi proceso de pensamiento "entrenar" y compartir mi experiencia en la formación de ideas, experimentar y descubrir ideas a lo largo de mi camino para lograr el resultado final deseado.

También espero que aprenda algo nuevo como lo hice al utilizar la propiedad de ruta de clip CSS para abordar este desafío. Conozca sus entresijos.

Sin más preámbulos, comencemos :) Di un paso adelante para dividir el efecto en pequeños desafíos más pequeños, más manejables e intuitivos.

¡¿Acortar?! ¿¡camino!? Elaborar…

clip-path es una propiedad CSS que corta (recorta) una región que establece qué parte de un elemento se mostrará mientras que las partes externas están ocultas.

Un desarrollador que usa clip-path para crear una forma intrincada en su elemento HTML

clip-path nos permite crear formas complejas con CSS recortando un elemento en una determinada forma (como círculo, triángulo, elipse, polígono y más). Podemos animar aún más las formas libremente y recibir transiciones simplificadas y efectos de transformación fuera de la caja, siempre que ambas formas en transición tengan el mismo número de puntos (coordenadas x, y).

Yo experimentando con clip-path para crear algunas formas básicas

Desglose de animaciones

Un solo efecto

Al centrar mi atención en un solo elemento, fue mucho más fácil diseccionar cada animación que se activaba. Y así, determiné lo siguiente:

  1. transform: scale (...) - Está disminuyendo de 0 a 1 y de regreso a 0 a lo largo del ciclo de vida de la animación.
  2. transform: rotate (180deg): me llevó un poco más de tiempo darme cuenta de que la rotación de esta estrella ninja hacia un cuadrado y hacia atrás es un total de 180 grados (desde su fase de aparición hasta su posición final, en la que Spark también se desvanece).
  3. clip-path: polygon (...): esta parte sería uno de los desafíos más complejos e interesantes dentro de este único Desafío del efecto de chispa; por lo tanto, lo analizaré con más detalle a continuación.

Escalado: un bloque de construcción del efecto chispa

El cronometraje de la escala del elemento tiene una parte crucial para contribuir a la "brillantez" del efecto, ya que la rápida aparición y desaparición del elemento es más o menos de lo que se compone una chispa: una breve visita brillante que proporciona un placer temporal a nuestro ojos

Roatación: difuminar las líneas, un "pegamento" para el efecto chispa

Junto con la transición de escala, cuando el elemento aparece por primera vez e inmediatamente comienza a girar de izquierda a derecha, la rotación lo hace más vivo y holístico. Esto obliga al ojo humano a enfocarse en el icono decorado por este sentimiento brillante o brillante.

La forma pura de CSS de formas Morphing - Ruta del clip: Polígono (...)

Con ciertas limitaciones, esta es la forma "nativa" de lograr un efecto de transformación para las formas CSS.

Problema conocido: la primera limitación más importante que tenemos que tener en cuenta para los desarrolladores antes de acercarnos a esta tecnología es que el número de coordenadas en la forma inicial y en la forma final tiene que ser igual: girar un cuadrado a un rectángulo es perfecto, Uso simple que funciona a la perfección con la tecnología.

Experimentando

Para ser sincero, esta es la primera vez que utilizo clip-path: Polygon () en un caso de uso real relacionado con el trabajo. Así que decidí aventurarme con algunos experimentos para comprender mejor sus entresijos antes de abordar el desafío específico en cuestión.

Experimento 1 - Un enfoque ingenuo - Cuadrado → Estrella de 4 puntos

Cuadrado → Morphing de estrella de 4 puntos en vuelo estacionario

Wow, es solo mi primer experimento y ya estoy entusiasmado con clip-path :) aunque algo bastante peculiar había sucedido aquí ... La dirección de transformación parece estar comportándose de manera extraña. La razón es simple: la forma de origen tenía un total de 8 puntos de coordenadas, 4 de ellos apilados en cada coordenada de la esquina, lo que condujo a este extraño comportamiento de transformación.

2 puntos (coordenadas) apilados en cada esquina → 8 puntos igualmente distribuidos a lo largo de los lados cuadrados

Unos pasos más adelante en la experimentación descubrí esta maravillosa herramienta y la utilicé para comenzar a trabajar con porcentajes en lugar de píxeles. También pude editar mis formas en línea con él. En general, recomiendo probarlo, ¡esto es Clippy!

Experimento 2 - Direcciones Morph ajustadas - Cuadrado → Estrella de 4 puntos

Según mis planes, el siguiente gif muestra un enfoque simplificado que tomé para tratar de resolver este problema con un cuadrado de 200 px por 200 px:

Planificación de los cuadros paso a paso de los morfos

Con suerte, un simple ajuste de coordenadas, extendiendo 4 de los puntos escondidos por igual en el cuadrado (entre las esquinas), con suerte conduciría a un efecto de transformación más suave y a la dirección correcta (vertical y horizontalmente respectivamente) apuntando hacia el centro de ambas formas en lugar de dirección diagonal como antes:

Aha Success! - El efecto Morphing se ve decente ahora

Experimento 3: Octágono → Cuadrado

Elemento de chispa individual: disminuyó la velocidad para ver las fases octágono y cuadrado

Si observamos con cuidado y repetidamente el efecto de chispa simple anterior, notamos brevemente que en algún lugar alrededor del 50% de la animación se convierte en un octágono. Además, en las fases anteriores y posteriores al octágono, la chispa se transforma en un cuadrado.

Parece una tarea bastante simple, ¿no? Pensé que solo usaría clip-path para transformar mi cuadrado anterior en un octágono como el gif de arriba. La realidad era un poco diferente, y tuve que cambiar la forma inicial y dibujar su polígono (...) un poco diferente para tener el cuadrado dentro del octágono durante la transición.

La forma en que funciona el clip-path es que crea la región de recorte deseada dentro del elemento utilizando la propiedad y como mi cuadrado original ocupaba toda la región de su elemento. No pude transformar fuera de esta región con la asignación de coordenadas actual.

Se tuvieron que hacer algunos ajustes, y ahora también cambié a trabajar con porcentajes para admitir el ancho / alto dinámico de las formas del elemento padre.

Y voilà: progresamos un poco y ahora tenemos un octágono que pasa a un cuadrado y viceversa. Pero espera ... todavía no hemos terminado!

¿Los octágonos de respiración son reales?

Experimento 4: Octágono → Estrella de 4 puntos → Atrás (ciclo completo)

Ahora que sabemos que el Octágono es la apariencia más grande de la forma de transformación, podemos hacer que nuestra forma de transformación sea mucho más precisa y la transición entre sus fases reales de estrella de 4 puntos → Octágono → Atrás, como se ve a continuación:

Eso es más como eso

Experimento 5: escala y animación de bucle infinito

Así que comencé este experimento con el primer paso del evento flotante a una animación infinita activada instantáneamente que primero usa la transformación de escala (...) para hacer que la estrella aparezca y desaparezca respectivamente, como se ve a continuación:

Ahora me ves, ahora no - demostración aquí

Experimento 6: Posiciones de rotación, comienzo y fin

Algunos ajustes más para hacer que la estrella escale a tamaño completo en la posición inicial y determine su posición final con transform: rotate (180deg)

¡Es una rotación, Mario! - demostración aquí

El desafío fronterizo

Después de pasar algún tiempo experimentando, me di cuenta de que lo que había logrado hasta ahora no sería satisfactorio. En el ejemplo original, parece que cuando las chispas aparecen sobre el icono en la microinteracción original, tienen algún tipo de borde blanco a lo largo de la forma que se transforma con la forma en cada paso de sus fotogramas clave:

Un poco más grande, pero está claro que los bordes están presentes a lo largo de la transformación

Experimento 6 - Construyendo una frontera que se transforma junto con la chispa

Después de buscar soluciones en Internet, desbordamiento de pila y otras sugerencias en artículos para abordar el problema, entendí que este desafío era bastante único. No pude encontrar ninguna solución específica a mi problema. El hecho de que mi borde tuviera que "adherirse" a la forma mientras se transforma, complica aún más las cosas. Así que me aventuré a hacer algunas pruebas hasta que encontré la solución.

Un "clon de chispa" que se muestra justo antes de mi elemento de brillo principal como elemento hermano fue la solución perfecta. Ambos tenían que mostrarse: flexible y verticalmente, así como horizontalmente ubicados en el centro de su envoltorio con justify-content: center y align-items: center para lograr lo siguiente:

Pero Johnny espera! ¿Cómo se asegurará de que el clon siga a su hermano durante la animación de los fotogramas clave? Después de intentar animar al padre y al hijo simultáneamente y experimentar algunos problemas o errores extraños en el navegador, descubrí que el enfoque de los hermanos con flex proporcionaba la mejor solución como se ve a continuación:

Los hermanos que animaban simultáneamente creaban un borde perfectamente ajustado - demostración aquí

Conectando los puntos

En este momento, ya sentía que los desafíos difíciles en este proyecto habían llegado a su fin. Todo lo que tenía que hacer ahora era encontrar un ícono de avatar similar, colocar 3 chispas, ajustar sus posiciones manualmente hasta que estuviera satisfecho, y ajustar su ancho / altura también hasta llegar al resultado final.

Una versión ampliada para ver mejor cómo funcionan las cosas.La microinteracción final - demostración aquí

Resumen

Para concluir, disfruté desafiándome a mí mismo con la recreación de esta microinteracción. Aprendí mucho sobre cómo un elemento aparentemente simple en nuestra vida cotidiana (como una invitación a hacer clic en un nuevo ícono de los desarrolladores de un software que consumimos) es en realidad mucho más que un conjunto de elementos y animaciones perfectamente sincronizados y orientados correctamente .

Tal microinteracción a medida es una obra de arte. Es un elemento de interfaz de usuario único que está cuidadosamente diseñado para resolver un problema difícil. En nuestro caso, los desarrolladores de Facebook alteraron la barra de navegación de mi aplicación móvil, eliminaron un ícono que no usaba a menudo y lo reemplazaron con un ícono que me permitió realizar una acción que había estado luchando por encontrar y que deseaba realizar muchas veces. volviendo a mi perfil.

Es una decisión inteligente, una microinteracción magistralmente diseñada que reside dentro de una pantalla estática. Es la única parte móvil de la pantalla y, aunque es muy pequeña y relativamente pequeña, las brillantes estrellas brillantes que cruzan los márgenes del icono atrajeron mis ojos y mi dedo para hacer clic automáticamente. Ahora aprecio el trabajo y pensé un poco más, así que gracias a los Diseñadores de interacción y Desarrolladores frontend en Facebook por construir microinteracciones increíbles.

Conclusión

Los animo a todos a atreverse e intentar resolver problemas difíciles de UI y UX a través de la ideación y la experimentación. Aunque es agradable y puede mejorar un poco el ego para alcanzar el resultado final y tener éxito, creo que es la parte menos significativa de la experiencia.

En mi opinión, el viaje por el que te aventuras, equipado con tu conjunto de habilidades para experimentar, pensar y consultar con otros, es la mejor parte. Los procesos de aprendizaje y recopilación de información que usted experimenta son mucho más importantes, en pocas palabras, y significan mucho más que el destino.

Revisores

Muchas gracias por la ayuda de estas excelentes personas que ayudaron a revisar y dar retroalimentación para los borradores de mis artículos, ¡eres increíble! ;) - Jared M. Spool Yoni Weisbrod Ofir Ovadia Dima Vishnevetsky

* Orientación de demostración: los ejemplos se encuentran en una configuración Vue.js alojada en Codesandbox.io, para alcanzar la lógica HTML / SCSS pura después de navegar, haga clic en la carpeta de componentes → luego haga clic en el archivo spark.vue → el HTML está envuelto alrededor de etiquetas → el SCSS está a solo un rollo de distancia envuelto alrededor de las etiquetas