Microinteracciones en vidiv

BSO: Inner song, de Kelly Lee Owens

-

Esta publicación es bastante más técnica de lo habitual pero, cuando empecé a documentar las microinteracciones de vidiv para ponerlas en común con el equipo de desarrollo, pensé en compartirlo. Porque me lo he pasado realmente bien haciéndolo y porque tal vez a alguien le sirva de algo.

Empecemos por el principio:

¿Qué es vidiv?

Vidiv es una plataforma para celebrar eventos virtuales (formación, all-hands, presentaciones de producto, conferencias, etc.), mejor si son de más de 100 personas.

No quiero entrar en más detalle, si quieres más información te recomiendo que visites la página web.

El poder formar parte del equipo de vidiv fue el detonante para que dejara el mundo freelance. Creo que no podría haber hecho una mejor elección. Es un placer trabajar viviendo en un proceso de aprendizaje constante y hacerlo rodeado de gente de tanto talento.

¿Qué es una microinteracción?

Según Nielsen Norman Group:

Microinteractions are trigger-feedback pairs in which (1) the trigger can be a user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual (usually visual) changes in the user interface.

Esto suena muy frío, muy clínico, pero las microinteracciones también pueden producir pequeñas dosis de placer. Piensa en el clic que suena al cerrar la funda de los AirPods o en el tacto de un teclado mecánico (placer sensorial), las animaciones de los emojis de Facebook (placer derivado de las relaciones sociales), la animación de una barra de loading (psicológico al reducir la carga mental)… y así muchas más.

Como nos explicaba Miguel Oliva Márquez en el Instituto Tramontana, una microinteracción es una forma en la que el producto se comunica con el usuario de forma breve… pero para que sea de calidad, ha de ser placentera.

Tipos de microinteracciones

El utilitas frente al delectus.

Diferenciamos dos tipos de microinteracciones: las utilitarias y las de deleite.

Las utilitarias están relacionadas con la eficiencia y con la parte más funcional de la interfaz. Dirigen la atención a un elemento concreto y comunican cambios de estado o progreso. Un ejemplo: el cambio de color de un botón al pasar por encima, la animación de un switch, etc. Son muy breves en el tiempo.

Las de deleite se reservan para momentos que requieran una mayor expresividad. Comunican emociones, ayudan a conectar con el usuario y refuerzan la imagen de marca. En el caso de vidiv tendríamos un claro ejemplo en las animaciones del pad de emociones. Son más prolongadas en el tiempo y, aunque no son imprescindibles para el uso de la aplicación, sí ayudan a transmitir la personalidad del producto y a que el usuario tenga pequeños momentos de disfrute.

Microinteracciones utilitarias

Duración

Existen una serie de variables a tener en cuenta a la hora de establecer la duración de una microinteracción:

Complejidad del mensaje a comunicar
Repetición de la acción durante el uso de la aplicación
Tamaño del elemento
Distancia a recorrer o cambio que se produce en el componente

En vidiv establecemos tres tipos de duración:

Rápidas 120 ms - ejemplo: botones (puedes probarlo en Framer)

Medias 360 ms - ejemplo: aparición del panel de chat (también en Framer)

Lentas 720 ms - ejemplo: transición a pantalla completa

El tamaño del elemento y la distancia (o el cambio) que recorre son variables que nos ayudan a decidir la velocidad que le damos a la animación.

Easing

Los objetos en movimiento sufren pequeñas aceleraciones y desaceleraciones debido a los materiales que los forman y a la gravedad.

En el lado contrario el movimiento perfectamente linear no se percibe como algo natural.

Por tanto, para darle naturalidad a las animaciones aplicamos easing in out de forma sistemática.

Orden de elementos en animaciones combinadas

Una animación puede afectar a varios elementos superpuestos, en ese caso a veces se producen efectos indeseados como que un texto se visualice antes del fondo que le corresponde.

Con el fin de evitar ese tipo de errores asignamos un breve retraso en algunas de los variables. En el ejemplo, la transparencia del contenido se anima posteriormente a la posición del mismo.

Microinteracciones de deleite

En vidiv las microinteracciones de deleite no tienen una duración o un comportamiento predeterminado. El equipo de diseño las valora según las necesidades.

Ejemplo: el pad de emociones.