Anatomía de un Landing Page

Aunque no existe una fórmula exacta para hacer una página de inicio perfecta, existen algunas reglas comunes para aumentar sus posibilidades de ganar una página ganadora. Si está buscando ideas sobre dónde comenzar con su próximo diseño de página de destino.

A la hora de hacer una landing page perfecta, parece claro que existe una especie de fórmula mágica replicable que funciona a las mil maravillas.

No tienes más que ver la cantidad de Landing Pages similares que existen por ahí, y la mayoría de ellas consiguen resultados increíbles.

Es incluso raro ver una que se salga de lo habitual.

Pero más allá de los pequeños detalles que veremos en el siguiente capítulo, tenemos que entender un aspecto muy particular del 100% de las Landing Pages.

El Above the Fold y el Below the Fold.

 “Above the Fold” y “Below the Fold”, lo que todas las Landing Pages tienen en común

Estas expresiones inglesas significan literalmente “Por encima del pliegue (o doblez)” y “Por debajo del pliegue (o doblez)”.

Originalmente se referían a cómo los periódicos de papel se doblaban por la mitad, ofreciendo en su mitad de arriba la parte por encima del pliegue, y dejando no visible la parte por debajo del pliegue, que sólo se podía ver una vez lo desplegabas.

De este modo, la parte que estaba Above the Fold era la más importante, y los que diseñaban los periódicos ponían el logo del periódico y la noticia más importante en la parte de arriba (junto con su ilustración pertinente), y las noticias menos importantes por debajo.

Este concepto se trasladó al diseño web, y si bien ya no hay pliegues que valgan… Se sigue usando para referirse a lo que aparece en pantalla cuando carga la web, y lo que queda por debajo se consideraría que está por debajo de ese pliegue.

Veámoslo con un ejemplo visual de una landing page cualquiera:

Si te fijas, la parte Above the fold es donde está lo verdaderamente importante, mientras que la parte Below the Fold se usaría para dar explicaciones más completas sobre lo que ofrece esa Landing Page.

La gran mayoría de las Landing Pages usan ambas partes, pero no siempre es necesario, y se dan casos en los que solo se muestra una parte Above the Fold, si el diseñador considera que con lo que muestra está suficientemente explicado… o si es una landing page de varios pasos, en los que cada paso es una landing page diferente.

Como ves, la parte Below The Fold acepta muchas más posibilidades (casi infinitas), porque no es sino un añadido para completar el Above the Fold.

Pero no te confíes demasiado, eso de tener una parte Below the Fold kilométrica suele ser un error fatal.

Nadie tiene tanta paciencia como para leer tropecientas cosas y ver quinientos gráficos sólo para que te inscribas en un curso o compres un producto.

Cíñete a lo indispensable y pon lo que consideres que es importante para convencer al usuario a hacer la acción que tú quieres, pero no te olvides de que el tiempo es oro y nadie va a hacer caso a una landing page que parece no tener fin.

Si quieres una landing page perfecta vas a tener que ser lo más claro y conciso posible, tenlo siempre en mente.

2.2 – Elementos Clave de toda Landing Page Perfecta

Con las Landing Pages, casi se cumple el dicho ese de “vista una, vistas todas”, y es que hay muy pocas diferencias entre unas y otras una vez hemos despejado mentalmente todos los detalles llamativos y nos ceñimos a la estructura básica.

Todas ellas son repeticiones de un mismo patrón por el simple hecho de que es un patrón que está más que comprobado que funciona.

Esto resulta fantásico por dos razones:

1. No hay que ser excesivamente creativo para sacar una Landing Page perfecta
2. Las modificaciones que tendrás que hacerle para irla mejorando con el tiempo son mínimas (un texto aquí, un cambio de fondo por allí, un texto del botón por allá… nada demasiado complejo)

Ejemplo

1. El Logo tiende a ir en la esquina superior izquierda en el 90% de los casos. Debe estar en una barra superior más o menos diferenciada, para que visualmente no interfiera con el resto de la Landing Page.
2. El Menú para moverse por el resto de la página no es obligatorio, pero sí cómodo para el usuario. Hay muchas webs que no lo ponen para centrar la vista aún más incluso en la parte importante de la Landing Page. Si tu landing page es la página de inicio, deberías ponerla. Sin embargo, si es una landing page interior, no es tan importante poner la barra de menú, el logo y las diferentes secciones del menú.
3. El Título es quizá la parte MÁS IMPORTANTE de todas. Tiene que tener un mensaje muy llamativo y que fije la vista en él. Un mal título hará que tu Landing Page pase sin pena ni gloria.
4. El Subtítulo, la frase que va bajo el título, está ahí para explicar algo mejor el título. Tiene más margen para poner texto, pero tampoco deberíamos pasarnos con el largo. Más allá de tres -cuatro líneas resultaría excesivo.
5. El texto no es obligado. De hecho, muchas veces no existe, y cuanto más minimalista sea la página, menos existirá.
6. La foto o imagen para ilustrar el producto o servicio, ayuda a atraer visualmente la atención hacia el visitante.
   Tampoco es obligatoria, y depende de lo que ofrezca tu Landing Page y el grado de minimalismo que quieres aplicar. (Tal vez tu servicio de limpieza de moquetas no necesita ser ilustrado, por ejemplo).
7. El botón de acción, con su llamada a la acción dentro en forma de texto. Este botón es absolutamente clave. Su color y su texto tienen que ser lo más atractivos posibles, pues el éxito de tu Landing Page dependerá de si hacen click en él o no. A menudo va acompañado de uno o varios formularios para introducir tu email, nombre, u otros datos necesarios.
8. Más información. Este punto y el siguiente son, como habrás supuesto por la raya divisoria bajo la que se encuentran, Below The Fold. La gente suele añadir iconos y pequeños gráficos de aspecto sencillo y moderno para tratar de convencer a los usuarios de que realicen la acción clave para la Landing Page.
9. Los Testimonios siempre han funcionado estupendamente, y son muchas las páginas que los llevan. Que te recomienden algo es una razón muy poderosa para el cerebro humano. Sí, incluso aunque no sepan quién se los está recomendando. Si un señor sale de una tienda y te dice “Qué maravilloso es el producto X que venden aquí”, te sentirás mucho más tentado a entrar y comprar ese producto del que todos hablan. O al menos el señor que te lo dijo y parecía un tipo serio.

Hay muchos más puntos, tantos como la creatividad de los diseñadores de Landing Pages sea capaz de inventar, pero los más básicos son estos que ves.

Los realmente indispensables son los 3 y 7 (Título y botón de acción), y a partir de ahí puedes incluir los que mejor te convengan.

HERRAMIENTAS PARA CREAR LANDING PAGES

1 Instapage

Lo que puede hacer por tí: Construye Landing Pages de calidad rápidamente con su editor WYSIWYG. Instapage ofrece más de 50 plantillas para elegir. Puedes personalizar el formulario de inscripción y llevar a tus visitantes a una página de agradecimiento después de que se inscriban. Integración completa con herramientas de CRM, email marketing y optimización para buscadores sin ningún tipo de habilidad en programación requerida. Se integra con herramientas de web analytics avanzadas como Crazyegg, ClickTale y Google Analytics.

Precio: Puedes probarlo gratis. La versión «Starter» cuesta US $14/mes.

3. Lander

Lo que pueda hacer por tí: Lander ofrece diversos formatos para distintos tipos de campaña, como B2B y B2C, para incrementar tus conversiones en relación con metas específicas. Un editor Drag & Drop (con herramientas de arrastre) te permite diseñar tu propio Landing Page sin tener que saber sobre HTML o CSS. Ofrecen un tablero (dashboard) que muestra tu tráfico, número de prospectos (leads), porcentaje de conversión, y pruebas A/B para un período específico. Tienen una sencilla herramienta para construir formularios de inscripción.

Precio: Gratis para hasta 500 visitantes/mes. La version Mini (para hasta 1.5k visitantes) cuesta US $25/mes.

4. Kickoff Labs

Lo que puede hacer por tí: Crea y edita sitios web por tí mismo utilizando sus plantillas y herramientas de diseño. Puedes crear formularios de inscripción y mantener a tus clientes involucrados a través de correos electrónicos. Ofrecen monitoreo de clicks y estadísticas relacionadas con prospectos (leads), tasas de conversión e influenciadores.

Precio: Los planes empiezan a partir de US $29 por mes.

5. Unbounce

Lo que puede hacer por tí: Creación de Landing Pages y pruebas A/B. Más de 80 plantillas para elegir. Notificaciones de la actividad de tus prospectos (recibes un email cuando ingresa uno nuevo). Permite la interacción de múltiples usuarios (puedes añadir administradores y autores). Se encuentra integrada con plataformas como Salesforce y Hubspot.

Precio: Los planes empiezan a partir de US $49 por mes.

Herramientas para crear landing pages si tienes conocimientos sobre diseño web

6. Bootstrap

Lo que puede hacer por tí: Bootstrap es el framework más popular para el desarrollo front-end. Obtienes amplia documentación con cientos de ejemplos en vivo, fragmentos de código, y mucho más. Bootstrap incluye más de una docena de componentes reutilizables construidos para proveer iconografía, dropdowns, botones, navegación, alertas, entre muchos otros elementos.

Precio: Bootstrap es open source. Se encuentra alojado, desarrollado y mantenido en Github.

7. Themeforest

Lo que puede hacer por tí: Themeforest ofrece más de 900 plantillas para Landing Pages. Algunas de estas plantillas vienen listas para integrar con CMS como WordPress, mientras que otras incluyen los archivos .psd para personalizar aún más. Todas ofrecen demostraciones en vivo e información sobre compatibilidad con distintos navegadores para ayudarte a decidir.

Precio: Entre US $3 y $97 por una plantilla.

8. Mojo Themes

Lo que puede hacer por tí: Más de 1,000 plantillas de alta calidad para elegir. Algunas incluyen diseños de una sola página y otras son multi-página. Mira cuáles son amigables para dispositivos móviles y vienen listas para retina display. Todas ofrecen demostraciones en vivo e información sobre compatibilidad con distintos navegadores para ayudarte a decidir.

Precio: Entre US $6 y $85 por una plantilla.