Las microinteracciones son eventos que tienen una tarea principal (un único propósito) y se encuentran en todo su dispositivo y dentro de las aplicaciones. Su finalidad es deleitar al usuario; para crear un momento atractivo, acogedor y, nos atrevemos a decirlo, humano.
Por ejemplo, eche un vistazo a la siguiente interacción
Pulgares hacia arriba – Facebook Messenger
Esta animación es un buen ejemplo de microinteracción, porque cumple tres funciones importantes:
Comunicar el estado y proporcionar retroalimentación. Mejorar el sentido de manipulación directa. Ayudar a las personas a ver los resultados de sus acciones.
Las micro interacciones tienen cuatro partes:
Desencadenantes iniciar una microinteracción. Los desencadenantes pueden ser iniciados por el usuario o por el sistema. En un desencadenador iniciado por el usuario, el usuario tiene que iniciar una acción. En un desencadenador iniciado por el sistema, el software detecta que se cumplen ciertas calificaciones e inicia una acción.Normas determinar qué sucede una vez que se desencadena una microinteracción.Comentario permite que la gente sepa lo que está pasando. Cualquier cosa que un usuario vea, oiga o sienta mientras se produce una microinteracción es retroalimentación.Bucles y modos determinar las meta-reglas de la microinteracción. ¿Qué sucede con una microinteracción cuando las condiciones cambian?
Si las microinteracciones son sólo pequeños elementos de diseño, ¿por qué preocuparse por ellas?
Lamentablemente, muchos desarrolladores y diseñadores web todavía hacen esa pregunta, sin entender que ignorar las microinteracciones puede costar mucho a sus clientes. La atención a los detalles es lo que básicamente diferencia un sitio web excepcional de uno normal. He aquí por qué las microinteracciones son geniales:
Mejoran la navegación de un sitio web Facilitan que los usuarios interactúen con su sitio web Proporcionan retroalimentación instantánea y relevante sobre una acción completada a un usuario Dan consejos a sus usuarios Comunican información sobre ciertos elementos, como si es interactivo o no Hacen que la experiencia del usuario sea mucho más gratificantes. Fomentan compartir, dar me gusta y comentar su contenido. Dirigen la atención de los usuarios. Y, finalmente, simplemente hacen que su sitio sea más emotivo.
Las microinteracciones bien diseñadas son una clara señal de que el usuario se preocupa. Por eso lo valoran tanto. Un usuario sabe qué hacer y si su acción fue correcta y aprobada por el sistema: una aplicación o sitio web proporciona retroalimentación visual inmediata y le enseña al usuario a trabajar con el sistema.
Cuando las microinteracciones se realizan correctamente, pueden generar sentimientos positivos sobre su marca e influir en las acciones de los usuarios, a menudo sin que la gente se dé cuenta de por qué. Si le gusta o no le gusta un aspecto de un producto, tiene una predisposición positiva o negativa hacia el producto en general. Este llamado efecto Hallo puede jugar tanto a favor como en contra. En manos sabias, este conocimiento puede ayudar a mejorar los comentarios de los usuarios de su sitio web; al prestar la debida atención a los detalles, es posible dejar a los usuarios satisfechos.
Pocos ejemplos
En el mundo UX/UI, aunque pequeñas, las microinteracciones se promocionan como la potencia cuando se trata de comunicarse con el usuario. A continuación se muestran las siete microinteracciones principales y su impacto en la experiencia del usuario:
Golpe fuerte La acción de deslizar elimina el toque y es mucho más interactiva y fluida. Ayuda al usuario a cambiar rápidamente entre pestañas y adquirir más información sobre el producto. Además, deslizar el dedo es un gesto muy común y guía a los usuarios inconscientemente sin hacerlos pensar; tal como hemos estado leyendo 'No hagas pensar a tus usuarios'. ¿Qué más? Es increíblemente divertido y adictivo.
Entrada de datos Todos conocemos las frustraciones de configurar una contraseña o crear una cuenta. Esta acción puede fácilmente poner los pelos de punta. Si bien las sugerencias proactivas sobre la seguridad y el uso de la contraseña facilitan que el usuario siga adelante, algunas interacciones interactivas en el momento de la entrada de datos también mantienen a los usuarios interesados en el proceso y ayudan a lograr el objetivo.
animaciones La animación simplemente permite y mejora las microinteracciones. Personifican el buen diseño; Puede que su presencia no se note, pero la ausencia pasa factura a todos. Actúan como un pegamento que ayuda a los diseñadores a hacer que los procesos más simples sean interesantes y adictivos. Pero tenga mucho cuidado, ya que están destinados a atraer a los usuarios y no distraerlos ni frustrarlos; retrasar el procesamiento o introducir un nuevo estilo en el sitio web puede causar confusión.
Estado actual del sistema Es esencial mantener al usuario informado sobre el estado actual de un sitio o aplicación. Si los usuarios no están informados, es probable que se molesten y cierren el sitio o la aplicación. Las microinteracciones le permiten al usuario saber exactamente qué está sucediendo, cuánto tiempo llevará completar el proceso, etc. Incluso los mensajes de error pueden ser divertidos pero efectivos para mantener la confianza del usuario.
Haga que los tutoriales sean interesantes Todo el mundo busca información constantemente, todos nosotros. Los tutoriales con la ayuda de microinteracción guían a los usuarios sobre el funcionamiento de una aplicación simplificando y resaltando las características básicas y los controles importantes para una fácil comprensión.
Llamada a la acción Las microinteracciones esencialmente empujan al usuario a interactuar con una aplicación o sitio web. El llamado a la acción infunde un sentimiento de logro y también un factor de empatía en el comportamiento del usuario y la mejor manera de hacer que su usuario interactúe con la CTA es hacerla atractiva para atraer el interés del usuario.
Botones animados Desempeñan el papel de administrador de información al permitirle al usuario conocer su camino a través de su aplicación o sitio. Necesitamos prestar atención al color, la forma, los efectos especiales, las animaciones, la ubicación y la textura para que la experiencia del usuario sea perfecta.
Los humanos estamos programados para buscar gratificación instantánea. Y es una tendencia común pasar por alto las microinteracciones en el esquema más amplio de las cosas, pero son muy importantes para enganchar a los usuarios. El diablo está en los detalles, como todos dicen. Pequeñas experiencias y características de diseño, como alternar entre pantallas, resaltar una característica o mostrar una nueva notificación, pueden marcar una gran diferencia a la hora de mejorar la experiencia de los usuarios.
Realizar microinteracciones es apasionante para los diseñadores, porque es posible experimentar nuevas soluciones de diseño y buscar nuevas formas de sorprender a los usuarios. Pero para hacerlo debes tener en cuenta algunas cosas:
Ponte en el lugar de los usuarios y usa todo lo que tienes para descubrir cómo usan tu aplicación.Crea animaciones funcionales.. Animaciones que no sólo tienen una estética sino que son capaces de mejorar la experiencia del usuario.Diviértete y entretiene a tus usuarios. Lo que el usuario siente cuando usa la aplicación es la razón detrás del hecho de que sigue usándola. Si el usuario disfruta la experiencia y la encuentra placentera, regresa.No seas molesto. Demasiadas animaciones tienen el efecto contrario en los usuarios. Los usuarios molestos hacen que se mantengan alejados de su aplicación.Usa un lenguaje humano y no técnico. Una copia divertida e irónica puede hacerte olvidar por un momento lo frustrante que puede ser una página en blanco dentro de la aplicación.
Entonces, ¿con qué tipos de herramientas de creación de prototipos deberían familiarizarse los diseñadores? Existen muchas herramientas, pero no todo el mundo sabe cuál funciona mejor para tareas específicas de microinteracción. Aquí están mis recomendaciones basadas en mi experiencia personal diseñando estos elementos.
Si está familiarizado con la codificación:
Móvil: Xcode, Android studioMóvil o Web: FramerWeb: animación CSS
Si desea diseñar una interacción entre una inserción similar a una pantalla y un módulo:
Si desea crear interacciones más detalladas:
PrincipioAdobe CC, estudio de origami y prototipo
Si quieres crear interacciones detalladas + animación:
Algunos recursos que le ayudarán a empezar con las microinteracciones son los cursos de https://www.interaction-design.org/. Especialmente cursos como Cómo crear productos intuitivos imitando la fisicalidad, psicología del diseño de interacción: la guía definitiva lo que le daría una comprensión profunda del comportamiento cognitivo humano.