13. Treehouse
Frase de CTA: Reclame su prueba gratuita (Claim Your Free Trial)
Muchos sitios web de empresas ofrecen a los usuarios una prueba gratuita. Sin embargo, la CTA de Treehouse no solo ofrece iniciar esta prueba, sino que invita a reclamarla.
La diferencia en la elección de palabras puede parecer trivial, pero resulta mucho más personal. Además, la palabra en inglés «claim» da una sensación de urgencia, como si esa opción no fuese a estar disponible más adelante.
14. OKCupid
Frase de CTA: Continuar (Continue)
A simple vista, la llamada a la acción de OKCupid no parece demasiado excepcional, pero la diferencia está en los pequeños detalles.
El botón verde brillante se destaca de manera eficaz en el fondo azul oscuro. Además, dice «Continuar». Esta sencillez sugiere un proceso de registro breve e informal. El CTA transforma un formulario aburrido o intimidante en un juego divertido. Y todo, gracias al texto.
15. Blogging.org
Frase de CTA: Cuenta regresiva
No hay nada como el sonido de fondo de las agujas del reloj para lograr que un usuario realice la acción deseada. Tras un momento breve en la página principal de blogging.org, los visitantes nuevos reciben la bienvenida al sitio con una llamada a la acción emergente de una oferta por tiempo limitado y un temporizador con una cuenta regresiva de 2 minutos.
Al igual que el ejemplo de Aquaspresso (número 10), este es un uso clásico de la táctica psicológica conocida como escasez, que nos hace valorar más las cosas que creemos limitadas. Limitar el tiempo que tiene el visitante para completar un formulario hace que quiera completarlo de inmediato y obtener la oferta mientras pueda.
¿Quieres saber qué pasa cuando se acaba el tiempo? Aunque parezca una broma, nada. Cuando la cuenta regresiva llega a cero, la CTA emergente permanece en la página.
16. IMPACT Branding & Design
Frase de CTA: Lo que hacemos (What We Do)
Si no se cuida la formulación, las CTA pueden resultar agresivas y demasiado centradas en vender. Me encanta el enfoque educativo de IMPACT, que desafía a los visitantes a descubrir qué hace la empresa antes de empujarlos a realizar cualquier otra acción. Esta CTA parece genial, porque ni siquiera usa un verbo de acción para motivar a los usuarios a hacer clic.
17. EPIC
Frase de CTA: Empecemos un proyecto nuevo juntos (Let's start a new project together)
El equipo de la agencia EPIC usa la página principal básicamente para mostrar su trabajo. Cuando accedes a la página, puedes ver en un carrusel de videos animados de algunos de los trabajos que han hecho para sus clientes. Si bien los usuarios pueden hacer clic en muchos otros lugares, incluidos los sitios web de sus clientes, la llamada a la acción principal se destaca y contrasta con el video que se reproduce en segundo plano.
El lenguaje amigable e inclusivo de «Empecemos un proyecto nuevo juntos» es atractivo y sugiere a quienes buscan un socio creativo que el equipo de EPIC es una excelente opción.
18. Brooks Running
Frase de CTA: Avísenme cuando esté disponible (Find out when we have more)
¿Cuántas veces estuviste buscando desesperadamente un producto que te encanta hasta descubrir que estaba agotado? Esta situación tampoco es ideal para el vendedor. Pero el hecho de que se haya quedado sin stock no significa que deba dejar de promocionarlo.
Brooks Running utiliza una llamada a la acción ingeniosa para garantizar que sus clientes no abandonen su sitio web solo porque su calzado favorito está agotado. En la siguiente captura de pantalla, puedes ver cómo Brooks promociona una zapatilla impresionante con la CTA «Avísenme cuando esté disponible». Lo mejor de este ejemplo es cómo convierte una mala noticia en una oportunidad para retener a los clientes. Sin este botón, los clientes de Brooks probablemente se olvidarían de ese producto y lo buscarían en otra tienda.
Al hacer clic, el usuario accede a una página con un código simple para enviar un mensaje a la empresa y recibir una alerta automática cuando la zapatilla vuelva a estar disponible.
19. Condado de Humboldt
Frase de CTA: Descubra la magia (Follow the Magic)
El sitio web del condado de Humboldt es magnífico. Recibe a los visitantes con un video en pantalla completa con imágenes absolutamente hermosas. Sin embargo, lo que más me gusta es la ingeniosa CTA de la parte inferior, con la imagen de un conejo y las palabras «Descubra la magia».
Complementa a la perfección la sensación de fantasía de las fotografías y te hace sentir que estás a punto de entrar en un cuento de hadas.
Además, cuando el visitante hace clic en la CTA, el sitio web pasa a una narrativa del tipo «elige tu propia aventura». Así, el equipo del condado de Humboldt motiva a los usuarios a seguir un recorrido muy divertido que empieza con esa CTA y pasar más tiempo en el sitio.
Múltiples CTA en una página
20. Uber
Botones de CTA: Regístrate para conducir (Sign up to drive) | Regístrate para viajar (Start riding with Uber)
Uber intenta atraer a dos tipos de visitantes muy diferentes para que se registren en su web: conductores y clientes. Aunque ambos buscan cosas totalmente diferentes, las necesidades específicas de cada uno se combinan a la perfección en el video que se reproduce en segundo plano. En él, se muestra a los conductores y los usuarios de Uber pasando un momento agradable en diferentes lugares del mundo.
También es genial el texto tan directo de la llamada a la acción en la parte superior, «Gana dinero conduciendo» (Make money driving your car). Más claro, imposible.
21. Spotify
Botones de CTA: Hazte Premium (Go Premium) | Obtén Spotify gratis (Play Free)
Al acceder a la página principal de Spotify, queda bastante claro que su objetivo principal es atraer clientes que estén dispuestos a pagar por una cuenta Premium; la CTA para que los usuarios se registren gratis es totalmente secundaria.
No solo el título delata esta intención, sino que también lo hacen los colores de los botones. La CTA «Hazte Premium» es de color verde lima y se destaca en la página, mientras que «Obtén Spotify gratis» es blanco y se mezcla con el resto del texto. Este contraste hace que los usuarios centren su atención en la CTA de la cuenta Premium.
22. Ugmonk
Botones de CTA: Mándame cupones (Send me the coupons) | No me interesa (I'm not interested)
Las CTA de salida, también conocidas como ventanas emergentes en intento de salida, son distintas de los pop-ups habituales. Monitorizan el comportamiento de los usuarios y solo aparecen cuando detectan que están a punto de abandonar el sitio web. Como se muestran en el momento justo, estas ventanas son una excelente estrategia para llamar la atención del usuario y ofrecerle una razón para quedarse.
Ugmonk incluye una CTA de salida excepcional con dos opciones para los visitantes antes de que abandonen el sitio web definitivamente. En primer lugar, ofrece un 15% de descuento en sus productos. Luego, presenta dos opciones: «Sí. Quiero recibir los cupones» y «No, gracias. No me interesa». Es muy útil que cada CTA aclare lo que realmente significan «Sí» y «No». Además, no usan un lenguaje para generar culpa, como «No, gracias. Odio la naturaleza» (seguro que alguna vez habrás visto algo por el estilo). Por último, observa que el color del botón «Sí» es mucho más brillante y atractivo que el de la otra opción.
23. Pinterest
Botones de CTA: Continuar con Facebook (Continue with Facebook) | Registrarse (Sign Up)
¿Quieres registrarte en Pinterest? Tienes dos opciones: usar tu cuenta de Facebook o tu cuenta de correo electrónico. La intención de Pinterest es que los usuarios se registren con su cuenta de Facebook, si tienen una. ¿Cómo lo sé? Estéticamente: porque la CTA azul de Facebook es lo primero que el usuario ve y es mucho más prominente, colorida y fácil de distinguir gracias al logotipo y el color de la marca. Lógicamente, lo sé porque si el usuario inicia sesión a través de Facebook, Pinterest puede extraer los datos de la API de Facebook y obtener más información sobre el visitante que si inicia sesión con su dirección de correo electrónico.
Aunque esta página de inicio está optimizada para atraer usuarios nuevos, en la parte superior derecha verás una CTA muy sutil para iniciar sesión en Pinterest si ya tienes una cuenta.
24. Madewell
Botones de CTA: Llévame allí (Take me there) | ¿Qué más hay? (What's next?)
La web de Madewell (propiedad de J.Crew) siempre ha tenido un diseño memorable, lo que lo diferencia de otros sitios de comercio electrónico. Y la manera en que usan CTA en la página principal no es ninguna excepción.
Cuando el usuario accede por primera vez a la página, ve el título «Estoy buscando...» seguido de una categoría, como «Ropa para viajar a cualquier parte». Debajo, tiene dos opciones: «Sí, llévame allí» o «Hmm... ¿qué más hay?». El usuario puede elegir entre estas dos opciones y explorar la ropa adecuada para viajar o pasar al siguiente tipo de ropa. Allí puede decidir nuevamente qué quiere hacer.
Convertir el sitio web en una clase de juego es una manera excelente de hacerlo interesante para aquellos usuarios que llegan sin una idea clara de lo que buscan.
25. Instagram
Botones de CTA: Descárgalo en el App Store (Download on the App Store) | Disponible en Google Play (Get it on Google Play)
Instagram es una aplicación que se usa principalmente en dispositivos móviles. Por eso, su sitio web incluye dos CTA de color negro para descargarla: una desde el App Store de Apple y otra desde Google Play. Estas CTA son iguales porque lo importante es que se haga la descarga y no desde dónde. Si el visitante ya tiene Instagram, puede hacer clic directamente en la CTA «Iniciar sesión».
26. Barkbox
Botones de CTA: Comenzar (Get Started) | Regalar (Give a Gift)
Las dos CTA en la página principal de Barkbox demuestran que conocen a sus clientes. Si bien muchos de los usuarios que visitan el sitio quieren registrarse, muchos otros quieren regalar Barkbox. Para que todos puedan lograr su objetivo de compra fácilmente, el equipo de Barkbox incluye dos botones del mismo tamaño: «Comenzar» y «Regalar».
Además, hay una CTA emergente adorable a la derecha que pide a los usuarios que dejen un mensaje si lo desean. Tras hacer clic, aparece un pequeño cuadro de diálogo con el siguiente mensaje: «¡Guau! Nos fuimos al parque y no estamos en línea. Déjanos un mensaje y te ladraremos a la vuelta». Si eso no es encantador, no sé qué lo es.
27. t.c. pharma
Botones de CTA: Más información (Find out more) | Ver productos (View products)
Resulta que Red Bull no es su propia empresa matriz: es propiedad de t.c. pharma, una empresa tailandesa que elabora populares bebidas energéticas y electrolíticas, además de bebidas y refrigerios funcionales.
En la página principal se incluyen dos botones de igual tamaño («Más información» y «Ver productos»), pero está claro por el color amarillo brillante del primer botón que prefieren dirigir a los visitantes a «Más información».
28. General Assembly
Botones de CTA: Ver cursos de tiempo completo (View Full-Time Courses) | Suscribirse (Subscribe)
A medida que el usuario se desplaza por el sitio web de General Assembly, verá llamadas a la acción de diversos cursos que pueden interesarle. En este caso, me gustaría señalar la CTA que se desliza desde la parte inferior mientras el visitante explora la página, que tiene como objetivo que el usuario se suscriba a las novedades por correo electrónico.
Aunque podría parecer una CTA secundaria, debido a su ubicación y diseño, creo que, en realidad, es la CTA principal, ya que es mucho más colorida y fácil de distinguir que los botones de las clases individuales. Cuando crees tus propias CTA, intenta usar colores intensos, incluso algunos que contrasten con el estilo tradicional de tu sitio web. Así, podrás comprobar si son eficaces para llamar la atención de la audiencia.
29. charity: water
Botones de CTA: Donar con tarjeta de crédito (Give by Credit Card) | Donar con PayPal (Give by PayPal)
El objetivo principal de charity: water es que los visitantes donen dinero para el abastecimiento de agua potable, pero no pueden asumir que todos quieren hacerlo de la misma manera.
Las CTA de su página principal adoptan una estrategia realmente única para ofrecer diferentes métodos de pago: se completa automáticamente un formulario de una sola línea con $60 y se incluyen dos botones de llamada a la acción igualmente importantes para pagar con tarjeta de crédito o PayPal. Como puedes ver, ambos botones tienen el mismo diseño y tamaño. Esto se debe a que, seguramente, a charity: water no le importa cómo se hace la donación, siempre y cuando se haga.
30. Hipmunk
Botones de CTA: Vuelos (Flights) | Hoteles (Hotels) | Vehículos (Cars) | Paquetes (Packages)
Cuando aterrizas en el sitio web de Hipmunk, la opción principal es buscar vuelos. Sin embargo, puedes elegir entre 4 pestañas: vuelos, hoteles, autos y paquetes.
Cuando haces clic en una de estas opciones, el formulario cambia para que puedas completar más información. Para que estés 100% seguro de lo que estás buscando, Hipmunk incluye una CTA de color naranja brillante en el extremo derecho del formulario. En esta llamada a la acción, podrás distinguir fácilmente un avión en el botón de búsqueda. Así, sabrás que estás buscando vuelos y no hoteles. Si accedes a la pestaña de hoteles, el avión se convertirá en un hotel. Lo mismo ocurre con los vehículos de alquiler y los paquetes.
31. MakeMyPersona
Botones de CTA: Obtener la plantilla (Grab the template!) | No, gracias (No thanks)
Este es otro excelente ejemplo de una ventana emergente con múltiples llamadas a la acción. Sin embargo, en este caso, notarás que el tamaño, el color y el diseño de las dos opciones son muy diferentes entre sí. El equipo de MakeMyPersona creó la llamada a la acción «Obtener la plantilla» de modo que sea mucho más interesante y atractiva que «No, gracias. Estoy bien por ahora», que ni siquiera parece un botón.
Además, me encanta que la opción «No» use un lenguaje cortés. Las empresas que no pretenden generar culpa en los usuarios que no están interesados me resultan mucho más agradables.
¡Eso es todo! Espero que hayas entendido la importancia que tienen los pequeños detalles en las llamadas a la acción.
Nota: no tenemos manera de saber si todos estos ejemplos te ayudarán a alcanzar el éxito sistemáticamente, pero sí puedo asegurar que van en la misma línea que nuestras buenas prácticas. Si decides usar estas llamadas a la acción en tu sitio web, recuerda que debes probarlas para comprobar si funcionan con tu audiencia.
Si lo que buscas es inspiración para el diseño de tus CTA, consulta algunos de nuestros ejemplos preferidos de llamadas a la acción de HubSpot.
Publicado originalmente en junio 10 2019, actualizado abril 03 2020
Topics:
Diseño Web