Los mejores productos realizan dos cosas bien: los detalles y las características. Las características son las que traen gente a tu producto. Los detalles son los que mantienen a esos usuarios, y son los que hacen que tu aplicación sobresalga de la competencia.

Las Microinteracciones es una de las mejores técnicas para recibir retroalimentación.

Todos los caminos se enfocan a un diseño humano y centrado, donde el usuario es el principal foco. Y aunque menudo se consideran un accesorio o un ítem secundario, las microinteracciones en realidad crean un sentimiento de bienestar una vez son descubiertas por el usuario. Como diseñador es importante reconocer la invisibilidad que las microinteracciones son tan importantes como el diseño de las mismas, es necesario crear algo que se sienta “humano” y que cumpla con la tarea asignada.

 

¿Qué son las Microinteracciones en sí?

Como se describió por primera vez en el libro de Dan Saffer “Microinteracciones”, estos pequeños detalles suelen servir para estas funciones esenciales:

  • Retroalimentar el resultado de una acción.
  • Cumplir con una tarea individual.
  • Mejorar la sensación o percepción de la manipulación directa.
  • Ayudar a los usuarios a visualizar los resultados de sus acciones y prevenir errores.

Algunos ejemplos de microinteracciones específicas.

  • La notificación de vibración del teléfono y el cambio del ícono a modo silencio en la pantalla, cuando se coloca el iPhone en silencio.

 

2

  • La interfaz de la animación que muestra la posibilidad de hacer clic (un botón que cambia el color cuando pasa el cursor encima del botón).

Microinteracción

 

Por qué Las Microinteracciones Funcionan

Las microinteracciones funcionan porque recurren al deseo natural del usuario por conocimiento. El usuario conoce al instante que la acción fue aceptada y quiere ser encantado por las recompensas visuales. Igualmente las microinteracciones pueden guiar a los usuarios acerca de cómo funciona un sistema.

 

Identificar Las Oportunidades

Parte de la belleza de las Microinteracciones es que pueden ser insertadas en una variedad de lugares alrededor de cualquier acción potencial. Sin embargo, tienden a surgir en las siguientes áreas:

Mostrar la situación del sistema

El primer principio heurístico de usabilidad de Jakob Nielsen dice: mantenga al usuario informado de lo que ocurre. Y los usuarios esperan recibir respuestas inmediatas, pero hay situaciones cuando la app necesita un tiempo antes de que la acción esté completa.

Por esto la interfaz deberá mantener al usuario bien informado acerca de lo que está ocurriendo.

Microinteracción

O donde el usuario está:

Microinteracción usabilidad

Tip: No dejes que el usuario se aburra, mantenlo informado y muéstrale siempre su progreso (las barras de carga o “Loading” mantiene al usuario y previenen la confusión).

 

Resaltar Cambios

Algunas veces tenemos que mostrar notificaciones para asegurar que el usuario las vea, las animaciones pueden ayudar porque atraen la atención del usuario y no dejan que pase por desapercibido la información que para nosotros es importante.

New incoming message animation

 

Tip: Manten clara la navegación entre las diferentes páginas, para que el que el usuario entienda que ocurrió y de donde salió. La transición entre dos estados visuales debe ser clara, suave y sin esfuerzo.

Mantener en el contexto

Para la navegación en diferentes contextos es necesario el uso de movimientos suaves para explicar los cambios en la pantalla. Estos movimientos son necesarios para dispositivos móviles y relojes inteligentes, ya que el espacio en la pantalla es corto para grandes cantidades de información.

Material Design animation

Tip: Una navegación clara entre páginas logra que el usuario comprenda de donde aparece cada elemento, la transición entre dos estados visuales deben ser claras, suaves y no forzadas.

No olvide unificar el tema para que todas las interacciones se vean y estén unidas.

 

Ingreso de datos

La introducción de datos es uno de los más importantes elementos de una aplicación y las microinteracciones convierten este proceso en algo especial.  Usted puede usar estos elementos existentes para dar la retroalimentación.

 

Tip: Las microinteracciones ayudan a revelar la información y ayudar al usuario a alcanzar su meta.

 

Call to Action

Las microinteracciones tiene el poder de incentivar a los usuarios a interactuar, pueden entregar “empatía” en la experiencia del usuario, pero puedes estar seguro de que las animaciones y que las señales visuales son apropiadas para sus usuarios y no olvides tener en cuenta la longevidad –es posible que la microinteracción se vuelva aburrida o fastidiosa cuando es usada cien veces, o es universalmente clara y discreta?

Click Me animation

Tip: Enfócate en las emociones del usuario ya que forman un gran papel en las interacciones.

 

Cosas para recordar:

*Las microinteracciones actúan como facilitadores para la interacción. Como retroalimentaciones, notificaciones e instrucciones son algunos facilitadores.

*Las microinteracciones deberán salvar tiempo por medio de una comunicación instantánea y en una forma que no aburra o distraiga al usuario. Deberá tomar o acaparar la atención del usuario.

* Conocer a tus usuarios y el contexto detrás de las microinteracciones hará que sean más precisas y eficaces.

*  Las microinteracciones deberán sobrevivir a largo plazo, pero lo que puede ser divertido en un inicio se puede convertir en molesto después del uso.

*Añadir humanidad a la microinteracción y centrarse en la armonía visual creará un movimiento fluído y será una microinteracción con vida.

 

Conclusiones

Diseña con cuidado, a medida que lo haces debes pensar en cómo la gente trabaja y utiliza sus dispositivos y los patrones habituales de pensamiento. Para lograr una exitosa interacción de fácil uso entre el ser humano y la computadora debes prestar atención a cada uno de los detalles. Un gran diseño sucede por un “combo completo” desde la parte funcional hasta las microinteracciones.

Publicado originalmente por Nick Babich en: www.babich.biz

César Guerrero (16 Posts)