¿Qué es el Above the Fold de tu sitio web?

25/02/2021 5 min

Escuchar "¿Qué es el Above the Fold de tu sitio web?"

Síntesis del Episodio


Hola soy Jorge Gómez de Bioxnet y hoy te quiero hablar de un concepto de diseño web conocido como "Above the fold" o arriba del dobles.

¿Qué es esto? Imagina un periódico y el periódico está doblado a la mitad, la parte superior o la parte superior del dobles es lo que se llama arriba del dobles este es el "Above the fold".

Y basicamente quiere decir que en el periódico es la parte más importante para poner noticias porque es lo que la gente va a ver en primera instancia.

Cuando la gente toma un periódico, es lo primero que ve y después dobla el periódico y ya ve las noticias y abajo pero las noticias importantes se ponen en la parte de arriba

este principio se ha trasladado al diseño web desde hace muchos años, en la intención que el contenido principal estuviera en la parte superior de la página y que el usuario pudiera ver toda la información sin tener que mover la pantalla, es decir que en esa primera impresión, donde carga el sitio, ahi contuviera toda nuestra información y nuestros botones de acceso de comprar, de llamar o lo que llamamos el "Call to Action", el llamado a la acción.

Aunque el "Above the fold" sigue siendo vigente tiene ligeras modificaciones.

La principal es que ahora los usuarios no le tienen miedo a mover la pantalla o lo que llamamos a hacer el "scroll".

El "scroll" lo hacemos ya de forma natural, piensa que estás en un periódico digital, estás leyendo el contenido, un artículo y el "scroll" lo haces de forma natural.

Las redes sociales también nos enseñan que estamos navegando o estamos yendo hacia abajo sin problema, entonces ya el "Above the fold" no es tan crítico en el sentido que tengamos que apachurrar toda la información en solo cuadro sino que tenemos la libertad de utilizar contenido hacia abajo, pero el principio de importancia sigue vigente.


Aunque ahora navegamos y "scrolleamos" libremente, el principio de prioridad de contenido del "Above the fold sigue siendo vigente. Esto que quiere decir, que nuestro contenido es lo más importante.


Volvamos al periódico: la noticia más importante del día trae el encabezado más grande, las noticias secundarias tienen encabezados más pequeños.

Tu sitio web tiene que contener el mensaje principal lo más alto posible, para que la gente rápidamente entienda tus servicios, tu oferta de productos.

Conforme vas bajando, vas informando a tu cliente de tu oferta, de tu de tus productos o tus servicios y el contenido se va haciendo de una propiedad más alta a una propiedad más pequeña.

La noticia más importante tiene que ir arriba, no la pongas hasta abajo. Cautiva a tu cliente desde arriba, no hacia abajo, porque hay muchos clientes o prospectos que no van a llegar hasta mero abajo de tu sitio web.

Mismo aplica para el botón del llamado a la acción o el "Call to Action".

Tradicionalmente se dice que el botón tiene que estar muy arriba, y es cierto y funciona, pero te voy a poner un ejemplo.

Imagínate que vas a una tienda y la persona que te atiende rápidamente te quiere llevar a la caja que pagues y tú vas a decir: "Espérame, voy llegando apenas estoy viendo".

Entonces, no nos gusta que nos presionan, es mejor entrar ver, leer, aprender y si el botón de "Call to Action" sale ahora en la parte inferior, está bien, la gente ya se informó, le gustó tu producto o servicio y entonces ya puede picar un botón de llamar, de comprar, de siguiente.

Esto aplica también desde luego de un sitio a otro, por ejemplo.

Si tu tienes una tienda en línea, la gente naturalmente quiere entrar y comprar rápido. Entonces si la gente ya viene con una intención de compra el "Above the fold" es muy útil porque tú quieres poner tu producto, el precio y el botón de comprar.

La gente lo quiero hacer rápidamente. si tienes un sitio informativo, la gente primero quiere conocerte, ver de qué se trata tu oferta de productos y servicios, y entonces pones un un botón de "Call to Action".

Muchos sitios web tienen dos botones de "Call to Action".

Esto es normal y está