Above the fold

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.

Concepto de “Above the Fold” en Diferentes Dispositivos

1. En Dispositivos de Escritorio:

• El área “above the fold” en una pantalla de escritorio suele ser más grande y puede mostrar más contenido debido a la mayor resolución y tamaño de pantalla.
• Los usuarios pueden ver múltiples elementos a la vez, como menús de navegación, imágenes destacadas, titulares importantes, y llamadas a la acción.

2. En Dispositivos Móviles:

• El espacio es limitado, lo que significa que el área “above the fold” es mucho más pequeña.
• Es crucial priorizar el contenido y mostrar solo los elementos más importantes, como un titular claro, un menú simplificado, y una llamada a la acción prominente.

Importancia del Diseño Responsivo

1. Adaptabilidad a Diversos Tamaños de Pantalla:

• Un diseño responsivo se adapta automáticamente al tamaño de la pantalla del dispositivo, asegurando que el contenido “above the fold” sea siempre efectivo y atractivo, sin importar cómo acceda el usuario al sitio.

2. Mejora de la Experiencia del Usuario:

• Los usuarios esperan una experiencia fluida y coherente en todos los dispositivos. Un diseño responsivo garantiza que el contenido crucial esté siempre visible y accesible, mejorando la usabilidad y satisfacción del usuario.

3. Impacto en las Tasas de Conversión:

• El contenido “above the fold” es el primer punto de contacto con el usuario. En dispositivos móviles, donde la atención es limitada, un diseño bien pensado puede influir significativamente en las tasas de conversión.

4. SEO y Visibilidad en Búsquedas Móviles:

• Google y otros motores de búsqueda priorizan sitios web responsivos, especialmente para búsquedas realizadas en dispositivos móviles. Un buen diseño responsivo puede mejorar el ranking SEO del sitio.

5. Reducción de la Tasa de Rebote:

• Un sitio no responsivo puede ser difícil de navegar en dispositivos móviles, lo que puede aumentar la tasa de rebote. Un diseño adaptable asegura que los visitantes permanezcan más tiempo en el sitio.

Implementación Efectiva en Diseño Responsivo

1. Contenido Prioritario:
   • Identificar qué elementos son cruciales para mostrar “above the fold” en cada tipo de dispositivo y ajustar el diseño en consecuencia.
2. Pruebas en Múltiples Dispositivos:
   • Realizar pruebas exhaustivas en diferentes dispositivos y tamaños de pantalla para garantizar una experiencia uniforme y efectiva.
3. Uso de Medios Flexibles y Grids Fluidos:
   • Implementar imágenes flexibles y layouts de rejilla fluida que se adapten y reorganicen según el ancho del dispositivo.
4. Tipografía y Botones Adecuados:
   • Asegurar que la tipografía y los botones sean legibles y fáciles de usar en pantallas pequeñas.

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.

Consejos de accesibilidad para el contenido above the fold

El asegurarse de que el contenido “above the fold” sea inclusivo para todos los usuarios, incluidos aquellos con discapacidades, es fundamental para crear una experiencia web inclusiva. Aquí hay algunos consejos clave para mejorar la accesibilidad en esta área crucial de tu sitio web:

1. Uso de Textos Alternativos en Imágenes

• Descripciones Claras: Proporciona textos alternativos descriptivos para todas las imágenes “above the fold”. Esto es crucial para usuarios con discapacidades visuales que utilizan lectores de pantalla.
• Concisión y Precisión: Asegúrate de que el texto alternativo sea conciso y describa con precisión la imagen o su función.

2. Diseño Claro y Navegable

• Jerarquía Visual: Usa una jerarquía visual clara para ayudar a los usuarios a comprender rápidamente la estructura de la página.
• Navegación por Teclado: Asegura que todo el contenido y la navegación “above the fold” sean accesibles mediante el uso del teclado, para usuarios que no pueden utilizar un ratón.

3. Contraste Adecuado

• Colores y Contrastes: Utiliza colores con suficiente contraste entre el texto y el fondo, lo cual es esencial para usuarios con problemas de visión.
• Herramientas de Verificación: Emplea herramientas en línea para verificar el contraste de colores y asegurar la conformidad con las pautas de accesibilidad web.

4. Tamaño y Legibilidad del Texto

• Fuentes Legibles: Elige fuentes claras y fácilmente legibles. Evita fuentes demasiado estilizadas o pequeñas.
• Opciones de Escalado: Permite que los usuarios ajusten el tamaño del texto sin que esto afecte la funcionalidad o la disposición del sitio.

5. Títulos y Encabezados Estructurados

• Uso de Encabezados HTML: Utiliza etiquetas de encabezado (H1, H2, H3, etc.) para estructurar el contenido. Esto ayuda a los usuarios de lectores de pantalla a comprender la jerarquía y la organización del contenido.
• Evitar Saltos en Encabezados: Mantén un orden lógico en la secuencia de encabezados para evitar confusiones.

6. Llamadas a la Acción Claras

• Botones y Enlaces Descriptivos: Asegúrate de que las llamadas a la acción y los enlaces sean descriptivos y fáciles de identificar. Evita frases genéricas como “haz clic aquí”.

7. Contenido Multimedia Accesible

• Subtítulos y Transcripciones: Para cualquier contenido multimedia (como videos), proporciona subtítulos y/o transcripciones para usuarios con discapacidades auditivas.
• Controles Accesibles: Asegura que los controles multimedia sean accesibles a través del teclado y estén claramente etiquetados.

8. Pruebas de Accesibilidad

• Herramientas de Prueba: Utiliza herramientas especializadas para evaluar la accesibilidad de tu sitio web, como las que ofrecen pruebas automáticas y manuales.
• Feedback de Usuarios: Considera obtener retroalimentación directa de usuarios con discapacidades para entender mejor sus necesidades y experiencias.

9. Respetar Preferencias de Usuario

• Soporte para Modos de Alto Contraste: Asegúrate de que tu sitio web funcione bien en modos de alto contraste, que son a menudo utilizados por personas con discapacidades visuales.
• Adaptabilidad a Tecnologías de Asistencia: Garantiza la compatibilidad con tecnologías de asistencia comunes, como lectores de pantalla y software de ampliación.

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