Las siglas UX/UI hacen referencia a la experiencia de usuario (UX) y al aspecto o interfaz de una web (UI). Lo de web por el tema que nos ocupa, aunque la experiencia de usuario se aplica en otros muchos campos del diseño. 

Imagina que vas a sacarte un billete de metro. La interfaz de usuario (UI) es el cascarón de la máquina, el tamaño y posición de los botones, de las ranuras, los colores y la disposición de elementos en la pantalla… Mientras que la experiencia de usuario (UX) comprende todo lo que le sucede al usuario delante de la máquina antes, durante y después de la interacción entre ambos.

En este post vamos a hacer una introducción a la experiencia de usuario, aunque el título no es un engaño. Simplemente en una web la experiencia de usuario está íntimamente ligada al diseño de la interfaz.

La experiencia de usuario busca una relación nutritiva y satisfactoria entre las personas y la tecnología. Analiza desde varias perspectivas cómo hacer más agradable, sencillo, intuitivo y funcional el uso de un objeto, aplicación, web, producto, servicio, etc.

No se ajusta a reglas rígidas, sino que varía en función de tres variables principalmente: 

  1. Usuarios
  2. Contenido
  3. Contexto

Algunos conceptos UX

Usabilidad: facilidad de uso de una aplicación o servicio.

Accesibilidad: medida del alcance de uso que puede tener una aplicación o servicio, independientemente de las limitaciones del usuario.

Arquitectura de información: organización del contenido en una web de forma que se facilita su acceso y consulta.

Diseño de interacción: se refiere a los flujos dentro de la aplicación… o sea, qué opciones tiene en cada punto el usuario, y cómo responde la aplicación en cada selección por parte del mismo.

 

Fases UX

Se puede agrupar el proceso de la experiencia de usuario en cuatro grandes bloques, que iteran de forma que se van aplicando correcciones y mejoras en función de los resultados obtenidos en cada ciclo: 

 

Investigación

Esta primera fase es de crucial importancia. Para realizar un diseño centrado en el usuario, necesitamos ponernos en la piel de las personas que van a usar nuestro producto. Para ello se define y describe en detalle este grupo definido de potenciales usuarios dentro del perfil conceptual de user persona.

Entendiendo las necesidades, deseos, objetivos, expectativas, emociones y sentimientos de nuestro user persona podremos moldear nuestra aplicación de forma que cubra dichos requerimientos.

Cuanto más empatizamos con el user persona, su comportamiento y motivaciones, más se reduce la brecha entre diseño y usuario final.  

 

Diseño: wireframes, prototipos, mockups

Con los datos obtenidos en la fase anterior, podemos empezar a montar el diseño.
 
Los wireframes son diseños de baja fidelidad, habitualmente se presentan los contenedores y estructura sin color, en escala de grises, incluso simples dibujos a mano.
 
En el medio están los mockups, de media/alta fidelidad, pero sin interactividad. Incluyen colores, tipografías, sombras, y un diseño cercano al producto final.
 
Los prototipos son de media/alta fidelidad y además simulan la interacción de la interfaz, por ejemplo, en cuanto a la navegación o las respuestas a determinadas acciones, como un login o un clic, mensajes de confirmación, etc.
 

Testing

Es el turno de poner a prueba nuestros diseños, para obtener feedback de los usuarios. Para ello debemos contar con voluntarios a los que se puede dar a probar un prototipo, y observar o grabar su interacción y/o hacerle una serie de preguntas para conocer cómo ha sido su experiencia.
 
Gracias a las características del producto digital, las pruebas pueden ser presenciales o en remoto, aunque las presenciales aportan más información.
 
Con los datos obtenidos se puede volver a la fase anterior las veces que sean necesarias para ajustar los diseños y volver a testear de nuevo.
 

Implementación

 Finalmente pasamos a la fase productiva, pero para nada se ha acabado el proceso de experiencia de usuario. Hemos realizado algunos ciclos de ajustes antes de llegar aquí aunque ahora toca medir en vivo la respuesta que genera el producto, para seguir con una mejora continua que vaya limando las asperezas que aún existen.

 

El mejor enfoque es lanzar un producto mínimo viable y aprovechar los datos y mediciones del entorno real para ir ajustando nuestra web.

Técnicas UX

Bajando ya al terreno práctico, vamos a describir brevemente algunas de las técnicas que pueden usarse en las pruebas para obtener información respecto a la experiencia de usuario: 

  •  Test A/B: se trata de crear y mostrar a los usuarios diferentes versiones de una misma página, para medir cómo es el comportamiento en cada caso, permitiéndonos seleccionar la mejor opción. Ejemplos típicos de estos test incluyen el cambiar entre versiones el color de un botón o la posición, tamaño o contenido de ciertos elementos de la web.
  • Mapas de calor:  monitorizan como si de un mapa de Meteosat se tratara, las zonas de tu web donde los usuarios centran su atención, hasta dónde hacen scroll, dónde están los puntos calientes para colocar llamadas de atención, etc.
  • Test guiados: dando a nuestros voluntarios una pequeña guía inicial de lo que han de hacer en nuestra web, los ponemos delante de la pantalla… observamos el tiempo que tardan, las dificultades o dudas que pueden tener y los sometemos a un cuestionario posterior.
  • Análisis de tendencias: o analizar la competencia de toda la vida.
  • Flujogramas: un básico en cualquier proceso, identifica las posibilidades de interacción desde que entramos en la web y las distintas alternativas en cada nodo creando un árbol de decisión de la navegación en la página.

Conclusión

La experiencia de usuario (UX) se encarga de hacer fluida la interacción entre la tecnología y las personas. El diseño de la interfaz de usuario (UI) juega un papel determinante al ser el punto de encuentro entre los dos. 

El concepto de usabilidad no sólo hace referencia a una utilidad operativa y pragmática, añade un componente emocional intangible, que atrae y fideliza usuarios, genera ingresos y marca la línea entre éxito o fracaso, conversión o rebote.

Somos un +1 en el aprendizaje y la adopción de la experiencia de usuario. Gracias por leernos.