{"id":89693,"date":"2013-04-18T21:05:11","date_gmt":"2013-04-18T15:35:11","guid":{"rendered":"https:\/\/vwo.com\/blog\/call-to-action-buttons-ultimate-guide\/"},"modified":"2026-01-09T12:19:54","modified_gmt":"2026-01-09T06:49:54","slug":"llamada-a-la-accion","status":"publish","type":"post","link":"https:\/\/vwo.com\/blog\/es\/llamada-a-la-accion\/","title":{"rendered":"Botones de llamada a la acci\u00f3n: La gu\u00eda definitiva con las mejores pr\u00e1cticas y ejemplos"},"content":{"rendered":"\n

Los botones de llamada a la acci\u00f3n (CTA) son las gu\u00edas de tus visitantes que les ayudan a conseguir un objetivo y contribuyen a las tasas de conversi\u00f3n de tu sitio web. Cualquiera que haya probado tests A\/B<\/a> sabe lo que una buena llamada a la acci\u00f3n puede hacer por sus tasas de conversi\u00f3n. <\/p>\n\n\n\n

Algunas de los tests A\/B m\u00e1s comunes consisten en cambiar el color y el tama\u00f1o de los botones, seguido de un seguimiento para identificar la combinaci\u00f3n con mejores resultados que ayude a los visitantes<\/a> a convertir.<\/p>\n\n\n\n

Pero espera. Un plan CRO de \u00e9xito comienza con la recopilaci\u00f3n de la m\u00e1xima informaci\u00f3n y conocimientos sobre el usuario. Todo parte de ah\u00ed y establece una hoja de ruta eficaz. Antes de saltar directamente a la experimentaci\u00f3n, comprende el comportamiento del visitante en tu sitio web y crea hip\u00f3tesis eficaces incluso para las pruebas de botones. En contra de la percepci\u00f3n com\u00fan, \u00a1NO es un juego de golpear y probar! <\/p>\n\n\n\n

Descargar gratis: Gu\u00eda de optimizaci\u00f3n de la landing page<\/strong><\/span><\/a><\/em><\/p>\n\n\n\n

En esta entrada de blog, hemos trazado un plan y enumerado las mejores pr\u00e1cticas para dise\u00f1ar e implementar botones de llamada a la acci\u00f3n de alta conversi\u00f3n en tu sitio web.<\/p>\n\n\n

Priorizar tus CTA<\/h2>\n\n\n

Aunque los expertos del sector recomiendan encarecidamente que te ci\u00f1as a una sola CTA por p\u00e1gina, si tu estrategia de conversi\u00f3n requiere una CTA secundaria, es importante que seas claro con su priorizaci\u00f3n.<\/p>\n\n\n\n

Los escenarios de pruebas en la vida real pueden ser complicados y pueden implicar m\u00faltiples variables adem\u00e1s de la tasa de conversi\u00f3n de ingresos de los CTA individuales. En ese caso, te sugiero que elabores una tabla como la que se muestra a continuaci\u00f3n para decidir cu\u00e1les son tus CTA principales y secundarios<\/a>. Tienes que puntuar hipot\u00e9ticamente cada una de las variables en una escala de 0 a 5. Calcula la puntuaci\u00f3n sumada para encontrar tu llamada a la acci\u00f3n primaria. Por ejemplo<\/p>\n\n\n\n

 <\/th>Variable1<\/th>Variable2<\/th>Variable3<\/th>Total<\/th><\/tr>
CTA 1<\/td>4<\/td>5<\/td>1<\/td>10<\/td><\/tr>
CTA 2<\/td>3<\/td>2<\/td>4<\/td>9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Las variables aqu\u00ed pueden ser cualquier cosa, como CTR<\/a> anteriores, conversiones de ingresos, facilidad de gesti\u00f3n efectiva, complicaci\u00f3n t\u00e9cnica y otras. Cada caso es \u00fanico y puede tener su propio conjunto de variables complejas. Lo importante es que sepas establecer tus prioridades en estos casos.<\/p>\n\n\n\n

Una cosa que debes saber aqu\u00ed es que, aunque tengas dos llamadas a la acci\u00f3n<\/a> en la misma p\u00e1gina, deben estar relacionadas de alg\u00fan modo entre s\u00ed. Y el objetivo final de conversi\u00f3n de ambos botones debe ser el mismo.<\/p>\n\n\n

4 factores que debes tener en cuenta para conseguir CTA de mayor conversi\u00f3n<\/h2>\n\n\n

Como los CTA son elementos cruciales en tu landing page y tienen un impacto en tu embudo de conversi\u00f3n, su estrategia de dise\u00f1o exige una atenci\u00f3n especial durante la optimizaci\u00f3n de la conversi\u00f3n<\/a>.<\/p>\n\n\n

1. Texto del bot\u00f3n<\/h3>\n\n\n

Valor. \u00a1S\u00ed! Tus botones CTA deben responder a la pregunta: \u00ab\u00bfPor qu\u00e9 deber\u00eda hacer clic en esto?\u00bb. En otras palabras, debe transmitir un beneficio al lector de la forma m\u00e1s clara y sencilla posible. Un buen ejemplo de esto es la CTA de Netflix que se muestra a continuaci\u00f3n.<\/p>\n\n\n\n

En medio de la pandemia de Covid-19, Netflix ten\u00eda 207,64 millones de suscriptores de pago<\/a> en todo el mundo en el primer trimestre de 2021, debido a los bloqueos y a la popularidad de la aplicaci\u00f3n de streaming. El dise\u00f1o limpio del bot\u00f3n CTA de su formulario es agradable a la vista, y el texto no comunica agresivamente, sino que te invita a empezar. El texto adicional tambi\u00e9n es tranquilizador y, por tanto, permite a los posibles clientes tomar una decisi\u00f3n r\u00e1pida.<\/p>\n\n\n\n

\"Netflix
Fuente de la imagen: Netflix<\/a><\/figcaption><\/figure>\n\n\n\n

El texto de tu bot\u00f3n debe ser espec\u00edfico, sencillo y n\u00edtido. Los detalles adicionales en torno a tu CTA deben facilitar el proceso de toma de decisiones de tu visitante en lugar de dejarlo confundido.<\/p>\n\n\n\n

Otro obst\u00e1culo que el texto de los botones puede eliminar para ti es la ansiedad. Los visitantes de una p\u00e1gina web dudan a la hora de actuar por m\u00faltiples razones. Comprender las dudas de los visitantes pregunt\u00e1ndoles directamente qu\u00e9 les impide actuar en tu p\u00e1gina web puede ayudarte a descubrir una mina de ideas que puedes utilizar para optimizar tus botones CTA y tu sitio web en general.<\/p>\n\n\n\n

\"Blog<\/a><\/figure>\n\n\n

2. Color del bot\u00f3n<\/h3>\n\n\n

No estoy aqu\u00ed para sugerir que el naranja tiene mejores conversiones que el rojo, o que el verde es el color al que debes ce\u00f1irte para el color de tu bot\u00f3n CTA. El trato de talla \u00fanica frustra el prop\u00f3sito de la experimentaci\u00f3n. <\/p>\n\n\n\n

Puedes crear una hip\u00f3tesis eficaz de que el color del bot\u00f3n debe contrastar mucho con tus colores de fondo porque capta la atenci\u00f3n de los visitantes a primera vista. A continuaci\u00f3n, realiza un test A\/B, utilizando plataformas de tests A\/B<\/a>, para validar esta hip\u00f3tesis.<\/p>\n\n\n\n

Por ejemplo, echa un vistazo al CTA magenta de prueba gratuita de VWO sobre un fondo blanco en su p\u00e1gina de inicio:<\/p>\n\n\n\n

\"Vwo<\/figure>\n\n\n

3. Colocaci\u00f3n de tu llamada a la acci\u00f3n<\/h3>\n\n\n

Vale, todos sabemos que debe estar en un lugar destacado de la p\u00e1gina web. As\u00ed que no hay puntos por se\u00f1alar la cabecera de la p\u00e1gina, la barra lateral izquierda o el centro de la p\u00e1gina.<\/p>\n\n\n\n

\u00bfAlguien ha dicho, above the fold<\/a>? \u00a1Interesante, pero no siempre cierto! S\u00ed, \u00abel above the fold\u00bb es un mito. Muchas veces, mover la llamada a la acci\u00f3n below the fold<\/a> ha demostrado tener un mayor \u00edndice de conversi\u00f3n. Al parecer, en el caso de algunas ofertas complicadas, a la gente le gusta entender el trato un poco mejor antes de preferir pasar a la acci\u00f3n. En tales casos, si tu CTA se coloca above the fold, no mucha gente se molestar\u00e1 en hacer clic en ella.<\/p>\n\n\n\n

Llama la atenci\u00f3n del visitante sobre tu CTA utilizando un buen trozo de espacio en blanco. Ayuda a que la CTA destaque para guiar los ojos de los visitantes en la direcci\u00f3n correcta. Aunque en un intento de colocar tu bot\u00f3n en el espacio en blanco, aseg\u00farate de no acabar coloc\u00e1ndolos tan lejos del texto principal o de los elementos circundantes de la p\u00e1gina que empiece a parecer desconectado. Esto puede reducir de nuevo tu tasa de conversi\u00f3n.<\/p>\n\n\n\n

Mira c\u00f3mo Paypal utiliza los espacios en blanco en su sitio web:<\/p>\n\n\n\n

\"Paypal
Fuente de la imagen: Paypal<\/a><\/figcaption><\/figure>\n\n\n\n

Descargar gratis: Gu\u00eda de optimizaci\u00f3n de la landing page<\/span><\/a><\/em><\/h2>\n\n\n

4. Tama\u00f1o de la CTA<\/h3>\n\n\n

Tu CTA debe ser agradable a la vista, legible y no abrumar al visitante. Hay situaciones en las que tienes que hacer que tu CTA principal sea distinta de la CTA secundaria. <\/p>\n\n\n\n

Deber\u00edas hacer tests A\/B de tama\u00f1o y color de tus botones CTA para saber qu\u00e9 conjunto de variaciones recibe el m\u00e1ximo n\u00famero de clics y visitas, contribuyendo a tus objetivos de conversi\u00f3n.<\/p>\n\n\n\n

\"Blog<\/a><\/figure>\n\n\n\n

A continuaci\u00f3n se muestra un ejemplo de Wufoo.com con dos CTA en diferentes colores:<\/p>\n\n\n\n

\"Wufoo
Fuente de la imagen: Wuffo<\/a><\/figcaption><\/figure>\n\n\n

Algunos consejos adicionales<\/h2>\n\n\n