Micro-interacciones en el Diseño Web

Desarrollo web

Micro-interacciones en el Diseño Web

Desarrollo web

El mundo del diseño de páginas web cambia constantemente y muchas veces esos cambios se ven reflejados en mayor o menor medida en el proceso de creación de las páginas. En esta oportunidad hablaremos sobre las Micro-interacciones en el mundo web.

Suena más complicado de lo que realmente es. Sin darnos cuenta hacemos micro-interacciones web todos los días con los artefactos que utilizamos. Cuando cambiamos el modo de nuestro dispositivo móvil de silencioso a normal y hace esa pequeña vibración que nos hace entender que se ha realizado una acción, o cuando hacemos scroll hacia abajo para volver a cargar una página web que estamos revisando o el feed de noticias en twitter o instagram cuando estamos navegando en estas redes sociales. Todas son micro-interacciones

Aunque podrían parecer poco visibles o importantes, sí lo son. Están presentes en nuestra psique, nos permiten saber que la acción que acaba de terminar realmente tuvo un efecto. Por eso, las micro-interacciones bien hechas pueden mejorar enormemente la experiencia del usuario.

Aquí empezamos a ver algunos ejemplos de Micro-interacciones Web.

Microinteracciones Web Ejemplos

Microinteracción de Subir y Bajar volumen

Microinteracción de Botón Mute

Microinteracción de Lavado de manos automático

La Estructura de las Micro-interacciones en el diseño de páginas web

Como podéis ver en la imagen, las micro-interacciones web se caracterizan por cumplir 4 pasos vitales para que sean buenas interacciones de cara al usuario del sitio.

Estas son:

Un trigger o disparador inicia la micro-interacción: Esta puede ser un click que hace el usuario, apretar un botón específico o hacer clic en un icono. Se suele utilizar mucho cada vez que se ha completado una acción. Por ejemplo, el sonido que se escucha cuando ponemos nuestro móvil en silencio. Cuando se emite el sonido ya sabemos que la regla se ha cumplico, lo que nos lleva al punto 2.
Una regla determina lo que debe suceder cuando suceda esa petición. Estas reglas están incluidas en el código de la propia interacciónpara advertirle al usuario lo que puede y no puede hacer. Luego pasamos al tercer paso que es el feedback.
El feedback o de retorno le permite saber a la persona que la acción que está esperando se ha realizado correctamente. Sin el feedback, no vas a saber lo que estaba ocurriendo. Si cambias tu teléfono en modo silencioso y no vibra, sabes que algo no está funcionando bien.
Por último los bucles definen el tiempo que una micro-interacción continuará, al igual que el ciclo del icono de carga. Las flechas definen una acción poco común fundamental para la continuación del proceso, como la introducción de datos geográficos para encontrar el clima local.