Respuesta corta: una buena estructura de página web pone lo más importante donde la gente mira primero y deja el texto en una columna lo bastante estrecha para leerse. El seguimiento ocular de NN/g muestra que la gente lee la página por encima en patrones como una F o un pastel por capas. web.dev recomienda que sea el contenido el que decida cuándo cambia la estructura.
Cómo lee la gente una página por encima
En los estudios de seguimiento ocular de NN/g, la gente suele leer la página por encima en forma de F: muchas fijaciones arriba y a la izquierda del contenido, y más en las primeras palabras de cada línea. Casi nunca es una F perfecta, y aparece tanto en computadora como en celular.
NN/g considera el patrón en F negativo para usuarios y empresas, y dice que un buen diseño puede evitarlo. También describe otros patrones. En el patrón de pastel por capas, la gente se fija en los títulos y subtítulos. Salvo la lectura completa, es de lejos la forma más eficaz de leer una página por encima.
En el patrón salpicado, la gente salta grandes bloques de texto buscando algo concreto, como un enlace o un número. En el patrón de compromiso, lee casi todas las palabras, lo que suele dar la mejor comprensión.
Estructuras comunes y cuándo usarlas
Casi todas las páginas usan una de estas tres estructuras:
| Estructura | Sirve para | En el celular |
|---|---|---|
| Una columna | Lectura larga y contenido paso a paso | Sigue siendo una columna |
| Texto con barra lateral | Páginas largas con una lista de secciones o de enlaces relacionados | La barra pasa arriba o abajo del texto |
| Cuadrícula de tarjetas | Elegir entre varias opciones, como servicios o artículos | Menos tarjetas por fila, a menudo una |
Resumen propio; la columna del celular sigue los conceptos básicos de diseño web responsivo de web.dev, consultados el 5 de noviembre de 2026.
Haz que el texto se lea fácil por encima
NN/g sugiere poner los puntos más importantes en los dos primeros párrafos y empezar los títulos y subtítulos con las palabras más informativas. También sugiere agrupar visualmente el contenido relacionado y usar viñetas y números para listas y procesos.
Mantén columnas de texto legibles: web.dev pone el ideal en 70 a 80 caracteres por línea, según la teoría clásica de legibilidad. Nuestra guía de interlineado trata el espacio entre esas líneas.
Deja que el contenido decida dónde cambia
La regla de web.dev es que el contenido decida dónde cambia la estructura, y que no haya desplazamiento horizontal, porque la gente espera desplazarse en vertical. Nuestras guías de diseño web responsive y de reflow en WCAG explican cómo.
Cómo planificar la estructura de una página
- Anota qué tiene que lograr la página y pon el punto más importante en los dos primeros párrafos.
- Empieza cada título con las palabras más informativas.
- Elige la estructura según el contenido: una columna para leer, barra lateral para páginas largas, cuadrícula para elegir.
- Mantén las columnas de texto en unos 70 a 80 caracteres por línea en pantallas grandes.
- Planifica primero la versión del celular y cambia la estructura solo donde el contenido lo pida.
- Comprueba que no haya desplazamiento horizontal y que las imágenes quepan en la pantalla.
- Mira la página como alguien que la lee por encima: los títulos, las negritas y las listas deben transmitir el mensaje.
Cómo se estructuran nuestras propias guías
El 5 de noviembre de 2026 medimos una de nuestras propias guías, la de la cuenta de administrador de Google Ads, en inglés y en español.
En una pantalla de 1,440 px, el texto va en una columna de 640 px de ancho. La lista de Capítulos está en una columna de 280 px a su izquierda, y las dos empiezan a la misma altura. Las líneas tienen en promedio unos 64 caracteres en inglés y 66 en español, algo menos que los 70 a 80 que cita web.dev.
En un celular de 390 px, la lista de Capítulos pasa arriba del texto, y los dos ocupan el ancho de la pantalla menos 20 px a cada lado. Las líneas bajan a unos 38 caracteres en inglés y 39 en español, y no hay desplazamiento horizontal.
Antes de publicar una página
- El punto más importante está en los dos primeros párrafos.
- Los títulos empiezan con las palabras más informativas.
- Las listas y los pasos usan viñetas o números.
- Las líneas de texto rondan como mucho los 70 a 80 caracteres en pantallas grandes.
- No hay desplazamiento horizontal en el celular.
- Los puntos de interrupción siguen al contenido, no a nombres de dispositivos.
RecuerdaLa gente lee por encima antes de leer. Pon el mensaje donde mira primero y mantén las columnas de texto lo bastante estrechas para leerse.
Nuestro servicio de diseño web planifica y crea páginas como estas. Escríbenos en el formulario o por WhatsApp. Para la primera pantalla de una página de inicio, mira nuestra guía de la página de inicio.
Respuestas rápidas sobre la estructura de una página web
¿Qué es el patrón en F de una página web?
Una forma de leer la página por encima que NN/g encontró con seguimiento ocular: muchas fijaciones arriba y a la izquierda del contenido, y más en las primeras palabras de cada línea. Casi nunca es una F perfecta, y NN/g lo considera negativo para usuarios y empresas.
¿Cuál es la mejor estructura para una página web?
Una lectura larga funciona en una columna, una página larga con secciones puede sumar una barra lateral y un conjunto de opciones encaja en una cuadrícula. En el celular, casi todas pasan a una columna.
¿Qué largo debe tener una línea de texto?
web.dev pone el ideal en 70 a 80 caracteres por línea, según la teoría clásica de legibilidad. En el celular las líneas son más cortas; en nuestras guías bajan a unos 38 caracteres.
¿Qué es el patrón de pastel por capas?
Una forma de leer la página por encima que NN/g encontró: la gente mira sobre todo los títulos y subtítulos, como franjas en un pastel por capas. NN/g dice que, salvo la lectura completa, es de lejos la forma más eficaz de leer una página por encima.
¿La gente lee distinto por encima en el celular?
NN/g encontró el patrón en F tanto en computadora como en celular. También vio el marcado, en el que la vista se queda fija mientras la página se desplaza, más en el celular que en la computadora.
Fuentes
Consultadas el 5 de noviembre de 2026. En inglés: Nielsen Norman Group, F-Shaped Pattern of Reading: Misunderstood, But Still Relevant y Text Scanning Patterns: Eyetracking Evidence. web.dev: Conceptos básicos del diseño web responsivo. Nuestro caso: una de nuestras propias guías, medida el 5 de noviembre de 2026.