UI, UX y UIX. Es posible que hayas oído hablar, a menudo, de estos términos, pero si no trabajas en agencia, o en un departamento de marketing, o de desarrollo, quizá te dicen poco. Hace unas semanas, republiqué el artículo SEO, UIX y contenidos; y me pareció que hay gente que no tiene claros estos tres conceptos.

Definiciones rápidas

En realidad, podemos hacer una definición rápida:

  • UI, es el diseño de interfaces
  • UX, es la experiencia de usuario
  • UIX, hace referencia la experiencia y diseño para el usuario

Sin embargo, esto sigue llevando a dudas (razonables) e incluso, a veces, se utilizan conceptos como UX y UIX como sinónimos. Por error, ¡que conste! En cualquier caso, me he reservado veinte minutillos para resolver este tema y explicarlo tan claramente como pueda.

UI - Diseño de interfaces

¿Qué es el diseño de interfaces (UI)?

La UI estará siempre centrada en aquello que se ve en la pantalla, o sea, en cómo distribuimos el contenido. Aquí hablamos de elementos como el texto, los formularios, los blancos o huecos y el resto de los elementos principales que componen un website wireframe. Los wireframes, además, nos pueden ayudar a situar los límites de la UI, ya que no tienen por qué incluir el diseño tal y como lo entendemos (colores, tipografía, imágenes concretas, etc.). Cabe precisar que la UI (el diseño de interfaces) puede recoger dentro el diseño en sí mismo, como un paso posterior que se junta en un único diseño, pero, a priori, no hay razón para presuponer esto, ¿capisce?
UI - Ejemplo

Imagínate un videojuego. Antes de programar código o de animar, hay que diseñar personajes, escenarios, trama… El diseño de interfaces sería algo así: el esqueleto de una web (wireframes) o la idea de producto (forma, función, etc.). En esta imágen, puedes ver un boceto de Puerto Pollo de La maldición de Monkey Island.

UX - Experiencia de usuario

¿Y la UX, o experiencia de usuario?

El gran reto de la UX es que tenemos que conocer al usuario hacia el que dirigimos un producto (una web, una app, un videojuego, etc.). La UX se centra en entender cómo el usuario interactúa con la interfaz que hemos diseñado (mediante procesos de UI).

La gente que trabaja en UX tiene que:

  • Conocer en profundidad qué quiere el usuario
  • Crear productos que se adapten a las capacidades, intereses y motivaciones de los usuarios
  • Validar/optimizar, en repetidas ocasiones, el producto mediante fases de CRO (hasta lanzamiento, e incluso a posteriori)
UX - Ejemplo

Si nos imaginamos la misma escena de un videojuego en 3 fases: en la UX, estaríamos diseñando la zona, los límites, las casas, las conversaciones, los pollos de Puerto Pollo, cómo se mueve la gente… En este caso, esto es un ejemplo en 3D de una fan, que te enlazo al final del artículo, pero te haces una idea, ¿verdad?

A ver, que me entere yo: ¿y UIX?

Lo que ocurre con UIX es que fusiona los dos conceptos anteriores (UI y UX). De algún modo, podríamos entender que la UI es el esqueleto, el motor, la maquinaria y la UX todos los detalles que van a hacer que el movimiento sea fluido, eficiente y divertido. En este caso, estaríamos simplificando mucho, porque también podemos entender que existe cierta necesidad de feedback-retroalimentación del usuario previa al diseño de la interfaz, pero cuando, de verdad, nos lanzamos a interactuar con el usuario y a adaptar el producto en profundidad es con la UX.
En paralelo, como en cualquier proceso de optimización o CRO, la UI y la UX se van retroalimentando y mejorando: hoy día, a este proceso le llamamos UIX: Experiencia y diseño de usuario.
UIX-Puerto-Pollo - Ejemplo.

Una vez, el diseño de interfaces y la experiencia de usuario han podido empezar a crear un producto comercial, todavía nos queda probar, optimizar (CRO), corregir errores… En un juego, por ejemplo, la UIX pondría especial hincapié en traducción, doblaje, bugs… Dicho esto, Kenny Bocasucia te va a tangar con la limonada.

Keep It Simple, Stupid! UI, UX y UIX

Vale, vale. Si queremos ir a lo sencillo , UI: fases de diseño; UX: peña interaccionando con la UI para mejoras; UIX = UI + UIX para optimización.

Más cortico ya no me sale.

¡Espero que sea útil!

¿Te envío contenido muy animal? Sin spam. 😉