Home Blog/ Transformación digital/
Transformación digital
Above the fold: una sección para enamorar a los usuarios de tu sitio webAbove the fold: una sección para enamorar a los usuarios de tu sitio web

Above the fold: una sección para enamorar a los usuarios de tu sitio web

Eduardo Nu√Īez - 14 Abr 22

Articulo

7 min.

El above the fold es la primera imagen de una p√°gina web para cualquier visitante. Si tienes en cuenta que, en la actualidad, un usuario promedio suele ser impaciente cuando ingresa a un sitio web, su importancia es evidente.

En un reporte publicado en el blog de Sweor, se menciona que el visitante promedio de un sitio web demora solo 50 milisegundos o 0.05 segundos para formarse una opinión sobre la página y, por ende, para decidir si la abandona o permanece. Suena cruel, pero está muy cerca de la verdad para la mayoría de usuarios de internet.

Por ello, en el siguiente art√≠culo, te explicamos el significado de above the fold, sus elementos, importancia y las recomendaciones necesarias para sacar ventaja de un buen above the fold. ¬°Dise√Īa para complacer al usuario!

¬ŅQu√© es el above the fold?

El above the fold es la primera sección que se despliega frente a un usuario cuando ingresa en una página web. El contenido del above the fold es solo aquello que el usuario puede visualizar antes de hacer scroll o desplegarse hacia abajo. Incluye la cabecera, el texto, los titulares, las barras de navegación, los botones, el logo y cualquier elemento incluido en la sección o cuadrante que aparece en el primer golpe de vista del visitante.

Traducido al espa√Īol, el t√©rmino above the fold significa, literalmente, ‚Äúsobre el pliegue‚ÄĚ. Su origen proviene de los peri√≥dicos de papel que se mostraban doblados a la mitad sobre las estanter√≠as de venta de diarios. El hecho de que estuvieran doblados formaba un pliegue, cuya parte superior era lo √ļnico que pod√≠a ver una persona para determinar si compraba el peri√≥dico o no. Es decir, lo que originalmente significa above the fold es una analog√≠a de la experiencia de usuario en una p√°gina web.

 

¬ŅCu√°l es la importancia del above the fold?

Luego de entender qu√© significa el above the fold, es igual de importante conocer para qu√© sirve. La calidad de esta secci√≥n en una web tiene un impacto directo en las m√©tricas de engagement del usuario. Si el dise√Īo es amigable y el contenido pertinente para su b√ļsqueda, es altamente probable que contin√ļe visitando las otras secciones de la p√°gina.

Una exploración más prolongada del sitio web reduce la tasa de rebote. Como consecuencia, el usuario está más próximo a realizar una acción, lo que eleva las probabilidades de la conversión deseada. Para lograr tal fin, es necesario enfocarse en una experiencia del usuario efectiva en desktop, PC, tablet, smartphone y otros tipos de dispositivos. 

Como lo dice B√°rbara Lyschenko, profesora de nuestro curso online de Fundamentos de Dise√Īo de Interfaces UI, ‚Äúhoy en d√≠a es importante pensar la experiencia del usuario desde diferentes dispositivos, considerando tanto la comodidad al acceder como la navegaci√≥n del usuario a trav√©s de tu interfaz digital‚ÄĚ. Esta distribuci√≥n estrat√©gica responde a las distintas ubicaciones que adopta el contenido, dependiendo del tama√Īo del dispositivo. Por ello, en un sitio web actual, el above the fold sirve para enganchar al usuario e invitarlo a seguir navegando por otros contenidos importantes distribuidos en las siguientes secciones de la p√°gina.

prototipo de dise√Īo m√≥vilFuente:¬†Unsplash

Elementos del above the fold

Como se puede deducir de lo anterior, crear un above the fold √≥ptimo parte de un dise√Īo UX/UI bien planificado. En las p√°ginas m√°s importantes del sitio web de una empresa, como la p√°gina de inicio, se debe aprovechar el espacio del above the fold para incluir elementos que se√Īalen el aporte del producto o servicio y describan la soluci√≥n que el visitante busca. Te dejamos una lista con los contenidos de un above de fold ideal.

  • Titular con PUV: El t√≠tulo del above the fold debe mostrar claramente la Propuesta √önica de Valor (PUV) del negocio. El objetivo es convencer al usuario de que la soluci√≥n ofrecida es la que necesita para resolver su pregunta o problema.
  • Copy de descripci√≥n principal: En un p√°rrafo con copywriting convincente, se explican las caracter√≠sticas y funciones del servicio o producto para que el usuario entienda su valor.
  • Visual branding: En la cabecera del above the fold tambi√©n deben incluirse el logo, los colores y los elementos de identidad visual que representan a la marca para generar asociaciones en la mente del cliente.¬†
  • Navegaci√≥n: Es necesario ubicar un √≠cono o barra de navegaci√≥n intuitiva que permita al visitante desplazarse hacia otras secciones del sitio web.
  • Informaci√≥n de contacto: La opci√≥n de contacto en el above the fold es importante para generar confianza en el usuario, algo que lo coloca m√°s cerca de la marca y lo aproxima hacia una conversi√≥n futura.
  • CTA (opcional): Dependiendo de la categor√≠a del producto o servicio y de la estrategia de adquisici√≥n de usuario, se puede colocar un CTA en el above the fold. Si no es conveniente, un CTA debe incluirse en el below the fold, es decir, en el contenido que aparece luego de que el usuario realice el desplazamiento o scroll.

cabecera de sitio webFuente: Unsplash

¬ŅC√≥mo funciona el Above the fold para el SEO?

Aparte de funcionar en las p√°ginas de inicio, el above the fold tambi√©n se despliega en las otras p√°ginas de un sitio, como los art√≠culos del blog, las categor√≠as de una tienda online, etc. En todos estos casos, un above the fold bien dise√Īado ayuda a cumplir los requerimientos de posicionamiento SEO.

Las caracter√≠sticas del above the fold influyen en la percepci√≥n de un usuario y de los sistemas de crawling de Google. Por ese motivo, una buena experiencia de usuario en el above the fold reduce los periodos de latencia para la carga y la tasa de rebote de la visita, lo que permite enviar se√Īales positivas al algoritmo del buscador.

analistas de dise√Īo webFuente:¬†Unsplash

Recomendaciones para el above the fold

De seguro, ahora te est√°s preguntando c√≥mo dise√Īar un above the fold efectivo para los usuarios de tu p√°gina. Para lograrlo, es necesario que apliques los principios de dise√Īo de interfaz m√°s recomendados. Aqu√≠ te dejamos una lista con 4 tips para el above the fold del sitio web de tu empresa.

1. Construir una p√°gina de carga r√°pida

Seg√ļn el blog de Ahrefs, la m√©trica velocidad de carga o pagespeed es el tiempo que toma una p√°gina web para cargarse frente al usuario por primera vez. Sin duda, esta m√©trica es fundamental para asegurar una buena experiencia de usuario y el cumplimiento de los requisitos SEO de toda p√°gina. M√°s a√ļn, teniendo en cuenta que los usuarios de internet de hoy rara vez soportan la lentitud de carga de una web.¬†

Para alcanzar un pagespeed óptimo, puedes usar algunas herramientas de análisis de velocidad de carga y seguir las indicaciones que brindan. Pon especial atención al uso de las imágenes. Estas suelen causar los problemas de carga más notorios. Si logras tener un sitio web veloz, la carga del above the fold cumplirá su objetivo.

 

2. Determinar la posición del botón CTA

En el pasado, se recomendaba que ubicar un botón CTA en el above the fold para cualquier sitio web. Sin embargo, en la actualidad, al haber distintas medidas de dispositivos, el above the fold de un sitio web no se visualiza igual en una PC, en un teléfono o en un ipad. 

Por eso, debes ubicar un botón de llamada a la acción en el above the fold si la página tiene como intención generar la conversión del usuario. Por el contrario, si la intención es generar engagement primero, como sucede en muchas ocasiones, probablemente convenga colocar el above the fold en otras secciones de la web.

página web en laptopFuente: Unsplash

3. Crear una navegación clara y simple

Una de las se√Īales de un above the fold funcional es su navegaci√≥n. Si el dise√Īo del wireframe UX ha sido trabajado de manera coherente, todos los above the fold de la p√°gina web gu√≠an al usuario hacia sus objetivos de navegaci√≥n de manera fluida e intuitiva. En ese caso, el usuario ubica r√°pidamente los espacios de la p√°gina que necesita recorrer mediante una cantidad m√≠nima de clics y desplazamientos. Esta navegaci√≥n simple y entendible asegura la satisfacci√≥n del usuario en el sitio web.

4. Optimizar la experiencia de usuario UX para versión móvil

Como sabes, la mayor cantidad de b√ļsquedas en internet se realizan desde un tel√©fono m√≥vil. Por ello, el uso del dise√Īo responsive y la experiencia de usuario en versi√≥n m√≥vil son criterios muy importantes al momento de pensar en el above the fold. Recuerda que incluso entre marcas de tel√©fono m√≥vil existen diferentes tama√Īos de pantallas. Esto requiere que, cuando pienses en el dise√Īo UX/UI del sitio web, tomes en cuenta los distintos formatos que puede adoptar el contenido ante el usuario.

dise√Īo UX de versi√≥n m√≥vilFuente:¬†Unsplash

Estas son las ideas sobre el above the fold que necesitabas conocer. A partir de ahora, es conveniente que planifiques estrat√©gicamente la creaci√≥n de ciertas secciones del sitio web que proveen¬†de contenido al above the fold. Como siempre, lo m√°s importante es dise√Īar con el foco en las necesidades y la experiencia del usuario.

Te dejamos una invitaci√≥n a nuestros cursos online de D ise√Īo y desarrollo de productos digitales. En ellos, puedes aprender m√°s sobre interfaces, usuarios, p√°ginas web y otras tem√°ticas relacionadas. ¬°√önete a la comunidad Crehana y aprende a crear para tus usuarios!