La UX es esencial para que los usuarios interactúen con nuestras marcas y las perciban. Cuanto más comprendamos a nuestros usuarios, más nos permitirá darles lo que necesitan de la forma que desean y esperan. A medida que avanza la tecnología, se espera que los proveedores hagan que el viaje del cliente sea más sencillo y agradable en cada etapa y, a menudo sin saberlo, para el usuario, estos pequeños detalles del diseño de la interacción marcan la diferencia entre un producto aceptable o funcional y uno excelente.
¿Qué son las microinteracciones?
Según Nielsen Norman Group,
Microinteracciones son pares de activación-retroalimentación en los que (1) la activación puede ser una acción del usuario o una alteración del estado del sistema; (2) la retroalimentación es una respuesta muy específica a la activación y se comunica a través de pequeños cambios muy contextuales (normalmente visuales) en la interfaz de usuario.
Las microinteracciones son (generalmente) animaciones pequeñas y sutiles que hacen que las aplicaciones digitales sean más interesantes, intuitivas, atractivas y eficientes. Elevan la calidad de la experiencia del usuario, añadiendo validación a las acciones y, a menudo, con un entretenimiento que potencia la fuerza de la marca.
No siempre son animaciones visuales; pueden ser hápticas o sonoras. Tu reloj deportivo puede zumbar cuando te acercas a una curva o entras en una zona de frecuencia cardiaca diferente, o tus notificaciones reproducen sonidos reconocibles que asocias con determinadas aplicaciones de mensajería, cuentas de correo electrónico o logros.
Ventajas de las microinteracciones
Aunque parezcan pequeños detalles que permiten al creador "presumir" un poco, los beneficios son muchos y de verdadero valor. A lo largo de nuestra vida cotidiana experimentamos cientos de estos pequeños detalles, la mayoría de las veces sin darnos cuenta.
- Fomentar el compromiso
- Aumentar la satisfacción de los usuarios
- Reducir la frustración
- Proporcionar información sobre el sistema
- Mantenga a los usuarios informados en tiempo real
- Visualizar el estado del sistema o del proceso
- Mejorar la usabilidad
- Productos más intuitivos e interactivos
- Reducir los fallos de usabilidad
- Introducir interacciones de interfaz de usuario más fluidas
- Acelerar el recorrido del cliente
- Prevenir los errores de los usuarios
- Simplificar tareas complejas
- Gamificar los procesos, haciéndolos más divertidos, pegajosos e interesantes, impulsando la retención.
- Refuerza el tema, la voz y el tono de la marca.
Mejores prácticas de diseño de microinteracciones
Identificar y comprender el problema del usuario
Todo buen producto, experiencia o servicio está diseñado para resolver un problema. Al diseñar microinteracciones, definir esos problemas y abordar cómo resolverlos puede resultar obvio, pero es más probable que se revelen durante la investigación de usuarios.
Mantener la naturalidad de las microinteracciones
Los diseñadores deben evitar animaciones extrañas que compliquen o confundan el proceso. Las microinteracciones son naturales y fluidas, proporcionan información visual sencilla y añaden valor al proceso. Nunca deben ser demasiado complicadas, desviar la atención del objetivo real o incluir detalles innecesarios. Y lo que es más importante, deben centrarse en una única tarea.
Probar e iterar los resultados de la investigación de usuarios
La fase de investigación de usuarios crea una oportunidad ideal para localizar problemas y oportunidades y garantizar los mejores resultados. Como especialistas en investigación de UX, no podemos insistir en lo importante que es esta parte del proceso de UX.
Deconstruir el diseño de microinteracciones
Estructura de microinteracción
A pesar de que nuestra anterior definición de Nielsen Norman Group sugiere que las microinteracciones son un sistema de dos fases, cada interacción tiene cuatro partes cruciales.
- Disparadores ? Ya sea activada por el usuario o por el sistema, es la primera parte del proceso, que alerta al usuario sobre una herramienta, acción o información importante. A activación iniciada por el usuario se pone en marcha mediante, como se da a entender, una petición del usuario haciendo clic, deslizando el dedo u otro medio. A activación iniciada por el sistema se activa cuando el programa detecta que se cumplen determinados requisitos.
- Reglas ? La regla determina lo que ocurre después del desencadenante inicial. Si el usuario hace clic, desliza el dedo, toca o habla, ¿se reproducirá una animación, se iniciará un proceso útil, se establecerá un recordatorio o se añadirá un artículo a la cesta?
- Comentarios ? Mantener informados a los usuarios les garantiza que se sienten seguros y que su solicitud se está procesando. La validación y la seguridad tienen un gran peso psicológico en la experiencia del usuario, por lo que mantener a todo el mundo informado en cada fase proporciona una actualización del estado del sistema y el pequeño golpe de dopamina que mantiene contentos a los usuarios.
- Bucles y modos ? La etapa final determina si el acto es repetible o una transacción única. Los bucles y los modos determinan las metarreglas de cada mircrointeracción: deslizar el dedo para recargar una página o pedirle a Siri que responda a tus preguntas pueden realizarse tantas veces como sea necesario (bucles), mientras que añadir un artículo a la cesta solo se hace una vez (a menos, claro está, que añadas una opción para "comprar otro" o "editar los detalles de la compra").
Ejemplos de microinteracciones
Nuestra selección de ejemplos no es en absoluto exhaustiva; se trata simplemente de una serie de usos comunes. Son simplemente algunos de los elementos digitales que probablemente experimente cada día y que añaden valor a su experiencia en línea y que, sin embargo, la mayoría de las veces se dan por sentados.
Barra de desplazamiento
En los primeros años de Internet, una barra de desplazamiento tenía una función física: se cogía y se movía para navegar por la página. Ahora, son una función animada que nos muestra en qué parte de la página estamos y cuánto contenido más contiene la página.
Tirar para refrescar la animación
La microinteracción "pull-to-refresh", habitual en los teléfonos inteligentes, permite recargar una página, recibir nuevos mensajes de correo electrónico, actualizar la previsión meteorológica y mucho más. Una rueda giratoria, un gif de marca o una barra de progreso nos avisan de que han reconocido nuestra solicitud y la están procesando.
Animación por deslizamiento
¿Dónde estarían las aplicaciones de citas sin su infame swipe? La animación de una cruz, un tick o un aleteo de corazones proporciona información en tiempo real sobre nuestras decisiones.
Alarma digital
Un ejemplo de respuesta auditiva a una activación iniciada por el sistema: a una hora determinada, sonará su alarma. Sin embargo, en tu smartphone, tableta u ordenador, está respaldada por una respuesta visual que exige una respuesta a la finalización de su tarea.
Notificación
Lo mismo ocurre con las notificaciones. Las notificaciones sonoras y visuales ofrecen actualizaciones y alertas sobre eventos, opciones o promociones solicitados (y, a menudo, sobre aquellos a los que no creías haberte apuntado), diseñadas para atraer de nuevo a un usuario desinteresado.
Error de contraseña
En lugar de saltar a una nueva página de error que le obligue a rellenar repetidamente los campos de entrada, la validación en línea ahorra tiempo y frustración. Además, la configuración de nuevas cuentas puede agilizarse con la información de errores de contraseñas en línea, como garantizar el número correcto de letras, dígitos y caracteres especiales.
Puntos de embarque
Hay mucho que aprender cuando se explora un nuevo software o plataforma. Ya sea un pequeño punto parpadeante o un globo de diálogo bien colocado, el usuario sabe al instante cómo seguir este tutorial iniciado por el sistema. Demasiadas animaciones en la página a la vez resultarían abrumadoras y torpes, así que, siguiendo una ruta establecida, los nuevos usuarios aprenden a navegar por las funciones y a digerirlas de la forma más fácil posible, de una en una.
Chat y mensajería en línea
Dar información visual a los usuarios de aplicaciones de mensajería es un buen ejemplo de cómo hacer que una aplicación sea pegajosa. Con tres puntos que rebotan, reconocemos inmediatamente que el destinatario ha leído nuestro mensaje y está respondiendo. En WhatsApp, por ejemplo, la información visual aparece en la parte superior de la página, indicando si el destinatario está conectado, ausente o escribiendo. Te gusten o no, esos dos ticks azules proporcionan información inmediata sobre tu mensaje.
Muchos sitios web tienen grandes cantidades de información que compartir, lo que requiere una arquitectura de la información bien estructurada y fácil de navegar. Con tanta información y una sola pantalla, a menudo minúscula, todo queda perfectamente oculto tras un icono reconocible (las tres líneas horizontales conocidas como hamburguesa), que puede animarse para que aparezca a medida que el usuario hace clic en cada categoría, para que encontrar lo que buscamos sea sencillo y directo.
Mayor eficacia en los procesos de cumplimentación de formularios y de pago
Recibir un mensaje de error inesperado puede ser increíblemente frustrante, por lo que muchos formularios y procesos de pago en línea cuentan con microinteracciones activadas por el usuario para prevenir errores y simplificar sus procesos. Ya se trate de la validación en línea de los formatos de correo electrónico, las sugerencias de campos obligatorios o la introducción de cuadros de calendario para especificar fechas precisas, todas ellas están diseñadas para que lleguemos a la meta sin tener que volver para rectificar errores que podríamos haber pasado por alto. Esta técnica también agiliza el proceso de creación de cuentas, lo que facilita el registro y reduce las probabilidades de que el usuario abandone la página.
Efectos Mouseover y cambios de cursor
Estamos acostumbrados a pasar el ratón por encima de imágenes, cuadros de información y diapositivas para comprobar si se puede hacer clic en ellos, pero si se le añade una instrucción animada como "haga clic para visitar nuestra página de contacto" o "mantenga pulsado y mueva para reordenar sus opciones", el usuario interesado recibe exactamente el tipo de respuesta que está buscando.
Ampliación del cuadro de búsqueda
Un cuadro de búsqueda expansible con opciones predefinidas o la presentación automática de sugerencias a medida que se escribe es otro gran ejemplo de cómo añadir funcionalidad y valor a la UX de sus productos y sus usuarios.
Humanización del chatbox
Para crear una experiencia de chatbox más emocional, la animación de su respuesta está programada para ser eficiente, pero también para representar el comportamiento humano. Después de que un usuario envíe una pregunta o solicitud, verá los tres puntos rebotando que sugieren que alguien está escribiendo a pesar de ser una respuesta de la IA. Al dotar a tu chatbox de un avatar humano, se consigue la misma conexión emocional que sentirías por una persona.
Formas ingeniosas de utilizar la animación
Añadir información, promociones o información a las pantallas de espera mientras sus barras de progreso se expanden, giran o rebotan por la pantalla añade valor para sus usuarios. Es una gran oportunidad para hacer upselling o educar a los compradores, usuarios o miembros acerca de los productos que podrían no haber explorado.
Si encaja con su marca, añadir un toque de fantasía o una broma (todos hemos visto alguna página 404 divertida que nos ha hecho sonreír) puede que no aporte nada inmediato a la visita del usuario, pero reforzará su relación con él, fidelizándolo.
Ejemplos de microinteracciones de éxito para inspirarse
Todos sabemos qué elementos de sitios web y aplicaciones nos impresionan más, cuáles añaden valor a nuestras experiencias haciendo que nuestras interacciones sean más fáciles, más divertidas y, en definitiva, más gratificantes. He aquí un par que cambiaron significativamente nuestra forma de utilizar los productos digitales.
La función React de Facebook
Cuando Facebook sustituyó el botón de "Me gusta", que era un simple pulgar hacia arriba, por una selección de reacciones (manteniendo pulsado el icono original), cada nueva opción emotiva tenía un icono y una animación únicos. Sin duda, cambió la forma de hacer saber a los demás cómo nos sentíamos de la manera más rápida y sencilla posible.
La solución de Apple y Google al control por voz
Tanto Apple como Google necesitaban hacer saber a los usuarios que sus peticiones de control por voz estaban siendo atendidas. Todo el proceso se realiza con un feedback visual mínimo pero sencillo e inteligente.
Cuando haces una petición, los puntos flotantes del Asistente de Google aparecen para hacerte saber que está escuchando; los puntos se convierten en ondas sonoras para hacerte saber que está captando tu voz mientras hablas, y te da la respuesta. Siri hace lo mismo, aunque con su imagen de marca abstracta, vibrando y cambiando de forma para mostrarte que ha captado tu voz.
Resumen
Crear interacciones fluidas que reduzcan la frustración y permitan a los usuarios pasar sin problemas de un estado o etapa a otro es esencial para una experiencia de usuario ideal. Las microinteracciones bien diseñadas y ejecutadas ofrecen precisamente eso.
Como investigadores de UX, nuestro papel es determinar la versión ideal para quienes diseñan microinteracciones. La investigación y las pruebas con usuarios nos permiten perfeccionar los mejores resultados con pruebas A-B y de prototipos. La fase de investigación de usuarios reduce los fallos en la entrega del mismo modo que lo hacen muchas de las microinteracciones que acaban en nuestros formularios y procesos de pago.
Si desea saber más sobre la investigación de usuarios puede ayudarle a descubrir oportunidades de innovación para mejorar su diseño de microinteracción y experiencia de usuario envíenos un correo electrónico a hello@ux247.com.
[...] ha publicado recientemente una página en la que explora las microinteracciones en el diseño de UX, ya que consideramos que son elementos tan importantes de la [...]
[...] Animaciones de confirmación y ciertas microinteracciones [...]