Las microinteracciones no son un concepto nuevo en el diseño de UX, pero son cada vez más impresionantes. Las microinteracciones van en aumento, y, en esta oportunidad, te diremos cómo diseñarlas este 2021.
Las microinteracciones son esos pequeños detalles que convierten la experiencia de un usuario normal en algo más divertido. Pequeñas cosas que sorprenden y deleitan al agregar una experiencia de usuario agradable a su aplicación o sitio web.
A continuación, se muestra cómo los diseñadores están utilizando microinteracciones en 2021, con ejemplos de cómo ha crecido esta técnica de diseño.
Contenido del Articulo
Diseño para función
“Animación más explicación”.
Deje que esta simple frase pase por su cabeza, mientras comienza a pensar en la mejor manera de desarrollar microinteracciones.
“La animación es lo que atrae a los usuarios a un elemento”.
La explicación les ayuda a comprender para qué sirve un botón, interruptor de palanca o icono y cómo usarlo.
Cada microinteracción proporciona una serie de información en forma de microsegundos:
- Desencadenante: cuándo comienza la microinteracción o por qué comienza.
- Reglas: qué hace que una acción / interacción funcione y cómo funciona.
- Retroalimentación: ¿Cómo sabrá que su acción con un elemento fue exitosa, según algún tipo de aviso?
- Bucles y modos: cuánto dura una interacción antes de reiniciarse para un usuario específico.
Vea el ejemplo de un interruptor de modo claro / oscuro arriba. El interruptor se desliza y hace exactamente lo que esperarías sin mucho alboroto.
Tiene una animación de luz que explica exactamente lo que sucede si acciona el interruptor. Esta es una microinteracción confiable en acción.
La microinteracción debería ser divertida
Estos son elementos atractivos que pueden ayudar a los usuarios a comprender los diseños con un toque moderno y quizás inesperado.
El sitio de Aurelia Durand está lleno de pequeñas interacciones que son sorprendentemente adorables.
El puntero es una mano diminuta que se mueve para hacer clic en las áreas correspondientes, desplazarse sobre el menú y obtener una explosión de puntos de colores para impulsar la acción, las ilustraciones principales también cambian y se animan como parte de las microinteracciones del estado de desplazamiento.
Mostrar personalidad
Una de las microinteracciones más pasadas por alto, con la que probablemente te encuentres todo el tiempo, es el panel de respuesta de Facebook. (Facebook también agrega ingeniosas microinteracciones al logotipo del móvil de vez en cuando).
Por eso funciona. Cuando haces clic o mantienes presionado, cada pequeño emoji parece cobrar vida, mostrando una expresión de emoción real entre la que puedes elegir. Se siente más personal y auténtico que un toque rápido en el clásico icono azul del pulgar hacia arriba.
Estos pequeños elementos también tienen estados flotantes que le dicen lo que significa cada emoji / ícono. Esta información adicional hace que la microinteracción sea más útil y proporciona a cualquier usuario las herramientas para tomar la decisión correcta al elegir su opinión sobre publicaciones en redes sociales.
Esta capa adicional de información puede ser especialmente importante si se agrega un nuevo emoji o ícono, como un abrazo “cariñoso”, que se convirtió en parte de la barra de funciones a mediados de 2020.
La animación sutil puede ser efectiva
Si bien algunas microinteracciones son más explosivas, muchas son cambios sutiles que pueden pasar casi desapercibidos.
“Una buena microinteracción debería ser prácticamente invisible”.
No tienes que pensar en ello o preguntar por qué existe o cómo interactuar con él. La revista UX lo describió de esta manera:
“Asegúrese de que las microanimaciones no sean inconvenientes o molestos. Las acciones rutinarias y menores requieren una respuesta modesta. Las acciones accidentales y graves requieren una respuesta firme”.
Un buen ejemplo de esto es la microinteracción, que viene con una gran cantidad de iconos de hamburguesas o menús emergentes.
Lucid Reality Labs tiene un icono de dos líneas (esquina superior derecha) que se mueve una línea, seguida de una “X” cuando se abre el menú. Anima al otro cuando se hace clic en la “x” para cerrar. Es tan simple que ni siquiera puedes verlo.
También hay una interacción secundaria con el cubo en el centro de la pantalla. Puede mirar un ejemplo para ver cómo funciona esta superposición de microinteracciones.
Diseño para la armonía con el contenido
“Cada microinteracción debe estar en armonía con el contenido que lo acompaña”.
No está diseñando en una burbuja, así que no permita que la frescura de una idea o una que haya creado, tenga prioridad sobre la ubicación y la sincronización con el diseño general.
Las microinteracciones de la línea de tiempo para “Cómo hablar con los niños blancos sobre el racismo” son simples y están completamente integradas con el resto del diseño. Contienen un nivel de detalle que hace que ver la versión digital de este libro sea un placer.
Cada microinteracción de la línea de tiempo incluye un icono correspondiente al contenido de la página a la que pertenece y un título para el contenido. Se acerca al tamaño para que puedas echar un vistazo a la obra de arte, y un simple movimiento llama la atención.
El diseño también está lleno de otras adorables animaciones como el cambio de página (sencillo y volteado) que hacen de todo este diseño algo en lo que querrás sumergirte.
Usa elementos táctiles
Piense en el rendimiento de algunas de las herramientas que utiliza todos los días cuando interactúa con ellas.
- La sensación táctil de tu Apple Watch cuando presionas un botón
- Notificación de ping suave en su teléfono
- Puntos de escucha cuando hablas con Siri u otro dispositivo
- Zumbido suave para marcar cada milla mientras caminas o corres
- Bip al conectar los auriculares al Bluetooth
Todos estos elementos que conectan el espacio digital y la realidad son parte de una experiencia táctil más amplia que une los espacios. Las microinteracciones son una excelente manera de hacer esto.
Puedes usar:
- Sentir
- Sonido
- Progreso
- Rebotar
- Pulso o zumbido
Hay muchas formas de lograrlo. Lo común es que se ven y se sienten reales. No son tanto parte de la pantalla como parte de su mundo físico (o al menos afirman serlo).
Producción
Las microinteracciones comenzaron a ganar fuerza alrededor de 2013 cuando Dan Saffer escribió por primera vez sobre ellas en su libro.
Los cuatro componentes que describió en ese entonces siguen siendo partes clave de estas pequeñas interacciones de sitios web: disparador, regla, retroalimentación, bucles y modos.
Si observa de cerca, puede ver estos elementos comunes en casi todas las microinteracciones.
