Microinteracciones, ¿Cómo influyen en la UX?

La Experiencia de Usuario en las plataformas digitales ya es un tema primordial; los usuarios pasaron a ser el centro de todo lo que se investiga, analiza y crea. Los diferentes dispositivos que hoy en día están a la mano nos ofrecen un abanico de oportunidades para mejorar la comunicación hacia el usuario, ayudándonos a que ésta sea efectiva y satisfactoria.

Las microinteracciones en el mundo digital siempre me han llamado la atención, la animación en las interfaces y la experiencia de usuario, actualmente formo parte del equipo de experiencia en 2Brains Chile y he tenido la oportunidad de trabajar en Bci Innovación siendo parte del equipo de diseño de la app móvil del banco, en este lugar me ha tocado trabajar diseñando algunas alternativas de este recurso en diferentes flujos de navegación, de forma orgánica y espontánea, lo que me ha llevado a profundizar todas sus aristas que la relacionan y actores que la involucran, en este artículo, les comentaré sobre las Microinteracciones y cómo influyen en la experiencia de usuario y haré un próximo artículo donde hablaré del concepto Motion Design y el desafío de incluirlo en el flujo de trabajo.

A lo largo del tiempo, investigando y a la vez poniendo en práctica el aprendizaje, me he dado cuenta que las microinteracciones (bien aplicadas) pueden ayudar a mejorar la satisfacción del usuario y, por ende, mejorar la experiencia de éste con los productos digitales que creamos, pero antes de sacar cualquier conclusión debemos saber de dónde viene este recurso utilizado por la tecnología, definiciones y acepciones de algunos importantes referentes.

El 2013 Dan Saffer escribió el libro llamado, “Microinteractions, designing with details”, en él analiza cuáles son los elementos básicos que componen una microinteracción y los divide en cuatro:

TRIGGER — RULES — FEEDBACK — CICLES & MODES

Simbología del libro “Microinteractions” de Dan Saffer, de izquierda a derecha trigger, rules, feedback y cicles & modes

En este libro Dan Saffer define las microinteracciones como: “Momentos contenidos del producto que giran en torno a un solo caso de uso.”

EJEMPLOS*

1. El Trigger (Disparador o accionador) define qué elemento o acción va a poner en marcha la microinteracción, esta puede ser accionada por el usuario o por el sistema. Uno de los más famosos disparadores es el famoso “Me gusta” de Facebook.

La famosa reacción es un disparador accionado por el usuario que genera un feedback interpretando emociones u opiniones.

2. La Regla (Rules) define las variantes que deben suceder para que la microinteracción se accione. La regla generalmente no se visualiza al usuario, en un formulario por ejemplo las reglas son las que se definen cuales son los elementos básicos de llenado para este sea completado de forma correcta. Por ejemplo, en el input de contraseña, la regla sería introducir la password correcta.

3. EL Feedback es la respuesta que el usuario ve cuándo es accionado el disparador, aunque puede llegar a ser imperceptible es lo que se acciona como respuesta a algo. En el formulario sería la respuesta de llenado correcto o incorrecto antes o después de ser enviado.

En este formulario la validación de la contraseña es la regla. El error del input en rojo y el check positivo el feedback.

4. El Ciclo define la duración de la microinteracción. Mientras que el Modo nos indica si esto hará que cambie el modo de visualización o seguirá en la misma dinámica anterior.

En este libro el mismo Donald Norman las define como: “detalles que marcan la diferencia entre una experiencia amigable y la ansiedad traumática.” Dando la importancia y relevancia que merece este recurso.

Estas definiciones permitieron tener un orden de lo que se estaba hablando en tecnología, un recurso animado que se incorporaba al mundo digital casi de manera orgánica, pero ¿de dónde vienen las animaciones en el mundo digital?, bueno si nos ponemos a investigar sobre animación y cómo esta se coló en el mundo de la tecnología, debemos remontarnos a 1981.

En 1981 Ollie Johnston y Frank Thomas, escribieron “Disney animation: The illusion of life” sentando las bases de la animación con 12 principios basados en la vida real para animar dibujos. Con esto estoy diciendo que ¿las animaciones que encontramos en app móviles, en redes sociales y sitios web están basados en estos principios?, la respuesta es sí, o al menos debiera ser así, ya que la mayoría de los principios relatados en este libro aplican a la naturalidad y parecido a la realidad que debieran tener los movimientos en pantallas para que estos se perciban de manera natural y por ende positiva en los usuarios.

Los 12 principios de la animación según “The illusion of life” son:

Compresión y extensión — Acción continuada y superposición — Entradas y salidas lentas — Arcos — Anticipación — Puesta en escena — Acción continuada — Acción secundaria — Exageración — Animación directa y pose a pose — solidez — Timing.

Esta botón representa uno de los principios de la animación, “Compresión y extensión”, su comportamiento a la interacción del usuario da la sensación de volumen y masa real.

Hay que tener claro que quizás no todos los principios aplican al pie de la letra en el diseño de interfaz, ya que fueron creados en otro momento y para el diseño de dibujos animados no para diseño de animaciones en dispositivos digitales interactivos, dejo un artículo de referencia que los desglosa a fondo.

El 2016 Issara Willenskomer, fundador y director creativo de UX in Motion , analizó estos principios pero desde la perspectiva de la experiencia de usuario y generó un Manifiesto de UX in motion, dando énfasis a que no sólo podían ser un recurso decorativo y funcional, si no que totalmente intencionado podía reafirmar el contenido verbal y visual mostrado en los dispositivos digitales, favoreciendo la experiencia.

Cuando se hacen entradas animadas de elementos, al disociar sus velocidades de ingreso, ya hace que el usuario reconozca con el movimiento componentes diferentes, ejemplo una foto y un texto de bajada antes de que los reconozca como tal.

Por otra parte existen artículos que relacionan las microinteracciones con los Principios de usabilidad de Jakob Nielsen, afirmando que favorecen la usabilidad mostrando ejemplos de animaciones con algunos de estos principios.

A través de la transformación de un elemento se puede mantener en contexto al usuario todo el tiempo, poniendo en práctica el principio de usabilidad “visbilidad del estado del sistema” y al mismo tiempo continuidad de la acción.

En este artículo he tratado de resumir algunas variables de la animación en las interfaces que he recopilado pero falta lo más importante y es ¿Cómo influyen en la experiencia de los usuarios las Microinteracciones o animaciones?

A continuación, enumero sus ventajas, siempre y cuando sean bien aplicadas:

1. Hacen que la experiencia del usuario sea mucho más gratificante.

• Al mostrar un movimiento intencionado por quien diseña la experiencia, pero no esperado por el usuario podemos llegar a sorprenderlo.

2. Dirigen la atención de los usuarios.

• El movimiento, si lo usamos a favor, puede ser un excelente llamado de atención al usuario, si lo mal usamos puede ser también un muy buen distractor de flujos importantes, (importante recordar esto).

3. Usan un lenguaje universal para transmitir emociones.

• El movimiento es un lenguaje universal y puede llegar a transmitir emociones y conmover a los usuarios.

4. Bajan la carga cognitiva.

• En flujos complicados, las microinteracciones pueden ayudar a jerarquizar de mejor manera, ejemplo; transformando el botón en la misma carga del archivo por ejemplo, o que la transición sea pausada o acelerada según la intención que tengamos, los tiempos son clave.

5. Animan a compartir y comentar tu contenido.

• Si hay algo llamativo es una animación o microinteracción, si está bien lograda llamará al usuario a compartirla, comentarla o a volver a usar tu interfaz.

Debemos tener en cuenta que el principal objetivo de dirigirnos al usuario es comunicar algo, y el movimiento es parte de la comunicación no verbal, comunicación kinestésica, que tiene que ver con la comunicación del movimiento, gestual y apela a la necesidad del ser humano de interactuar tocando y obteniendo resultados de esa experiencia táctil. Lo importante es saber que como complemento a la comunicación textual o visual estática, colores, formas, iconografía, etc. Tenemos el plus del movimiento disponible y podemos usarlo intencionadamente cuando deseemos.

Por último y para cerrar este largo escrito, los nuevos dispositivos como los smartwatch disponibilizan pequeños espacios de visualización de pantalla, y recurren mucho a las microinteracciones o el motion design, término más actual para referirse a las animación en la interfaz, para resolver con animaciones lo que no puede extenderse demasiado, de forma sutil, cuidando las dimensiones disponibles. Todo indica que este recurso será cada vez más importante, siempre ha tenido un lugar en la tecnología, desde el clásico cursor pestañeando disponible para comenzar a escribir, hasta la animación al hablar de Siri, este hermoso recurso estuvo, está y estará disponible para que lo utilicemos a nuestro favor y lo debemos tener en cuenta en nuestro flujo de trabajo, obvio siempre y cuando favorezca la UX.

Animación de cursor al escribir patentado por Charles A Kiesling en 1967.

Espero les haya gustado el artículo y les anime a experimentar en el mundo de las animaciones de interfaz poniendo el foco el la experiencia de usuario. Recibo toda clase feedback, recomendaciones de libros del tema, exponentes, sugerencias, etc. También espero seguir aprendiendo e ir intercambiando conocimiento. Queden atentos al artículo que trata sobre las animaciones en el flujo de trabajo, ¡gracias por leer!