Respuesta breve
El diseño de UX decide cómo funciona un producto para la persona que lo usa: qué necesita, qué pasos da y dónde se atasca. El diseño de UI da forma visible a esos pasos: pantallas, botones, textos, colores y estados. Un negocio obtiene una estructura probada, un prototipo y un conjunto de pantallas y componentes con los que desarrollo puede construir, y menos visitas que se van porque algo no quedó claro.
UX es cómo funciona el formulario de pedido; UI, cómo se ve
Piensa en el formulario de pedido de una tienda online pequeña. Alguien tiene que decidir qué campos pide, qué ocurre si el teléfono se escribe mal y qué ve el comprador después de pulsar el botón. Alguien tiene que decidir también cómo se ven los campos, el botón y el mensaje de error, para que quede claro dónde pulsar. El primer grupo de decisiones es UX, experiencia de usuario. El segundo es UI, interfaz de usuario. El diseño UX/UI es el nombre del trabajo que se ocupa de ambos.
La definición de Nielsen Norman Group, firmada por Don Norman y Jakob Nielsen, es amplia: la experiencia de usuario abarca todos los aspectos de la interacción del usuario final con la empresa, sus servicios y sus productos. La norma ISO 9241-210, tal como la cita Wikipedia en inglés, es más seca: las percepciones y respuestas de una persona que resultan del uso o del uso previsto de un sistema, producto o servicio. Las dos hablan de una persona, no de una pantalla. Norman y Nielsen añaden un ejemplo: una web de críticas de cine con una interfaz perfecta da una mala experiencia si en su base de datos falta el estreno independiente que alguien buscaba.
Qué entrega un diseñador UX: investigación, flujos, wireframes y prototipo
Lo que produce un diseñador UX casi nunca son imágenes. La Interaction Design Foundation enumera sus tareas habituales: investigación con usuarios, creación de personas, diseño de wireframes y prototipos interactivos, y pruebas. Tras la investigación viene el recorrido, que Nielsen Norman Group llama flujo de usuario: los pasos necesarios para completar una tarea habitual con un producto. Para tu tienda es el camino desde la ficha de producto hasta el pedido pagado, con sus desvíos: el artículo está agotado, la tarjeta es rechazada.
La estructura de cada pantalla se fija en wireframes. La Interaction Design Foundation los llama representaciones visuales básicas de una interfaz que muestran estructura y distribución, sin colores, tipografías ni imágenes; la maqueta añade el aspecto pero sigue siendo estática, y el prototipo simula la interacción. El prototipo es lo que te conviene pedir y recorrer tú mismo. Nielsen Norman Group lo justifica en una línea: desechar código es muy caro, desechar un prototipo no.
Qué entrega un diseñador UI: lenguaje visual, componentes y sus estados
El diseñador UI toma la estructura ya probada y le da un rostro. La Interaction Design Foundation describe el diseño de UI como la construcción de interfaces con el foco en el aspecto y el estilo: colores, tipografía, botones, iconos. Se empieza por un lenguaje visual, un conjunto pequeño de decisiones que se repite en cada pantalla: las tipografías, el significado de cada color, el aspecto del botón principal. El visitante no sabría nombrar esas decisiones, pero nota enseguida cuando dos páginas del mismo sitio parecen hechas por dos empresas distintas.
En proyectos grandes esas decisiones se reúnen en un sistema de diseño. Nielsen Norman Group lo define como un conjunto completo de estándares para gestionar el diseño a escala mediante componentes y patrones reutilizables. Cada componente se describe con sus estados, de modo que un campo existe vacío, con foco, relleno, con error y desactivado, y no como una sola imagen bonita. El mismo artículo es franco con el coste: mantener un sistema de diseño consume mucho tiempo y requiere un equipo dedicado. A una web de cinco páginas le basta un kit de componentes ordenado.
Las etapas del trabajo de diseño, del brief a la entrega a desarrollo
No hay un proceso oficial único, y la Interaction Design Foundation lo dice sin rodeos. La mayoría de los equipos sigue alguna variante de los cinco pasos del design thinking: empatizar mediante la investigación, definir el problema, idear, prototipar y probar con usuarios reales. Para quien encarga el trabajo es una cadena de entregas: investigación, luego flujos y wireframes, después el prototipo navegable y, por último, el diseño visual. Sobre las pruebas, el artículo que Jakob Nielsen dedica a su tamaño sostiene que los mejores resultados salen de probar con no más de cinco usuarios y de hacer tantas pruebas pequeñas como puedas permitirte.
La entrega es el momento en que el diseño se convierte en especificación. Según la guía de Nielsen Norman Group sobre especificaciones de diseño, el archivo debe definir los flujos de interacción, los estilos visuales, la retícula y los puntos de ruptura, los componentes, contenido real en lugar de texto de relleno y los detalles de accesibilidad, como el orden de tabulación o los textos alternativos. La misma guía pide incorporar a los desarrolladores mucho antes de que el diseño esté terminado. Un diseño que ven por primera vez el día de la entrega suele volver convertido en una lista de cosas que no se pueden construir.
Cómo distinguir una buena interfaz de una mala: las diez heurísticas de Nielsen
Para revisar una interfaz no hace falta tener buen gusto. Jakob Nielsen publicó diez heurísticas de usabilidad en 1994, y Nielsen Norman Group las sigue publicando como reglas generales de sentido práctico, no como directrices específicas. Visibilidad del estado del sistema: el diseño debe mantener siempre informada a la persona de lo que está pasando, así que tras pulsar el botón el formulario muestra que el pedido se está enviando y luego que ha sido aceptado. Control y libertad del usuario: la gente actúa a menudo por error y necesita una salida de emergencia bien señalada, una forma de retroceder un paso o cancelar sin empezar de nuevo.
Prevención de errores: los mejores diseños evitan que el problema llegue a producirse, y el formulario frena un teléfono imposible antes del envío. Reconocer en lugar de recordar: la persona no debería tener que memorizar información de una parte de la interfaz para usarla en otra, de modo que la dirección de entrega elegida en el primer paso sigue a la vista en el último. Los mensajes de error, según la novena heurística, se escriben en lenguaje llano y sin códigos, indican con precisión el problema y proponen una solución. Una interfaz que no supera estas preguntas está rota, por elegante que parezca.
Accesibilidad en cifras: contraste, tamaño de texto y zonas táctiles según las WCAG
Una parte de la calidad está escrita en criterios medibles. El W3C publica las Pautas de Accesibilidad para el Contenido Web; la versión WCAG 2.2 de su sitio es una Recomendación del W3C fechada el 12 de diciembre de 2024. En su nivel AA, el texto debe tener un contraste de al menos 4,5:1 respecto al fondo, y el texto grande, de al menos 3:1. Grande significa 18 puntos como mínimo, o 14 puntos en negrita, que la página explicativa del W3C sitúa en unos 24 y 18,5 píxeles CSS. Además, el texto debe poder ampliarse hasta el 200 por ciento sin pérdida de contenido ni de funciones.
Varios criterios se aplican directamente a los formularios. El color no puede ser el único medio visual de transmitir información: un campo señalado como erróneo solo con un borde rojo no cumple, y el error debe describirse con texto. Las zonas que se pulsan con el dedo o el ratón deben medir al menos 24 por 24 píxeles CSS, salvo las excepciones previstas. La norma se revisa cada cierto tiempo. Si una ley obliga a tu web a cumplirla depende del país y del tipo de actividad, y eso se consulta con un abogado.
Cuándo necesita un negocio trabajo de UX y UI, y cuándo el diseño no ayuda
Hay tres situaciones claras. La primera es un producto, una web o una aplicación nuevos: las decisiones de estructura son más baratas antes de construir nada. La segunda es un rediseño: la introducción a la usabilidad de Nielsen Norman Group aconseja probar antes el diseño antiguo, para saber qué conviene conservar. La tercera es la más frecuente: llegan visitas y no se convierten en clientes. La misma introducción lo dice sin adornos: si un sitio web es difícil de usar, la gente se va, y la primera ley del comercio electrónico es que si los usuarios no encuentran el producto, tampoco pueden comprarlo.
El diseño también tiene un límite, el del ejemplo de las películas. Si la oferta es floja, el precio está escondido o en el catálogo falta lo que la gente busca, una interfaz mejor solo lo hará visible antes. La investigación puede destapar esos problemas, pero arreglarlos es una decisión de negocio. La prueba honesta consiste en preguntarse si un error de estructura costaría más que el trabajo que lo evita.
Qué preparar antes de encargar el diseño de una interfaz
Empieza por las tareas, no por las referencias. Escribe las tres o cuatro cosas que un visitante debe poder hacer: encontrar un producto, comparar, pedir, devolver. Reúne lo que ya sabes: la analítica, las preguntas que los clientes hacen a soporte, los pasos en los que se abandonan los pedidos. Prepara textos y fotos reales, porque un diseño dibujado con texto de relleno se rompe cuando los nombres de verdad ocupan tres líneas. Acuerda de antemano qué recibirás al final: un prototipo navegable, pantallas para móvil y escritorio y un kit de componentes con sus estados.
Hacerlo tú o encargarlo depende de lo que esté en juego. Una web sencilla montada en un constructor con una plantilla probada ya trae muchas decisiones sensatas, y las diez heurísticas más una comprobación de contraste te llevan bastante lejos. Una aplicación, un catálogo con filtros, un área de cliente o un pedido en varios pasos son otra cosa: la estructura es tuya y nadie la ha probado por ti. Ahí es donde el diseño UX/UI suele encargarse, a un profesional independiente o a un estudio como VITON13 Studio; la guía enlazada explica de qué se compone el coste. En cualquier caso, pide un prototipo navegable antes de que alguien escriba código.
Lista práctica
- Anota las tres o cuatro tareas que un visitante debe completar, con sus propias palabras.
- Reúne la analítica, las preguntas a soporte y los pasos donde la gente abandona un pedido.
- Prepara textos, datos de producto y fotos reales antes de que se dibuje la primera maqueta.
- Pide un prototipo navegable y pruébalo con cinco personas parecidas a tus compradores.
- Comprueba el contraste del texto y el tamaño de los botones con los criterios AA de las WCAG 2.2.
Preguntas frecuentes
¿El diseño UX/UI es una profesión o son dos?
Son dos conjuntos de habilidades que en proyectos pequeños suele reunir una sola persona. UX cubre la investigación, la estructura y las pruebas; UI, la capa visual y los componentes. En un producto grande los papeles suelen estar separados, y conviene preguntar quién se ocupa de cada parte.
¿Puede una web verse bien y tener una mala UX?
Sí. El ejemplo de Nielsen Norman Group es una web de críticas de cine con un buscador impecable y una base de datos donde falta la película que el visitante quiere. El aspecto es la interfaz; la experiencia depende además de que la persona consiga aquello por lo que vino.
¿Qué diferencia hay entre wireframe, maqueta y prototipo?
Tal como lo explica la Interaction Design Foundation, el wireframe es el plano: estructura y distribución sin colores ni imágenes. La maqueta enseña el aspecto final, pero es estática. El prototipo simula la interacción, así que puedes recorrerlo como si fuera el producto.
¿Necesita un negocio pequeño pruebas de usabilidad?
Una prueba pequeña está al alcance de cualquier negocio. El artículo de Jakob Nielsen cifra en el 85% los problemas de usabilidad que encuentra un primer estudio con cinco participantes, y recomienda varias rondas pequeñas en lugar de una grande. Para ver a cinco personas intentar un pedido bastan una tarde y un prototipo.
¿Es obligatorio que mi web cumpla las WCAG?
Las WCAG son una norma técnica publicada por el W3C. Que una ley obligue a tu web a cumplirla depende de tu país y de tu tipo de actividad, así que revisa tu caso con un abogado. Como referencia de diseño, los criterios AA de contraste y ampliación del texto son un mínimo razonable para cualquier sitio.