En el mundo real, si presionas un interruptor, das un volantazo o le dices a tu pareja que hoy volverás tarde, pasan cosas. Unas las ves venir, otras no tanto. El mundo de los productos digitales también funciona así. En este post vamos a ver la importancia del diseño de interacción, del feedback sobre las acciones del usuario.

 

 

EL CONTACTO VISUAL

Para entender la importancia de mantener el contacto visual, podemos ponernos en la siguiente situación: dejar de mirar una pelota que viene hacia nosotros a gran velocidad. Al cerrar los ojos, lo más normal es desconcertarse. Empiezas a sudar, tu cabeza se llene de inquietudes (cuánto tardará en llegar, dónde podrá darme, etc.) y probablemente tu instinto te sugiera que lo mejor que puedes hacer es salir de ahí.

Cuando navegamos por un producto digital (web o app) que no ofrece feedback, nos encontramos en el mismo caso. Somos incapaces de visualizar lo que está pasando o está por venir.

Sin el correcto tratamiento de la presentación de los elementos, los efectos de hover y la transición entre pantallas, un usuario puede sentirse frustrado o perdido. Y lo peor de todo, posiblemente acabe abandonando la página.

 

Interacción contacto visual - SDOS

No todos los usuarios son como este gatete

 

Por este motivo, es fundamental realizar una maquetación centrada en el usuario. Cuando trabajamos en la maquetación de un producto digital también estamos diseñando. Diseñamos interacción, diseñamos experiencia de usuario.

La manera en la que aparecen y se disponen los elementos en pantalla invita al usuario a seguir un orden de lectura y ayudan a suavizar el impacto de la primera visualización. Además contribuyen a orientar al usuario hacia el contenido que más interese a los objetivos que han motivado la creación del producto.

 

Diseño de interacción - web Aussa - SDOS

Proyecto web – Aussa

 

Otros recursos de interacción son los efectos de hover. Éstos indican al usuario que los elementos que los presentan contienen más información y lo incitan a seguir navegando y/o profundizando en los mismos mediante la acción de clic. También podemos utilizar esta acción, el hover, para anticipar parte de la información que el usuario podrá encontrar a continuación sin obligarlo a abandonar la página o pantalla en la que se encuentra.

 

Diseño interaccion Fraternidad Muprespa - SDOS

Proyecto web – Fraternidad Muprespa

 

En este caso, nos adelantamos a la acción del usuario y le mostramos qué va a encontrar si completa la acción de clic. La filosofía es la misma, ayudar al usuario a tener el control de la situación. De igual forma, tras este clic, una suave transición entre pantallas mantiene el contacto visual del usuario y le ayuda a posicionarse, a saber de dónde viene y dónde está.

 

Diseño de interacción - App Junta al día - SDOS

Proyecto app – Junta al día

 

 

LA PUESTA EN ESCENA

Una buena interacción de usuario ha de tener objetivos simples, claramente definidos, y una duración corta. De nada sirve adorarse con florituras o movimientos que distraigan al usuario. La misión es guiarle progresivamente y hacer que su experiencia de navegación sea lo más sencilla y efectiva posible.

La animación funcional es un tipo de transición sutil que tiene un propósito claro y lógico. Genera fluidez en los movimientos entre pantallas del producto digital en el que estemos navegando.

  • Reduce la carga cognitiva.
  • Previene la “ceguera de cambio” (falta de ubicación o contexto al cambiar de página).
  • Explica los cambios con conexiones visuales.
  • Establece un mejor recuerdo de las relaciones espaciales.
  • Da vida a la interfaz de usuario.

Material design es un claro ejemplo de cómo ha de completarse una transición tras la acción un usuario.

Interaccion material design - SDOS

Transiciones en Material Design

 

En el anterior ejemplo observamos cómo la animación, de forma simple y efectiva, permite mantener el contacto visual con el elemento pulsado.

En definitiva, animadas o no, las transiciones son elementos:

  • Facilitan al usuario el entendimiento y la fluidez en la navegación.
  • Aumentan la usabilidad.
  • Crean las expectativas necesarias aportando pistas de lo que va a suceder a continuación.
  • Ayudan a los usuarios a orientarse.
  • Identifican los elementos de la pantalla con los que los usuarios pueden y deben interactuar.

 

 

ANÁLISIS, ACCIÓN, INTERACCIÓN

El diseño de la interacción normalmente tiene lugar en los procesos de conceptualización y diseño UX/UI.

Cada proyecto digital es un nuevo reto y, por tanto, cada uno debe enfocarse de una forma independiente y personalizada. Sin embargo, todos deberían mantener la filosofía de estar centrados en el usuario final.

Por ello, es importante estudiar las diferentes tipologías de los contenidos existentes en el portal o aplicación. Intentaremos analizar su relevancia que tienen para el usuario. Sólo así podremos comenzar a hablar de un producto de calidad.