A pesar de lo que mucha gente le dirá, no hay reglas estrictas cuando se trata de los botones de llamada a la acción. Sí, es cierto que los botones grandes y coloridos, rodeados de mucho espacio, suelen ser los más exitosos, pero es importante que adapte cada botón a la tarea principal de la página web en cuestión, ya sea para Registro, Registro, Registro o cualquier cosa. más. Como diseñador, es su trabajo hacer que los visitantes puedan realizar estas tareas de la forma más fácil posible, y los botones de llamada a la acción son las herramientas más poderosas a su disposición, así que utilícelas de manera inteligente.
En general, los botones de llamada a la acción deben ser simples y claros. Deben destacar y captar la atención de un usuario. Todo debe ser considerado cuidadosamente, desde las palabras de activación utilizadas hasta los colores, tamaños, formas y posicionamiento. Estos botones deben ser altamente visibles, pero no tan llamativos que hagan que su sitio sea feo o desequilibrado.
A continuación, observamos más de cerca 25 de los botones de llamada a la acción más convincentes que se encuentran en la web. Examinamos por qué cada botón individual es tan exitoso. Con suerte, te darán una idea de lo que se debe y lo que no debes hacer y te ayudarán a inspirar tus propios diseños.
1. WordPress e-Commerce
Es importante que tu botón se destaque usando color. Si puede elegir un color que combine con la paleta de su sitio, como este, los resultados son aún más atractivos.
2. Skype
Esto? Descargar ahora? El botón es bastante simple. No es particularmente grande o de colores brillantes. Sin embargo, está rodeado por un montón de espacio en blanco, lo que lo hace aún más notable para los usuarios.
3. Picsengine
Picsengine se basa en la colocación para el éxito de su? Ver en acción? botón. El botón está atascado justo en el centro de la página, sin ningún otro texto, enlaces o botones que lo distraigan.
4. Mozilla Firefox
¿El Mozilla Firefox? Descarga gratuita? El botón ha estimulado mucho el debate. La mayoría de las personas, incluido yo mismo, creen que su diseño grande, de forma irregular y de colores vivos es verdaderamente revolucionario en términos de gráficos de llamada a la acción. Una pequeña minoría, sin embargo, sostiene que es confuso y no se parece en nada a un botón.
5. CakePHP
¿CakePHP? ¿Descargar? El botón ha sido creado con un tamaño grande y una forma inusual en mente. Sin embargo, su claridad no se ha realizado a expensas de la estética general del sitio. Se asienta cómodamente en el fondo gracias a su combinación de colores.
6. Crazyegg
Crazyegg ha diseñado su sitio alrededor de su botón de llamada a la acción, que se ubica con orgullo en el centro de la página de inicio, rodeado de un montón de espacio en blanco. Su color amarillo brillante se refleja solo en el otro botón de llamada a la acción en la página, ¿el mucho más pequeño? ¿Iniciar sesión? Botón en la parte superior derecha.
7. tornasol
Litmus no ha ido por la borda con su botón de llamada a la acción; sin embargo, es muy claro, gracias en gran parte al espacio vacío que lo rodea y su forma redondeada, que no tiene eco en ninguna otra parte de la página.
8. StumbleUpon
Tener un objetivo de función principal por página hace que sea más fácil para los usuarios ubicar los botones de llamada a la acción, pero a veces esto simplemente no es posible. Hay un montón de cosas que hacer clic en la página de inicio de StumbleUpon, ¿pero? El botón realmente destaca, gracias a su uso del color en una configuración por lo demás monótona
9. recuerda la leche
Remember the Milk ofrece a los visitantes varias opciones en su página de inicio, pero la más importante: "¡Inscríbase ahora!" Es, con mucho, la más clara, ubicada en el centro de la página, rodeada por un cuadro de color y en mayúscula. No hay necesidad de colores llamativos, brillantes aquí.
10. Lifetree Creative
Lifetree Creative ha logrado que su botón de llamada a la acción sea realmente grande, incluso más grande que el logotipo de la empresa, sin que la página aparezca desequilibrada. El color, la forma, el tamaño y el espacio se han utilizado con gran efecto aquí.
11. Dailymile
Dailymile ha hecho algo bastante inusual con su botón de llamada a la acción. Está dispuesta sobre todo lo demás en la página, con una sutil sombra detrás. Ayudado también por el hecho de que es verde, el botón realmente sobresale.
12. Carsonified
La página de inicio de Carsonified contiene mucha información, sin embargo, la sección "¿Comprar sus boletos?" El botón brilla a través, gracias a su uso de mayúsculas y color. Las letras blancas se destacan muy bien contra el rojo.
13. planHQ
PlanHQ ha utilizado el poder de los espacios en blanco para acentuar sus botones de llamada a la acción. Ni los colores brillantes ni los de gran tamaño, estos botones son claros gracias a los bloques de color blanco en los que se encuentran.
14. cosas
Things tiene dos botones de llamada a la acción en su página de inicio, los cuales son de importancia similar para la compañía. Por esta razón, son una forma, tamaño y color idénticos, pero ambos se destacan bien contra el azul claro y el gris.
15. Livestream
El rojo es un color excelente para usar cuando quieres llamar la atención sobre algo. Se destaca mejor contra un fondo blanco y negro, como el que se usa en la página de inicio de Livestream. ¿La forma de flecha de la? ¿Emisión ahora? El botón, en la esquina superior derecha, insta a los usuarios a hacer clic hacia adelante.
16. Ncover
Ncover es otro sitio con dos botones de llamada a la acción en su página de inicio. Al usar el color verde contra un fondo azul, Ncover ha logrado priorizar un botón más importante sobre el otro.
17. Tablero de instrumentos
El rojo contra un fondo blanco y negro aparece de nuevo aquí. Además de su color, Dashboard's? ¡Pruébalo gratis! El botón es altamente visible gracias a su tamaño, que ofrece suficiente espacio para el logotipo y "Registrarse en 60 segundos". ser incluido.
18. Personas libres
Esta página puede parecer bastante estándar, pero le sorprendería saber cuántos sitios de comercio electrónico se equivocan cuando se trata de su? ¿Agregar a la cesta / cesta? botones. El botón de Free People es obvio sin ser desgarbado, gracias a su color y tamaño grande pero modesto.
19. ClickFormant
Por lo general, es mejor usar palabras clave de la industria para los botones de llamada a la acción. Para una lista de correo, el botón normalmente debería leer? ¿Registrarse? o? Únete? De vez en cuando, sin embargo, la variación de estas palabras puede aumentar la imagen de marca de una empresa. Esto es lo que ClickFormant ha hecho usando la palabra "Informar".
20. Kalculator
Los botones grandes de llamada a la acción de gran tamaño a menudo son muy exitosos, pero pueden verse feos y, a veces, un poco desesperados. Consciente de esto, Koombea ha utilizado el posicionamiento, el color, el espacio y la forma, en lugar del tamaño, para hacer que su botón brille.
21. Basecamp
Basecamp está dirigido por un grupo muy inteligente, por lo que no es de extrañar que su botón de llamada a la acción sea tan inteligente. Muchos sitios cometen el error de colocar un botón en la parte superior de la página, lo cual es genial, hasta que el usuario se desplaza hacia abajo y queda oculto. El botón de Basecamp aparece dos veces: una vez en la parte superior y otra vez en la parte inferior.
22. Spotify
¿Spotify? ¿Comprar ahora? El botón es un buen ejemplo de cómo usar mejor el color y el espacio. De color verde brillante y rodeado de blancura, el botón es evidente para todos.
23. Dropbox
El diseño de la página de inicio de Dropbox es tan lógico y simple como el propio Dropbox (¡una herramienta fantástica, que realmente debería probar si aún no lo ha hecho!) Los visitantes no se hacen ilusiones en cuanto a lo que deberían hacer aquí. ¿Pueden o ver un video? o? Descargar Dropbox? - es tan simple como eso.
24. 280 diapositivas
¿Inténtalo ahora? ? botón en 280 diapositivas es grande? ¡realmente grande! No hay forma de que un visitante se lo pierda. Es azul, el mismo color que el fondo, por lo que no se ve tan desagradable como podría fácilmente.
25. FlockDraw
¿FlockDraw's? ¿Empezar a dibujar? El botón es uno de los más atractivos de esta lista. Además de su gran color, que lo distingue del fondo apagado, está sutilmente iluminado y subrayado con pinceladas multicolores.
Conclusión
Si un tipo de botón de llamada a la acción fue más exitoso que cualquier otro, puede estar seguro de que cada sitio web lo estará usando. Si bien es posible identificar similitudes entre los botones de arriba, también hay claramente muchas diferencias. Es vital que pruebe diferentes combinaciones de botones de llamada a la acción en su sitio, para ver cómo afecta cada uno de ellos a las tasas de conversión. Puede hacerlo fácilmente utilizando el Optimizador de sitios web de Google. Sin embargo, cualquiera sea el aspecto de sus botones de llamada a la acción, asegúrese de que se ajusten al diseño general de su sitio web.