Una interfaz intuitiva es la que se usa sin instrucciones: el usuario sabe qué leer primero, qué se puede pulsar y qué pasó después de pulsarlo. No depende de tener buen ojo. Son decisiones con nombre, y todas se escriben con las clases que ya conoces.
Cada sección termina con una captura del mismo contenido hecho dos veces: a la izquierda (o arriba) una versión mala y a la derecha (o abajo) la versión buena. El texto es idéntico; lo único que cambia es el diseño.
Mira primero, lee después
Antes de leer lo que falla, mira la captura unos segundos y busca tú los problemas de la versión mala. Después compara con el recuadro rojo.
Jerarquía visual
Lo primero que hace alguien al abrir una página es buscar dónde mirar. La jerarquía es el orden en que se lee, y se controla con tres cosas: el tamaño, el peso y el color.
<article class="space-y-2">
<h2 class="text-2xl font-bold text-gray-900">Taller de fotografía</h2>
<p class="text-sm text-gray-600">Sábado 17 de octubre · Punta Arenas</p>
<p class="text-base leading-relaxed text-gray-700">
Una mañana recorriendo la costanera para aprender a usar la luz natural.
</p>
</article>| Nivel | Qué es | Cómo se marca |
|---|---|---|
| 1 | El título: lo que se lee primero | Grande, negrita y el color más oscuro |
| 2 | El dato de apoyo: fecha, lugar, autor | Chico y gris |
| 3 | El cuerpo: se lee si interesa | Tamaño normal y buen interlineado |
Pocos niveles, bien separados
Con tres o cuatro tamaños de texto en todo el sitio basta (por ejemplo
text-sm,text-base,text-2xlytext-4xl). Si todo es grande y en negrita, nada destaca: la jerarquía existe porque hay cosas menos importantes.
Lo que falla en la mala
- Todo tiene el mismo tamaño y la misma negrita: no hay por dónde empezar a leer.
- El título de la sección tiene el mismo tamaño que todo lo demás: las mayúsculas no bastan para que destaque.
- La fecha del segundo taller está en rojo sin ser un error, y llama más la atención que el nombre del taller.
La prueba de entrecerrar los ojos
Mira tu página con los ojos entrecerrados, hasta que no puedas leer el texto. Lo que todavía se distingue es lo que el usuario ve primero. Si no es el título ni el botón principal, la jerarquía está mal. Pruébalo con las capturas de esta página: en las buenas sigues viendo el título; en las malas, manchas que compiten entre sí.
Espacio y agrupación
El ojo entiende que las cosas cercanas van juntas. Por eso el espacio no es relleno: es la forma de decir qué pertenece a qué, sin dibujar ni una línea.
<section class="space-y-8">
<article class="space-y-2">…</article>
<article class="space-y-2">…</article>
</section>space-y-2 deja 8 px entre las piezas dentro de cada tarjeta; space-y-8 deja
32 px entre tarjetas. La diferencia es lo que hace que se lean como dos bloques.
Más espacio entre grupos que dentro de ellos
Si el título de una tarjeta queda a la misma distancia de su texto que de la tarjeta de al lado, el ojo no sabe a cuál pertenece. El espacio entre grupos siempre es mayor que el espacio dentro de un grupo.
Lo que falla en la mala
Cada descripción está más lejos de su título que del título que viene después. Como el ojo agrupa lo cercano, parece que “Las recetas de mi abuela…” es la descripción de “Mapa de ciclovías”. La buena es exactamente el código de arriba.
space-y- y gap- hacen lo mismo en distintos lugares
gap-*separa los hijos de unflexo ungrid.space-y-*separa hijos que están uno bajo otro en un contenedor normal, sin necesidad de activar Flexbox.
Color con intención
Cada color tiene que significar algo, y significar siempre lo mismo en todo el sitio.
| Color | Se usa para | Ejemplo |
|---|---|---|
| Grises | La base: texto, fondos, bordes | text-gray-900, border-gray-200 |
| El color principal | Lo que se puede pulsar y la vista activa | bg-sky-700, text-sky-700 |
| Rojo | Solo errores | text-red-700 |
| Verde | Solo confirmaciones (“mensaje enviado”) | text-green-700 |
El color no puede ser la única señal
Un campo con error marcado solo en rojo no le dice nada a quien no distingue ese color (uno de cada doce hombres tiene algún grado de daltonismo). El error lleva además un texto que explica qué pasó. Un enlace dentro de un párrafo lleva además su subrayado.
Contraste: que se pueda leer
El contraste es la diferencia de luz entre el texto y su fondo. La norma de accesibilidad web (WCAG) pide una relación de al menos 4,5 a 1 para el texto normal y 3 a 1 para el texto grande (24 px o más, o 19 px en negrita).
| Combinación | ¿Se lee bien? |
|---|---|
text-gray-900 sobre blanco | Sí, de sobra |
text-gray-600 sobre blanco | Sí: buen gris para texto secundario |
text-gray-400 sobre blanco | No: sirve para un ícono decorativo, no para texto |
text-white sobre bg-sky-500 | No: el celeste es demasiado claro |
text-white sobre bg-sky-700 | Sí |
Lo que falla en la mala
- El párrafo en
text-gray-400y el botónbg-sky-400con texto blanco no alcanzan el contraste mínimo.- El rojo aparece en el título y en “Respondo en menos de dos días”, y nada de eso es un error. Cuando haya un error de verdad, ya no se va a notar.
- El enlace verde sin subrayado se confunde con un texto destacado, y la confirmación va en naranjo: los colores no significan nada fijo.
Mide el contraste en el inspector
En el panel de estilos (
F12), haz clic sobre el cuadradito de color de la propiedadcolor. El selector que se abre muestra el contraste con el fondo y marca con un visto bueno si cumple. Revísalo en tus botones y en tu texto gris.
Tipografía legible
| Regla | Clases |
|---|---|
| Párrafos en 16 px o más | text-base (o text-lg en textos para leer con calma) |
| Interlineado holgado en los párrafos | leading-relaxed |
| Líneas de no más de unos 70 caracteres | max-w-prose en el párrafo o su contenedor |
| Texto largo alineado a la izquierda | text-left (el centrado solo para títulos o frases cortas) |
| Una sola familia tipográfica, o dos como máximo | font-sans en el body |
Lo que falla en la mala
Rompe las cinco reglas de la tabla:
text-smconleading-tight, líneas de más de 150 caracteres, el texto largo centrado (cada línea empieza en un lugar distinto) y tres familias mezcladas sin razón: con serifa, cursiva y de máquina de escribir.
Por qué las líneas largas cansan
Al terminar una línea muy larga, el ojo tiene que volver a la izquierda y encontrar el comienzo de la siguiente. Si la línea mide todo el ancho de un monitor, se pierde y vuelve a leer la misma línea.
max-w-prosecorta el párrafo a un ancho cómodo.
Componentes y sus estados
Un componente es una pieza que se repite con la misma forma: un botón, una tarjeta, un enlace del menú. Si todos los botones del sitio se ven iguales, el usuario aprende una vez qué es un botón.
Botones
<!-- Principal: la acción más importante de la vista -->
<button type="submit"
class="cursor-pointer rounded-lg bg-sky-700 px-4 py-2 font-semibold text-white
transition-colors hover:bg-sky-800 active:bg-sky-900
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700
disabled:cursor-not-allowed disabled:opacity-50">
Enviar mensaje
</button>
<!-- Secundario: una acción alternativa, menos llamativa -->
<a href="index.html"
class="inline-block rounded-lg border border-gray-300 px-4 py-2 font-semibold text-gray-700
transition-colors hover:bg-gray-50
focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700">
Volver al inicio
</a>El botón secundario es un <a> y lleva inline-block: un enlace es un elemento en
línea, y el relleno de arriba y abajo de un elemento en línea no ocupa espacio, así
que se encimaría con lo que tenga cerca.
| Estado | Para qué le sirve al usuario | Clases |
|---|---|---|
| Normal | Se reconoce como algo que se puede pulsar | Color principal, relleno, esquinas redondeadas |
hover: | ”Esto responde” | Un tono más oscuro |
focus-visible: | ”Aquí estoy” (con teclado) | Contorno visible |
active: | ”Llegó el clic” | Otro tono más oscuro |
disabled: | ”Todavía no se puede” | Más transparente y sin manito |
Un solo botón principal por sección
Si hay tres botones azules juntos, el usuario no sabe cuál es el importante. Uno es el principal (relleno de color) y los demás son secundarios (solo borde) o simples enlaces.
El texto del botón dice lo que hace
“Enviar mensaje”, “Ver proyectos” o “Descargar CV” dicen qué va a pasar. “OK”, “Aceptar” o “Clic aquí” obligan a leer todo lo de alrededor para adivinarlo.
Lo que falla en la mala
- Tres botones principales, cada uno con una forma distinta (esquinas, tamaño, mayúsculas): no se sabe cuál importa y no parecen del mismo sitio.
- “Aceptar” y “Clic aquí” no dicen qué va a pasar.
- El botón se ve igual en todos sus estados: no responde al cursor, no muestra dónde está el foco y no se nota cuando está desactivado.
transition-colors suaviza el cambio
Sin transición, el color cambia de golpe al pasar el cursor.
transition-colorslo hace en una fracción de segundo, y el botón se siente más cuidado. Úsalo en todos los botones y enlaces, o en ninguno.
Tarjetas
<article class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-md">
<img src="img/taller.jpg" alt="Grupo fotografiando la costanera al amanecer"
class="h-48 w-full object-cover">
<div class="space-y-2 p-6">
<h3 class="text-lg font-semibold text-gray-900">Taller de fotografía</h3>
<p class="leading-relaxed text-gray-700">Aprende a usar la luz natural.</p>
<a href="taller.html" class="font-semibold text-sky-700 underline hover:text-sky-900">
Ver detalles
</a>
</div>
</article>object-cover recorta la imagen para llenar su caja sin deformarla: así todas las
tarjetas tienen la foto del mismo alto aunque las imágenes originales no midan lo
mismo. overflow-hidden hace que la foto respete las esquinas redondeadas.
La vista activa en el menú
<a href="index.html" aria-current="page"
class="border-b-2 border-sky-700 font-semibold text-sky-700">
Inicio
</a>El enlace de la vista actual se distingue por tres señales a la vez (color,
negrita y subrayado grueso), así que se nota aunque alguien no distinga el color.
aria-current="page" es un atributo de HTML que no cambia cómo se ve, pero le avisa
al lector de pantalla que ese enlace es la página en la que está.
Lo que falla en la mala
Todos los enlaces son celestes y el activo es apenas un tono más oscuro (
text-sky-600contratext-sky-500). Es la única señal, y en la versión en grises de abajo ya no se sabe en qué página estás. En la buena, los demás enlaces van entext-gray-700y el activo conserva la negrita y la línea aunque se pierda el color.
Formularios usables
Un formulario es donde más se nota una interfaz mal pensada: es el único lugar en el que el usuario tiene que hacer algo, y cada duda es una razón para abandonarlo.
<div class="space-y-1">
<label for="correo" class="block text-sm font-semibold text-gray-900">Correo</label>
<input id="correo" name="correo" type="email" required
placeholder="ana@correo.cl"
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-base
focus:border-sky-700 focus:outline-2 focus:outline-sky-700">
<p class="text-sm text-gray-600">Te responderemos a esta dirección.</p>
</div>Y el mismo campo cuando hay un error:
<div class="space-y-1">
<label for="correo" class="block text-sm font-semibold text-gray-900">Correo</label>
<input id="correo" name="correo" type="email" required value="ana.correo.cl"
class="w-full rounded-lg border-2 border-red-700 px-3 py-2 text-base
focus:outline-2 focus:outline-red-700">
<p class="text-sm text-red-700">Falta la @. Escríbelo como ana@correo.cl.</p>
</div>| Regla | Por qué |
|---|---|
Un <label> visible en cada campo | El placeholder desaparece al escribir y el usuario olvida qué se pedía |
El placeholder solo como ejemplo del formato | ”ana@correo.cl” ayuda; “Escribe tu correo” repite el label |
| Un foco notorio en el campo activo | Se sabe dónde se está escribiendo |
| El error junto al campo y diciendo cómo arreglarlo | ”Correo inválido” obliga a adivinar; “Falta la @” no |
| El ancho del campo según lo que se espera | Un campo de edad no necesita todo el ancho |
| Marcar lo opcional si es la minoría | Si casi todo es obligatorio, se marca lo que no lo es: “Teléfono (opcional)” |
Lo que falla en la mala
- Sin
label: el primer campo ya tiene un nombre escrito y no se sabe qué pedía.- El correo tiene un borde rojo, pero nada dice qué está mal ni cómo arreglarlo. “Hay errores en el formulario” está lejos y tampoco lo dice.
- Los textos de ejemplo en
placeholder:text-gray-300casi no se ven, y los*en todos los campos no aportan nada.- Campos de anchos al azar y un botón que dice “OK”.
Los mensajes de error los vas a generar en la Unidad 2
Por ahora el campo con error se escribe a mano, para diseñar cómo se va a ver. Cuando PHP valide el formulario, solo tendrá que decidir cuándo poner esas clases y ese mensaje.
Cuatro heurísticas para revisar una interfaz
Las heurísticas de Nielsen son diez reglas clásicas para evaluar si una interfaz es usable. Estas cuatro son las que más se aplican a un sitio como el tuyo:
| Heurística | Qué pide | En tu sitio |
|---|---|---|
| Visibilidad del estado | Que el usuario sepa siempre dónde está y qué pasó | Vista activa marcada en el menú, estados de los botones, foco visible |
| Consistencia | Que lo mismo se vea y se comporte igual en todas partes | La misma navbar, los mismos botones y la misma paleta en las tres vistas |
| Prevención de errores | Evitar el error antes de tener que avisarlo | type="email", required, un select en vez de un texto libre, un ejemplo en el placeholder |
| Reconocer antes que recordar | Que no haya que memorizar nada | Labels siempre visibles, enlaces con nombres claros, el menú a la vista |
En una portada se juntan todos los problemas anteriores. Revísala con las heurísticas:
Lo que falla en la mala
- Visibilidad del estado: el menú no marca en qué vista estás.
- Consistencia: tres botones de tres colores, y tarjetas con imágenes de alturas distintas.
- Reconocer antes que recordar: el título (“Bienvenidos a mi página web personal”) no dice de qué trata el sitio, y los botones dicen “Clic aquí”, “Ver más” y “OK”.
- Además, texto blanco sobre un degradado claro y descripciones en gris muy claro: no alcanzan el contraste.
Pídele a otra persona que use tu sitio
Dale una tarea concreta (“envíame un mensaje”, “encuentra mi proyecto de fotos”) y mira sin ayudar. Cada vez que duda o busca, hay algo que arreglar. Es la prueba más barata y la que más enseña.
Checkpoint
Intenta responder antes de desplegar cada pregunta.
¿Con qué tres cosas se arma la jerarquía visual?
Con el tamaño, el peso (negrita o no) y el color (más oscuro, más importante). El título va grande, en negrita y oscuro; los datos de apoyo, chicos y en gris. Si todo destaca, nada destaca.
¿Por qué
text-whitesobrebg-sky-500es mala idea?Porque no alcanza el contraste mínimo para leerse bien: el celeste es demasiado claro para un texto blanco. Con
bg-sky-700sí alcanza. Se comprueba con el selector de color del inspector.
Un formulario usa solo
placeholdery ningúnlabel. ¿Qué problema tiene?El
placeholderdesaparece en cuanto el usuario empieza a escribir, así que a mitad de camino ya no sabe qué le pedía el campo. Además, el gris del placeholder suele tener poco contraste. Ellabelva siempre, visible, y el placeholder queda solo como ejemplo del formato.
En la captura de espacio, ¿por qué parece que cada descripción pertenece al título de abajo?
Porque está más cerca del título siguiente que del suyo, y el ojo agrupa lo cercano. Con más espacio entre grupos que dentro de ellos (
space-y-2dentro,space-y-8entre), cada título se lee junto a su texto sin dibujar ninguna línea.
En la versión en grises del menú, ¿por qué el bueno sigue funcionando y el malo no?
Porque el malo marca la vista activa solo con un tono de color, que en grises desaparece. El bueno suma negrita (
font-semibold) y una línea debajo (border-b-2 border-sky-700), que no dependen del color. Además,aria-current="page"le avisa al lector de pantalla en qué página está.
¿Qué heurística se rompe si cada vista tiene la navbar en un lugar distinto?
La de consistencia: lo mismo tiene que verse y comportarse igual en todas partes. Si el menú cambia de lugar, el usuario tiene que volver a buscarlo en cada vista.