¿Qué diferencia hay entre UX y UI y por qué te cobran las dos cosas?

La propuesta para el sitio nuevo llegó con dos renglones que el director general no entendió: «Diseño UX» y «Diseño UI», cada uno con su propio monto. Para cuidar el presupuesto, pidió quitar el primero y conservar el segundo, porque lo que quería era un sitio que se viera moderno. A las pocas semanas recibió pantallas impecables de la página de inicio, y en la primera revisión con el equipo de ventas empezaron las preguntas que nadie había resuelto: dónde iban las fichas técnicas, qué datos pedía el formulario de cotización y a quién llegaba cada solicitud.

Cada respuesta movió el menú, agregó secciones y obligó a rediseñar pantallas que ya estaban aprobadas. Las rondas de revisión incluidas se agotaron antes de llegar a las páginas de producto, las adicionales se cobraron una por una y el lanzamiento se retrasó dos meses. Al final, el ahorro de quitar el diseño UX se fue en corregir, pantalla por pantalla, las decisiones que ese trabajo debió tomar al inicio.

El diseño UX define qué hace el visitante en tu sitio y en qué orden; el diseño UI define cómo se ve y cómo responde cada pantalla. Se cobran aparte porque implican trabajos, entregables y etapas distintas.

Una cotización que junta UX y UI en un solo renglón esconde qué parte del trabajo se recortó

UX viene de "user experience", experiencia de usuario, y UI de "user interface", interfaz de usuario. En un artículo anterior de esta serie explicamos qué es el diseño UX y qué resuelve dentro de un sitio B2B. Aquí nos concentramos en la frontera entre las dos y en por qué una propuesta seria las cobra por separado.

Una comparación con la planta ayuda a verlo. El diseño UX equivale al layout de la nave: dónde va cada estación, por dónde circulan el material y las personas, cuántos pasos hay entre la recepción y el embarque. El diseño UI equivale a los tableros de control, la señalética y los botones de cada máquina. Una planta con buen layout y tableros confusos produce errores. Una planta con tableros impecables y un layout mal pensado obliga a caminar de más en cada turno.

La frontera entre las dos disciplinas: qué decide cada una

El diseño UX decide qué páginas tiene el sitio, cómo se agrupan en el menú, qué contenido va primero en cada una, cuántos pasos separan al visitante de la cotización y qué datos pide el formulario. El diseño UI decide la tipografía, la paleta de color, el espacio entre bloques, la forma y el tamaño de los botones, y la manera en que cada elemento reacciona cuando el visitante lo toca. Las dos disciplinas se cruzan en el detalle: el UX establece que el botón de cotizar debe estar en cada ficha de producto, y el UI resuelve cómo lograr que el ojo lo encuentre sin buscarlo.

Cuando una cotización resume todo como "diseño", resulta imposible saber cuál de las dos partes viene completa. Esa ambigüedad aparece después en forma de rondas de revisión extra o de un sitio que se ve bien y vende poco.

Sin diseño UI, tu empresa pierde credibilidad ante el comité antes de la primera llamada

El comprador B2B juzga al proveedor antes de hablar con él, y una parte de ese juicio ocurre en los primeros segundos frente a la pantalla. Un sitio con tipografías mezcladas, botones de cinco estilos distintos y fotografías de calidad dispareja sugiere una empresa que cuida poco los detalles, aunque su operación sea impecable. El diseño UI trabaja con tres mecanismos para evitarlo.

Jerarquía visual: el orden en que el ojo recorre la pantalla

Antes de leer, el visitante escanea. Busca lo más grande, lo más contrastado y lo que tiene más espacio alrededor, y con eso decide si la página le sirve. La jerarquía visual usa tamaño, peso de la letra, color y espacio en blanco para que ese primer recorrido coincida con el orden que definió el UX: primero qué haces y para quién, después la prueba de que lo haces bien y al final la acción. El principio de proximidad, que viene de la psicología de la Gestalt, completa el trabajo: los elementos cercanos se perciben como un grupo, así que la distancia entre un dato y su etiqueta cambia la facilidad con que se lee una ficha.

Sistema de diseño: los mismos componentes en todo el sitio

Un sistema de diseño reúne los componentes que se repiten en el sitio (botones, tarjetas de producto, tablas, campos de formulario) junto con las reglas de color, tipografía y espacio que los gobiernan. Cuando tu empresa agrega una línea de producto o una página para una industria nueva, esa página se arma con piezas ya diseñadas y conserva la coherencia del resto del sitio. Sin ese sistema, cada página nueva se diseña desde cero, cuesta más y se parece cada vez menos a las anteriores.

Estados e interacción: cómo responde cada elemento cuando lo usan

Un botón tiene varias versiones: en reposo, cuando el cursor pasa encima, cuando se oprime, cuando está deshabilitado y mientras el sistema procesa la solicitud. Un campo de formulario necesita un estado de error con un mensaje que explique qué corregir y un estado de éxito que confirme el envío. Un formulario que se queda inmóvil después de oprimir "enviar" provoca solicitudes duplicadas o abandonadas, y tu equipo comercial nunca sabe cuál de las dos ocurrió.

Por qué te cobran las dos cosas: dos trabajos, dos entregables y dos momentos del proyecto

Cada disciplina produce documentos distintos, requiere habilidades distintas y ocurre en una etapa diferente. Una propuesta bien armada las desglosa porque así sabes qué recibes, cuándo lo revisas y qué pasa si pides cambios.

Entregables de UX: mapa del sitio, flujos y esquemas de cada página

El trabajo de UX se entrega como un mapa del sitio con todas sus páginas y su jerarquía, los flujos de las tareas principales (encontrar un producto, descargar una ficha, pedir una cotización) y los "wireframes", esquemas en gris que muestran qué contenido va en cada página y en qué orden. En esta etapa revisas la lógica del sitio, y conviene que participe tu equipo de ventas, porque conoce las preguntas reales de tus clientes.

Entregables de UI: guía visual, biblioteca de componentes y pantallas finales

El trabajo de UI se entrega como una guía visual (colores, tipografías, estilo de fotografía e íconos), una biblioteca de componentes con sus estados y las pantallas finales de las páginas clave, adaptadas a celular, tablet y escritorio. Esas pantallas suelen convertirse en un prototipo navegable que se ve igual al sitio terminado. En esta etapa revisas la apariencia, la legibilidad y la coherencia con tu marca.

El orden de las etapas: el UI que se diseña antes del UX se paga dos veces

Mover una sección en un wireframe toma minutos. Moverla cuando ya existe la pantalla final obliga a rehacer la composición, las imágenes y las versiones para cada dispositivo, y si el cambio toca el menú, se repite en todas las páginas. Por eso el UX va primero. Un proveedor que presenta pantallas a color en la primera reunión, sin haber definido la estructura, adelanta la parte más vistosa del proyecto y deja para después las decisiones que más cambios provocan.

Para tu presupuesto, ese orden determina cuántas rondas de revisión vas a necesitar y cuántas te van a cobrar aparte.

Lo que pierde tu sitio cuando recortas una de las dos para bajar el presupuesto

Solo UI: pantallas atractivas sobre un recorrido sin plan

Este es el caso más frecuente, porque la parte visual es la que se ve en la junta de aprobación. El resultado es un sitio que impresiona en la primera visita y confunde en la segunda, cuando el comprador regresa a buscar una especificación concreta. Los síntomas llegan a ventas: llamadas para preguntar lo que ya está publicado y formularios que se abren mucho y se envían poco.

Solo UX: un sitio que funciona y se ve igual que el de cualquier proveedor

El caso contrario es menos común y también cuesta. Un sitio con buena estructura y una interfaz genérica permite completar las tareas, pero transmite poco de tu empresa. Frente a tres proveedores con sitios igual de ordenados, el comité recuerda al que proyectó solidez y cuidado. Esa impresión depende del trabajo de UI: la calidad de las imágenes de tu planta, la claridad de las tablas y la coherencia de cada detalle con tu marca.

En los dos casos, el ahorro inicial se pierde poco después en un rediseño parcial. Frente a la propuesta, la pregunta útil es qué parte de cada disciplina incluye y en qué momento la vas a revisar.

Cómo leer los renglones de UX y UI en la propuesta que tienes en la mesa

Antes de firmar, pide que la propuesta responda por escrito estas preguntas:

• Qué entregables de UX incluye (mapa del sitio, flujos, wireframes, prototipo) y en qué fecha los revisas.

• Cuántas páginas se diseñan como pantalla final y cuáles se arman después con los mismos componentes.

• Si recibes una biblioteca de componentes con sus estados o solo imágenes de pantallas sueltas.

• Cuántas rondas de revisión incluye cada etapa y cuánto cuesta una ronda adicional.

Si deja varias sin respuesta, una de las dos disciplinas quedará a criterio del proveedor.

En Artisma diseñamos cada sitio a la medida y resolvemos la estructura antes que la apariencia. Antes de pagar revisas un prototipo de tu página, probado en celular, tablet y escritorio, con el recorrido y la interfaz que vas a recibir. Cada paquete trae sus rondas de revisión incluidas, de una a tres según el alcance, y un precio cerrado que conoces desde el primer día.

Preguntas frecuentes

¿Una misma persona puede hacer el diseño UX y el diseño UI?

Sí. En sitios corporativos de pocas páginas es común que una persona o un equipo pequeño cubra las dos disciplinas. Lo importante es que las dos etapas existan en el plan, con sus entregables y sus revisiones. Cuando el proyecto incluye un catálogo extenso, varios idiomas o la conexión con tu CRM, conviene que cada disciplina tenga a alguien dedicado.

Si ya tengo manual de identidad, ¿todavía necesito diseño UI?

Sí. El manual define tu logotipo, tus colores y tus tipografías. El diseño UI decide cómo se aplican en una pantalla: el tamaño de cada nivel de texto, el contraste sobre cada fondo, la forma de los botones, y la versión de cada elemento en el celular. Un buen manual acelera el trabajo de UI y reduce su costo, porque parte de decisiones ya tomadas.

¿Puedo contratar solo el diseño UI y conservar la estructura de mi sitio actual?

Puedes hacerlo si tienes evidencia de que la estructura funciona: visitas que llegan a las páginas de producto, formularios que se completan y un equipo de ventas que recibe pocas preguntas repetidas. Si esa evidencia falta, renovar solo la apariencia traslada los mismos obstáculos a un sitio nuevo.

Si la propuesta de tu próximo sitio trae un solo renglón de "diseño", o si estás por recortar uno de los dos para ajustar el presupuesto, vale la pena revisar qué parte del trabajo quedaría fuera. Pide tu propuesta con precio cerrado en https://www.artismamkt.com y revisa el prototipo de tu página, con su estructura y su interfaz, antes de pagar.