Al diseñar una página web efectiva uno de los elementos más importantes a tener en cuenta es above the fold.
En una página Web así como en la vida, la primera impresión que se llevan las personas es la que cuenta.
Esta impresión es lo primero que se ve… El above the fold!
¿Qué es Above the fold?
En marketing digital llamamos above the fold a parte visible que aparece en el navegador cuando se carga por primera vez y sin necesidad de que la persona se desplace (scrolling) a buscar información adicional.
El nombre above the fold, proviene de la imprenta y de cuando el periódico impreso, era la fuente de información primaria…
Así que above the fold se puede pensar como la portada del periódico. La parte que sale una vez el usuario hace scroll se llama below the fold.
¿Por qué prestar atención a la sección “above the fold”?
Cuando se trata del diseño de tu sitio web, una de las partes más importantes es esta mitad superior de la página.
Esto es porque aquí debes explicar claramente tu propuesta de valor y al tiempo, atraer a tus usuarios para que continúen desplazándose y como una invitación a hacer clic en las otras páginas insertas.
Above the fold prepara el escenario para emocionar e interesar a los visitantes con respecto a la información que encontrarán más allá.
Tener en cuenta la información, accesibilidad, el contenido que aparece por primera vez es necesario además para que la página cargue igual en cualquier dispositivo desde el que se abre la página web.
Otras variables como el tamaño, la configuración personalizada con base en el navegador y en el sistema operativo, son elementos que pueden influir en las acciones del usuario final.
Como puedes ver, es un tema que esta directamente relacionado con la experiencia de usuario o user experience UX
Debido a que es la parte de la página web que genera mayor interés en los usuarios, es recomendable mostrar información útil y relevante para que el usuario permanezca más tiempo en el sitio y de esta manera reducir la tasa de salida (exit rate) o la tasa de rebote.
Pero eso no significa que todo lo que deseas mostrar deba estar consolidado en esta sección.
Como optimizar la parte superior de la página (above the fold)
1. Incluye fotos e imágenes impactantes
Usa banners llamativos. Una imagen vale más que mil palabras.
Aprende como diseñar banners para web y las mejores practicas para que sea responsive.
Incluye en la parte superior de tu página (above the fold) imágenes de alta calidad y preferiblemente imágenes que sean propias.
El logo de tu marca debe ser visible en todo momento, así que este es un elemento esencial de la sección.
Evita las galerías gratuitas.
Todo el mundo las usa y son cientos de páginas web las que usan las mismas imágenes repetidas y tu seguramente no vas a querer verte exactamente igual a los demás.
2. Escribe textos originales
También es fundamental tener un excelente copy. No solo debes cautivar a tus visitantes con colores e imágenes impactantes, sino que además debes enamorarlos con tu oferta.
Usa palabras que la competencia no usa, describe tu producto o servicio mejor que los demás y haz uso del story telling.
Haz que tus clientes se enamoren de ti y de tu marca, no de las características de los productos.
3. Haz analítica de tu página
Actualmente existen múltiples plataformas que permiten visualizar el contenido cuando se carga una página en cualquier dispositivo.
Puedes usar desde heatmaps que permiten ver donde interactúan los usuarios con tu contenido.
Esto es importante… Debes optimizar above the fold para tus distintas pantallas.
Así que busca hacer un diseño responsive para cualquier tipo de usuario, ya que puede ser que prefiera entrar desde una versión móvil por lo que se mostrará información diferenciada a la versión de escritorio.
Tip: Normalmente en móvil evita algunas imágenes y debes ser muy cuidadoso con la ubicación de los botones. Además, si la página tiene mucho contenido, también se sintetiza o elimina parte de él.
No solo debes velar por que se vea bien la parte superior de tu página, es muy importante que cargue muy rápido. Esto tiene que ver con la estructura de archivos y velocidad de servidores.
Puedes usar herramientas de analítica cuantitativa que te permita conocer la velocidad de carga y respuesta de servidores (entre otras cosas)
Para estas optimizaciones puedes usar herramientas como Google Analytics o Google Page Speed Insights.
Ejemplos de contenido optimizado Above the Fold
Si aún no estás seguro de cómo se ve un excelente contenido “above-the-fold”, aquí hay algunos ejemplos para ayudarte a comenzar.
OptimizeMyBnb.com tiene un enfoque personal en su diseño web. El propietario del sitio aparece como la imagen y parece estar mirando directamente al lector. A la derecha de la foto, hay un titular de bienvenida que describe los beneficios del sitio y botones que ofrecen a los lectores la opción de obtener más herramientas e información.
Wistia presenta sus servicios utilizando texto breve y videos para mostrar sus capacidades. Se anima a los usuarios a ver un video inspirado en un programa de entrevistas que explica los servicios de Wistia. Cuando aparecen personas reales en un sitio web, es más acogedor y obliga a los usuarios a explorar más. La página de inicio sencilla hace que la marca se sienta informal pero profesional. Los botones invitan a los usuarios a hacer clic para obtener información adicional.
El sitio web de InVision incluye un diseño elegante “above-the-fold” que superpone texto afilado en la parte superior de un video que muestra una vista general de su empresa. Esto les da a los visitantes una idea del video y los incita a verlo. El diseño también cuenta con una llamada a la acción vibrante para una versión gratuita de su servicio.
La página de inicio de ProBlogger tiene muchas llamadas a la acción. ¡Únete a la comunidad de Facebook! ¡Suscríbete! ¡Escucha un podcast! Mira los enlaces de las redes sociales. Aunque esto puede parecer desordenado, para ciertos mercados, puede estar bien romper la regla de una sola llamada a la acción. Si eres un blogger y quieres hacer de ello una carrera, este contenido “above-the-fold” aclara que quieres ser miembro de ProBlogger y mejorar tu juego de blogs. Cuenta con una imagen de Darren Rowse mirando directamente a los ojos del lector para llamar su atención.
La página de inicio de Missinglettr funciona porque el titular va directo al grano sobre qué desafíos pueden resolver para sus visitantes. Su único titular y una explicación de una oración dan detalles sobre el producto con una llamada a la acción visible dirigida a aquellos que están listos para probar sus servicios. Su llamada a la acción ofrece una prueba gratuita y utiliza viñetas para mostrar que no se requiere una tarjeta de crédito y que los usuarios pueden cancelar en cualquier momento.
El sitio web de SPI logra un gran equilibrio en su contenido “above-the-fold”. El contenido es limpio, despejado y tiene suficiente espacio entre el texto. La premisa de sus servicios se muestra en solo cuatro líneas de texto y cuenta con una llamada a la acción conspicua. Las imágenes de personas reales y la prueba social ayudan al diseño a conectarse con los usuarios y los hacen querer aprender más.
El sitio de Gramarly tiene un título muy claro, seguido de una simple oración que explica exactamente qué desafíos puede resolver su software para el usuario. Tiene un botón de llamado a la acción obvio y clickeable para comenzar a usar el programa de forma gratuita. Además, incluye un video que muestra el programa en acción para que los visitantes puedan ver cómo funcionará si deciden probarlo.
La página de inicio de Hubspot muestra exactamente cómo empezar con Hubspot. Ofrece al usuario cuatro opciones de llamado a la acción, cada una explicada con declaraciones simples y ofrece un botón clickeable para obtener una demostración de una de ellas.
LinkedIn deja claro qué servicios están disponibles si te unes a su comunidad. La página de inicio incluye opciones para buscar trabajo, encontrar a una persona que conozcas o aprender una nueva habilidad. Los botones “Iniciar sesión” y “Unirse ahora” aparecen en la esquina superior derecha y una gráfica colorida ayuda a explicar aún más sus servicios.
Ahora es tu turno.
¿Tienes algún ejemplo que quieras compartir sobre páginas que utilicen de manera sobresaliente la sección superior de la página?
miércoles, 22 de marzo de 2023