Fundamentos de UX/UI con respaldo

Qué es UX y qué es UI

La definición que más se cita es de Don Norman y Jakob Nielsen, de 1998: la experiencia de usuario abarca todos los aspectos de la interacción de una persona con una empresa, sus servicios y sus productos. La interfaz (UI) es una parte de eso. La parte que se ve.

El ejemplo que dan ellos mismos es bueno. Una web de reseñas de cine puede tener una interfaz impecable y una experiencia mala, si su base de datos solo tiene películas de los grandes estudios y tú buscabas una independiente. Ningún botón arregla eso.

¿Y CX, customer experience? NN/g la define como la UX vista a lo largo del tiempo, en la relación entera con la marca, y su conclusión de 2023 es que, bien entendidas, las dos palabras significan básicamente lo mismo. Yo dejaría de perder tiempo en esa discusión.

La gente pasa casi todo su tiempo en otros sitios

Es la ley de Jakob: tus usuarios pasan la mayor parte del día en otras webs y otras apps, y esperan que la tuya funcione igual. El carrito arriba a la derecha. El logo que lleva al inicio. La lupa que busca.

Cada vez que inventas una forma nueva de hacer algo que ya tiene forma conocida, le cobras a la persona el esfuerzo de aprenderla. A veces vale la pena. Casi nunca en la navegación, los formularios o el checkout, que es donde más ganas suele dar a un diseñador de lucirse.

Lo bonito engaña. También a quien prueba

En 1995, Masaaki Kurosu y Kaori Kashimura, del Hitachi Design Center, probaron 26 variantes de la interfaz de un cajero automático con 252 participantes. Las que la gente encontraba más atractivas, las percibía también como más fáciles de usar. Es el efecto estética-usabilidad.

La parte buena: la gente tolera mejor los fallos pequeños en un diseño cuidado. La mala, y la que más me interesa, es que un diseño bonito puede tapar problemas de usabilidad durante las pruebas. Quien prueba un prototipo pulido te dice que todo está bien, y no lo está. Por eso conviene probar pronto, con prototipos feos, antes de que el acabado te dé la razón.

Lo que está cerca, se lee junto

Son los principios de agrupación de la Gestalt, y tres de ellos sostienen casi cualquier pantalla:

• Proximidad: los elementos cercanos se perciben como un grupo.
• Similitud: lo que se parece (color, forma, tamaño) parece relacionado. Por eso un enlace tiene que verse distinto del texto normal.
• Región común: lo que comparte un fondo o un borde se lee como una unidad. Es lo que hace funcionar a una tarjeta.

La regla práctica sale sola. El espacio dentro de un grupo tiene que ser menor que el espacio entre grupos. En un formulario, la etiqueta va más cerca de su campo que del campo anterior. Parece obvio, y aun así basta con abrir tres formularios cualquiera para encontrarlo roto en alguno.

Si todo destaca, nada destaca

La jerarquía visual es el orden en que el ojo recorre la pantalla. NN/g la reduce a tres palancas: color y contraste, escala y agrupación. Sus recomendaciones de 2021 son concretas:

• No más de tres tamaños de texto. Como referencia: 14 a 16 px el cuerpo, 18 a 22 px los subtítulos y hasta 32 px el título.
• Como mucho dos elementos grandes por pantalla.
• No más de tres niveles de contraste en diseños complejos.

El efecto Von Restorff (Hedwig von Restorff, 1933) explica por qué funciona: entre varias cosas parecidas, recordamos la que es distinta. Pero solo si hay una. Con tres botones azules iguales, ninguno es el principal.

La gente escanea en forma de F, y eso es malo

En 2006, Nielsen registró con eye tracking cómo 232 personas miraban miles de páginas. El patrón dominante tenía forma de F: dos barridos horizontales arriba y uno vertical por el margen izquierdo. La tercera palabra de una línea se lee mucho menos que las dos primeras.

La revisión de 2017 de Kara Pernice aclara algo que mucha gente lee al revés y usa como plantilla de layout. El patrón F aparece cuando el texto no le da al lector ninguna pista mejor, y NN/g lo califica como negativo para usuarios y negocios. Lo que hay que hacer es romperlo:

• Lo importante, en los dos primeros párrafos.
• Encabezados y subtítulos que empiecen con las palabras con más información.
• Listas, negritas puntuales y enlaces que digan a dónde llevan.
• Y recortar. Mucho.

Retícula y espaciado: elige una unidad y no la sueltes

Material Design 3 mide su espaciado en una escala de 8 dp: la unidad base es 8 y el resto son múltiplos. La escala incluye valores pequeños como 2 y 4 para ajustes finos, pero la base es 8. Usar una sola unidad hace que las separaciones se repitan, y la repetición es lo que el ojo interpreta como orden.

Los márgenes laterales cambian con el ancho de pantalla. Los breakpoints actuales de Material:

Tipografía: tamaño, peso y largo de línea

Apple fija 17 pt como tamaño de cuerpo por defecto en iOS y 11 pt como mínimo, y desaconseja los pesos finos (Ultralight, Thin, Light) para texto. En web, 16 px para el cuerpo es un punto de partida razonable, dentro del rango de 14 a 16 px que da NN/g.

El largo de línea es donde las fuentes no se ponen de acuerdo:

Yo me quedo con Baymard, porque es la única de las tres que viene de observar a gente leyendo, y su propuesta en CSS es de una línea: max-width: 70ch en el contenedor del texto. Para el interlineado, WCAG pide de al menos 1,5 dentro del párrafo, que en CSS es line-height: 1.5.

Las ratios de contraste, con ejemplos que se miden solos

WCAG 2.2, criterio 1.4.3 (nivel AA):

• 4.5:1 para texto normal.
• 3:1 para texto grande, que WCAG define como 18 pt o 14 pt en negrita (unos 24 px, o 18,5 px en negrita).
• 3:1 para bordes de campos, iconos y otros componentes (criterio 1.4.11).

No se redondea: 4,499:1 no llega a 4,5:1. El texto de los placeholders también cuenta. Y que el gris venga en el manual de marca no lo exime. Las cifras de abajo se calculan con la fórmula de WCAG a partir del color que se pinta:

El color solo no basta

WCAG 1.4.1 (nivel A, el más básico) prohíbe usar el color como único medio para transmitir información. La razón tiene cifras: según el National Eye Institute, 1 de cada 12 hombres tiene alguna deficiencia en la visión del color, y Colour Blind Awareness añade 1 de cada 200 mujeres.

Un campo con error necesita, aparte del rojo, algo que se vea en gris: un icono, un borde más grueso y, sobre todo, un mensaje que diga qué pasó. NN/g lo dice sin matices en su guía de mensajes de error de 2023: nunca uses solo el color o una animación para indicar un error.

Casi toda la web suspende

WebAIM analiza cada año las páginas de inicio del millón de sitios más visitados. El informe de febrero de 2026:

Empeoró, después de seis años seguidos de pequeñas mejoras. Y el primer puesto, de lejos, es el contraste: lo más fácil de arreglar de toda la lista y lo que más se ignora, porque el gris clarito queda elegante en una pantalla buena y con brillo alto, que es justo la pantalla con la que se diseña.

Baymard llegó a algo parecido por otra vía en 2021: de 33 tiendas online de las que más facturan, el 94 % incumplía al menos una de cuatro pautas básicas de WCAG 2.1 AA.

Botones: uno principal, y que se pueda tocar

La jerarquía de botones más extendida, la que describe NN/g en 2025: el principal relleno, el secundario con contorno y el terciario solo texto. Una acción principal por vista.

Cada botón necesita estados que se distingan: normal, hover, foco, pulsado y deshabilitado, más cargando y seleccionado cuando aplique. El foco merece atención aparte, porque es lo que ve quien navega con teclado. WCAG 2.4.7 exige que sea visible, y NN/g recomienda un contorno y no solo un cambio de color.

UNICEF añade dos reglas que comparto. Las etiquetas llevan verbo (“Guardar cambios”, no “OK”). Y no se usa un botón deshabilitado para avisar de que faltan campos: la persona no sabe qué falta y el botón no se lo puede decir.

El tamaño importa por la ley de Fitts (Paul Fitts, 1954): el tiempo para alcanzar un objetivo depende de su distancia y de su tamaño. Las tres cifras que vas a encontrar:

Formularios: la etiqueta va fuera del campo

Usar el placeholder como etiqueta queda limpio en el mockup y sale caro en uso. NN/g da siete razones en su artículo de 2014, entre ellas que obliga a recordar qué pedía cada campo, que es imposible revisar el formulario antes de enviarlo y que no todos los lectores de pantalla leen el placeholder. Su conclusión es directa: etiquetas claras y visibles, fuera de los campos.

• Las pistas de formato (“5 dígitos”) también fuera, y fijas.
• Etiqueta encima del campo, no a la izquierda. UNICEF desaconseja los formularios horizontales.
• Campos agrupados por tema y con el ancho de lo que se espera: un código postal no necesita la línea entera.

Recuerda la tabla de WebAIM: el 51 % de las páginas tiene campos sin etiqueta.

Mensajes de error que ayudan

La guía de NN/g de 2023 y la de UNICEF coinciden en casi todo:

1. El mensaje va junto al campo que falló, no en un aviso arriba de la página.
2. Lenguaje llano, el problema exacto y cómo arreglarlo. Sin códigos.
3. No regañar: palabras como “inválido” o “incorrecto” sobran. “Falta el dominio, por ejemplo ana@correo.com” dice lo mismo y ayuda.
4. No mostrar el error antes de tiempo. Salir de un campo vacío no es un error.
5. Conservar lo que la persona escribió.

UNICEF concreta el momento de validar: cuando el campo pierde el foco si todavía no había error, y en cada pulsación una vez que lo hay, para que el mensaje desaparezca en cuanto se corrige.

Cada campo que quitas es gente que no se va

Baymard cuenta campos en los checkouts de las tiendas grandes desde hace años. En 2024, la media era de 11,3 campos (11,8 en 2021, 12,7 en 2019). Su cálculo es que la mayoría de tiendas necesita solo 8.

Un dato de sus pruebas lo explica mejor que cualquier principio: el 42 % de los participantes escribió su nombre completo en el campo “Nombre” de un formulario que pedía el apellido aparte. Un solo campo de nombre completo resuelve eso, y el 89 % de las tiendas que estudiaron seguía sin usarlo.

En la encuesta de 2026 de Baymard a 1.083 compradores de Estados Unidos, el 17 % dijo haber abandonado una compra por un checkout demasiado largo o complicado, y el 18 % porque le obligaban a crear una cuenta.

Modales: solo cuando la interrupción vale la pena

Un modal bloquea el resto de la pantalla hasta que la persona hace algo con él. NN/g los reserva, en su guía de 2017, para avisos importantes, errores críticos o acciones irreversibles, y desaconseja expresamente interrumpir con ellos procesos de alto valor como el checkout.

• Si la tarea tiene varios pasos, merece una página, no un modal.
• Nunca uno que tape la información que se necesita para decidir lo que pregunta.
• UNICEF añade que en móvil son incómodos y que no deben contener flujos completos.
• Para borrar algo, UNICEF prefiere un aviso con “Deshacer” antes que un modal de confirmación.

Tarjetas para explorar, tablas para comparar

NN/g define la tarjeta (2016) como un contenedor para unas pocas piezas de información relacionadas, que resume algo y enlaza a su detalle. Funcionan por región común, y que toda la tarjeta sea clicable ayuda por Fitts.

Pero tienen un límite que se ignora mucho. Son buenas para explorar contenido variado, y malas para buscar algo concreto o comparar opciones parecidas, porque cada tarjeta coloca sus datos en su sitio y el ojo tiene que saltar de una a otra. Para comparar planes o productos, una tabla. Para contenido homogéneo, una lista.

Navegación: lo que no se ve, no se usa

Primero la arquitectura de información, después la navegación. La IA es cómo se organiza el contenido, y se trabaja en hojas de cálculo y diagramas; la navegación es la parte de la interfaz que deja llegar a él. Si el contenido está mal organizado, ningún menú lo salva.

Sobre esconder la navegación, NN/g tiene un estudio de 2016 con 179 participantes en seis sitios. Esconderla tras un menú hamburguesa casi reduce a la mitad la probabilidad de que la gente la encuentre. En escritorio, la navegación oculta se usó en el 27 % de los casos frente al 48 % de la visible; en móvil, el 57 % frente al 86 % de la combinada.

El mejor onboarding es el que no hace falta

La primera recomendación del artículo de NN/g sobre onboarding en apps móviles (2020) es saltárselo siempre que se pueda y gastar ese esfuerzo en hacer la interfaz más fácil. Su investigación encontró que los tutoriales no mejoraban el desempeño en las tareas.

• Mejor consejos en contexto, en el momento en que se usa la función, que un mazo de pantallas al abrir.
• Si hay instrucciones, breves, opcionales y con un “Saltar” que se vea.
• Nada de promocionar funciones en el primer arranque: para eso está la ficha de la tienda.

Tiene sentido cuando hace falta información de la persona para empezar, o cuando la función es nueva de verdad. Y hasta entonces, NN/g sugiere probar primero la app sin onboarding.

Esperas: di que estás trabajando

Los límites de tiempo de respuesta de Nielsen son de 1993 y siguen vigentes porque dependen de cómo funciona la atención, no de la tecnología:

El umbral de Doherty (Doherty y Thadani, IBM, 1982) va más fino: la productividad se dispara cuando el sistema responde en menos de 400 ms. UNICEF da el detalle práctico: si la acción sale de un botón, el indicador va dentro del botón, con un texto que diga qué está pasando. Para NN/g, un spinner que no dice cuánto falta es el último recurso.

Las 10 heurísticas de Nielsen, como lista de revisión

Jakob Nielsen las publicó en 1994, a partir de un análisis de 249 problemas de usabilidad, y en treinta años no han cambiado. NN/g las revisó por última vez en enero de 2024. Sirven para revisar un diseño antes de probarlo con gente, que es más barato:

Con cinco personas encuentras la mayoría de problemas

Es probablemente la cifra más citada de la usabilidad, de un artículo de Nielsen del año 2000: una prueba con cinco usuarios encuentra alrededor del 85 % de los problemas de usabilidad. La cuenta sale de que cada persona destapa de media el 31 % de los problemas, y a partir de la quinta casi todo lo que aparece ya lo habías visto.

Lo que se suele olvidar es el resto del artículo:

• Para encontrar todos los problemas hacen falta unas 15 personas, pero Nielsen recomienda repartirlas en tres rondas de cinco, corrigiendo entre ronda y ronda.
• Solo vale para usuarios parecidos entre sí. Con dos perfiles muy distintos, tres o cuatro de cada uno.
• Es para pruebas cualitativas. Un estudio cuantitativo necesita unas 20 personas.

Y lo más importante, que no viene en ninguna fórmula: cinco personas que no son tú, que no conocen el proyecto y a las que no les explicas nada mientras usan la pantalla.