Cuando alguien entra en tu web, toma una decisión en menos de cinco segundos. Se queda o se va. Ese es tu ZMOT: tu momento cero de la verdad. Y esa decisión la toma en base a lo que se encuentra antes de hacer scroll, sin haber leído nada, sin haber tocado nada, probablemente mientras hace otra cosa con el móvil en la mano.
A esa primera pantalla se le llama “above the fold». Y la mayoría de las webs la desperdician.
Contenidos
Qué es el above the fold
Above the fold se traduce literalmente como «por encima del pliegue» (o doblez). El término viene de los periódicos. Se exponían en los quioscos doblados y solo se veía la mitad superior de la portada. Esa zona era la que vendía el ejemplar, así que los editores reservaban ahí los titulares más importantes y las fotos más impactantes. En inglés, esa mitad superior se llamó «above the fold».
En diseño web, el concepto se ha quedado tal cual. El above the fold es la parte de una página que el usuario ve al cargarla, sin desplazarse hacia abajo. No tiene un tamaño fijo porque depende del dispositivo, la resolución de pantalla y la altura del menú, pero en la práctica se habla de los primeros 600 a 800 píxeles en escritorio y la primera pantalla completa en móvil.
Lo que cambia respecto al periódico es que el usuario de hoy sí hace scroll, y mucho. Pero si la primera pantalla no le da una razón para quedarse, el scroll no llega.
Por qué esos primeros segundos importan
El 94% de las primeras impresiones de una web se basan en el diseño, no en el contenido. El usuario no llega y lee tu propuesta de valor con calma. Escanea, evalúa y decide en milisegundos si lo que ve le genera confianza o no. No te está juzgando con mala fe, es que tiene otras diez pestañas abiertas. Si quieres puedes profundizar sobre cómo el diseño web afecta al SEO, te lo explicamos en esta otra entrada de blog.
Hay dos datos que lo ilustran bien. El primero: el 53% de los usuarios de móvil abandonan una página si tarda más de 3 segundos en cargar. El segundo: según las investigaciones de Jakob Nielsen, alrededor del 76% de los usuarios no hace scroll si el above the fold no les ha convencido de que vale la pena seguir.
Eso significa que todo lo que pongas debajo de esa primera pantalla, el resto de tu contenido, tu portfolio, tus servicios, tus testimonios, lo ve menos de la mitad de las personas que entran en tu web. No porque no sea bueno, sino porque el above the fold no hizo su trabajo.
Qué tiene que haber y qué no en tu above the fold
Un above the fold que funciona responde tres preguntas en los primeros segundos: dónde está el usuario, qué ofrece esta página y qué puede hacer a continuación.
Los elementos que no deben faltar son estos. Un título con propuesta de valor real, no un eslogan genérico sino una frase que explique con precisión qué haces y para quién. Un subtítulo que aclare el beneficio o el diferenciador. Un elemento visual relevante, ya sea una imagen del producto, una fotografía del equipo o una ilustración que refuerce el mensaje. Una llamada a la acción clara y visible. Y alguna señal de confianza, logos de clientes, un dato relevante o una valoración, que reduzca la fricción antes de que el usuario decida si sigue o no.
Lo que no debería estar ahí es igual de importante. Los carousels o sliders con varias diapositivas convierten peor que un hero estático en prácticamente todos los tests que se han hecho. La primera diapositiva se ve, el resto no existe para nadie.
Los vídeos de fondo que tardan en cargar penalizan el LCP (Largest Contentful Paint), una de las métricas de Core Web Vitals que Google usa para evaluar la experiencia de usuario.
Los pop-ups que aparecen nada más entrar, interrumpen la lectura antes de que el usuario haya tenido tiempo de decidir si le interesa lo que ve.
Y los menús con demasiadas opciones generan parálisis en lugar de orientación.
Los errores más comunes que vemos en proyectos reales
Trabajando con clientes de sectores distintos, los errores que se repiten son siempre los mismos.
- El primero es el mensaje vago. Son CTA poco esforzados como «Soluciones digitales para tu negocio», «Tu partner de confianza», «Innovamos para ti». Frases que podrían estar en la web de cualquier empresa y que no le dicen al usuario nada sobre por qué debería quedarse. Si tu titular sirve para describir a tu competencia con el mismo nivel de precisión que a ti, hay que reescribirlo. El above the fold no es el lugar para el branding abstracto. Es el lugar para decir exactamente qué haces.
- El segundo es priorizar la estética sobre la claridad. Una imagen de fondo preciosa con texto encima en color claro sobre fondo claro. Una sección “hero” con una tipografía expresiva enorme que ocupa toda la pantalla y no deja espacio para ningún otro elemento. El diseño del above the fold tiene que ser bonito y funcional al mismo tiempo. Cuando hay que elegir, la claridad gana.
- El tercero es pedir demasiado demasiado pronto. Un formulario de contacto completo en el “hero”, o tres CTAs distintos compitiendo por la atención del usuario, generan confusión. El above the fold debería tener una sola acción principal. Si quieres que el usuario haga algo más, hay sitio para eso más abajo.
- El cuarto es diseñar solo para escritorio. Muchos equipos diseñan el above the fold pensando en una pantalla de 1440 píxeles y luego lo adaptan al móvil como pueden.
El resultado es un hero que en escritorio se ve perfecto y en móvil esconde el titular debajo del menú, o muestra solo la mitad de la imagen. Con más del 60% del tráfico web llegando desde dispositivos móviles, eso es diseñar para la minoría.
Above the fold en móvil: las reglas cambian
En móvil, el espacio disponible es mucho menor y el comportamiento del usuario es distinto. La gente escanea con el pulgar, no con el ratón, y toma decisiones todavía más rápidas.
El titular tiene que ser más corto porque hay menos espacio horizontal y la tipografía no escala igual que en escritorio. El elemento visual ocupa más proporcionalmente, así que tiene que funcionar solo, sin apoyarse en texto que queda fuera de pantalla.
El CTA tiene que ser lo bastante grande para tocarlo sin dificultad, con suficiente espacio alrededor para evitar clicks accidentales.
En móvil el tiempo de carga es todavía más crítico. Una imagen de fondo de 4MB que en escritorio carga sin problema se convierte en un problema serio en una conexión móvil media. El above the fold móvil tiene que ser ligero además de claro.
El enfoque correcto no es diseñar para escritorio y adaptar a móvil. Es diseñar para móvil primero y luego expandir a escritorio.
Cómo saber si el tuyo funciona
Hay una prueba rápida que puedes hacer ahora mismo. Abre tu web en el dispositivo que más usa tu audiencia, tapa todo lo que está por debajo del primer scroll y responde estas preguntas: ¿Se entiende qué haces? ¿Se entiende para quién? ¿Hay una acción clara que hacer? Si la respuesta a alguna de las tres es no, tienes un problema en el above the fold.
Para ir más allá, las herramientas de mapas de calor como Hotjar o Microsoft Clarity muestran hasta dónde llegan los usuarios con el scroll y en qué elementos hacen clic. Esos datos dicen más sobre el rendimiento real del above the fold que cualquier criterio estético.
Google PageSpeed Insights y GTmetrix miden el tiempo de carga y el LCP, que afecta directamente a cuánto tarda el usuario en ver el contenido de esa primera pantalla. Un LCP por debajo de 2,5 segundos es el objetivo.
Y los tests A/B permiten comparar dos versiones del above the fold con usuarios reales para ver cuál retiene mejor, cuál genera más clics en el CTA y cuál reduce más la tasa de rebote. No hay criterio de diseño que sustituya a los datos de uso real.
El above the fold no es la portada de tu empresa. Es la pregunta que tu web le hace al usuario en los primeros cinco segundos. La respuesta que ese usuario da, sin decirla en voz alta, es quedarse o irse.
En ZeroMoment diseñamos desde la estrategia, asegurándonos de que esos primeros segundos trabajen para tu negocio.
o