Gana más conversiones en tu landing page con el peso visual

La mayoría piensa que para tener una buena landing page basta con que sea atractiva visualmente. Pero la realidad es que aunque contrates al mejor diseñador web del mundo, no te garantiza que tu landing page convierta y funcione.

En esta entrada vamos a aprender unos conceptos sencillos sobre diseño, composición, y el control del peso visual para mejorar el ratio de conversión en una landing page.

¿Qué es una landing page?: es la página de aterrizaje generada con el objetivo de captar datos o promocionar algún producto o servicio. El usuario aterriza en esta página a través de campañas de adwords, banners u otros contenidos similares. El objetivo de las landing pages es que el usuario haga una conversión, ya sea una captación de leads (clientes potenciales) o generar ventas.

 

1. El peso visual influye en la capacidad de atención del usuario

Piensa en tu landing page como un conjunto de elementos. Entre esos elementos tenemos texto, botones, fotos, formularios e iconos.

Cada uno de esos elementos tiene un peso asociado a él.

El truco para lograr que los usuarios realicen ciertas acciones que te convengan, es crear elementos de mayor importancia que el resto. En el marketing de contenidos a esto se le conoce como call to action, crear una llamada a la acción, haciendo que un elemento de tu landing page se haga notar por encima de todos.

Esto lo logramos aumentando el peso visual.

¿Qué es el peso visual?: es la fuerza con la que un elemento de una composición atrae la vista del usuario, cuanto más peso visual tenga ese elemento, mayor será esa fuerza de atracción.

Cuanto más pesado es un elemento, más importante le parecerá al usuario, y por lo tanto más tiempo centrará su atención sobre éste.

Landing page y el peso visual

Si tu CTA es pesado (mayor peso visual),  los visitantes pasarán más tiempo prestándole atención.

Cuanto más tiempo pase un usuario centrándose en el CTA, más posibilidades hay de que llegue a ejecutar esta acción.

 

2. Qué factores dan más peso visual a los elementos de tus landing pages

Hay muchas formas de hacer más pesado un elemento de tu landing page. Para simplificar nos limitaremos a tres: mediante el color, el contraste y el tamaño.

que es landing page

El color

En el ejemplo de arriba, la landingpage tiene colores oscuros casi negros, y blancos, el único color de la página es el botón azul CTA con la frase en inglés “¡Enséñame cómo atraer a más clientes!”.

Cuando un usuario aterriza en tus landing pages su vista irá directamente a ese botón azul.

El botón azul pesa, visualmente.

Ahora observa este otro ejemplo con un extra de azul:

Landing Page

Esta landing tiene el header azul, las letras y dos botones.

¿Qué información recibe el usuario aquí? Todo. El visitante de esta landingpage estará desorientado.

El botón azul ya no tiene peso aquí. Puesto que todo es azul, este elemento ha perdido su sentido e intención.

Cuando todos los elementos son importantes, nada lo es. Usa sabiamente la llamada de atención solo donde quieras que el usuario pase más tiempo concentrado.

El contraste

El contraste es una de las dimensiones más importantes en cualquier diseño, y en tu landing page no será menos.

El contraste permite al usuario identificar elementos más fácilmente:

Landing page contraste

Landing page contraste

Es simple, los elementos importantes necesitan un alto contraste. En el ejemplo de arriba puedes ver claramente la diferencia entre bajo contraste y alto contraste.

Tener el texto de un color claro sobre un fondo claro produce un bajo contraste.

Cuando el contraste sea bajo los visitantes de tu landing no sentirán atracción por los elementos importantes y no les prestarán la menor atención.

Debes crear contraste sobre el fondo y a la vez entre otros elementos de la landing, como el texto negro y el botón CTA.

Los elementos con un contraste alto son visualmente pesados.

El tamaño

Cuanto más grande es un elemento mayor será su peso.

Landing page

Landing page

En el ejemplo de arriba vemos como en el titular se suele emplear un tamaño de fuente mucho mayor.

Un titular de un tamaño como este demanda la atención del usuario y hace que sea leído en primer lugar.

Si dejamos el título principal de un tamaño parecido al subtítulo o párrafo que le sigue, provoca que el usuario se lo salte y pase de leerlo.

El resultado de combinar el tamaño de un elemento con su color y el contraste, es que ya tienes un elemento al cual el usuario prestará mucha atención. 

 

3. Qué debería tener peso visual y qué no debería tenerlo

Los elementos más importantes de la landing page serían:

  • Titular principal o encabezado (UVP)
  • Titular secundario o sub-encabezado
  • Botón de llamada a la acción (CTA)

UVP (unique value proposition), propuesta de valor única. Concepto de marketing que aplicado a las landing pages sería “un conjunto de razones que persuaden a las personas para que hagan la acción que pretendes”, para ello tu producto debe tener alguna ventaja competitiva que destacas en el titular principal.

Vamos a ver como aplicar peso visual a cada uno de estos elementos.

 

Tu titular principal o Unique Value Proposition

El titular principal o propuesta de valor única, debería ser el elemento con más peso de tu página.

Cuando el usuario aterriza en tu página landing tienes unos 5 segundos para venderle lo que estás ofreciendo.

La única forma de hacerlo es conseguir que lea y asimile tu encabezado.

Encabezado landing page

Éste debe ser GRANDE, el mayor tamaño de fuente de tu página. Mayor incluso que tu logo o marca.

El titular principal o encabezado debe tener también un ALTO CONTRASTE. Si tienes dudas sobre esto te aconsejo no usar fuentes de colores. Si el texto está sobre un fondo oscuro, usa texto blanco y si está sobre un fondo claro usa texto negro.

El encabezado no debe tener el mismo color que el botón CTA.

 

Tu sub-encabezado o titular secundario

El titular secundario, subtítulo o subencabezado te da la oportunidad de extender la información del encabezado con más detalles. Este texto es importante, pero no es tan importante como tu botón de llamada a la acción.

Subencabezado landing page

El tamaño de fuente debe ser mayor que un párrafo base de tu landing page, pero más pequeño que el tamaño de fuente de tu encabezado principal.

Debe tener ALTO CONTRASTE al igual que el encabezado principal. Igualmente tampoco debe tener el mismo color que el botón CTA.

Visualmente, este elemento es el tercero más importante de tu landing page.

 

Tu botón Call to Action (CTA)

Se considera una buena práctica tener  un objetivo definido en cada página y conducir a los usuarios hasta este objetivo mediante una CTA (call to action), llamada a la acción.

El botón de llamada a la acción es el santo grial de tu landing page. Este botón CTA no solo le dice al usuario lo que tú quieres que haga, si no que también lo hace de una forma provocativa.

El botón call to action se complementa con el mensaje de tu titular principal o encabezado (UVP) y viceversa. Uno no puede estar sin el otro, y estos elementos por separado perderían su sentido.

Landing page cta

Hay un debate sobre qué es más importante… si el botón CTA o el encabezado UPV, en mi opinión depende de la situación. Quizás tu UVP tenga una propuesta de valor muy atractiva o quizás no sea así y debas compensar esto con un CTA agresivo y potente.

En cualquier caso, tu botón CTA debe ser GRANDE, para que sea fácil de ver y de hacer clic en él.

También debe tener un CONTRASTE ALTO, no solo del botón y con el fondo, si no a nivel del color de la fuente y el color de fondo del mismo botón (amarillo en el ejemplo de arriba).

El color de fondo del CTA debe ser único en toda tu landing, y llamativo.

Ejemplo: si la paleta de color de tu landing es de verdes y azules, puedes usar un botón CTA de color naranja.

Por último, el botón CTA debe verse como un auténtico botón.

Lo digo porque la tendencia que hay ahora de diseñar botones transparentes, con un trazo delgado. No recomiendo hacer esto ya que da más aspecto de caja que de botón.

4. El sentido común es tu mejor aliado para diseñar

Aprender a usar el peso visual es una gran ventaja a tener en cuenta cuando queremos que los visitantes de nuestra landingpage generen conversiones.

Ahora bien, para saber qué elementos de tus landing pages son más importantes, no existe una ciencia exacta.

Con solo detenerte a observar la landing page con atención y con sentido común, ayuda mucho a identificar y corregir los errores más comunes.

Ponte en el lugar del usuario e intenta preguntarte qué necesita. Luego observa si realmente le proporcionas las herramientas necesarias para conseguir ese objetivo.

Si deseas que el usuario haga click en tu botón, ¿se ve a simple vista?

Si quieres  explicarle al usuario lo increíble que es tu producto, ¿tiene prioridad sobre otros elementos?

Piensa en tu landing page como si fuera una conversación de la vida real. Debes comunicarte alto y claro.

Aplica esta forma de pensar a la landing y usa el peso visual para guiar al visitante desde el inicio hasta el final de la conversación.

Conclusiones finales

Tanto si ya terminaste de crear tu landingpage o bien tienes pensado empezar una, te dejo un pequeño resumen con puntos clave a recordar:

  • Aplica el peso visual con moderación: No todos los elementos de la landing son importantes. Escoge cuidadosamente los elementos clave y aplícales el peso necesario.
  • Fija un solo objetivo de conversión para tus visitantes: Saber qué quieren los usuarios que aterrizan en tu landing es clave para aplicar el peso visual de forma correcta.
  • Usa el peso visual para guiar al usuario: Si lo hacemos de forma adecuada, una correcta variedad de pesos pueden llevar al usuario por el buen camino hasta el CTA.
  • Otorga a tus botones apariencia de botón: olvídate aquí de las tendencias en diseño web si afecta negativamente al peso visual de tu botón de llamada a la acción.
  • Pregúntate cuestiones de sentido común: ¿es visible y llamativo mi CTA?, ¿estoy guiando al usuario por donde quiero?, ¿mi título principal se lee rápido?, ¿vendo mi producto en 5 segundos?

Espero que este artículo te haya sido útil para comprender la importancia y el poder de aplicar un adecuado peso visual a los elementos de las landing pages. Por si acaso he añadido la definición de que es landing page y otros conceptos de marketing. Está directamente traducido del artículo de Craig Morrison y además he añadido algunas notas y conceptos personales.

¡Compártelo! 😀

 

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *