UX vs UI: Aclarando conceptos y diferencias

UX vs UI o User Experience vs User Interface, presentados de esta manera parecen rivales que compiten en el ring del Diseño de experiencia de usuario, sin embargo, son opuestos que se complementan y ninguno puede existir sin la presencia del otro. Dos caras de una misma moneda en la estructura del proceso de diseño de productos y servicios digitales.

¿Pero qué significan estos acrónimos que han venido para quedarse? A continuación, se detallan no solo los conceptos, sino también, las diferencias, formación, habilidades necesarias, y lo que ofrece actualmente el mercado laboral para todos aquellos que quieran desarrollarse en estas disciplinas.

Experiencia de Usuario (UX)

Experiencia de usuario es la traducción de User eXperience (UX), una disciplina que se ocupa de investigar, identificar y presentar posibles soluciones a los problemas que presentan los usuarios. Su objetivo principal es satisfacer sus necesidades y deseos sin impedimentos ni frustraciones.

Peter Morville, pionero en arquitectura de la información y experiencia del usuario, creó el famoso diagrama User Experience Honeycomb con los 7 elementos fundamentales que se deben considerar en el diseño de productos y servicios digitales. Dichos elementos deben ser: útiles, usables, deseables, encontrables, valiosos, accesibles y creíbles.

En UX se abordan preguntas como: ¿Qué intenta hacer el usuario en la pantalla? ¿Qué frustraciones presenta al completar la tarea? ¿A quién va dirigido el producto? ¿Desde qué dispositivo accede el usuario? ¿Qué necesidades necesita cubrir? ¿Cuáles son sus deseos?

No sólo son interrogantes en UX, la experiencia de usuario también se basa en el análisis de datos cualitativos y cuantitativos:

Los datos cualitativos son aquellos relacionados con la calidad y las percepciones de los usuarios. Este tipo de análisis utiliza el concepto Service Desig_n o Diseño de Servicios, una rama del _Diseño centrado en las Personas, que se encarga de comprender las necesidades que tienen los usuarios y ofrecerles la mejor experiencia a nivel físico, psicológico, emocional, social y cultural, es decir, diseño con visión holística del usuario.

Una de las herramientas más utilizadas para este tipo de análisis son los arquetipos, representación de diferentes características, motivaciones, objetivos y patrones de comportamiento de las personas.

Los datos cuantitativos son aquellos basados en las analíticas de un sitio, es decir, el análisis de sus datos. Una herramienta muy utilizada es el heatmap o mapa de calor, una representación gráfica que permite recolectar información del comportamiento de los usuarios durante la navegación dentro de una página web o aplicación.

Heatmap utiliza escalas de color para analizar diversos tipos de información: recorridos del mouse en la web, zona de la página con mayor cantidad de clics, tiempo de lectura de un artículo o abandono de una página.

Sin embargo, la información arrojada debe ser chequeada de manera constante y estar sujeta a continua iteración, tanto de los datos cuantitativos como cualitativos, para no caer en los cognitive bias o sesgos cognitivos, una forma sistemática y no aleatoria en la que el contexto afecta el juicio y la toma de decisiones. Este tipo de sesgo enmarca la información y la centra en diversos aspectos en función del entorno: “Enmarcar la misma información de manera diferente, puede conducir a resultados diferentes.”

Cabe destacar que, muchos profesionales basados en su experiencia, consideran tener la mejor solución para determinado problema. Esto no es así, ya que los usuarios pueden cometer los errores más absurdos y no es responsabilidad de ellos, sino de los encargados de que tales errores no sucedan.

¿Cómo se pueden evitar dichos errores? Lo importante es adelantarse a ellos mediante diferentes testeos. Uno de los más utilizados es el Test A/B, una comparación de dos versiones de una misma página dentro de un sitio web o aplicación, para saber cuáles de las versiones planteadas mejora el objetivo que se está persiguiendo. Esto se logra a través de un análisis exhaustivo de las piezas.

Otro de los más conocidos es el Test de usabilidad, un análisis de los usuarios mediante pantallas o cámaras ocultas, cuyos datos determinan dónde se están cometiendo errores y detectar posibles pain points o puntos de dolor, problemas puntuales que padecen los usuarios durante la navegación en una página web o aplicación.

El artículo Qué es UX o User Experience
publicado anteriormente en este blog, desarrolla en profundidad todo lo relacionado al Diseño de Experiencia de usuario.

Diseño de Interfaces (UI)

El Diseño de Interfaz o User Interface (UI) se ocupa de la interacción del usuario con un producto o servicio determinado. Recibe de UX información, premisas teóricas y diagramas de flujos, para traducirlos en un elemento visual. Tiene en cuenta: colores, tipografías, iconos, animaciones, formularios y botones, entre otras cosas.

El diseño de interfaz debe ser visual y funcional durante todo el proceso de navegación, y para ello es necesario considerar: accesibilidad, usabilidad, empatía de género o dispositivos, todos ellos basados en un trabajo previo, analítico, minucioso y casi artesanal de UX. Una interfaz óptima debe ser estética e intuitiva para el usuario.

Algunas de las preguntas que se plantea UI son: ¿Cómo el usuario encontrará la información en la pantalla? ¿Cómo se puede presentar el contenido de manera clara y funcional? ¿Qué formularios se utilizará? ¿Son apropiadas las animaciones? ¿La página es accesible para el usuario?

Un diseñador UI es el responsable de organizar, articular y catalogar los elementos de una plataforma. Se basa en los principios del Design Systems o Sistema de Diseño, un conjunto de reglas, normas y patrones que permiten trabajar mediante la utilización de un lenguaje común. A su vez toma los 6 principios básicos del diseño:

• Balance: se refiere al equilibrio o compensación entre dos elementos, creando una relación de fuerza entre ambos, ya sea para compensar o descompensar la composición. Por ejemplo: crear un elemento a la derecha y compensarlo con un elemento de diferente tamaño a la izquierda.

• Contraste: uno de los principios más importantes. Se ocupa del color, la forma y la dirección de los elementos. El contraste diferencia o separa dos elementos: azul y rojo, objeto y fondo. Su ausencia dificulta la diferenciación de los elementos de la composición. Por ejemplo, los botones con call to action dentro de una página.

• Alineación: ayuda a crear orden en los elementos mediante conexiones visuales entre ambos. Por ejemplo: los elementos alineados en la parte superior se diferenciarán de los elementos de la inferior. Esto permite verlos como dos grupos bien diferenciados.

• Proximidad: crea relaciones entre dos o más elementos. Por ejemplo: la proximidad de dos objetos permitirá verlos más conectados que si los mismos estuviesen alejados. En este punto también se deben considerar otros principios que podrán modificar la manera de verlos o percibirlos.

• Repetición: es un esfuerzo por unificar un diseño repitiendo elementos a lo largo de toda la composición. Este principio genera ritmo y fluidez. Ejemplo: una sucesión de puntos genera la sensación de una recta.

• Espacio: es la ausencia de texto y gráficos entre elementos para evitar el exceso de información y proporcionar “aire” en una composición. Se dice que: “un diseño simple expresa de forma más clara las ideas”. Por ejemplo: diseños minimalistas.

En el blog de Openwebinars, el artículo Qué es UI o User Interface ofrece un informe detallado sobre todo lo relacionado a Diseño de Interfaces.

En resumen, UX se encarga del desarrollo del proceso de la experiencia del usuario, su flujo de navegación y las decisiones que tomarán los usuarios para lograr sus objetivos.

En cambio, UI es el que tomará todas esas decisiones desde el punto de vista abstracto y las traducirá en un elemento visual e intuitivo para el usuario, evitando frustraciones o puntos de dolor durante la navegación.

Cómo formarse en UX y UI

Formarse en UX

Para ser un buen diseñador UX se deben desarrollar ciertas habilidades: la resolución efectiva de los problemas, ser empático con el usuario (ponerse en sus zapatos) y contar con habilidades de diseño de interfaces y prototipos.

Abarca especialistas de diferentes disciplinas: ingenieros en sistemas, sociólogos, licenciados en comunicación, lingüistas, diseñadores gráficos, licenciados en letras y arquitectos, entre otros. Todos los campos del saber se nutren de forma constante y logran experiencias más valiosas para los usuarios.

A pesar de la diversidad de disciplinas mencionadas es necesario tener, como algunos señalan, un “tronco común” de conocimientos sobre procesos de diseños, conceptos básicos de arquitectura de la Información, nociones de usabilidad y accesibilidad, o herramientas y metodologías de investigación.

Algunas de las funciones de UX son la confección de pantallas, aplicaciones o páginas web. También participan en los procesos de entrevistas con los usuarios y creación de prototipos.

Las habilidades más buscadas son curiosidad, empatía y trabajo en equipo. El UX no es para personas sin habilidades de comunicación ni adaptación al entorno. En estas posiciones es fundamental dejar el ego de lado en pos de la mejor solución a los problemas que presentan los usuarios.

Formarse en UI

Para desarrollarse como Diseñador de Interfaces es necesario no solo contar con formación profesional, sino también, con diferentes tipos de habilidades.

El aprendizaje continuo es la más importante de todas las habilidades. La actualización constante del profesional en este campo es muy considerada por las empresas al momento de incorporar diseñadores UI.

La empatía es una habilidad muy requerida para UI, debido a que el objetivo es comprender las necesidades que tienen los usuarios al utilizar determinado producto o servicio.

Las habilidades de comunicación también son importantes, porque se necesitará justificar con el resto de los equipos, mediante un previo análisis de los datos, el motivo por el cual se llegó a determinada decisión de diseño

En UI, nunca mejor aplicado el dicho: “los detalles hacen a la diferencia”. Aplicar el sentido del detalle en este campo puede determinar la permanencia o abandono de una página por parte del usuario.

El interés en la formación como diseñador UI, o en la búsqueda de trabajos con este perfil, ha aumentado notoriamente. Muchos diseñadores gráficos, egresados de carreras técnicas y publicitas están virando para el Diseño de Interfaces.

Desafíos que plantea el mercado laboral

Actualmente, existe una fuerte demanda laboral. El desarrollo tecnológico que crece a pasos agigantados, sumado al aumento de productos y servicios digitales, generan una necesidad importante de diseñadores UX|UI en todo el mundo.

Tanto UX como UI son campos de la tecnología que permiten trabajar de manera remota para una empresa o por cuenta propia, y con horarios part time o full time.

Por último, la experiencia de usuario ofrece un abanico de posibilidades para aquellos que desean adentrarse en este fascinante campo de la tecnología, que no solo ofrece desafíos constantes, sino también, la posibilidad de hacer pantallas más humanas en esta era de virtualidad absoluta: “el comienzo de una revolución que acaba de arrancar”.

Sí este artículo te gustó, te invitamos a recomendarlo o compartirlo en tus redes sociales. También puedes estar atento a los contenidos sobre experiencia de usuario que estaremos publicando en nuestro blog.

Nos vemos artículo mediante.

Mariela De Gregorio