El 'Above the Fold': cómo captar la atención en menos de 3 segundos

El término «above the fold» viene de los periódicos de papel: doblados en el quiosco, solo se veía la mitad superior de la portada, y ahí iba la noticia que tenía que vender el ejemplar. En una web es lo mismo: todo lo que aparece sin desplazarse. Quien entra tarda entre tres y cinco segundos en decidir si está en el sitio correcto o cierra la pestaña, y esa decisión se toma con lo que hay en esa primera pantalla. Este artículo va de qué poner ahí, qué quitar y cómo saber si funciona.

Por qué esos tres segundos lo deciden todo

Los estudios de seguimiento de la mirada llevan años diciendo lo mismo: la mayor parte de la atención de una visita se concentra en la primera pantalla, y decae rápido según se baja. No es que la gente sea impaciente; es que está comparando. Ha abierto tres o cuatro pestañas desde Google y va descartando.

Lo que hace en esos segundos no es leer. Es escanear en busca de tres respuestas:

1. ¿Qué es esto?
2. ¿Es para mí?
3. ¿Qué hago ahora?

Si la primera pantalla responde a las tres, el visitante sigue bajando. Si tiene que buscarlas, se va a la siguiente pestaña, donde probablemente sí las encuentre.

Y hay una cuarta pregunta, silenciosa, que se responde antes que las otras: ¿parece serio? Se contesta con el diseño, la tipografía y la velocidad, en menos de un segundo. Una web que tarda en aparecer o que se descoloca mientras carga ya ha perdido puntos antes de decir nada. Por eso la velocidad va antes que el texto: lo explicamos en la guía de velocidad para pymes.

Los cuatro elementos que tienen que estar

1. Un titular que diga qué haces y para quién

Es lo primero que se lee y lo que más pesa. Tiene que poder entenderse fuera de contexto, sin saber nada del negocio.

Un buen titular no describe la empresa, describe el resultado. En nuestra portada pone «Webs a medida que tus clientes no olvidan», y debajo, en una línea, para quién y cómo. No hay «soluciones integrales» ni «tu partner digital»: hay lo que hacemos y lo que consigue quien nos contrata.

Una prueba útil: enseña la primera pantalla a alguien que no conozca el negocio durante cinco segundos y pregúntale a qué te dedicas. Si no acierta, el titular no funciona.

2. Una acción principal, y solo una

¿Qué es lo más importante que quieres que haga quien entra? ¿Llamar? ¿Pedir presupuesto? ¿Ver precios? Elige una y hazla el botón más visible de la pantalla. Todo lo demás, un escalón por debajo.

Cuando hay tres botones del mismo tamaño compitiendo, el visitante no elige ninguno. Y el texto del botón importa: «Enviar» no dice nada; «Pide tu presupuesto» o «Habla con nosotros» sí.

3. Un elemento visual que sea tuyo

Una foto del local, del equipo, del producto, o una captura de tu trabajo. Lo que sea, pero real. Las imágenes de banco con gente sonriendo en una oficina blanca se reconocen al instante y transmiten justo lo contrario de lo que se busca: que aquí no hay nadie detrás.

Si el negocio es visual, enséñalo. Nosotros ponemos en la portada las webs de clientes reales, con su dirección al lado, porque una web que se puede abrir demuestra más que cualquier frase.

4. Una señal de confianza

Un logo de cliente, una cifra comprobable, una valoración, un premio del sector. Algo pequeño que responda a «¿y por qué debería fiarme?». No hace falta que ocupe mucho: una línea bajo el titular basta. Lo importante es que sea verificable. «Más de 500 clientes satisfechos» sin nombre ni fecha no convence a nadie; «61.700 apariciones en Google en tres meses, medido en Search Console» sí, porque se puede comprobar. Ese caso lo contamos en el proyecto de Trucking Record.

En el móvil, la primera pantalla es mucho más pequeña

Es el detalle que más se olvida al diseñar en un monitor de 27 pulgadas. En un teléfono, la primera pantalla mide unos 800 píxeles de alto, y la barra del navegador, el menú y el aviso de cookies se comen una parte. Lo que queda es espacio para un titular, una línea y un botón. Nada más.

Por eso conviene diseñar la primera pantalla primero para móvil y luego ampliarla. Si se hace al revés, en el móvil el titular acaba en tres líneas, la imagen empuja el botón fuera de la vista y el visitante tiene que bajar para saber qué hacer.

Y una cosa práctica: el teléfono debe poder pulsarse. Un botón de llamar fijo en la parte baja de la pantalla del móvil suele traer más contactos que cualquier formulario.

Errores que vemos una y otra vez

• Carruseles de imágenes. Casi nadie pasa de la primera diapositiva, ralentizan la carga y reparten el mensaje en trozos que no se ven. Una sola imagen con un mensaje claro funciona mejor.
• Titulares vacíos. «Innovación y compromiso a tu servicio» podría ser el lema de un banco, una clínica o una ferretería. Si el titular vale para cualquier negocio, no vale para el tuyo.
• Efectos que retrasan el texto. Titulares que se escriben letra a letra, imágenes que aparecen con retardo, animaciones de entrada. Cada décima que tarda el mensaje en leerse es una décima de esos tres segundos.
• Demasiado. Ocho servicios, tres botones, dos avisos y un vídeo. Cuando todo grita, nada se oye. La primera pantalla no cuenta la historia entera: consigue que quieran leerla.
• Ninguna acción. Una cabecera bonita con un titular y nada que pulsar. El visitante lee, asiente y no sabe qué hacer. Guíale.

Cómo saber si la tuya funciona

No hace falta adivinar. Hay tres formas de medirlo:

La prueba de los cinco segundos. Enseña la primera pantalla a tres personas ajenas al negocio durante cinco segundos y pregúntales qué vende la web y para quién. Si dos de tres no aciertan, hay que reescribir el titular.

El porcentaje de rebote. Si tienes analítica, mira cuánta gente se va sin hacer nada. Un rebote muy alto en la portada, con tráfico que llega de búsquedas razonables, suele significar que la primera pantalla no confirma lo que el visitante venía buscando.

El mapa de scroll. Herramientas como Contentsquare o Clarity enseñan hasta dónde baja la gente. Si la mayoría no pasa de la primera pantalla, el problema está en ella, no en lo que viene después.

Conclusión

Optimizar la primera pantalla es de las acciones con más retorno que se pueden hacer en una web, porque afecta al cien por cien de las visitas. No consiste en meter más cosas, sino en elegir bien cuatro: un titular que diga qué haces y para quién, una acción principal, una imagen que sea tuya y una señal de confianza comprobable. Y diseñarlo para el móvil, que es donde te ve la mayoría.

Es el primer punto de la lista de elementos que toda web de servicios necesita, y uno de los primeros que revisamos cuando alguien nos cuenta su web. Si quieres empezar por lo técnico, el radar te dice en segundos si la tuya carga lo bastante rápido como para que esos tres segundos empiecen a contar.

Sobre UX/UIDiseño WebConversiónAbove the Fold