No basta que un producto o sistema digital funcionen, el diseño de la experiencia de usuario se nota en los detalles. Las microinteracciones son la diferencia entre un producto ordinario y uno extraordinario.

Una microinteracción se define como un momento autocontenido de un producto que se desarrolla alrededor de un caso de uso específico. Es un detalle funcional e interactivo de un producto.

Microinteracción en un FAB

Las microinteracciones difieren de las funcionalidades (features) de un sistema en tamaño y alcance. Las microinteracciones son práctica o literalmente invisibles, y pocas veces son la razón para comprar de un producto.

A pesar de su tamaño y poca visibilidad, son increíblemente importantes en el diseño de la experiencia de usuario. Una de las microinteracciones más famosas y utilizadas, por ejemplo, son las funciones de Copiar y/o Pegar, diseñadas por Larry Tesler en 1971 y que se utilizan en muchísimos sistemas y apps.

Ejemplos de microinteracciones en un formulario de registro. Crédito: Hijin Nam para Upwork

Si las microinteracciones son pobres, no importa que tan bien estén hechas las funcionalidades principales, estarán rodeadas de frustración y molestia.

«Las microinteracciones están a nuestro alrededor. Son un caso de uso
único que hace una sola cosa. La diferencia entre un producto que amamos y un producto que sólo toleramos son a menudo las microinteracciones que tenemos con él.»

Donald Norman

Las microinteracciones se utilizan para:

  • Lograr una sola tarea,
  • Conectar dispositivos o servicios,
  • Interactuar con un único dato,
  • Controlar un proceso en ejecución,
  • Ajustar una configuración,
  • Ver o crear contenido puntual,
  • Activar o desactivar una función.

Estructura de una micro interacción

Hay tres formas de integrar micro interacciones en un sistema:

  1. Identificarlas y darles un tratamiento individual.
  2. Reducir una funcionalidad a una micro interacción clave.
  3. Tratar cada funcionalidad como una serie de microinteracciones encadenadas.

Dave Saffer explica en su libro Microinteractions que para el diseño de una micro-interacción se definen cuatro componentes de la misma:


Estructura de una micro-interacción. Crédito: Dan Saffer

1. Disparadores

Un disparador (trigger) es cualquier evento o control que activa una micro-interacción. Puede ser un control, un icono, un formulario, un comando de voz o un gesto en una superficie táctil, y puede ser visible, invisible o un componente del sistema que se activa en ciertas condiciones. El disparador de una microinteracción debe verse como algo que el usuario entiende que es un disparador y siempre debe iniciar la misma acción cada vez que se utilice.

2. Reglas

Las reglas (rules) determinan el comportamiento de la microinteracción. Hay que recordar que las reglas no siempre van a ser obvias para el usuario, y éstas se le revelan de dos maneras: por lo que puede hacer y por lo que no puede.

Las reglas de una microinteracción afectan la experiencia de usuario al determinar qué pasa y en qué orden y sin no son claras pueden convertirse en fricción para el usuario. Se recomienda utilizar diagramas de flujo para diseñarlas.

3. Retroalimentación

El propósito de la retroalimentación (feedback) en una microinteracción es ayudar al usuario a entender sus reglas. La retroalimentación no explica las reglas pero debería ser un apoyo para que el usuario construya un modelo mental sobre el funcionamiento del producto que está usando.

El principio de la usabilidad para retroalimentación es que menos es más: no hay que saturar al usuario con información.

La animación es una excelente manera de dar retroalimentación al usuario. Chet Hasse y Romain Guy del equipo de diseño de Android definieron las características para el diseño de animaciones en interfaces visuales. Estas deberían ser:

  • Rápidas: entre 0.01 y 0.5 segundos.
  • Orgánicas: el movimiento torpe o cortado hacen que la micro-interacción se siente rota.
  • Natural: debería seguir las leyes naturales de gravedad e inercia.
  • Simple: debe tener un sentido y un propósito.
  • Intencional: no debe ser un adorno.

4. Ciclos y modos

Los ciclos y modos (loops & modes) controlan el meta-comportamiento de la micro interacción y determinan la duración de las microinteracciones también si el usuario necesitará repetirlo o cambiarlo con el tiempo. En microinteracciones hay cuatro estilos de ciclos: ciclos controlados (for-loop), ciclos condicionales (while-loop), ciclos basados en colecciones y ciclos infinitos.

Las microinteracciones se han vuelto elementos clave en el diseño de interactivo y de experiencia de usuario para dar claridad a las funcionalidades y hacerlas agradables y memorables.

Publicado por Mauricio Angulo S.

Mauricio es diseñador de experiencia de usuario desde el año 2004. Es front-end developer, sprintmaster y entusiasta de AI. Es mentor en el programa Google for Startups y parte de la iniciativa de Microsoft Regional Director como mentor para corporativos y startups en diseño de experiencia de usuario, usabilidad y desarrollo de software. Es co-fundador de UX Nights. También es escritor, ponente internacional y profesor.