Jerarquía de contenido en IU

1) Por qué se necesita una jerarquía

• responde a tres preguntas en 3-5 segundos: ¿qué es? → ¿qué es importante? → ¿qué hacer?;
• hace que la interfaz sea predecible y fácil de escanear;
• reduce los errores y aumenta la conversión.

Principios: señales> ruido, secuencia> diversidad, contexto> reglas absolutas.

2) Niveles de importancia y estructura

1. Contexto de navegación (marca, sección, migas/migas de pan).

2. H1 es el objetivo de la pantalla (lo más corto posible, verbo si es necesario).

3. Lead/subtítulo (una línea de beneficio o estado).

4. Acciones primarias (1-2 CTA clave).

5. Datos primarios (principales KPI, tarjetas de «primera línea»).

6. Datos secundarios (piezas, filtros, tablas auxiliares).

7. Meta/Help (pistas, notas, texto legal).

Regla: en una pantalla hay un H1, no más de dos CTA primarios.

3) Tipografía y ritmo

Escala de fuentes: H1 28-32, H2 22-24, H3 18-20, cuerpo 14-16, micro 12 (px/pt equivalente en la web).
Intervalos entre líneas: 1. 3–1. 5 para el cuerpo, 1. 2–1. 3 para los titulares.
Ritmo de sangría: múltiplo de la unidad básica (4/8 px). Zagolovok↔blok: 16 a 24; Párrafos: 8-12.
Contraste: mínimo de WCAG AA; el título es siempre más contrastado que las firmas/metas.
Color vs peso: color - acento, no «muleta» en lugar de tamaño/grasa.

4) Cuadrícula y diseño

Cuadrícula de 12 columnas (escritorio )/4-6 (móvil) con gateras fijas.
Visually first = first in DOM: ayuda a los captores de pantalla y SEO.
Eje de lectura: de izquierda a derecha (LTR) o de derecha a izquierda (RTL): espeja el orden de las señales.
«Zonas de atención»: la parte superior izquierda/centro es el título y el lead; «banda de acción» - cerca/debajo de ella.

5) Señales visuales de prioridad

Tamaño y peso (tipografía): señal primaria.
Posición (superior/izquierda = más importante con LTR).
Color (acento para CTA, estados - por paleta fija).
Iconografía (sólo como soporte de texto).
Sangrías/encuadres (la tarjeta con más «aire» se percibe más importante).
Dinámica (animación ≤ 200 ms para llamar la atención sin irritar).

6) Revelación progresiva

• Above the fold es sólo el contexto, el objetivo y la acción primaria.
• Secciones-acordeones/tabas - datos secundarios.
• Detalle por clic (drill-down): tarjeta → panel → modal.
• Pistas en línea en lugar de «helps» sobrecargados.
• Los skeleton/playsholder conservan la estructura durante el tiempo de carga.

7) Jerarquía en pantallas tipo

7. 1 Dashboard

Filtro de tiempo H1 + en la parte superior.
Banda KPI (3-5 tarjetas) - primera línea.
Gráficos/tablas - segunda línea, clasificación/filtros cercanos.
Anomalías/alertas - columna/cinta separada, no mezclar con KPI.

7. 2 Directorio/lobby

H1 + filtros/chips rápidos.
Ordenar más cerca del título, CTA «Jugar/Comprar» en la tarjeta.
Etiquetas (nuevo/top/jackpot) - visualmente secundarias con respecto al título.

7. 3 Tarjeta de esencia (juego/mercancía)

Héroe-zona: título (H1), hechos clave (RTP/volatilidad/calificación), CTA primario.
Detalles: pestañas «Descripción/Características/Comentarios».
Metadatos: etiquetas y texto legal en la parte inferior.

7. 4 Formularios/Asistentes

Título del paso + breve lead («2 minutos, la tarjeta no se cargará»).
Orden de campos por frecuencia/obligatoriedad.
CTA a la derecha/abajo, acciones auxiliares - enlaces en la parte inferior/izquierda.
Errores - cerca del campo, brevemente y sobre el caso.

8) Priorización de estados

• Norma → Descarga → Éxito/Vacío → Error.
• En la descarga - guardar el marco (esqueletos), CTA no salta.
• En el error - H1 cambia a «lo que pasó», CTA - «repetir/contactar».

9) Tokens de contenido y sistema de diseño

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Roles de texto: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Roles de color: 'accent/neutral/success/warn/danger' + 'niveles' (100-900).
• Componentes: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Medición y calidad

• Tiempo de análisis (mediana hasta el primer clic/acción significativa).
• Focus Order Errors (cuántas veces el usuario «falla» con la mirada).
• CTA Visibility% (cuánto ha visto CTA vs clic).
• INP/CLS (la jerarquía no debe «saltar» cuando se carga).
• A/B: más grande H1 vs más fuerte contraste; filtros de chips en la parte superior vs en la barra lateral.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) Prácticas para iGaming (ejemplo)

Lobby Casino: H1 «Lobby», chips «Nuevo/Live/Jackpots/Favorito», luego azulejos. En cada tarjeta está el nombre, icono del proveedor, CTA «Jugar»; etiquetas «nuevo/bote» - secundario.
Dashboard del operador: la primera fila es NGR/GGR/DAU/CR, la segunda son tendencias y anomalías, la tercera son tablas.
Paso de pago: H1 «Recarga», lead «Sin comisión, instantáneamente», lista de métodos de conversión, mínimo de metatexto en la parte superior.

12) Antipatternas

Diez acentos idénticos en fuerza en la pantalla («grito visual»).
Títulos como imágenes/iconos sin texto (rompe la disponibilidad y la búsqueda).
«Resultados en letra pequeña», y notificaciones con pancartas gigantes.
Referencias auxiliares junto al CTA primario del mismo peso visual.
Orden descoordinado: hoy «filtros arriba», mañana «izquierda».

13) Lista de verificación de implementación

1. Defina el objetivo de la pantalla (H1 + 1-2 acciones primarias).
2. Marque los niveles: primario/secundario/meta; fije en los tokens DS.
3. Recoge la escala de tipografía y el ritmo de sangría básico.
4. Depure los estados (carga/vacío/error) sin saltos de CIEN/títulos.
5. Realice una «prueba de escaneo» de 5 min con 3-5 personas: que noten dónde hicieron clic.
6. Conecte la telemetría (exposure CTA, scan time, focus order).
7. Fije el patrón en las haydlines con ejemplos de «antes/después».

14) Resultado

La jerarquía de contenido no es una «fuente grande para el maestro», sino un sistema de soluciones: tipografía, cuadrícula, color, ritmo de sangría, orden en el DOM y comportamiento en diferentes estados. Cuando cada nivel tiene su papel y peso, la interfaz se vuelve comprensible, rápida y predecible, y los usuarios confían en sus acciones.