Los botones de llamada a la acción son elementos que se encuentran directamente asociados a la tasa de conversión de un sitio web. Estos útiles botones deben destacar en la composición y ofrecer un mensaje claro que indique cierto resultado si es que el visitante decide hacer click. Por ejemplo, puede ser “Suscríbete a nuestro boletín” o “Quiero contenido gratuito”. Ya que la frase debe ser corta, pero precisa debes pensar cuidadosamente en ello. Adicionalmente, debes tener en cuenta el color, la posición, la forma y la ubicación de estos pequeños botones. Así que, como ves, colocar un botón de llamada a la acción no es tan sencillo como parece. Pero es posible que la ver ejemplos de botones de llamada a la acción utilizados de manera efectiva e incluso creativa en un sitio web, cuentes con la inspiración suficiente para resolver ciertas cuestiones sobre tu propio botón CTA. Por eso, en este artículo, te mostramos algunos de nuestros botones CTA favoritos.
Netflix
Lo primero que el visitante ve cuando visita la página de inicio de Netflix es un collage de diversas series disponibles en esta plataforma. Se emplean colores oscuros, de manera que tanto el título como el subtítulo se destacan al utilizarse en color blanco.
Su botón de llamada a la acción es rojo, uno de los colores más impactantes y llamativos en el círculo cromático. Además, este color se alinea con su identidad corporativa ya que su logo es rojo. La frase indica que puedes utilizar el servicio gratis por un mes. Sin duda este es un detalle que despierta el interés de muchos visitantes.
Wellington Zoo
La página de inicio de este zoológico es bastante colorida, lo que indica diversión. En primer plano vemos a un camaleón que, por sus colores, combina con el amarillo elegido como fondo. Se utiliza un título con una fuente de bastones gruesos y en mayúsculas que dice “Conoce nuestras maravillas”, refiriéndose claramente a todos los animales que alberga el zoológico.
El botón de llamada se encuentra alineado con el título y es de un tono violeta que se considera complementario al amarillo. De esta manera se crea un contraste de colores complementarios, ideal en su uso para que elementos en primer plano destaquen del fondo.
Skype
La página de Skype utiliza una imagen como fondo, la fuente del título y subtítulos son blancas. En el caso del título no existe problemas de legibilidad pues se encuentra en mayor puntaje, pero en los subtítulos sí que hay posibilidades de diferenciar el mensaje.
A diferencia de los ejemplos anteriores, en el primer pantallazo se pueden ver tres botones CTA: uno en la barra de menú y los otros dos bajo el subtítulo de la página de inicio. Sin embargo, por tamaño y porque posee color de relleno, destaca el botón que dice “Descargar Skype” ya que, aunque poseen un modo de utilizar este servicio en línea, lo que finalmente se desea es que se descargue y utilice el programa.
Grammarly
En esta página web se ha utilizado un tono rojizo para el botón de llamada a la acción. Claramente se indica en el mensaje “Añadir a Chrome” lo que indica que es una extensión o plugin para el navegador web. Adicionalmente, han añadido la frase “Es gratis” para captar la atención y aumentar la tasa de conversión. Otro detalle adicional es que el botón cambia según el navegador que estés utilizando pues esta extensión también se encuentra disponible para otros navegadores web. Por último, el botón se coloca en la barra de menú una vez que el usuario se desplaza hacia abajo para aprender más sobre esta extensión. De esta forma, si el usuario termina de leer los beneficios que más le interesan y desea descargar el plugin, no debe subir nuevamente .
Stripe
Este sitio web saluda a sus visitantes con un fondo en diferentes tono azules. El título se ha alineado a la izquierda pues se han colocado imágenes en el lado derecho. En el primer pantallazo se pueden apreciar dos botones de llamada a la acción, uno para crear una cuenta en la plataforma y otro para conocer más sobre el funcionamiento y beneficios de este servicio.
Es sensato que se hayan colocado ambos botones pues al ser la primera imagen en la pantalla de inicio es poco probable que los visitantes decidan crear una cuenta inmediatamente, excepto si ya han escuchado sobre el servicio antes. Es mucho más probable que elijan “Conoce nuestra oferta”, pero existe un porcentaje que podría crear una cuenta directamente, así que es bueno ofrecer ambas opciones.
Michi Ramen
Esta página posee un diseño limpio que incluso podría ser considerado minimalista. El título de la página no es más que el nombre del restaurante ya su logo posee caracteres japoneses. El texto bajo el título aclara el tipo de negocio que es y además la imagen que se ha colocado como fondo es un indicador bastante claro de que se trata de un restaurante de comida japonesa especializado en ramen.
El botón CTA se ha colocado en la barra de menú en la parte izquierda. Tal vez para que no interfiriera con la visualización completa de la imagen. Y de esta manera el botón se mantiene visible sin importar si el usuario se dirige a otra página del sitio. De esta manera, incrementan las posibilidades de conversión pues el visitante puede estar convencido de ordenar en línea una vez que ha visitado la página de menú o al ver los diferentes locales que posee este restaurante.
Evernote
La página de Evernote es otro ejemplo de botones de llamada a la acción empleados de forma efectiva pues en la página de inicio no sólo ves el botón para registrarte, sino que inmediatamente te ofrece un formulario para que puedas inscribirte de manera directa, sin tener que hacer click en un botón que te dirigirá a un formulario. En esta misma página se ofrece la opción de registrarse con una cuenta de Gmail, de manera que los usuarios que desean conectar otros servicios a Google pueden optar por esta opción.
El botón de registro es de color verde, el mismo tono que se aprecia en su logo. Como fondo en la página se ha colocado un video.
Grey Goose
La página de inicio de Grey Goose se encuentra claramente dividida en secciones, cada una de ellas posee una fotografía diferente, pero relacionada a la marca. En cada una de esta diferentes secciones se ha colocado un botón de llamada a la acción con un mensaje distinto de acuerdo a la sección que se esté observando. Todos los botones son de estilo fantasma, lo cual se alinea al diseño general de la página.
Aunque los botones no son enormes como es usual al utilizar este estilo, se diferencian bastante del fondo debido al color que se emplea para delimitar el área donde se encuentran.
Huemor
Esta agencia creativa ha colocado una ilustración como fondo, lo cual sirve para demostrar su área de experiencia. Las fuentes utilizadas en el título y el texto aclaratorio bajo éste son sencillas. Además se alinean al lado izquierdo, de esta manera se equilibra el peso visual de la ilustración de fondo, en donde los puntos de interés se encuentran en el lado derecho.
Lo más atractivo de este primer pantallazo es su botón de llamada a la acción, que no es un botón propiamente dicho pues no tiene un recuadro que lo indique como tal. Sin embargo, ya que la frase se encuentra separado del título principal y posee una flecha que, en el lenguaje del diseño web, implica que contiene un enlace, llama la atención de visitante y el cursor se dirige a este punto. Una vez allí, la flecha se alarga y se forma el recuadro que indica el botón de llamada a la acción.
Es un botón bastante experimental, pero han logrado diferenciarlo del resto, de tal manera que el usuario se sienta animado a seleccionarlo. Además, la frase que se emplea es indicador de que se trata de un enlace por lo menos.
Epic
Esta es otra agencia que también hace uso de botones experimentales pues éstos se han colocado en conjunto con el contenido. Como fondo se presenta un video del resultado final de diferentes proyectos en los que han trabajado. Alineado al lado derecho se ha colocado un gran recuadro que contiene un título, un texto breve y un enlace que se destaca en otros color y que incluye una flecha para indicar que se va a dirigir a otra página.
En cada sección de la página de inicio se ha utilizado este formato para colocar el enlace. Es una forma bastante original de incluir un botón de llamada a la acción y podría ser confusa, pero funciona debido a que se ha colocado la flecha bajo cada una de estas frases. Para los usuarios que ya están familiarizados con la web, saben que este es un indicador de que el texto en cuestión es una especie de enlace y de que vas a ser dirigido a otra página. Por lo tanto, reconocen que la frase es un elemento con el que pueden interactuar directamente.
En conclusión…
Los botones de llamada a la acción se emplean en una gran cantidad de sitios web. A menudo se encuentran presentes en la página de inicio, dentro del primer pantallazo que puede visualizar el visitante, aunque, como has podido apreciar no siempre se colocan bajo el título. En ocasiones, pueden estar en la barra de menú, bajo un formulario e incluso presentarse de forma un poco más creativa en conjunto con el contenido.
Aprender sobre un uso correcto de estos botones puede serte útil no solo en el diseño de páginas web propiamente dichas, sino también al momento de crear boletines para tus suscriptores. Así que, esperamos que la pequeña recopilación de botones que presentamos en este artículo te haya animado para averiguar más sobre este tema.
1 Comment
Buen contenido, gracias