UX y UI son dos disciplinas estrechamente relacionadas que intervienen en la forma en que una persona utiliza una web y se relaciona con ella. La primera se ocupa de la experiencia de usuario; la segunda, de la interfaz a través de la que se produce esa interacción.
La distinción parece sencilla sobre el papel, pero en un proyecto real sus límites no siempre resultan tan evidentes. La organización de un menú, la posición de una llamada a la acción, la información que acompaña a un formulario o la respuesta que recibe el usuario después de realizar una acción son decisiones en las que experiencia e interfaz terminan encontrándose.
Por eso es habitual hablar de diseño UX/UI para referirse conjuntamente a ambas disciplinas. Entender qué aporta cada una, y sobre todo cómo se relacionan, permite comprender mucho mejor el proceso que hay detrás del diseño de una web y también algunas de las decisiones que tenemos que tomar quienes trabajamos profesionalmente en diseño web durante un proyecto.
Qué significa UX en diseño web
UX son las siglas de User Experience, es decir, experiencia de usuario. En el contexto de una web hace referencia a la experiencia que tiene una persona al utilizarla y a todo aquello que influye en que pueda alcanzar sus objetivos de una forma clara, lógica y razonablemente sencilla.
Es un concepto bastante amplio. Abarca desde cómo se organiza la información y se plantea la navegación hasta el recorrido que debe seguir un usuario para realizar una determinada acción. Si alguien entra en una tienda online buscando un producto, por ejemplo, la experiencia no depende únicamente de que la ficha sea agradable visualmente. También importa que pueda encontrar el producto, entender sus características, conocer el precio y las condiciones de compra, añadirlo al carrito y completar el pedido sin encontrarse obstáculos innecesarios por el camino.
Lo mismo ocurre en webs mucho más sencillas. En la página de un profesional, un usuario puede querer saber qué servicios ofrece, ver trabajos anteriores y encontrar una forma de contactar. Si esa información existe pero está mal organizada, utiliza una terminología confusa o requiere recorrer media web para localizarla, la forma en que se ha planteado la experiencia está dificultando algo que debería ser sencillo.
Este es un aspecto que aparece con bastante frecuencia al trabajar con clientes. Quien lleva años dentro de un negocio conoce perfectamente sus servicios, su estructura y el vocabulario que utiliza el sector, por lo que determinadas formas de organizar o nombrar la información pueden resultarle completamente naturales. El usuario que llega por primera vez a la web no parte necesariamente de ese conocimiento. Como profesional, una parte del trabajo consiste en ponerse en el lugar de ese usuario y encontrar un equilibrio entre cómo entiende el cliente su negocio y cómo necesita entenderlo quien está al otro lado de la pantalla.
Por eso UX obliga a diseñar pensando no solo en lo que queremos mostrar, sino también en quién va a utilizar la web, qué espera encontrar y qué necesita hacer en ella. Esto no significa que todo tenga que reducirse siempre al mínimo número posible de clics ni que exista una solución universal para cualquier proyecto. Un proceso puede necesitar varios pasos y seguir ofreciendo una buena experiencia si esos pasos tienen sentido, están bien planteados y el usuario entiende en todo momento qué está haciendo.
También hay decisiones menos evidentes que forman parte de esa experiencia. Que un formulario explique correctamente por qué no puede enviarse, que la navegación mantenga una lógica consistente entre páginas o que una acción proporcione una respuesta perceptible son detalles que evitan incertidumbre. Cuando funcionan bien es frecuente que pasen desapercibidos. Cuando funcionan mal, en cambio, el usuario suele darse cuenta enseguida.
Y precisamente porque la experiencia no se produce en abstracto, todas estas decisiones necesitan acabar tomando una forma concreta en la pantalla. Ahí empezamos a entrar en el terreno de la UI.
Qué significa UI en diseño web
UI son las siglas de User Interface, es decir, interfaz de usuario. Si UX se ocupa de la experiencia que queremos ofrecer, UI trabaja sobre los elementos con los que el usuario se encuentra y mediante los que interactúa con la web.
Aquí entran aspectos claramente visuales como el color, la tipografía, los espacios, los iconos o la composición, pero también la forma que adoptan los elementos funcionales de la interfaz. Un botón debe reconocerse como botón, un campo de formulario tiene que dejar claro qué información espera y los distintos elementos deben mantener una coherencia suficiente para que el usuario no tenga que aprender de nuevo cómo funciona la web cada vez que cambia de página.
El diseño UI tampoco consiste en aplicar una capa estética sobre una estructura que ya está resuelta. La apariencia de un elemento influye en cómo lo interpretamos. El tamaño, el contraste, la posición o el espacio que lo rodea pueden establecer jerarquías, dirigir la atención hacia una acción o hacer que una información pase prácticamente desapercibida. Dos interfaces que contienen exactamente los mismos elementos pueden resultar muy diferentes simplemente por cómo se han diseñado.
Esto se aprecia bastante bien en algo tan habitual como una llamada a la acción. Desde el punto de vista de la experiencia podemos haber determinado que, en cierto momento, el usuario necesita una forma clara de solicitar información. Al diseñar la interfaz habrá que decidir cómo se presenta esa acción, qué importancia visual tiene respecto al resto del contenido y cómo responde cuando el usuario interactúa con ella. Una decisión que empezó planteándose en términos de UX termina necesitando de la UI para funcionar en la práctica.
En el trabajo con clientes aparece además otro factor que no conviene perder de vista: la identidad visual del negocio. Una interfaz no se diseña únicamente para que sea fácil de utilizar, también tiene que representar adecuadamente a la empresa, producto o profesional que hay detrás. Hay proyectos en los que esa identidad ya está muy definida y otros en los que prácticamente hay que construirla al mismo tiempo que la web. En ambos casos, el trabajo consiste en hacer convivir esa personalidad visual con las necesidades de la interfaz, sin que una termine perjudicando a la otra.
Diferencias entre UX y UI y cómo trabajan juntas
La diferencia entre UX y UI está principalmente en el tipo de problemas sobre los que trabaja cada disciplina. UX se preocupa por cómo funciona la experiencia en su conjunto, mientras que UI se centra en la interfaz mediante la que el usuario vive esa experiencia. Esta separación resulta útil para entenderlas, aunque durante el diseño sus decisiones se cruzan continuamente.
Podemos verlo con el proceso de compra de una tienda online. Desde UX tendremos que plantearnos qué recorrido sigue el usuario desde que encuentra un producto hasta que completa el pedido, qué información necesita durante el proceso, qué pasos son realmente necesarios o qué puede ocurrir si decide volver atrás.
Ese recorrido necesita una interfaz. Hay que establecer una jerarquía entre la información del producto, distinguir las acciones principales de las secundarias, diseñar los campos del formulario, mostrar los posibles errores o dejar claro en qué punto del proceso se encuentra el comprador. Al trasladar el recorrido a una interfaz también pueden aparecer problemas que obliguen a revisar el planteamiento inicial. Quizá haya demasiadas acciones, cierta información resulte difícil de jerarquizar o un proceso que parecía sencillo sobre el papel se vuelva confuso al darle forma.
En un proyecto profesional hay además varios puntos de vista que conciliar. El usuario tiene unas necesidades, pero la web también responde a los objetivos del cliente. Una tienda quiere vender, un restaurante puede querer aumentar sus reservas y una empresa de servicios necesita conseguir contactos comerciales. Parte del trabajo de diseño consiste en conseguir que esos objetivos se encuentren con los del usuario en lugar de enfrentarlos.
Si un cliente quiere destacar cinco acciones diferentes en una misma página, por ejemplo, hacerlas todas igualmente visibles no significa necesariamente que estemos ayudándole a conseguir sus objetivos. Puede ocurrir justo lo contrario. Habrá que entender cuáles son prioritarias, en qué momento tienen sentido y cómo presentarlas para que el usuario pueda tomar una decisión sin que la propia interfaz compita constantemente por su atención.
Este es el motivo por el que el diseño UX/UI difícilmente puede reducirse a aplicar una serie de reglas. Hay principios, patrones de interacción y soluciones que sabemos que suelen funcionar, pero cada proyecto tiene usuarios, contenidos, objetivos y condicionantes diferentes. Separar UX y UI nos ayuda a entender las disciplinas; trabajar con ambas nos permite abordar el diseño como el conjunto que finalmente experimentará el usuario.
UX/UI dentro del proceso de diseño y desarrollo de una web
El diseño UX/UI forma parte de un proceso más amplio. Antes de empezar a definir una interfaz hay que entender qué se quiere conseguir con la web, a quién se dirige, qué contenidos tendrá y qué necesidades debe resolver. Y después del diseño todavía habrá que convertir todo lo planteado en una web funcional.
El orden concreto y la profundidad de cada fase dependen mucho del proyecto. No requiere el mismo trabajo previo una web corporativa relativamente sencilla que una tienda online con un catálogo amplio o una aplicación en la que el usuario puede realizar multitud de operaciones. También influyen el presupuesto, los plazos, el material disponible y, por supuesto, las necesidades del cliente.
En mi trabajo como diseñador web freelance me ocupo también de la maquetación y el desarrollo, por lo que estas fases tienen una continuidad bastante natural. Mientras diseño ya estoy valorando cómo se comportará una composición cuando cambie el tamaño de la pantalla, qué ocurrirá con contenidos de longitudes diferentes o cómo tendrá que responder determinado componente cuando el usuario interactúe con él. No significa diseñar condicionado por la solución técnica más cómoda, sino conocer las implicaciones de aquello que se está proponiendo.
Esa relación funciona también en sentido contrario. Durante la maquetación pueden aparecer situaciones que aconsejen ajustar el diseño, y al desarrollar una funcionalidad podemos descubrir estados o comportamientos que inicialmente no se habían contemplado. Un formulario, por ejemplo, no es únicamente la versión limpia que aparece en un diseño. Puede contener campos completados, errores de validación, mensajes informativos, acciones deshabilitadas o respuestas posteriores al envío, y todo ello forma parte finalmente de la experiencia del usuario.
Cuando diseño y desarrollo recaen en profesionales o equipos diferentes, esa continuidad requiere comunicación. El diseño tiene que transmitir suficientemente bien qué se pretende conseguir y el desarrollo debe poder plantear las implicaciones o limitaciones que aparezcan al implementarlo. No debería tratarse simplemente de entregar un diseño cerrado para que otra persona lo reproduzca sin más, especialmente cuando durante la implementación aparecen circunstancias que el diseño original no había previsto.
En este sentido, prefiero entender el proceso de creación de una web como algo iterativo. Hay etapas y responsabilidades diferenciadas, pero las decisiones no viajan siempre en una única dirección. Lo que descubrimos al avanzar puede obligarnos a revisar algo anterior, y ese ajuste no significa necesariamente que el proceso haya fallado. Muchas veces es precisamente lo que permite que el resultado final funcione mejor.
Del diseño al uso real de la web
Por mucho que intentemos prever situaciones durante el diseño y el desarrollo, una web empieza a proporcionar otro tipo de información cuando la utilizan usuarios reales. Podemos trabajar con recorridos previstos, distintos tamaños de pantalla y contenidos representativos, pero el uso real permite comprobar cómo se comportan las decisiones que hemos tomado.
Esto no significa que un proyecto de diseño UX/UI tenga que prolongarse indefinidamente después de publicar la web. En muchos trabajos la puesta en producción supone, salvo correcciones o tareas acordadas, el final del proyecto. Lo que cambia es la posibilidad de observar el resultado en funcionamiento y, si existe una fase posterior de análisis y mejora, tomar decisiones basadas en algo más que las previsiones iniciales.
Las herramientas de analítica pueden mostrar, por ejemplo, qué páginas reciben más visitas, en qué punto se abandona un proceso o si determinadas acciones tienen el uso esperado. Dependiendo del proyecto también pueden realizarse pruebas con usuarios, analizar consultas recurrentes recibidas por el cliente o detectar problemas que se repiten una vez que la web lleva un tiempo funcionando. Ninguno de estos datos explica por sí solo qué hay que cambiar, pero puede servir para localizar aspectos que merece la pena estudiar.
También conviene distinguir entre un problema de diseño y un resultado que simplemente no coincide con lo que esperábamos. Que los usuarios no pulsen un determinado botón no demuestra automáticamente que esté mal diseñado. Puede que la acción no les interese, que el contenido anterior no resulte convincente o que el objetivo que habíamos planteado no responda a una necesidad real. Analizar UX implica entender el contexto antes de modificar la interfaz buscando corregir una métrica aislada.
Cuando el proyecto permite trabajar de esta forma, UX/UI puede convertirse en un proceso de mejora basado en el comportamiento real de la web. Es un terreno que puede convivir además con otros trabajos de análisis y optimización, como el posicionamiento web, donde los datos obtenidos después de la publicación también permiten detectar problemas, comprobar resultados y plantear mejoras. Cada disciplina persigue objetivos distintos, pero una web en funcionamiento ofrece información que no teníamos mientras la estábamos diseñando.
No todos los proyectos incluyen esa fase posterior ni la necesitan con la misma profundidad. Lo importante es que el diseño UX/UI haya partido desde el principio de algo que resulta fácil perder de vista cuando trabajamos delante de una pantalla: estamos tomando decisiones para una web que después utilizarán personas reales, con unas necesidades determinadas, y que al mismo tiempo tendrá que cumplir los objetivos para los que fue creada.
Deja una respuesta