Las micro-interacciones en el diseño de páginas web

El diseño de páginas web se actualiza cada día, más nos vale mantenernos al tanto sobre qué hay de nuevo. Un elemento de diseño que siempre estuvo allí pero que se ha tomado un nuevo auge para optimizar la experiencia del usuario son las micro-interacciones.

Útiles para varias plataformas digitales pero mucho más comunes en aplicaciones webs, móviles y Redes Sociales.

¿Qué son las micro-interacciones?

micro interacciones diseno paginas web 2

Vemos microinteracciones todos los días. Cuando cambiamos nuestro Smartphone de modo silencioso a normal, y hace esa pequeña vibración, o cuando hacemos scroll hacia abajo para volver a cargar una página y el símbolo de carga aparece en la parte superior, e incluso al abrir un grifo usando un sensor. 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.

Los cuatro pilares del diseño de micro-interacciones

Hay cuatro componentes principales en un micro-interacción: disparador, feedback, bucles y flechas. Una micro-interacción bien elaborada abarcará todos estos conceptos:

El disparador es lo que inicia el proceso de micro-interacción. Un disparador puede ser una acción manual, como apretar un botón o hacer clic en un ícono. También puede estar incorporado cada vez que se ha completado una acción. Por ejemplo, el sonido que se oye cuando se recibe un mensaje de texto es el resultado de un disparo del sistema. Cuando se activa el disparo, se integra con la normativa de la interacción. Las reglas están programadas en la micro-interacción en sí misma, para advertirle al usuario lo que puede y no puede hacer. Dado que estas reglas no son evidentes para el usuario, requiere ser informado a través del Feedback.
Con el feedback sabemos que la interacción de los disparadores están funcionando. Por ejemplo, la vibración que emite el teléfono cuando le quitamos el silencio. 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.
Bucles y flechas son la etapa final de la micro-interacción. 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.

micro interacciones diseno paginas web 1

Tips para diseñar micro-interacciones

Las microinteracciones están basadas en el comportamiento humano. Los feedbacks de las micro-interacciones están diseñadas para ser intuitivas y fáciles de entender. Los usuarios no tienen que pensar en los feedbacks, ya que, naturalmente, se ha iniciado y confirma la interacción. Es algo importante a recordar a la hora de diseñar microinteracciones.

micro interacciones diseno paginas web

Siempre debes conocer al usuario final o la plataforma antes de empezar. Esto le permite hacer la experiencia más familiar y más humana.
Asegúrate de que las acciones realizadas durante el proceso de micro-interacción no rompen inadvertidamente la interacción. Necesitamos tener en cuenta el error humano al momento del uso de la aplicación o página web que estemos diseñando.
Evita el desorden. Utiliza las posibilidades de la plataforma en lugar de añadir nuevos elementos. Por ejemplo, el cursor, una línea, un botón y una barra de desplazamiento pueden ser programados para reflejar los comentarios de la micro-interacción. Esto concuerda con otras mejoras prácticas de diseño web.
Hablar con los usuarios en su idioma. Esto se relaciona de nuevo con el elemento humano. Si tu micro-interacción desencadena el texto, usa un lenguaje que la gente pueda entender fácilmente a menos que sea un público especializado.
Garantiza que las microinteracciones puedan soportar la prueba del tiempo. No hay nada peor que un micro-interacción que sea molesta al usuario. Mantente alejado de cualquier cosa que se sienta demasiado efectista.
La animación puede hacer de las microinteracciones elementos más divertidos cuando se usan con moderación. La clave es asegurarse de que la micro-interacción no abrume las otras acciones – por ejemplo, cuando se desea eliminar una aplicación en tu iPhone y todos los iconos empiecen a moverse lateralmente. Es una animación adorable (casi como si estuvieran temblando de miedo de eliminación), pero no impide la funcionalidad.
La teoría del color es importante en el diseño web y diseño de micro-interacciones. El contraste puede funcionar para poner de relieve un proceso o acción específica, que puede convertirse fácilmente en una distracción. Asegúrate de que los colores en tu diseño engranan con los de los microinteracciones. Recuerda, la micro-interacción es sólo una pequeña pieza en la imagen del diseño; todo debe ser coherente.
Por último, determinar si y cómo la interacción evolucionará en el futuro. ¿Tiene sentido que cambie con el tiempo o que permanezca igual?

micro interacciones diseno paginas web 3

Esperamos que estos tips te hayan sido útiles para conocer un poco más sobre qué son las micro-interacciones y cómo trabajarlas en tu estrategia de diseño de páginas web. En Staff Creativa siempre estamos investigando sobre nuevos temas de diseño web, y llevamos a cabo proyectos que nos encantan, te invitamos a conocerlos.

Traducido y adaptado de Speckyboy. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.