Microinteracciones avanzadas en UX

¿Qué son las microinteracciones?

Uno de los objetivos principales del diseño de experiencia de usuario (UX) es crear productos y herramientas que ayuden a cumplir metas - las microinteracciones son una funcionalidad y una parte básica del diseño UX. Una microintereacción sucede cuando, al visitar una página web o utilizar una app, el usuario hace clic, desliza o introduce información; esto involucra recibir confirmación de la acción que realizó departe del producto. Una microinteracción es este intercambio entre un usuario y un producto digital o sitio web.

El propósito de las microinteracciones es generar un sentimiento de logro en el usuario así como brindarle una buena retroalimentación y satisfacción tactíl. Como usuarios, esperamos una respuesta cuando hacemos clic, deslizamos o nos desplazamos en una página.

8 microinteracciones en UX

Las microinteracciones marcan la diferencia entre un sitio aburrido e insípido y un sitio excepcional en muchas formas.

Mejoran la navegación de un sitio web brindándole retroalimentación al usuario e informándole dónde se encuentra dentro del sitio. La retroalimentación instantánea y relevante le ayuda al usuario, dejándole saber cuál es el siguiente paso, cómo llegar del punto A al punto B y demás. También recibe confirmación de que su acción ha sido recibida y que la ha completado. Por ejemplo, si no se brinda confirmación luego de una compra, el usuario no estará seguro si logró adquirir lo que deseaba y seguramente se sentirá ansioso.
Las microinteracciones también son una herramienta útil para ayudarle a los usuarios con funcionalidades nuevas. Pueden enseñararle cómo utilizarla y cómo sacar el mejor provecho de la nueva funcionalidad. Estos pequeños tutoriales evitan la confusión y le ayudan al usuario a familiarizarse con elementos nuevos.
Las microinteracciones dirigen la atención de los usuarios. Los botones o pantallas o hasta las animaciones que aparecen le pueden dejar saber al usuario dónde debe buscar o hacer clic para el próximo paso. Estas pequeñas asistencias pueden ser una gran contribución para que el usuario se sienta cómodo con un producto o una página.
Hacen más interesantes las pantallas de carga o de error. La mayoría de las pantallas de carga son aburridas y molestas para los usuarios; las pantallas de error lo són aún más. Crear microinteracciones puede hacer que la pausa mientras se espera sea más agradable y menos dolorosa. Por ejemplo, Punchpass, una app para gimnasios, muestra un gif de tres personas bailando en ropa de ejercicio de la década de 1980 cuando no se puede encontrar una página o hay un error. Este inesperado elemento cómico puede disipar la frustración.
Las interacciones sociales son una gran función de las microinteracciones. Fomentan a los usuarios a compartir el contenido con botones coloridos y llamativos, recordándoles que otras personas quizás quieran tener la misma experiencia. Los botones para dejar un comentario bien colocados hacen que comentar sea más fácil y más atractivo. Los botones de ‘like’ van más allá que un pulgar hacia arriba. Incluyen corazones, caras y otros íconos, diseñados para sean emocionalmente atractivos y, en muchos casos, reemplacen las palabras.
Las microinteracciones ahorran espacio en pantallas pequeñas y habilitan más información al esconder los elementos de acción. Por ejemplo, al revisar el correo desde el inbox de un teléfono, simplemente se debe deslizar hacia la izquierda para eliminar el mensaje, creando un espacio donde ahora es visible el siguiente correo. Pero no existe un botón o espacio extra en la pantalla que le diga al usuario cómo borrar el mensaje. El deslizar ahorra espacio.
En general, las microinteracciones generan una mejor conexión emocional entre el usuario y el sitio. Los usuarios se sienten más en control de su experiencia con la asistencia de las microinteracciones. La retroalimentación rápida, la facilidad de comunicación y las instrucciones que se brindan con estas pequeñas interacciones generan un sentimiento general de logro. La conexión y la asociación placentera con el producto asegurará que el usuario lo vuelva a utilizar en el futuro y se lo recomiende a otras personas.
Las microinteracciones se vuelven cada vez más avanzadas y más fascinantes gracias a las animaciones técnicas y las transiciones de página. Un zoom repentino, una reconfiguración completa de la distribución de la página o la continuación de un hilo a lo largo de un sitio que lleva al usuario de página en página son solamente algunos ejemplos de microinteracciones de primera clase. No obstante, estas transiciones de alto impacto no son intrusivas ni abrumadoras ya que el usuario las ha instigado. De hecho, tienen un efecto positivo ya que generan una mayor conexión entre el usuario y la página.

Los anteriores son solo algunos ejemplos de muchas instancias de microinteracciones. El punto clave es que las microinteracciones contribuyen a que un sitio o producto sea único y deseable. Demuestran un nivel de atención al usuario que no sería el mismo sin estos puntos de contacto. Una perspectiva centrada en el usuario siempre resulta en un buen diseño. Las microinteracciones son poderosas y pueden mejorar la experiencia general de un producto.

Cómo crear microinteracciones

Existen muchas herramientas en el mercado que ayudan a crear microinteracciones emocionantes y creativas, desde herramientas para comentarios hasta navegación de sitio. Si se es familiar con la escritura de código, las siguientes herramientas de animación pueden ser útiles:

Android studio
Móvil o Web: Framer
Web: CSS animation

Algunas opciones simples de arrastrar y soltar:

Principle
Adobe XD
Origami Studio
Protopie

Para animaciones y propósitos más interactivos:

After Effects

Si aprender programas nuevos no es una prioridad, una buena opción es trabajar con un socio experto en UX que brinde desarrolladores e ingenieros especialistas que ayuden a diseñar páginas o productos con el beneficio de microinteracciones. Aquí es donde una compañía estratégica como Encora marca la diferencia.

Puntos Clave

El propósito de las microinteracciones es generar un sentimiento de logro en el usuario así como brindarle buena retroalimentación y satisfacción tactíl.
Las microinteracciones marcan la diferencia entre un sitio aburrido e insípido y un sitio excepcional en muchas formas: mejorando la navegación del sitio, dirigiendo la atención del usuario, brindando pantallas de carga más entretenidas, creando respuestas sociales que resuenan emocionalmente, generando más espacio en la página y más.
Las microinteracciones se vuelven cada vez más avanzadas y más fascinantes gracias a las animaciones técnicas y las transiciones de página.
Las microinteracciones contribuyen a que un sitio o producto sea único y deseable. Demuestran un nivel de atención al usuario que no sería el mismo sin estos puntos de contacto consistentes.
Existen muchas herramientas en el mercado que ayudan a crear microinteracciones emocionantes y creativas, desde herramientas para comentarios hasta navegación de sitio.

Acerca de Encora

Las compañías de rápido crecimiento colaboran con Encora para desarrollar sus productos e impulsar sus negocios.