22
Feb

El botón de llamado a la acción en las Landing Pages

El llamado a la acción es uno de los elementos más importantes de una landing page. Ya hablamos un poco sobre el dentro del post “Consejos para optimizar tus landing pages” pero ahora vamos a ver unos ejemplos de botones tomados de smashing magazine.

El tamaño importa

Muchas veces el tamaño lo comparamos con los elementos que tenemos alrededor, por lo que tu llamado a la acción se debe destacar del resto de los elementos de tu landing page.

En Lifetree Creative decidieron utilizar esta técnica haciendo el tamaño del botón de llamado a la acción más grande que el logo del sitio. A pesar de estar el logo más visible el botón llama más la atención.

Una página puede tener más de un llamado a la acción, por lo que es importante destacar cual es el más importante haciéndolo más grande. Este es un ejemplo tomado de paramoreredd.com donde la invitación a suscribirse a la newsletter es más grande que la invitación a seguir leyendo.

Llama la atención con la posición

El lugar de tu botón es muy importante, lo mejor es colocarlo siempre en una parte visible, mejor si queda por encima del doblez de página.

En dailymile utilizaron una técnica que hace parecer que el llamado a la acción se encuentra por encima de los otros elementos del sitio web.


Como decía el llamado a la acción debe estar en un lugar bien visible, tanto es así que en Your Web Job lo colocaron arriba del todo, junto con otro menú pero destacando el llamado a poner un anuncio de empleo.

Ubicar el botón en el centro del diseño de tu página puede ser otra forma de llamar la atención y aumentar las conversiones, este ejemplo fue tomado de PicsEngine.

Usa espacios en blanco para separar elementos

Así como es importante la posición y el tamaño también es importante que los botones no estén apretados con otros elementos que distraigan la atención, para esto se acostumbra a dejar espacios en blancos

Este es un ejemplo tomado de IconDock donde se puede ver que dejaron suficiente espacio para darle importancia al botón de acción.

No tienes porque separar el botón de todos los elementos, los que ayuden al llamado a la acción a ser más efectivos deben quedar cerca. Esto lo podemos ver en el ejemplo de Donor Tools donde tienen un pequeño texto que ayuda a aumentar las conversiones, pero dejaron el suficiente espacio de otros elementos. De esta forma lograron agrupar el texto con el botón separandolos visualmente del panel de la derecha.

Utiliza colores que contrasten

El contraste de colores llamara mucho la atención de tus visitantes. Se puede ver como en Notepod utilizaban un botón colorido sobre un fondo blanco y texto negro para llamar la atención.

Puedes jugar con los colores para resaltar el botón de un fondo que distraiga como una foto, esto fue lo que hizo Valley Creek Curch al colocar un botón amarillo sobre una imagen a blanco y negro.

Ofrecer acciones secundarias

A veces no alcanza una página para concretar una venta o registro, así que puede que te sirva un segundo llamado a otra acción distinta como puede ser ver ejemplos, realizar un tour, etc.

En OfficeVP utilizaban 2 botones, uno invitando al registro y otro para realizar un tour para conocer su producto y tener más posibilidades de convencer a sus visitantes.

Otro caso muy común es en tiendas de software que ofrecen una versión de prueba gratuita y la opción de comprarlo. En Transmissions utilizan los 2 botones resaltando más la opción de compra utilizando colores que contrastan más con el fondo del sitio.

Otra opción puede ser mostrar el botón de la acción principal más arriba que el botón de la acción secundaria. Esto utilizaron en Virb para captar más la atención de los usuarios sobre el botón de registro que sobre la invitación a realizar el tour.

Sensación de urgencia

Los visitantes tienden a realizar más la acción cuando parece que tienen poco tiempo. Por ejemplo en tap tap tap tenían un cartel que debajo del precio y el llamado a la acción indicando que el precio iba a subir. De esta forma los visitantes querían aprovechar la oferta en ese momento.

Un simple cambio en el texto del botón también puede dar la sensación de urgencia, mira este ejemplo que utilizaron en la campaña de Barack Obama. ¿Cual de los botones te llama más la atención? Seguramente elegiste el primero, al ponerle la palabra “Now” (o “Ahora” en español) esta dando la sensación de urgencia.

Muestra lo sencillo que es

Puedes utilizar tu llamado a la acción para demostrar lo sencillo que es ya sea llenar un formulario, realizar una compra o la acción que quieras que tomen tus visitantes. En Basecamp decidieron mostrar el poco tiempo que lleva registrarse, solamente 60 segundos, así como también la opción de probar el producto gratis durante 30 días.

Otro ejemplo muy bueno es el de Tea Round App donde muestran que al registrarte no vas a recibir correos indeseados.

Cuenta con que se van a encontrar

Contando un poco sobre que se va a encontrar el usuario al apretar tu botón ayudara a aumentar los interesados, evita las mentiras, no digas que algo es gratis y en el próximo paso le pidas la tarjeta de crédito.

Firefox explica muy bien con lo que se van a encontrar, una descarga gratuita de Firefox 3.5.3 para Windows en ingles y que pesa 7,7MB.

Onehub se adelanta a la posible pregunta de los usuario si tendrán que pagar diciéndoles que tienen 30 días de prueba gratuita.

Ejemplo final

En el post de smashing magazine pueden encontrar muchísimos más ejemplos de botones de llamado a la acción, pero ahora quiero mostrarles un caso particular que me llamo la atención. Se trata de la web de Afiliacion.co que hacen un uso estupendo del botón de llamada a la acción:

Su botón invitando a registrarnos cumple muy bien con todo lo explicado anteriormente, utiliza un tamaño grande, centrado en la pantalla, con un color que resalta del fondo y una sombra que lo hace parecer más alto que el resto de los elementos. Se puede ver una pequeña descripción de lo que se va a encontrar el usuario pero los suficientes espacios en blanco como para no quitarle protagonismo. Esta en una posición privilegiada ya que en la mayoría de los monitores no va a ser necesario hacer scroll para verlo.

Si estas interesado en el marketing de afiliados te recomiendo que te registres en afiliacion.co, no te voy a explicar yo porque, simplemente mira este último ejemplo y ya te tendrías que dar cuenta.

Finalmente si después de leer todo este post no sabes crear botones siempre hay opciones gratuitas para descargar, algunas muy buenas como estas que encontré en kabytes o este generador de botones.