Ocho segundos – en promedio, esa es la duración de un capacidad de atención del ser humano. Esto significa que si eres un vendedor, tu contenido tiene que inspirar, deleitar y ser visto como útil por tu público objetivo … en menos de ocho segundos.
Tal vez en las redes sociales, su contenido funciona bien. Está resonando con el público y ganando su compromiso. Pero es posible que cuando mire las métricas del sitio web, se cuente una historia diferente.
Si su tiempo de sesión es bajo y su tasa de rebote es alta, puede estar tomando más de 12 segundos para atraer la atención de un visitante, lo que, para generar clientes potenciales, no es el mejor.
Puede estar perdiendo tráfico porque el contenido que los visitantes del sitio web ven cuando visitan su página por primera vez no es lo suficientemente interesante como para mantenerlos allí. Es posible que sus páginas de destino sean atractivas cuando los navegadores comiencen a desplazarse, pero si no son deslumbrantes y fáciles de usar desde el principio, los navegadores pueden hacer clic fácilmente.
Esto significa que su contenido en la mitad superior de la página probablemente podría volver a hacerse para atraer a los visitantes.
Si su sitio web tiene contenido superior al del doblez, es probable que vea tasas de conversión más altas y tasas de rebote más bajas. Si no está seguro, intente realizar una autoevaluación mirando su sitio web desde una nueva perspectiva; si fuera un espectador nuevo, tú permanecer en su sitio a primera vista?
Si tu respuesta es «No estoy seguro,» no se preocupe, vamos a repasar eso, pero primero, analicemos lo que significa que el contenido esté por encima del pliegue.
¿Qué significa arriba del pliegue?
El contenido de la mitad superior de la página es lo que los visitantes de la página web ven cuando aterrizan en un sitio web. Transmitiendo claramente lo que hace una organización y sus beneficios asociados, el contenido superior puede inspirar a los navegadores web a explorar el resto del sitio web y sus ofertas.
El contenido que se encuentra en la mitad superior de la página es lo que atraerá al navegador a su sitio web. Una página web que es lenta de cargar, está congestionada con información y difícil de usar probablemente no atraerá al lector de la misma manera que lo haría una página con el diseño opuesto.
Hablemos de algunas formas de asegurarse de que su contenido superior a la mitad aturde a los navegadores web.
Mejores prácticas de diseño de sitios web plegables
Cuando diseñe su página web, tenga en cuenta estas prácticas. Mantendrán una atención sorprendente y los alentarán a explorar el resto de su sitio web.
1. Mantenga su diseño simple.
El contenido de la mitad superior de la página no debería estar extremadamente ocupado; si lo está, los lectores podrían no saber dónde buscar primero y hacer clic fuera de la página. Alternativamente, si no pueden encontrar la respuesta a su desafío rápidamente, es probable que elijan otro sitio web.
Para que su página se vea profesional, organizada y fácil de usar, intente agregar una imagen destacada o multimedia, como un GIF o video, a su pliegue. Luego, agregue un título breve que presente su página web, y una oración debajo que describa su página con más detalle.
2. Haz que el contenido sea atractivo.
Las páginas web simples son una forma de mantener la atención de un navegador. Pero cuando lleguen allí, aproveche las oportunidades para deleitarlos. Por ejemplo, cuando escribe sus titulares y el texto del cuerpo, deben hacer eco de la voz de su marca.
No tiene que hacer grandes cambios para deleitar al navegador. Por ejemplo, si hay un botón de CTA en su página, en lugar de leer, «Más información», intente «¿Listo para comenzar?».
Si la foto destacada en su página web es estática, vea si puede entregar el mismo mensaje con un GIF. Además, si toda su copia es de un color, intente agregar uno o dos más; una buena regla general es incorporar los colores de su marca para profesionalismo y consistencia con el resto de su sitio web.
3. Diseña tu contenido para usabilidad.
Por encima de todo, su contenido debería ser fácil de interactuar. Por ejemplo, si está trabajando en el contenido del pliegue anterior para una página de producto. asegúrese de que el contenido de la mitad superior de la página funcione correctamente.
Digamos que el contenido de la página de tu producto sobre la tapa es un video. ¿Se carga correctamente, incluye subtítulos y opciones de sonido?
Además, piense en la experiencia del usuario. Si el contenido de la mitad superior de la página presenta un video que se reproduce automáticamente, ¿interrumpirá la interacción del usuario con la página? Para combatir este problema, asegúrese de que el video se reproduce en silencio e incluye subtítulos, si es necesario.
4. Resolver desafíos para el lector.
Su contenido en la mitad superior de la página debería responder al desafío del navegador. Para ilustrar, supongamos que trabaja para un proveedor de servicios de marketing por correo electrónico, y un navegador busca «software de marketing por correo electrónico» y llega a su página de inicio.
Su contenido, entonces, debe incluir algunas, si no todas, las palabras clave «software automatizado de marketing por correo electrónico» de alguna forma. Por ejemplo, su título podría leer «Automatización de correo electrónico para vendedores» y ampliarlo en el texto de soporte.
Por lo tanto, esas son algunas pautas a tener en cuenta al diseñar su contenido. A continuación, veremos ejemplos de algunos sitios web con excelente contenido en la mitad superior de la página.
15 ejemplos convincentes sobre el contenido del pliegue para inspirarte
1) Wistia
Wistia permite a sus usuarios crear videos dinámicos para campañas de marketing. El contenido de la mitad superior de la página presenta los servicios de Wistia utilizando una combinación de multimedia: GIF, videos y copias cortas, para mostrar las capacidades del servicio:
El video de la página de inicio detiene el navegador en sus pistas. Probablemente pasarán más tiempo viendo el clip inspirado en un programa de entrevistas que explica los servicios de Wistia. Como consumidor, cuando veo personas reales en una página web, es atractivo y me obliga a explorar más.
Una página de inicio simple como Wistia se siente informal. El ambiente acogedor de la página de inicio simplista transmite un ambiente profesional. Y, después del video, los navegadores tendrán una idea de las ofertas del software, directamente de los expertos en marketing.
2) Socios de velocidad
Velocity Partners, una agencia de marketing B2B, no tiene un video de descripción general de la compañía para su contenido de la mitad superior de la página. En cambio, la página de inicio tiene una presentación de diapositivas interactiva fascinante que explica por qué los vendedores innovadores deberían aprovechar los nuevos formatos de contenido para contar historias más refrescantes:
«Grandes movimientos de marketing» describen de qué se trata el negocio, y es breve, simple y directo, permitiendo que la presentación de diapositivas haga el trabajo pesado cuando se trata de atraer visitantes. Los mensajes de Velocity Partners sobre el doblez despiertan curiosidad y, a su vez, el incentivo para seguir desplazándose.
Sin embargo, es importante tener en cuenta que si desea utilizar el contenido de la mitad superior de la página similar a Velocity Partners, asegúrese de que los primeros segundos de su presentación de diapositivas, así como su copia, sean los más atractivos. Si no lo están, el navegador probablemente no se sentirá inclinado a permanecer en el sitio después de leer el titular.
3) VeryGoodCopy
VeryGoodCopy es una agencia creativa que crea artículos, páginas de destino, páginas web y correos electrónicos para marcas. Arriba del pliegue, el sitio web permite que la copia describa lo que la compañía puede proporcionar a los usuarios:
El titular transmite la oportunidad para que los especialistas en marketing aprendan a persuadir aprovechando un amplio espacio en blanco, un titular atractivo, una breve descripción de sus temas de contenido, pruebas sociales y una vívida llamada a la acción. Este diseño simple y atractivo por encima del pliegue atrae la atención de sus visitantes y los convence de revisar sus microartículos.
4) Shopify
Las imágenes muestran cómo el contenido de la página anterior de Shopify invita al lector a explorar. Shopify permite a los emprendedores comenzar su propio negocio de comercio electrónico, confiando en ellos, en lugar de copiarlos, para explicar las características del software:
La página de inicio incluye imágenes artísticas y un video atractivo para causar una impresión duradera en el navegador. Y, aunque la copia es escasa, el eslogan está repleto de propósitos y obliga a los visitantes a hacer clic en ese CTA verde para comenzar una prueba.
5) Ann Handley
La autora y socia más vendida del Wall Street Journal en MarketingProfs, Ann Handley, usó la página de inicio en su sitio web para impresionar a los navegadores al destacar la destreza de marketing. Los hipervínculos y los enlaces son héroes aquí: los enlaces a otras páginas de un sitio web pueden generar más clics en varias páginas de un sitio, como los titulares de Handley:
También aprovecha el espacio en blanco, una imagen acogedora de sí misma, un eslogan pegadizo, una copia convincente y un llamado a la acción vibrante para convencer a sus visitantes de que consideren trabajar con ella. Desde esta página de inicio, el visitante sabe cómo se ve Handley, qué ha hecho y cómo comunicarse con ella. En lo que respecta al contenido del pliegue, es un jonrón.
6) menta
El contenido de la mitad superior de la página puede maximizar la simplicidad, como lo hace para Mint, un software de planificación y tack presupuesto. La página de inicio simple pero profesional transmite efectivamente a la empresa y cómo pueden ayudar a los clientes.
Observe la copia en el título: se conecta emocionalmente al lector en dos oraciones, abriéndoles la puerta para que exploren el sitio web de una compañía que los conoce:
Mint también tiene una foto de su aplicación en acción para captar la atención de los visitantes de su sitio web. Esto ayuda al navegador a visualizar cómo se verá la aplicación si deciden registrarse.
7) InVision
¿Cómo mostrar dinámicamente las historias de los clientes en la mitad superior de la página? Echemos un vistazo al elegante ejemplo de InVision:
InVision es una empresa de diseño de productos digitales que ayuda a los usuarios a crear fácilmente sitios web elegantes e impresionantes, por lo que el equipo de diseño de la empresa sabía que la página de inicio tenía que impresionar a los visitantes. Lo hace, reproduciendo automáticamente una versión silenciosa del video general de la compañía, completa con testimonios de los tomadores de decisiones en compañías como Uber y Twitter.
La copia que se encuentra sobre el video hace un gran trabajo al explicar de manera concisa lo que la compañía hace por los usuarios, y el CTA «Free Forever» incluso me atrae, un vendedor que no está buscando diseñar un sitio web, para comenzar a aprender más sobre Las ofertas de software. Tampoco oculta los títulos de esos tomadores de decisiones del video: «Dantley Davis, Director de Diseño de Netflix» es un tercio inferior lo suficientemente grande que puede captar la atención de los usuarios cuando no están mirando (los míos definitivamente fueron capturados).
8) Animalz
Al igual que VeryGoodCopy, Animalz es una agencia de marketing de contenido cuyo sitio web no bombardea a los visitantes con mensajes sobre sus servicios en el diseño del pliegue anterior. En cambio, los visitantes son recibidos con el titular: «El mejor marketing de contenidos del mundo ocurre aquí», que atrae a un vendedor como yo a leer más para aprender cómo:
La copia de CTA es diferente de los botones de CTA comunes. «Hablemos», en lugar de «¡Haga clic aquí para obtener más información!», Implica que cuando los visitantes hacen clic en el CTA, serán llevados a una persona real que puede ofrecerles más información sobre el servicio.
El sitio web también aprovecha el espacio en blanco y utiliza imágenes simples dibujadas a mano para atraer al lector a desplazarse hacia abajo. El garabato morado corre por la página web para presentar a los principales clientes de Animalz y lleva a un formulario para ponerse en contacto con la empresa.
9) Ahrefs
Tal vez trabaje para una empresa que quiere una página de inicio sin sentido, que transmita los detalles del producto sin congestionar la página con una sobrecarga de información. Si esa descripción le queda bien, eche un vistazo al enfoque de Ahref sobre el doblez:
El título de la página web describe lo que hace el servicio: ayuda a los usuarios a mejorar su SEO. Esto se ve respaldado por el título más pequeño y CTA se comunica a los navegadores con información de precios.
Los clientes satisfechos se enumeran en la parte inferior, justo antes del pliegue, para ofrecer una visión general completa de cómo Ahrefs puede ser un beneficio para las empresas exitosas. Si desea que su página de inicio use más copias, en lugar de imágenes, intente presentarla de una manera simple que no use más de 30 palabras, como hizo Ahrefs.
10) Contracción nerviosa
Después de escribir Twitch.tv en su navegador, se sumerge de inmediato en lo que ofrece el sitio web: transmisiones en vivo para jugadores. Esto se debe a que tan pronto como su navegador accede al sitio web, una transmisión en vivo destacada comienza a reproducirse automáticamente:
Si bien puede ser un poco discordante escuchar de repente voces provenientes de su navegador, el diseño de Twitch sobre el pliegue no utiliza ninguna copia para describir sus servicios. En cambio, los usuarios pueden acceder directamente y hacer una demostración del contenido ellos mismos, navegando por las transmisiones sin tener que crear una cuenta o leer nada. Pueden seguir desplazándose para ver transmisiones populares, hacer clic en una y explorar las capacidades del sitio desde allí.
Debido a cómo funciona el sitio por completo, este enfoque por encima del doblez funciona. Twitch ofrece a los visitantes probar sus servicios sin leer nada. Las plataformas visuales similares a Twitch pueden beneficiarse de este método, atrayendo a los estudiantes visuales y no visuales por igual.
11) Skillshare
Skillshare usa video para explicar la mayor parte de sus servicios en la mitad superior de la página. Debido a que el software ofrece clases en línea en una variedad de temas, el video muestra una descripción general de lo que Skillshare puede ayudarlo a lograr, aprender y sentir:
El video destaca a los adultos de aspecto confiado que se sumergen en sus pasiones, que es con lo que Skillshare ayuda a los usuarios. El texto en capas inspira a los visitantes a explorar su creatividad con el software y comenzar de forma gratuita.
12) Rebaño
Si sabe que el sitio web de su empresa se beneficiará de una combinación de contenido multimedia en la mitad superior de la página, considere acercarse a eso como lo hace la aplicación de mensajería Flock. La clave para usar una combinación de contenido en una página de inicio es diseñarla para que la información no interrumpa la experiencia de un visitante por primera vez a su sitio web:
Observe cómo se usan los gifs para resaltar el texto cambiante que muestra las características de la aplicación. La imagen de apoyo dibujada a mano ilustra cómo funciona Flock, y el texto del CTA muestra un poco de personalidad. Usar una combinación de medios para darle vida a su página de inicio puede ser tan simple como una imagen en movimiento, un botón en el que se puede hacer clic y un dibujo para mostrar una visión general de su empresa a los visitantes.
13) Harina Rey Arturo
El contenido anterior de este proveedor de ingredientes para hornear con sede en Boston, King Arthur Flour, es de primera categoría. Ofrece a los visitantes la opción de ver un video tutorial sobre cómo hacer pan de masa fermentada utilizando las ofertas de la compañía:
Pude tener una idea de las ofertas de la compañía: una página de Facebook (que alberga el programa de horneado de la empresa), recetas, preguntas frecuentes sobre horneado, productos para la compra e incluso una «línea directa de Baker», que funciona como una página de contacto.
Las funciones de presentación de diapositivas, equipadas con una foto brillante y su propio CTA, me dieron una visión general completa de todo lo que la compañía puede hacer para los aspirantes a panaderos. Va más allá de los productos de la empresa y, en cambio, ofrece información útil para los panaderos en general, lo cual es acogedor para alguien que pueda sentirse intimidado por la cocción del pan.
14) Clarkisha Kent
¿Eres un profesional independiente que se pregunta cómo hacer que tu contenido superior se destaque entre tus competidores? Si es así, cuando diseñe su página de inicio, asegúrese de que logre dos cosas: mostrar personalidad y fácil navegación.
Esto se debe a que, aunque su trabajo tiene que precederle, también lo hace su personalidad, especialmente como profesional independiente. Si eres escritor, como Clarkisha Kent, tu copia tiene que venderlo, como lo hace su sitio web:
La inclusión de un tiro en la cabeza y un titular interesante muestra rápidamente más de quién es Kent como escritora, y el ángulo que probablemente tomará como colaboradora de los sitios web. Su barra de navegación incluye enlaces a tweets virales que ha hecho y recortes de otras publicaciones, por lo que su página de inicio no tiene que hacerlo.
En cambio, su página de inicio sirve como una introducción, que puede precederla antes que el resto de su sitio web. Cuando los navegadores son atraídos por una página web minimalista con texto de cliffhanger, es probable que estén interesados en explorar el sitio web para llenar ese vacío. Por ejemplo, cuando leí «Portador del caos», instantáneamente quise saber cómo, lo que me llevó a mirar su trabajo anterior.
15. Buena bruja cocina
Este es otro ejemplo de cómo transmitir la personalidad de su marca si es un profesional independiente o propietario de una pequeña empresa. Good Witch Kitchen es el nombre del negocio de la nutricionista holística Kristen Ciccolini. Justo debajo del pliegue hay una presentación rápida de las publicaciones que han presentado el trabajo de Ciccolini, antes de sumergirse en una introducción:
El logotipo de Ciccolini, una imagen brillante relacionada con su oficio, y una copia con precisión proporcionan una vista rápida de la atmósfera que transmite Good Witch Kitchen: un enfoque no dietético para el manejo de la nutrición por parte de un experto.
Ahora que tiene alguna inspiración sobre cómo mantener a sus clientes interesados en sus páginas de destino, ¿qué estrategia va a utilizar para las suyas? No puedo esperar para ver qué se te ocurre.