UX y UI: diferencias

por 0
280
UX y UI: diferencias

Son términos que suelen ir de la mano como un todo 
inseparable y, aunque guardan relación, no se refieren al mismo concepto. A menudo se confunden o, ante la duda de que a se refiere cada uno, se hace 
referencia al UX/UI como todo lo relacionado con el diseño de una web. Es
cierto que son conceptos relacionados con la parte visual de una web, pero
también con el diseño de interacción y con la experiencia que aportan al
usuario. ¿Dónde acaba uno y empieza el otro? ¿Cuál es el término correcto a
utilizar según el caso?

¿Qué es UI?

Es más fácil empezar explicado qué es UI (User Interface). Como su nombre indica, hace referencia al diseño visual de una interfaz, y no se utiliza exclusivamente en diseño web o de apps, sino a cualquier tipo de artefacto provisto de una interfaz.

Aplicándolo a la web, UI se encarga del acabado estético de la interfaz; la apariencia, selección y distribución de los elementos con los que el usuario va a interactuar. Implica la aplicación de una identidad visual, estructura del contenido y jerarquías, así como la adaptación a los distintos soportes (diseño responvive).

¿Qué es UX?

Con el crecimiento de los productos digitales y la diversificación de soportes, comenzó a cobrar importancia, a la hora de elegir un producto u otro, algo que el catedrático Donald Norman definió como user experience (experiencia de usuario).

Para Norman, que un usuario eligiese un producto digital u otro (por ejemplo, una app u otra), no estaba motivado por el diseño estético de su interfaz, sino por algo más amplio, la experiencia que le aportaba.

El concepto UX (user experience) apela a las sensaciones que genera un producto digital en el usuario, convirtiéndolo en una experiencia agradable y satisfactoria o en algo tedioso, difícil de entender.

Solo hay que pensar en grandes marcas digitales de hoy en día para clarificar lo que es un buen diseño de experiencia de usuario. Airbnb, por ejemplo, aporta al usuario una app muy fácil de manejar, muy intuitiva y con la que resulta muy rápido reservar un alojamiento. Es un ejemplo claro de buen UX:

          Ahorra tiempo al usuario

          No le hace pensar, todo es muy intuitivo

          Proporciona numerosas opciones, pero están perfectamente distribuidas con elementos muy intuitivos (filtros, switches, diferentes pantallas…)

          Guía al usuario de forma agradable hacía la consecución del objetivo: reservar un alojamiento


Otro ejemplo claro. ¿Cuántas webs de citas había antes de Tinder? Muchas. Sin embargo, la dinámica de desplazar a la derecha y a la izquierda una foto en función de si nos gustaba una persona o no es algo tremendamente original, novedoso y dinámico. Es un ejemplo claro de UX. Y en base a este ejemplo podemos abordar el objetivo claro entorno al que giran todas las acciones de UX: el usuario.

El usuario es lo más importante. Da igual que quede bonito o feo para un diseñador experimentado. Los buenos profesionales de UX toman decisiones sin pensar en cánones de diseño o normas preestablecidas, sino en el usuario final que va a utilizar esa aplicación, en lo que le va a gustar o disgustar según sus características.

En el ejemplo de Tinder se ve claramente. ¿Para que hacer perder el tiempo al usuario incluyendo filtros para buscar a la persona ideal si luego no va haber atracción física entre uno y otro? El primer filtro: desplazas a la derecha o a la izquierda en función de si te gustan sus fotos o no, y si hay reciprocidad, match y la posibilidad de entablar una conversación de chat con esa persona. Menos es más. Una app sencillísima de utilizar y que debe su éxito a un estudio en profundidad de su público objetivo y una adaptación de la experiencia a lo que quiere el usuario. Es un ejemplo claro de centrar la consecución del objetivo pensando en lo que le va a gustar al usuario final de la aplicación.

UX: más allá de productos digitales

La interfaz es el canal de comunicación entre la máquina y el usuario, por eso a menudo es complicado diferenciar entre UX y UI ya que ambos, en mayor o menor medida, tienen su reflejo en la interfaz. UI de forma más evidente, pero UX también, ya que todas esas dinámicas que hablábamos de Tinder obviamente se ven reflejadas en la pantalla.

Sin embargo, UX es un concepto mucho más amplio y extrapolable a productos no digitales. La experiencia de usuario es aplicable casi a cualquier producto o servicio. Para demostrarlo, voy a hablaos de dos fruterías de mi barrio (ya que no hay nada menos digital que una frutería de barrio…). Ambas fruterías se encuentran a escasos 30 metros de distancia, es decir, compiten por prácticamente los mismos clientes. Sin embargo, una siempre está llena y la otra no. Es algo que me llamó poderosamente la atención el primer día, hasta que entré en una y en la otra…

A continuación voy a resumir mi experiencia de usuario en una y otra:

  • En la frutería A me costó mucho encontrar los guantes y las bolsas de plástico. No estaban a la vista ni en un lugar obvio, así que; por poco que fuese, me hizo perder tiempo.
  • En la frutería B los guantes estaban en la entrada de la frutería y había numerosos rollos de bolsas de plástico distribuidos por todo el local y en lugares obvios, junto a las bandejas de fruta. Además, algo que me pareció sublime es que había una cesta con bolsas ya abiertas, pues a menudo es complicado abrir estas bolsas de plástico cuando ya te has puesto los guantes. Este último detalle demuestra claramente que en ese negocio se conoce al usuario y las dificultades a las que se enfrenta a la hora de comprar.
  • En la frutería A los pasillos forman una U y la caja está en el centro.
  • En la frutería B los pasillos forman un recorrido en cuadrado, de forma que para llegar a la caja tienes que recorrerlo todo. El flujo de personas es más fluido y obligas al potencial cliente a verlo todo, por lo que previsiblemente no va a olvidarse de comprar nada que necesite. Es el estilo de Ikea, pero llevado a las dimensiones de una frutería de barrio.
  • En la frutería A hay una sola caja, tanto para efectivo como para pagos con tarjeta.
  • En la frutería B hay dos cajas, una para pagos en efectivo y otra para pagos con tarjeta, lo que permite agilizar las ventas y el flujo de personas.

A muchos os parecerán nimiedades, pero la frutería B siempre está llena y la A rara vez. Los pequeños detalles cuentan y es importante centrar el diseño en lo importante: el usuario.

54321
(3 votos. Media 5 de 5)
Déjanos un comentario

Tu dirección de correo electrónico no será publicada.

Your Name:

Your Website

Tu comentario