Qué es la UX y qué es la UI
UX: la experiencia de usuario
UX viene de user experience. El término lo popularizó Don Norman en Apple en los años 90 para referirse a todo lo que vive una persona al usar un producto, desde la primera impresión hasta el servicio posventa. Llevado a una web, la UX responde a preguntas como estas:
- ¿Entiende el visitante en pocos segundos qué haces y para quién?
- ¿Encuentra lo que busca (servicios, precios, casos, contacto) sin tener que pensar?
- ¿Qué dudas tiene antes de escribirte y en qué punto de la página se las resuelves?
- ¿Cuántos pasos y cuántos campos hay entre «me interesa» y «solicitud enviada»?
El trabajo de UX incluye investigación (analítica, entrevistas, grabaciones de sesión), arquitectura de la información (qué páginas hay y cómo se agrupan), flujos de usuario, wireframes (esquemas en gris de cada pantalla), prototipos y pruebas de usabilidad. También entra el UX writing: los textos de botones, menús y mensajes de error. Gran parte de la UX es invisible y solo se nota cuando falta.
UI: la interfaz de usuario
UI viene de user interface: la capa que el usuario ve y con la que interactúa. Abarca cinco frentes:
- Sistema visual: tipografías, paleta de color, iconos, fotografía e ilustración.
- Componentes: botones, campos de formulario, tarjetas, menús y tablas, con todos sus estados (normal, al pasar el ratón, pulsado, error, desactivado).
- Jerarquía y composición: qué se ve primero, cuánto espacio respira cada bloque y cómo se alinea todo.
- Comportamiento: microinteracciones, animaciones y adaptación de cada pantalla al móvil.
- Accesibilidad visual: contraste suficiente, tamaños de texto legibles y foco visible al navegar con teclado.
Una buena UI hace que la web parezca de una empresa seria y que cada elemento se entienda sin explicación: lo que es un botón parece un botón. Lo ideal es acabar con un sistema de diseño, una biblioteca de componentes que mantiene coherente cada página nueva.
UX vs UI: tabla de diferencias
| Criterio | UX (experiencia de usuario) | UI (interfaz de usuario) |
|---|---|---|
| Pregunta que responde | ¿Funciona? ¿Es fácil conseguir lo que vengo a hacer? | ¿Se entiende de un vistazo? ¿Transmite confianza? |
| Objetivo | Que el usuario complete su tarea (pedir presupuesto, comprar, llamar) con el mínimo esfuerzo | Que cada pantalla sea clara, agradable y coherente con la marca |
| Se centra en | Necesidades, recorridos, estructura y contenido | Aspecto visual, componentes e interacción |
| Entregables típicos | Investigación, mapa de la web, flujos, wireframes, prototipos, informes de pruebas | Guía de estilo, sistema de diseño, pantallas finales, prototipo en alta fidelidad |
| Cuándo entra | Al principio, antes de dibujar nada | Cuando la estructura está cerrada, aunque se solapan |
| Cómo se mide | Conversiones, tareas completadas, abandonos, tiempo hasta la acción | Errores de interacción, clics en elementos que no son enlaces, contraste, coherencia |
| Qué pasa si falta | La web es bonita, pero nadie llega al formulario | La web funciona, pero parece antigua o poco profesional |
Las dos disciplinas se solapan más de lo que parece. La jerarquía visual (UI) decide qué lee primero el usuario (UX). El texto de un botón es UX; su color y su tamaño son UI; y juntos determinan si alguien lo pulsa. Por eso, en webs de empresa, lo habitual es que las trabaje el mismo equipo o un mismo perfil UX/UI.
Ejemplos de UX y UI en la web de una empresa
La diferencia se ve mejor sobre páginas concretas. Estos son los cuatro puntos donde más se nota en una web corporativa o de servicios.
La home de una empresa B2B
- UX: la primera pantalla deja claro qué haces, para quién y qué paso dar. Después vienen la prueba (clientes, casos, reseñas), los servicios con acceso directo a cada uno y un contacto que no obliga a buscar. El orden de los bloques sigue el orden en que le surgen las dudas al comprador.
- UI: titular grande y legible, un único botón principal que destaca por contraste (no cinco botones compitiendo), fotos reales del equipo o de las instalaciones en lugar de imágenes de banco y aire suficiente para que la vista sepa adónde ir.
Fallo típico: un carrusel de cinco diapositivas con mensajes genéricos. La UI puede ser impecable, pero la UX pierde, porque casi nadie espera a la tercera diapositiva y el mensaje importante queda escondido.
El formulario de contacto o de presupuesto
- UX: pedir solo lo necesario para responder (nombre, email o teléfono y qué necesita), explicar qué pasa después («te respondemos en menos de 24 horas laborables»), ofrecer alternativas como el teléfono o WhatsApp y confirmar el envío con un mensaje claro.
- UI: etiquetas visibles encima de cada campo, en lugar de textos de ejemplo que desaparecen al escribir; campos y botón con un tamaño cómodo para el dedo; mensajes de error junto al campo que falla, que se entiendan sin depender del color rojo.
Fallo típico: un formulario de doce campos con un captcha difícil. Cada campo de más es una excusa para abandonar.
La página de un servicio
- UX: el contenido sigue la lógica de quien compara proveedores: qué incluye, para quién es, cómo se trabaja, cuánto cuesta o de qué depende el precio, plazos, casos y preguntas frecuentes. Si el precio es la primera duda del cliente, esconderlo al final de la página o no mencionarlo hace que se vaya a buscarlo a otra web.
- UI: tablas que se leen bien en el móvil, iconos de un mismo estilo, títulos que se pueden escanear y un botón de contacto visible a mitad de página y al final, sin repetirlo después de cada bloque.
La versión móvil
- UX: menú corto y ordenado, teléfono a un toque y formularios que abren el teclado adecuado (numérico para el teléfono, con arroba para el email).
- UI: texto base de unos 16 píxeles para no tener que hacer zoom, botones con un área táctil generosa (las pautas WCAG 2.2 fijan un mínimo de 24 por 24 píxeles CSS y en la práctica conviene bastante más) y elementos fijos que no tapen el contenido.
¿Tu web falla por UX o por UI? Cómo saberlo
Antes de rediseñar, toca diagnosticar. Estos son los síntomas que más vemos al revisar webs de empresa, con su causa más probable:
| Síntoma | Lo más probable | Qué revisar primero |
|---|---|---|
| Muchas visitas a la página de contacto y pocas solicitudes | UX | Número de campos, mensajes de error, elementos de confianza junto al formulario |
| Los visitantes no llegan a las páginas de servicio | UX | Menú, nombres de las secciones, accesos desde la home |
| Te llaman para preguntar cosas que ya están en la web | UX | Contenido difícil de encontrar o enterrado en párrafos largos |
| Los clientes comentan que la web «parece antigua» | UI | Tipografía, fotografía, espaciado, coherencia visual |
| En el móvil la gente pulsa donde no es o hace zoom | UI | Tamaño de textos y botones, separación entre elementos |
| Clics repetidos en imágenes o textos que no son enlaces | UI y UX | Elementos que parecen clicables sin serlo, o enlaces que faltan |
| Mucho rebote en las páginas de destino de los anuncios | UX | Coherencia entre anuncio y página, mensaje de la primera pantalla |
Puedes comprobarlo sin gastar dinero: revisa en Google Analytics 4 qué páginas reciben visitas y cuáles generan contactos, mira grabaciones de sesión con una herramienta gratuita como Microsoft Clarity y pide a tres o cuatro personas ajenas a la empresa que intenten pedirte presupuesto desde el móvil mientras las observas sin ayudar. En media hora sabrás más que en cualquier reunión sobre colores.
Cómo trabajan juntas UX y UI en un proyecto web
En un proyecto bien llevado, UX y UI forman un mismo proceso en el que el peso pasa de una a otra. Así lo organizamos como agencia de diseño web:
- Investigación (UX). Datos de analítica y de Search Console, qué preguntan los clientes al equipo comercial, qué hace la competencia y qué busca la gente en Google. El resultado es un punto de partida medible.
- Arquitectura y contenido (UX). Mapa de páginas, qué va en cada una y en qué orden. Aquí se decide buena parte del resultado.
- Wireframes (UX con apoyo de UI). Esquemas de cada plantilla sin colores ni fotos, para discutir la estructura sin distraerse con la estética.
- Diseño visual (UI). Estilo, componentes y pantallas finales en escritorio y móvil, aplicando la identidad de la marca.
- Prototipo y pruebas (UX y UI). Un prototipo navegable que prueban personas reales. Nielsen Norman Group sostiene desde hace años que con cinco usuarios ya aparecen la mayoría de los problemas de usabilidad.
- Desarrollo y medición (las dos). Se construye, se mide el comportamiento real y se corrige. En velocidad trabajamos con estos objetivos de Core Web Vitals: LCP por debajo de 2,5 s, CLS por debajo de 0,1 e INP por debajo de 200 ms.
Cuando se salta directamente al paso 4, el diseño queda bonito, pero la estructura sale de la intuición. Qué incluye cada fase cuando la hacemos nosotros lo tienes en la página de diseño UX/UI.
Roles: diseñador UX, diseñador UI y perfil UX/UI
Saber quién hace qué te ayuda a leer la propuesta de un proveedor.
| Rol | Qué hace | Qué entrega |
|---|---|---|
| Investigador UX (UX researcher) | Entrevistas, encuestas, pruebas de usabilidad, análisis de datos | Hallazgos y recomendaciones priorizadas |
| Diseñador UX | Arquitectura, flujos, wireframes y prototipos | Mapa de la web, esquemas, prototipo navegable |
| UX writer | Textos de interfaz: botones, menús, formularios, errores | Microcopy y guía de tono para la interfaz |
| Diseñador UI | Estilo visual, componentes y pantallas finales | Sistema de diseño y pantallas en alta fidelidad |
| Diseñador UX/UI o de producto | Cubre ambas partes; habitual en equipos pequeños | Del esquema a la pantalla final |
| Desarrollador front-end | Convierte el diseño en código, con sus estados y adaptaciones | Web funcional, accesible y rápida |
En grandes plataformas digitales, como bancos o aplicaciones con millones de usuarios, cada rol es una persona distinta. En la web de una pyme o de una empresa B2B, casi nunca: lo normal es un perfil UX/UI que trabaja codo con codo con el desarrollador y con quien conoce el negocio. En Movetek, como agencia de marketing digital con equipo propio, el mismo equipo que diseña la estructura se ocupa del diseño visual y del desarrollo, sin subcontratar.
Lo que de verdad importa al contratar es que alguien se responsabilice de cada parte: quién investiga, quién decide la estructura y quién comprueba que funciona antes de publicar. Si un proveedor te enseña diseños sin haberte preguntado antes por tus clientes, falta la mitad UX del trabajo.
Herramientas y métricas para evaluar la UX y la UI
Lo que no se mide se acaba discutiendo por gustos. Para medir hace falta que la analítica registre eventos reales (envíos de formulario, llamadas, clics en WhatsApp) y no se quede en las visitas.
Herramientas habituales
- Figma: el estándar para wireframes, interfaz, sistemas de diseño y prototipos. Lo usan los dos perfiles.
- FigJam o Miro: pizarras para mapas de la web, flujos y talleres con el cliente.
- Google Analytics 4 y Search Console: qué páginas funcionan, por dónde entra la gente y qué busca antes de llegar.
- Microsoft Clarity o Hotjar: mapas de calor y grabaciones de sesión.
- Maze o Lyssna: pruebas remotas con usuarios y tareas concretas.
Qué medir en la UX
- Tasa de conversión por página: solicitudes, llamadas y clics en WhatsApp.
- Abandono de formularios: cuánta gente empieza a rellenarlo y no lo envía.
- Recorridos: cuántos visitantes pasan de la home a un servicio y de ahí al contacto.
Qué medir en la UI
- Clics de frustración y clics en elementos que no son enlaces (Clarity los detecta solo).
- Errores por campo en los formularios.
- Contraste del texto: las WCAG piden al menos 4,5:1 para texto normal.
- Estabilidad visual (CLS): que nada salte mientras carga, algo que depende mucho de cómo se diseñan imágenes, banners y tipografías.
Errores frecuentes al confundir UX y UI
- Rediseñar solo la estética. Se cambian colores y fotos cuando el problema es que el formulario está escondido. La web parece nueva y convierte igual que antes.
- Elegir plantilla antes de tener el contenido. La estructura acaba al servicio de la plantilla, no de tus clientes.
- Copiar la web de la competencia. Copias su apariencia sin saber si a ellos les funciona.
- Decidir por gusto personal. El color favorito de la dirección no es un criterio; un test con cinco clientes, sí.
- Diseñar para escritorio y adaptar después. En muchos sectores la mayoría de las visitas llegan desde el móvil; mira en tu analítica qué proporción tienes tú y diseña empezando por ahí.
- Tratar la accesibilidad como un extra. Contraste, tamaños y foco visible ayudan a todo el mundo. Además, la normativa europea de accesibilidad ya la exige a muchos servicios digitales, como el comercio electrónico, con excepciones para microempresas.
Preguntas frecuentes sobre UX vs UI
¿Qué es más importante, la UX o la UI?
Las dos, pero en orden. La UX va primero porque define si la web cumple su función: una interfaz preciosa sobre una estructura confusa no convierte. La UI decide después si el visitante confía y si entiende cada elemento a la primera. En webs de empresa, una UX sólida con una UI correcta suele rendir mejor que una UI espectacular con una UX descuidada.
¿Un diseñador web hace UX y UI?
Depende del perfil. Muchos diseñadores web cubren la UI y parte de la UX, como la estructura y los wireframes, pero no siempre investigan ni prueban con usuarios. Al pedir propuestas, pregunta cómo deciden la estructura de las páginas y si validan el diseño con datos o con personas reales antes de desarrollarlo.
¿UX/UI es lo mismo que diseño web?
No exactamente. El diseño web es el proyecto completo: estrategia, UX, UI, contenidos, desarrollo y puesta en marcha. UX y UI son dos disciplinas dentro de ese proyecto, y también se aplican fuera de la web: en aplicaciones, en software interno o en la pantalla de una máquina industrial.
¿Se puede mejorar la UX de una web sin rediseñarla entera?
Sí, y muchas veces es lo más rentable. Simplificar un formulario, reordenar los bloques de una página de servicio, aclarar el menú o mejorar el texto de los botones son cambios pequeños con efecto directo en las solicitudes. Mide antes y después de cada cambio para saber qué ha funcionado y qué no.
¿Cuánto cuesta el diseño UX/UI de una web?
Depende del número de plantillas distintas, de la profundidad de la investigación y de si hay pruebas con usuarios. Cuando forma parte de una web nueva, va incluido en el proyecto de diseño; si es una mejora sobre una web existente, se presupuesta según el alcance. En Movetek damos siempre un presupuesto cerrado después de conocer el caso, sin sorpresas.