Miguel Peribáñez | Diseñador y Consultor UX

Miguel Peribáñez - Diseñador y Consultor UX

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

Sabiendo que “juzgamos un libro por su portada”, los diseñadores inteligentes crean interfaces prácticas y fáciles de recordar. Los usuarios potenciales pueden “engancharse” pero… ¿Cómo les guías hasta el fondo?

Tratando de contestar esta pregunta, todos los caminos llevan al enfoque de diseño centrado en los humanos, donde el usuario es el foco principal. Se humano: tu aplicación debe hablar el mismo lenguaje que usamos a diario, incluyendo emociones, expresiones coloquiales, y con un punto de humor. Una interfaz debe ser un buen amigo, dispuesto a darte consejo y dispuesto a guiar tu experiencia y hacerte sentir a gusto.

Ahora es cuando las micro-interacciones entran en escena. Para ser más precisos, se trata de animaciones interactivas que se añaden a la interfaz para que sea más atractiva. Una buena animación puede:

– Comunicar el estatus y dar feedback

– Mejorar el sentido de manipulación directa.

– Ayudar a los usuarios a visualizar el resultado de sus acciones.

En UX, lo que importa es cómo tratas con los usuarios y cómo ellos se sienten cuando usan el producto. Incluso los detalles menores requieren  una cuidadosa atención. Las micro-interacciones proveen a los usuarios la respuesta que necesitan y el entendimiento del proceso que se está llevando acabo, haciendo que la interfaz sea accesible sin importar lo complicada que sea la lógica que hay detrás.

 

1) MUESTRA EL ESTADO DEL SISTEMA

El primer principio heurístico de usabilidad por Jakob Nielsen dice: mantén a tu usuario informado de lo que está pasando. Los usuarios esperan tener una respuesta inmediata, pero hay situaciones en las que los sitios necesitan algo de tiempo antes de que se complete la acción.

Así que la interfaz debe mantener al usuario informado de lo que está pasando mostrando un gráfico en el fondo, midiendo el bitrate, o emitiendo un sonido. El mismo principio se aplica a la transferencia de archivos: no dejes que tu usuario se aburra, enséñale el progreso. Incluso una no tan agradable notificación cuando la transferencia falla se debe mostrar de una forma bonita. ¡Haz que tu usuario sonría!

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

2) RESALTA LOS CAMBIOS

Muchas veces, para ganar espacio, una aplicación simplemente reemplaza un botón con otro cuando es necesario. A veces necesitamos mostrar notificaciones para asegurarnos de que el usuario se da cuenta. La animación puede atraer su atención y harás que los usuarios se den cuenta de lo que crees que es importante.

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

3) MANTÉN EL CONTEXTO

En la era de los smartphones y smart watches con pantallas pequeñas, puede ser complicado meter un montón de información en una pantalla. Una forma de hacerlo es mantener una colara navegación entre diferentes páginas; de manera que el usuario entienda qué aparece y de dónde aparece, y sea capaz de navegar hacia atrás de forma sencilla.

Hay muchas opciones para esto:

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

4) DISEÑOS NO ESTANDAR

Continuando con los ejemplo anteriores, las micro-interacciones pueden ayudar a los usuarios a entender cómo interactuar con diseños inusuales sin confusión. Fotos que se voltean, gráficos de scroll, y caracteres que roban son buenas opciones:

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

5) CALLS TO ACTION

Además de ayudar al usuario a interactuar de forma efectiva con una aplicación, las micro-interacciones deben tener el poder de alentarles a que lo hagan: que sigan navegando, que pulsen “me gusta”, que compartan el contenido, simplemente porque les atrae y no quieren dejar la aplicación.

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

6) VISUALIZAR LA ENTRADA

La introducción de datos es uno de los elementos más importantes de una aplicación. La calidad de los resultados que los usuarios reciben dependen de la introducción de datos. Por norma, es bastan es bastante aburrido, pero las micro-interacciones pueden convertir esto en algo especial:

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7) HAZ QUE LOS TUTORIALES TOMEN VIDA

Y por supuesto, las animaciones pueden ayudar a enseñar a los usuarios después del lanzamiento de una aplicación resaltando las características y controles básicos para que puedan usarla al momento.

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

7 SECRETOS PARA MEJORAR EL UX CON MICRO-INTERACCIONES

CONCLUSIONES

Si te preocupas por la experiencia del usuario, pulir tu interfaz de arriba a abajo añadiendo micro-interacciones y animaciones dará mucha vida a tu proyecto.

La atención a cada uno de los pequeños detalles es la clave del éxito a la hora de hacer que la interacción humano-máquina sea fácil.

:)