El Above the Fold es la primera imagen que un sitio web te muestra cuando la visitas. Si tomas en cuenta que, actualmente, un usuario regular suele estar impaciente al ingresar a un sitio web, entiendes que es algo muy importante. Una persona solamente tarda 50 milisegundos para generar una idea sobre tu página y, por lo tanto, toma la decisión de abandonarla o no. Aunque suena cruel, es algo muy cercano a la realidad y, entonces, debes conocer qué es el Above the Fold y su papel en todo esto.
El Above the Fold es el primer pantallazo que la web despliega al usuario cuando ingresa a ella. El contenido del Above the Fold es solamente lo que el visitante percibe antes de hacer scroll o navegar hacia abajo. Involucra la cabecera, el contenido, los titulares, los botones, el logo, las barras de navegación y cualquier otro ícono en la sección que aparece en primera instancia al visitante.
En español, la frase Above the Fold quiere decir que, en sentido literal, “sobre el pliegue”. Su origen está ubicado en los periódicos de papel que eran mostrados doblados por el medio en las estanterías que vendían los diarios. La acción de doblarlos formaba un pliegue, cuya parte superior era lo primero que visualizaba la persona para pensar si comprarlo o no. Esto quiere decir, lo que en un principio significa Above the Fold, es una asimetría de la experiencia del visitante a un sitio web.
Ahora que sabes qué es Above the Fold, es igual de importante saber para qué lo puedes usar. La calidad de esta sección en un sitio web depende directamente de las métricas de engagement del visitante. Si el diseño es atractivo y el contenido presente para su búsqueda, es muy probable que siga el mismo continúe visitando otras secciones de la web.
Una búsqueda más prolongada en tu web disminuye la tasa de rebote, en consecuencia, el usuario tiene más probabilidad de ejecutar una acción, lo que aumenta la conversión deseada. Para lograrlo, necesitas enfocarte en garantizar una experiencia al usuario agradable en desktop, Tablet, smartphone, PC y cualquier otro dispositivo.
De acuerdo con la profesora de Fundamentos de Diseño de Interfaces UI, Bárbara Lyschenko: “hoy en día es necesario poner de primero la experiencia del usuario desde varios dispositivos. Así, al dar mayor comodidad de acceso y ofrecer mejora navegación visitante por medio de una interfaz digital”. Este tipo de distribución estratégica es la respuesta a distintas formas que adopta el contenido, en función del tamaño del dispositivo. Por este motivo, en tus webs actuales, el Above the Fold es utilizada para enganchar al usuario desde el comienzo y hacerlo navegar por otros contenidos relevantes en cada sitio.
De acuerdo con lo que te he mencionado anteriormente, diseñar un Above the Fold óptimo inicia desde un diseño UX/UI correctamente planificado. En los sitios más importantes de una empresa, como la página home, debes aprovechar el espacio del Above the Fold para anexar elementos que indiquen el aporte del producto o servicio. Igualmente, describir la solución que representa para el visitante, por lo que te dejo una lista de contenidos de esta sección:
Además de servir en las páginas de inicio, el Above the Fold es usado para desplegar otra web en tu sitio, como es el caso de los artículos de blogs, catálogos de una tienda online, etc. En cualquiera de estos casos, un Above the Fold bien planificado te permite cumplir los requisitos del posicionamiento SEO.
La principal característica del Above the Fold es trabajar la percepción de un usuario y de las arañas de Google. En consecuencia, una experiencia de usuario agradable en el Above the Fold disminuye el tiempo de latencia para cargar tu sitio y la tasa de rebote. Lo que significa un mensaje positivo para el algoritmo del buscador que busca webs que tengan buenas cifras en estos aspectos.
Seguramente, ahora tienes dudas sobre cómo diseñar correctamente el Above the Fold para los visitantes de tu sitio web. Para hacerlo, debes aplicar los siguientes principios de diseño de interfaz más usados por los expertos, los cuales te dejo a continuación:
De acuerdo con los expertos, la métrica de velocidad de carga o término pagespeed, es el tiempo que dura una web para cargar por completo frente a un usuario por primera vez. Por lo tanto, es una métrica crucial para asegurar una buena experiencia al visitante y cumplir los requerimientos SEO de toda página. Aún más, considerando que las personas que ingresan a Internet hoy en día, muy poco soportan un sitio que carga demasiado lento.
Para tener un pagespeed óptimo, puedes emplear algunas herramientas de análisis de velocidad de carga y continuar las indicaciones que brindan. Presta atención especial al empleo de imágenes, estas pueden ser atractivas, pero terminan incrementando los tiempos de carga de manera significativa. Si logras crear una web veloz, la carga del Above the Fold te garantizará los mejores resultados.
Anteriormente, era normal ubicar el botón de CTA en el Above the Fold para un sitio web. Ahora, en la actualidad, al existir distintos tamaños en las pantallas de los dispositivos, el Above the Fold de una página no puede ser visualizada de la misma forma que en una PC, IPad o teléfono móvil.
Por este motivo, tienes que ubicar un botón de llamada a la acción en el Above the Fold siempre y cuando la web tenga la intención de aumentar la tasa de conversión del visitante. En caso contrario, si lo que quieres es aumentar el engagement en primera instancia, como pasa en varias ocasiones. Entonces, es más conveniente para ti poner el Above the Fold en otra sección de la página.
Una de las señales de que un Above the Fold está bien planificado es la navegación del usuario. Si el diseño UX es trabajado de manera correcta, todo el Above the Fold de la web guiará al visitante hacia el objetivo de manera intuitiva y fluida. Si es el caso, la persona encuentra rápidamente la sección del sitio que desea recorrer con la menor cantidad de clics posibles y desplazamientos. Este tipo de navegación entendible y rápida garantiza la satisfacción de cualquier que esté en tu página.
Como muchos saben, la mayor cantidad de búsquedas en Internet son realizadas desde un dispositivo móvil. Por lo tanto, emplear un diseño responsive y la experiencia de navegación del usuario desde estos elementos son factores importantes que debes considerar en tu Above the Fold. No olvides que las marcas de smartphones tienen diferentes tamaños de pantallas debido a cada modelo que existe. Lo que significa que, al hacer el diseño UX/UI de la web, debes recordar los distintos formatos que el contenido va a adoptar frente al visitante.
Si quieres conocer qué es el Above the Fold en otros sitios webs, solamente tienes que ingresar a Internet y explorar cualquiera y esperar a que cargue. Lo primero que veas al entrar es lo que forma parte del concepto de este recurso, y para ser más específico observa el inicio de NeoAttack. La misma es una agencia de marketing digital, y simplemente muestra un diseño atractivo a todo aquel que ingresa por primera vez. También, tiene un banner destacado en el centro en donde puedes ver los distintos servicios y el nombre de la firma junto con otros datos.
Ahora que sabes qué es Above the Fold, necesitas tener a la mano los consejos más importantes para sacarle provecho. Es conveniente que planifiques de manera estratégica la creación de distintas secciones de tu web y proveerlas de contenido. Debes recordar que lo más crucial es el diseño de acuerdo al foco de necesidades y la experiencia del visitante. Entonces, no esperes más y aplica cada uno de los pasos mencionados para crear tu Above the Fold con un atractivo que aumente la tasa de conversión de tu negocio.
Asler Cedeño
Redactor e investigador con 3 años de experiencia. Actualmente trabajo como ingeniero químico, y como redactor de contenidos en Bloguero Pro.
Este artículo puede contener enlaces de afiliados. El autor podrá ganar un porcentaje de comisión por cada venta realizada. Lea aquí para más información.
This article may contain affiliate links. The author may earn a percentage of commission for each sale made. Read this for more information.
Las ventajas del flat design o diseño web plano permite mejorar la experiencia de usuario, descubre cómo te ayuda a que la persona navegue más tiempo en tu sitio web.
Existen hackers en la red que lanzan incursiones para afectar el funcionamiento de un website. Por ello, es recomendable que conozcas qué es un ataque DDos y cómo puedes prevenirlo.
¿Conoces las ventajas y desventajas de Entity Framework Core? En este artículo te mostramos las más importantes para que puedas decidir si es la plataforma adecuada para tus necesidades.
¿Quieres saber qué es el hacker keylogger y cómo prevenir? Este artículo te muestra en qué consisten, sus tipos y 5 consejos para protegerte que te dejarán fascinado.