31 Ejemplos de llamada a la acción que no puede evitar, pero haga clic

[ad_1]

Piensa en todas las veces que te registraste para cosas en tu vida. ¿Una vez descargaste Evernote? Dropbox? Spotify? Tal vez incluso haya tomado una clase en la Asamblea General.

Cada uno de estos registros es probablemente el resultado de un llamado a la acción (CTA) efectivo.

Y es realmente importante guiar a sus visitantes a través de la compra viaje utilizando CTA estratégicos. Piénselo: si usted no hubiera sido atraído por la copia o el diseño de la CTA, o hubiera sido guiado de manera tan elocuente a través de su proceso de inscripción, probablemente usaría muchas menos aplicaciones y sitios web que ahora. .

Para ayudarlo a identificar qué es efectivo y qué no, hemos enumerado 3 1 ejemplos de CTA que se balancean por completo Estos ejemplos de llamado a la acción se dividen en tres categorías:

CTA simples y efectivas
CTA con frases grandes de llamado a la acción
C TA que equilibran varios botones en una página [19659009] Ejemplos simples y efectivos de llamado a la acción
1. Evernote

Botón CTA: Registrarse

"Recordar todo". Los visitantes pueden comprender inmediatamente ese mensaje en el momento en que llegan a esta página. El diseño en el sitio web de Evernote hace que sea muy fácil para los usuarios ver los beneficios rápidos de usar la aplicación y cómo registrarse para usarla. Además, el color verde de los botones CTA principales y secundarios es el mismo verde que el título y el logotipo de Evernote, todos los cuales saltan de la página.

2. Dropbox

Botón CTA: regístrate gratis

Dropbox siempre ha adoptado un diseño simple con mucho espacio negativo. Incluso los gráficos en su página de inicio son sutiles y simples.

Gracias a ese diseño simple y espacio negativo, el botón de llamada a la acción azul "Registrarse de forma gratuita" se destaca de todo lo demás en la página. Como CTA y el logotipo de Dropbox son del mismo color, es fácil para el visitante interpretar esta CTA como "Registrarse en Dropbox". Esa es una llamada a la acción efectiva.

3. OfficeVibe

Botón CTA: Suscribirse

Aquí hay un llamado a la acción deslizable que me llamó la atención desde OfficeVibe. Al desplazarse a través de una publicación en su blog, un banner se deslizó desde la parte inferior de la página con un llamado a la acción para suscribirse a su blog. ¿La mejor parte? La copia de la diapositiva me indicó que recibiría sugerencias sobre cómo ser un mejor gerente, y la publicación en la que apareció fue una publicación sobre cómo convertirse en un mejor administrador. En otras palabras, la oferta era algo que ya me interesaba.

lo que mi colega Rachel Sprung llama el "stop-everything-and-click-here-pop-up-CTA". Encuentro que estas CTA ofrecen una experiencia más agradable porque proporcionan más información al mismo tiempo que me permiten seguir leyendo la publicación del blog. ( Haga clic aquí para obtener un tutorial sobre cómo agregar CTA integradas a sus publicaciones de blog .)

4. Netflix

Botón CTA: Únete gratis durante un mes

¿Qué miedo tienen los usuarios antes de comprometerse a suscribirse? Que será un dolor cancelar su suscripción si no les gusta. Netflix corta ese temor de raíz con la copia "Cancelar en cualquier momento" justo encima de la CTA "Únete gratis durante un mes". Me arriesgaría a adivinar que la tranquilidad por sí sola ha aumentado los registros. Además, notará nuevamente que el color rojo de las CTA principales y secundarias aquí coincide con el color del logotipo de Netflix.

5. Square

Botón CTA: Comenzar

Para lograr un diseño efectivo de CTA, debe considerar más que solo el botón en sí. También es muy importante tener en cuenta elementos como el color de fondo, las imágenes circundantes y el texto circundante.

Teniendo en cuenta estos componentes de diseño adicionales, la gente de Square usó una sola imagen para mostrar la simplicidad del uso de sus productos, donde Started "CTA espera su clic. Si observa detenidamente, el color de la tarjeta de crédito en la imagen y el color del botón CTA coinciden, lo que ayuda al espectador a conectar los puntos de qué esperar si / cuando hacen clic.

6. Prezi

Botón CTA: Prueba a Prezi

La gente de Prezi también adopta el aspecto de diseño minimalista en su sitio web. Además del dinosaurio verde y el café marrón oscuro, el único otro color que acompaña al diseño predominantemente en blanco y negro es un azul brillante, el mismo azul de su logotipo principal. Ese azul brillante se coloca estratégicamente en la página principal: la CTA principal "Give Prezi a try" y la CTA secundaria "Get Started", que llevan a los usuarios a la misma página de precios.

7. Full Bundle

Botón CTA: Our Work

Full Bundle es otra compañía que usa el espacio negativo para hacer pop CTA principal. El llamado a la acción blanco de "Nuestro trabajo" se destaca contra los grises oscuros del fondo. Su elección de CTA también es estratégica. Dado que existen principalmente para construir las presencias en línea de los clientes, es importante que muestren su trabajo, y eso es lo que la mayoría de la gente visita en su sitio web.

8. Panthera

Botón CTA: Únase

La gente de Panthera está buscando usuarios que realmente se preocupen por los gatos salvajes de todo el mundo y quieran unirse a un grupo de personas que sienten lo mismo. Para apuntar a esas personas en particular, nos encanta cómo usan el lenguaje que hablaría con los grandes felinos: "Únete al orgullo de hoy". La página en sí es muy simple: un formulario en la página con dos campos simples y un botón que le pide a la gente (nuevamente) "Unirse".

CTA con frases creativas de llamado a la acción

9. Huemor

Frase CTA: 'Iniciar (No presionar)'

Si fue a un sitio web y vio un CTA "Iniciar" acompañado de la copia "No presionar" … qué usted ¿hacer? Seamos honestos: te morirías por presionarlo. El uso de la psicología inversa inofensiva aquí es lúdica, que está muy de acuerdo con la voz de marca de Huemor.

10. Aquaspresso

Frase CTA: '¡Envíeme ofertas especiales ahora!'

El objetivo de un llamado a la acción es dirigir a los visitantes de su sitio a un curso de acción deseado, y las mejores CTA lo hacen de una manera eso es útil para sus visitantes. La gente de la compañía de café Aquaspresso realmente encontró ese equilibrio aquí con la CTA emergente en su página principal de blog .

Aquí, el curso de acción deseado es que los lectores de su blog miren lo que hacen ' en realidad estoy vendiendo (y con suerte les compro). Hay muchas maneras en que podrían haber hecho esto, incluida la emisión de una CTA que insta a las personas a "¡Eche un vistazo a nuestros productos más populares!" o algo muy directo. Pero nos encanta lo que han hecho: su CTA ofrece a los lectores de blogs algo mucho más útil y sutil: una oferta para los "especiales de hoy" a cambio de la dirección de correo electrónico del lector.

Agregar que las ofertas son para hoy solo es un gran ejemplo de una táctica psicológica llamada escasez que nos hace asignar más valor a las cosas que creemos que son escasas. El temor de que las ofertas especiales de hoy sean mejores que las de mañana podría hacer que la gente quiera completarlas y reclamar su oferta mientras puedan.

(El llamado a la acción anterior se creó usando la herramienta de conversión gratuita de HubSpot, Leadin. Haga clic aquí para obtener información sobre cómo crear fácilmente CTA como esta usando Leadin .)

11. QuickSprout

Frase CTA: '¿Estás haciendo mal tu SEO? Ingrese su URL para averiguar '

Nadie quiere estar equivocado. Es por eso que un botón de llamado a la acción como el CTA interactivo de QuickSprout en su blog es tan digno de clics. Le pregunta al lector: "¿Estás haciendo mal tu SEO?" Bueno, ¿verdad? Todo lo que tengo que hacer es ingresar mi URL para averiguarlo, parece bastante fácil. Es un lenguaje como ese que realmente puede atraer a los visitantes a hacer clic.

Además, tener la diapositiva de CTA en la mitad del blog es una gran táctica para atrapar a los lectores antes de que reboten en la página. Tradicionalmente, muchos blogs tienen CTA en la parte inferior de cada entrada de blog, pero la investigación muestra que la mayoría de los lectores solo obtienen el 60% del camino a través de un artículo. ( Haga clic aquí para obtener información sobre cómo agregar CTA integradas a las publicaciones de su blog .)

12. Gray Goose

Frase CTA: 'Descubre un cóctel adaptado a tu gusto'

Aquí hay un llamado a la acción divertido y único que puede hacer que la gente haga clic. Mientras que los visitantes del sitio podrían haber esperado ser dirigidos a páginas de productos o comunicados de prensa desde la página de inicio, una CTA para "Descubrir un cóctel adaptado a su gusto" es una pregunta gratamente sorprendente. A la gente le encanta la personalización y este tipo de CTA se siente como un juego tentador. El ícono del botón reproducir junto a la copia da una pista de que los visitantes serán llevados a un video para que tengan una mejor idea de qué esperar cuando hagan clic.

13. Treehouse

Frase CTA: "Solicite su versión de prueba gratuita"

Muchos sitios web de empresas ofrecen a los usuarios la oportunidad de comenzar una versión de prueba gratuita. Pero el sitio web de CTA en Treehouse no solo dice "Comience una prueba gratis"; dice "Reclama tu prueba gratuita".

La diferencia en la redacción puede parecer sutil, pero piensa en cuánto más personal "Reclama Tu Prueba gratuita" es. Además, la palabra "reclamo" sugiere que puede no estar disponible por mucho tiempo, dando a los usuarios una sensación de urgencia para obtener esa versión de prueba mientras puedan.

14. OKCupid

Frase CTA: 'Continuar'

CTA de OKCupid no parece tan impresionante a primera vista, pero su brillo está en los pequeños detalles.

El botón de llamado a la acción, que es verde brillante y se destaca bien sobre un fondo azul oscuro, dice, "Continuar". La simplicidad de este término da esperanza de que el proceso de registro sea breve e informal. Para mí, este CTA se parece más a que estoy jugando un juego divertido que llenando una forma aburrida o comprometiéndome con algo que pueda ponerme nervioso. Y todo se debe a la copia.

15. Blogging.org

Frase de la CTA: Reloj de cuenta regresiva

No hay nada como un temporizador para hacer que alguien quiera tomar medidas. Después de pasar un corto período de tiempo en la página principal de blogging.org, los nuevos visitantes son recibidos con un CTA emergente con una "oferta por tiempo limitado", acompañado de un temporizador que cuenta desde dos minutos. [19659003] Al igual que con el ejemplo de Aquaspresso en el n. ° 10, este es un uso clásico de la táctica psicológica llamada escasez que nos hace asignar más valor a las cosas que creemos que son escasas. Limitar el tiempo que alguien tiene que completar un formulario hace que las personas quieran completarlo y reclamar su oferta mientras puedan.

Curioso, ¿qué pasa cuando se acaba el tiempo? Yo también. Hilarantemente, no pasa nada. El CTA emergente permanece en la página cuando el temporizador llega a cero.

16. IMPACT Branding & Design

Frase CTA: "Lo que hacemos"

Los CTA pueden sentirse muy agresivos y dependientes si se utiliza el idioma equivocado. Me gusta el enfoque educativo de IMPACT, donde desafían a los visitantes a que aprendan lo que hace la empresa antes de presionarlos para que realicen cualquier otra acción. Este llamado a la acción es especialmente intrigante para mí porque ni siquiera usan un verbo de acción, pero aún así logran atraer a la gente para que haga clic.

17. EPIC

Frase CTA: 'Comencemos juntos un nuevo proyecto'

La gente de la agencia EPIC utiliza su página principal principalmente para mostrar su trabajo. Cuando llegas a la página, te saludan con videos animados que muestran parte del trabajo que han hecho para los clientes, que rotan en un carrusel. Si bien hay muchos otros lugares en los que los usuarios pueden hacer clic en su sitio, incluidos los sitios web de sus clientes, se destaca el llamado a la acción principal y siempre contrasta con el video que se reproduce en segundo plano.

Me encantan sus características un lenguaje amigable e inclusivo – "Comencemos juntos un nuevo proyecto" – que da una pista a los usuarios que buscan un socio creativo sobre el que son un gran equipo para trabajar.

18. Brooks Running

Frase CTA: 'averigüe cuándo tenemos más'

¿Cuántas veces ha buscado ardientemente un producto que le encanta, solo para descubrir que está agotado? Bueno, como ya sabrá, tampoco es un picnic para el vendedor. Pero el hecho de que se haya quedado sin un artículo no significa que deba dejar de promocionarlo.

Brooks Running utiliza un ingenioso llamado a la acción para garantizar que sus clientes no salgan de su sitio web solo porque su zapato favorito está fuera de valores. En la captura de pantalla siguiente, puede ver a Brooks promocionando un zapato de aspecto impresionante con el CTA, "averigüe cuándo tenemos más". Me encanta cómo este botón convierte las malas noticias en una oportunidad para retener clientes. Sin esto, los clientes de Brooks probablemente se olvidarán del zapato y mirarán hacia otro lado.

Cuando hace clic en el botón azul CTA que se muestra a continuación, Brooks lo dirige a una página con un código simple que puede enviar un mensaje de texto a la compañía. Este código solicita a Brooks que avise automáticamente al visitante cuando el zapato que desea esté disponible nuevamente.

19. Condado de Humboldt

Frase de CTA: 'Follow the Magic'

El sitio web del Condado de Humboldt es magnífico por sí mismo: lo saluda con un video de pantalla completa de imágenes sorprendentemente bellas. Pero lo que realmente amo es el botón de llamada a la acción no convencional ubicado en la parte inferior central, que presenta un icono de conejito y las palabras "Seguir la magia".

Mejora el tipo de sensación fantástica del metraje, convirtiéndolo en siéntete como si estuvieras a punto de entrar en un cuento de hadas.

What's more, once you click into that CTA, the website turns into a sort of choose-your-own-adventure game, which is a fun call-to-action path for users and encourages them to spend more time on the site.

Balancing Multiple Call-to-Action Buttons

20. Uber

CTA Buttons: Sign up to drive | Start riding with Uber

Uber's looking for two, very distinct types of people to sign up on their website: riders and drivers. Both personas are looking for totally different things, and yet, the website ties them together really well with the large video playing in the background showing Uber riders and drivers having a good time in locations all over the world.

I love the copy of the driver CTA at the top, too: It doesn't get much more straightforward than, "Make money driving your car." Now that's speaking people's language.

21. Spotify

CTA Buttons: Go Premium | Play Free

As soon as you reach Spotify's homepage, it's pretty clear that their main goal is to attract customers who are willing to pay for a premium account, while the CTA for users to sign up for free is very much secondary.

It's not just the headline that gives this away; it's also the coloring of their CTA buttons. The "Go Premium" CTA is lime green, making it pop off the page, while the "Play Free" CTA is plain white and blends in with the rest of the copy on the page. This contrast ensures that visitors are drawn to the premium CTA.

22. Ugmonk

CTA Buttons: Send me the coupons | I'm not interested

Exit CTAs, also known as exit intent pop-ups, are different than normal pop-ups. They detect your users' behavior and only appear when it seems as though they're about to leave your site. By intervening in a timely way, these pop-ups serve as a fantastic way of getting your reader’s attention while offering them a reason to stay.

Ugmonk has a great exit CTA, offering two options for users as a final plea before they leave the site. First, they offer a 15% discount on their products, followed by two options: "Yes Please: Send me the coupon" and "No Thanks: I'm not interested." It's super helpful that each CTA clarifies what "Yes" and "No" actually mean, and I also like that they didn't use guilt-tripping language like "No Thanks: I hate nature" like I've seen on other websites. Finally, notice that the "Yes Please" button is much brighter and inviting in color than the other option.

23. Pinterest

CTA Buttons: Continue with Facebook | Sign Up

Want to sign up for Pinterest? You have a couple of options: sign up via Facebook or via email. If you have a Facebook account, Pinterest wants you to do that first. How do I know? Aesthetically, I know because the blue Facebook CTA comes first and is much more prominent, colorful, and recognizable due to the branded logo and color. Logically, I know because if you log in through Facebook, Pinterest can pull in Facebook's API data and get more information about you than if you log in through your email address.

Although this homepage is optimized to bring in new members, you'll notice a very subtle CTA for folks with Pinterest accounts to log in on the top right.

24. Madewell

CTA Buttons: Take me there | What's next?

Madewell (owned by J.Crew) has always had standout website design, taking what could be a typical ecommerce website to the next level. Their use of CTAs on their homepage is no exception.

When you first arrive on the page, you're greeted with the headline "I'm Looking For …" followed by a category, like "Clothes That'll Travel Anywhere." Below this copy are two options: "Yes, Take Me There" or "Hmm… What's Next?" The user can choose between the two CTAs to either browse clothes that are good for travel, or be taken to the next type of clothing, where they can play again.

This gamification is a great way to make your site more interesting for users who come across it without having a specific idea of where they want to look.

25. Instagram

CTA Buttons: Download on the App Store | Get it on Google Play

Since Instagram is a mainly mobile app, you'll see two black CTAs of equal size: one to download Instagram in Apple's App Store, and another to download it on Google Play. The reason these CTAs are of equal caliber is because it doesn't matter if someone downloads the app in the App Store or on Google Play … a download is a download, which is exactly what Instagram is optimizing for. If you already have Instagram, you can also click the CTA to "Log In" if you'd prefer that option, too.

26 . Barkbox

CTA Buttons: Get Started | Give a Gift

The two CTAs on Barkbox's homepage show that the team there knows their customers: While many people visiting their site are signing up for themselves, there are a lot of people out there who want to give Barkbox as a gift. To give those people an easy path to purchase, there are two, equally sized CTAs on the page: "Get Started" and "Give a Gift."

As an added bonus, there's an adorable, pop-up call-to-action on the right-hand side of the screen prompting users to leave a message if they'd like. Click into it, and a small dialogue box pops up that reads, "Woof! I'm afraid our pack is not online. Please leave us a message and we'll bark at you as soon as pawsible." Talk about delightful copy.

27. t.c. pharma

CTA Buttons: Find out more | View products

Turns out Red Bull isn't its own parent company: It's owned by Thailand-based t.c. pharma, a company that makes popular energy drinks, electrolyte beverages, and functional drinks and snacks.

Its homepage features two call-to-action buttons of equal size: "Find out more" and "View products" — but it's clear by the bright yellow color of the first button that they'd rather direct folks to "Find out more."

28. General Assembly

CTA Buttons: View Full-Time Courses | Subscribe

As you scroll through the General Assembly website, you'll see CTAs for various courses you may or may not want to sign up for. I'd like to point your attention to the CTA that slides in from the bottom of the page as you're scrolling, though, which suggests that you subscribe to email updates.

Although this feels like a secondary CTA due to its location and manner, I actually think they try to sneak this in to become more of a primary CTA because it's so much more colorful and noticeable than the CTAs for individual classes. When you create your own CTAs, try using bolder colors — even ones that clash with your regular stylings — to see if it's effective at getting people's attention. (Click here for a tutorial on how to add slide-in CTAs to your webpages.)

29. charity: water

CTA Buttons: Give by Credit Card | Give by PayPal

Charity: water's main goal is to get people to donate money for clean water — but they can't assume that everyone wants to pay the same way.

The CTAs featured on their homepage take a really unique approach to offering up different payment methods by pre-filling $60 into a single line form and including two equally important CTAs to pay via credit card or PayPal. Notice how both CTAs are the same size and design — this is because charity: water likely doesn't care how you donate, as long as you're donating.

30. Hipmunk

CTA Buttons: Flights | Hotels | Cars | Packages

When you land on the Hipmunk site, your main option is to search flights. But notice there are four tabs you can flip through: flights, hotels, cars, and packages.

When you click into one of these options, the form changes so you can fill out more information. To be 100% sure you know what you're searching for, Hipmunk placed a bright orange CTA at the far right-hand side of the form. On this CTA, you'll see a recognizable icon of a plane next to the word "Search," so you know for sure that you're searching for flights, not hotels. When you're on the hotels tab, that icon changes to a hotel icon. Same goes with cars and packages.

31. MakeMyPersona

CTA Buttons: Grab the template! | No thanks

Here's another example of a great pop-up with multiple calls-to-action — except in this case, you'll notice the size, color, and design of the users' two options are very different from one another. In this case, the folks at MakeMyPersona are making the "Grab the template!" CTA much more attractive and clickable than the "No, I'm OK for now, thanks" CTA — which doesn't even look like a clickable button.

I also like how the "no" option uses polite language. I find brands that don't guilt-trip users who don't want to take action to be much, much more lovable.

There you have it. By now, we hope you can see just how important little CTA tweaks can be.

Full Disclosure: We don't have data to know if these are all scientifically successful, but these examples all follow our best practices. If you decide to recreate these CTAs on your site, please remember to test to see if they work for your audience.

Want more CTA design inspiration? Check out some of our favorite HubSpot call-to-action examples.