¿Qué hay arriba del pliegue y por qué es importante? (+10 ejemplos convincentes)

Cuando navegamos a la página de inicio de un nuevo sitio web, esperamos que la ventana de nuestro navegador se llene de contenido hermoso y bien diseñado. Esa primera vista que un visitante obtiene de su sitio web (antes de desplazarse) es la sección de la mitad superior de la página, y es su oportunidad de causar una excelente primera impresión.

Al diseñar su sitio web, es crucial pensar en las personas que lo verán. Terminarás perdiendo tráfico si colocas más información en la mitad superior de la página de la que puede manejar el lapso de atención humano promedio.

Por otro lado, los sitios web sin nada interesante en la parte superior de la página no causarán ninguna impresión.

En este artículo, repasaremos los entresijos del diseño de la sección de la mitad superior de su página web.

¡Empecemos!

El término "above the fold" proviene de los primeros días de publicación en el siglo XVIII. En aquel entonces, las prensas imprimían en grandes hojas de papel que eran demasiado grandes para exhibirlas en un puesto de periódicos. Los doblaron, de modo que solo se veía la mitad superior del contenido de la portada.

Esto sigue siendo parte de la industria de los periódicos: cuando compras un periódico en un puesto, solo se ve la mitad superior del papel.

Por eso, todas las noticias más importantes del día están impresas en la parte superior de la página. ¡Los editores quieren llamar la atención y atraer a la gente para que compre su periódico!

De manera similar, los anunciantes prefieren esta sección del periódico para mostrar anuncios porque todos la verán, incluso cuando el periódico simplemente se encuentra en un puesto.

La metodología "above the fold" también forma parte del diseño de sitios web.

En el mundo digital, "above the fold" se refiere a la sección visible de la página web que los usuarios ven antes de desplazarse. El objetivo final es alentar a los visitantes a revisar el resto del contenido de la página.

Esta práctica no es tan crucial como lo era antes, porque la mayoría de los usuarios de Internet hoy en día prefieren navegar en las pantallas de los teléfonos inteligentes . Esto significa que están acostumbrados a desplazarse para ver toda la información vital.

Los visitantes llegan a su página web con un período de atención sorprendentemente corto: alrededor de 8 segundos .

¿Ves por qué es tan importante concentrarte en captar su atención lo más rápido posible?

Debe asegurarse de que haya contenido atractivo en la mitad superior de su sitio web, ya sea una foto o un video llamativos, un titular interesante o una combinación de estos.

La mayoría de los diseñadores web y profesionales de SEO recomiendan agregar la información más valiosa en la mitad superior de la página, mientras que otros afirman que hay otros factores en los que centrarse.

Ha habido muchas discusiones acaloradas sobre este tema, especialmente ahora que los usuarios móviles han eclipsado a los usuarios de escritorio en términos de volumen de navegación. Los datos nos dicen que los usuarios móviles están dispuestos a desplazarse para obtener la información que buscan.

De hecho, un informe de MOVR concluyó que el 11% de los usuarios de dispositivos móviles comienzan a desplazarse dentro de los cuatro segundos cuando la página web ha terminado de cargarse. Si la página no ha terminado de cargarse, el 9% ha comenzado a desplazarse en cuatro segundos de todos modos.

Pero no importa qué dispositivo estén usando sus visitantes, ¡es esencial mostrarles de inmediato por qué su sitio merece su atención!

Aquí hay tres sugerencias para ayudar a que su contenido en la mitad superior de la página sea más poderoso:

1. Haz que tu diseño web sea responsive

La importancia del diseño web receptivo va más allá de la estética o de seguir las "tendencias de diseño web más actuales".

Un sitio web receptivo tiene un impacto positivo en la experiencia general del visitante, el compromiso y, en última instancia, las conversiones. Cuando el diseño de su sitio web es fluido y flexible, se verá genial en cualquier pantalla y en cualquier dispositivo que utilicen sus visitantes.

Cuando se ve bien en cualquier lugar, es más probable que los visitantes permanezcan en su sitio web por más tiempo, interactúen más con su contenido y le compren. Esto también hace que sus esfuerzos de marketing omnicanal sean mucho más efectivos, ya que sus mensajes se adaptan al dispositivo y al tamaño de la pantalla.

2. Agregue llamadas a la acción importantes

Agregar una llamada a la acción (CTA) en la parte superior de la página impacta directamente en las tasas de conversión y puede alentar a los visitantes a realizar la acción que usted desea que realicen antes. Puede redirigirlos a una página diferente de su sitio web que contenga instrucciones detalladas, llevarlos a una categoría específica o página de producto, o alentarlos a registrarse.

Hay ocho tipos diferentes de CTA, pero los más importantes son:

• Generación líder
• Botón "Leer más"
• Descubrimiento de productos

Una llamada a la acción convincente puede brindarle resultados espectaculares e intensificar el interés de los visitantes. En resumen, ¡agregar un CTA en el lugar correcto en la parte superior de la página es la mejor manera de lograr que tus visitantes hagan lo que quieres!

3. Coloca el contenido importante en la mitad superior de la página

El contenido de la mitad superior de la página es lo primero que ven los usuarios cuando llegan a cualquier página de su sitio web, por lo que es esencial agregar títulos intrigantes, CTA u otra información vital aquí.

Recuerde ir directo al grano: si no muestra claramente a los visitantes de qué se trata la página, ¡usted sabe muy bien cuál será su próxima acción!

Los carteles grandes, por ejemplo, son hermosos a la vista, pero no transmiten información importante al visitante. Esto puede arruinar las tasas de conversión.

Los usuarios buscan información que sea relevante para sus consultas de búsqueda.

Puede pensar que eso significa que debe hacer todo lo posible y brindar información detallada en la parte superior de la página, pero en realidad es una mala idea. Recuerde, el contenido de la mitad superior de la página debe captar la atención de los usuarios y hacer que se desplacen hacia abajo para profundizar. ¡No los abrumes!

Abarrotar mucha información en la parte superior de la página también hará que su sitio web se vea deficiente y caótico.

Agregar información ambigua, anuncios o cualquier otra cosa que pueda interrumpir el enfoque de los visitantes no le servirá de nada.

Además, si coloca demasiados anuncios en esta sección, es solo cuestión de tiempo hasta que encuentre problemas llamando a su puerta: Google penalizará su sitio web y verá cada vez menos tráfico.

Si un usuario no se siente atraído por el contenido de la mitad superior de la página, las posibilidades de que ese usuario se quede se desplomarán. Es probable que reboten en unos segundos.

Pero espera, ¿cómo es eso malo para el SEO?

Bueno, los motores de búsqueda registran el tiempo promedio que los usuarios pasan en una página, y si los algoritmos no ven suficiente participación de los usuarios, disminuyen lentamente el rango de su página web en la página de resultados del motor de búsqueda.

El contenido de la mitad superior de la página es el mejor lugar para concentrarse si desea reducir sus tasas de rebote, pero esto ciertamente no significa que el contenido de la mitad inferior de la página no importe.

El verdadero trabajo de SEO comienza debajo del pliegue: este es el lugar para sus palabras clave y excelentes encabezados. Si el contenido de la mitad superior de la página hace que los usuarios se desplacen, asegúrese de que encuentren lo que esperan ver debajo de la mitad.

Estos son algunos ejemplos de secciones en la mitad superior de la página de las principales marcas de comercio electrónico. ¡Con suerte, encontrará algo de inspiración para su propio diseño en la mitad superior de la página!

1. Todos los pájaros

Estas atractivas imágenes harán que cualquier visitante se detenga y preste atención a lo que hay en la pantalla. Aún mejor, la ingeniosa copia del titular con rima va increíblemente bien con las imágenes.

También tienen un botón en el que se puede hacer clic tanto para "Comprar hombres" como para "Comprar mujeres", lo que ayuda a los usuarios a encontrar lo que buscan en poco tiempo.

2. Sephora

Sephora se enfoca en resaltar sus productos más vendidos en la parte superior de la página. Las imágenes debajo de la barra de navegación dirigen a los clientes a diferentes categorías de productos de forma rápida y sencilla.

3. Harina Rey Arturo

El sitio web bellamente diseñado de King Arthur Flour promueve su contenido de primer nivel.

Además de ver publicaciones recientes, los visitantes del sitio web también pueden buscar recetas de inmediato. Una vez más, el diseño de la mitad superior de la página se centra en crear una experiencia fácil de usar.

4. Warby Parker

Warby Parker utiliza las mejores propiedades inmobiliarias de la parte superior del pliegue para captar la atención de los usuarios con una gran oferta. Usando solo unas pocas palabras y manteniendo su diseño simple, explican su punto de venta único.

Incluyen tres llamados a la acción: "Comprar mujeres", "Comprar hombres" y (lo más interesante) "Prueba cinco en casa gratis".

5. Shopify

Se puede decir que Shopify está buscando tasas de conversión más altas porque colocan el campo de registro para una prueba gratuita en la parte superior de la página.

Tan pronto como un cliente potencial llega a su página de destino, su atención se dirige a la acción que Shopify quiere que realice.

6. OptiMonk

Al igual que Shopify, el contenido de la mitad superior de la página de OptiMonk tiene como objetivo convencer a los visitantes de que se registren para obtener una cuenta gratuita.

OptiMonk destaca la promesa principal ("las ventanas emergentes de comercio electrónico más poderosas") y la prueba social en forma de premios y reseñas de Shopify.

7. Ahrefs

El diseño web de Ahrefs evita el uso de imágenes en favor de colores llamativos y texto breve para transmitir un mensaje simple: su producto es todo lo que necesita para "clasificarse más alto" y "obtener más tráfico".

El hecho de que haya tan poco en la mitad superior de la página ayuda a centrar la atención de los clientes en el contenido más importante.

8. Entonces te conocí

Esta página de Entonces te conocí es una de las páginas de destino mejor diseñadas de esta lista.

El énfasis inteligente en los colores de la marca con un amplio espacio en blanco, el texto breve y llamativo del título y el singular CTA "Comprar ahora" se combinan para brindar al visitante un gran comienzo en su experiencia de compra.

9. Tienda Caja Feliz

El diseño de la parte superior de la página de Happy Box Store tiene como objetivo presentar la marca a nuevos visitantes. Su botón de llamada a la acción conduce a más detalles sobre su producto principal: paquetes de regalo personalizables.

10. Kotn

Los visitantes del sitio web de Kotn ven inmediatamente dos hermosas fotos que presentan la apariencia de la marca. Después de entusiasmarse con la marca, los visitantes naturalmente querrán seguir su llamado a la acción y comenzar a comprar.

Ahora que hemos discutido la sección de la mitad superior del pliegue y visto algunos ejemplos, es hora de hablar sobre el área debajo del pliegue por un segundo.

"Debajo del pliegue" es todo en una página que solo se puede ver si un usuario se desplaza. Recuerde, este contenido solo se verá si el contenido de la mitad superior de la página hace que el usuario se desplace. De lo contrario, permanecerá oculto y el usuario pasará a otro sitio web.

Tus bloques principales de texto deberán ir en la parte inferior de la página... apunta a secciones digeribles con grandes titulares. La mayoría de los anuncios también pertenecen a la parte inferior de la página: los algoritmos de Google no permiten colocar demasiados anuncios en la parte superior de la página.

Hoy en día, un sitio web receptivo es imperativo. No solo reduce los costos de mantenimiento, sino que también aumenta drásticamente las tasas de conversión. En resumen, mejora la experiencia del usuario, lo que se traduce en tasas de rebote más bajas.

Los beneficios no terminan ahí: con un diseño receptivo, las páginas de su sitio se cargarán más rápido. Y no necesitará crear sitios web separados para todos los dispositivos, lo que significa que no hay contenido duplicado.

A partir de 2020, más de la mitad del tráfico a su sitio web provendrá de dispositivos móviles. Esto significa que debe tener un sitio receptivo que se vea increíble en cualquier tamaño de pantalla y en cualquier dispositivo.

A continuación se muestran algunas de las resoluciones de pantalla más comunes que los diseñadores web utilizan para las páginas web receptivas:

Nota: No existe un enfoque único para todos, así que utilice los tamaños de pantalla después de conocer sus puntos de interrupción.

Resoluciones estándar de sitios web para pantallas móviles:

• 360×640
• 375×667
• 414×896
• 360×780
• 375×812

Resoluciones estándar de sitios web para pantallas de tabletas:

• 768×1024
• 1280×800
• 800×128
• 601×962
• 962×601

Resoluciones estándar de sitios web para pantallas de portátiles:

• 1920×1080
• 1366×768
• 1440×900
• 1536×864
• 1024×768

La primera impresión es la clave del éxito aquí. Desea proporcionar la mejor experiencia de navegación posible para los visitantes habituales y los que visitan por primera vez. Si se ven obligados a hacer mucho zoom para leer el contenido de su página, lo más probable es que la abandonen y busquen un sitio más fácil de usar.

Si tiene demasiado contenido en una página (especialmente en la parte superior de la página), intente reducirlo y concéntrese en la información más importante. Si sigue estos pasos con precisión, estará bien encaminado para brindar a sus usuarios una experiencia impecable y receptiva.

El contenido de la mitad superior de la página debe despertar el interés de los visitantes. Por lo tanto, es esencial agregar su contenido más atractivo y un llamado a la acción enfático allí. El uso de llamadas a la acción estratégicas ayudará a guiar a los visitantes a través del proceso de venta/registro.

El diseño web receptivo garantizará que cada usuario disfrute de la mejor experiencia en su sitio, que comienza con una hermosa sección en la mitad superior de la página.

Recuerde que colocar anuncios en la mitad superior de la página arruinará la reputación de su sitio web y dará como resultado penalizaciones de SEO que son difíciles de manejar. Evite agregar demasiados anuncios en esta sección y asegúrese de seguir todas las pautas de Google.

¡Ahí tienes! A estas alturas, debería tener un buen manejo de la sección de la mitad superior de la página y cómo aprovecharla al máximo. ¡Buena suerte!