Pautas de Botones de Llamada a la Acción, Mejores Prácticas y Ejemplos

Los botones de llamada a la acción en sitios web a menudo son descuidados. Los diseñadores a veces no entienden exactamente qué es lo que hace que un botón de llamada a la acción sea bueno, además de ser atractivo y adaptarse al diseño general. Pero los botones de llamada a la acción son demasiado importantes para ser diseñados sin algún tipo de comprensión de lo que los hace efectivos. Después de todo, el punto principal de un botón de llamada a la acción es lograr que los visitantes hacer alguna cosa.

Es importante obtener al menos una comprensión básica de cómo el color, la escala, el idioma y otros factores influyen en la tasa de conversión de un botón de llamada a la acción. Los conceptos aquí no son complicados, pero requieren un poco de previsión y planificación para crear los botones de llamada a la acción más efectivos posibles dentro de un diseño determinado. Siga leyendo para obtener más información sobre cada uno de estos puntos y más.

El propósito de los botones de "Llamada a la acción"

Los botones de llamada a la acción pueden servir para una variedad de funciones. Después de todo, “llamada a la acción” Es realmente un poco vago. Todo lo que significa es que su objetivo principal es conseguir que un visitante de su sitio acceda a hacer algo. Que algo podría ser agregar un producto a su carrito de compras, descargar algo, solicitar información o cualquier otra cosa..

Debido a que los botones de llamada a la acción tienen propósitos tan variados, se debe prestar mucha atención a lo que el botón pretende lograr. El tipo de sitio, el mercado objetivo y la acción deseada pueden jugar un papel en la mejor forma de diseñar un botón de llamada a la acción.

Tipos de botones de "Llamada a la acción"

Hay algunos tipos diferentes de botones de llamada a la acción. Si bien cada tipo pretende que los visitantes realicen una determinada acción, esa acción puede variar considerablemente. A continuación, se muestran los tipos más comunes de botones de llamada a la acción, según la acción que desean que realice..

1. Añadir a la cesta Botones

Los sitios de comercio electrónico generalmente usan una cantidad de botones de llamada a la acción, pero el más usado es el “añadir a la cesta” botón. Estos botones generalmente aparecen en páginas de productos individuales. Su propósito es atraer a los clientes a comprar un artículo. Los elementos de diseño comunes en los botones de agregar al carrito incluyen palabras simples (como “añadir a la cesta” o “Agregar a la bolsa” o “Compra ahora“) y el uso de iconos (generalmente una bolsa o carrito).

2. Botones de descarga

Los botones de descarga son similares a los botones para agregar al carrito, ya que intentan atraer a un visitante a tomar posesión de un elemento. En el caso de los botones de descarga, muchos diseñadores optan por incluir más información que otros tipos de botones (como la información de la versión o el tamaño de la descarga).

3. Botones de prueba

Algunos sitios intentan atraer a sus visitantes para que prueben sus ofertas, generalmente en forma de prueba gratuita. Esto podría ser una descarga gratuita o una cuenta gratuita, según el sitio en particular. Algunos sitios usan el “menos es más” Filosofía y mantenga el lenguaje en sus botones al mínimo, mientras que a otros les gusta ofrecer más información sobre lo que contiene la versión de prueba..

4. Aprender más botones

Los botones de Más información generalmente se usan al final de un bloque de información de prueba (a menudo en la página de inicio). Estos botones suelen ser simples, pero a menudo de gran tamaño para atraer la atención de los visitantes..

5. Botones de registro

Los botones de registro aparecen más comúnmente en dos versiones diferentes. El primer tipo suele estar asociado directamente con un formulario de registro. El segundo tipo se usa generalmente de manera similar a “añadir a la cesta” Botones, como una forma para que los usuarios compren o se registren para un servicio o cuenta, antes de que realmente alcancen un formulario de registro..

Hay otros tipos de botones de llamada a la acción, pero estos son los más comunes. Las pautas que se aplican a las anteriores pueden aplicarse también a cualquier otro tipo de botón de llamada a la acción que esté diseñando..

Uso efectivo del espacio negativo

Desea que sus botones de llamada a la acción se destaquen del contenido circundante y realmente llamen la atención de los visitantes de su sitio. Para ese fin, necesitas hacer uso del espacio negativo alrededor de esos botones. Incorpore un espacio en blanco entre su contenido y su botón de llamada a la acción. Si bien esto es menos importante (y menos común) en algunos botones, como los botones para agregar al carrito, y otros para aprender más, funcionan mejor con más espacio.

Es importante equilibrar la cantidad de espacio negativo que tiene alrededor de los botones con el tamaño de los botones. Se trata de la proporción. Desea que su botón, el espacio que lo rodea y el contenido circundante se vean como si estuvieran juntos, incluso con disparidades de tamaño. Es posible que tengas que jugar un poco con las cosas para que se vean bien..

Algunas pautas:

Asegúrese de que haya suficiente espacio alrededor de su botón para que no se sienta desordenado
Considere principios como la regla de los tercios o la proporción áurea cuando determine cuánto espacio incluir
El espacio negativo le da a su botón de llamada a la acción que se distinga de su otro contenido y lo distingue

Talla y color

El tamaño de los botones de llamada a la acción es muy importante. Un botón que es demasiado grande dominará todo lo que lo rodea. Un botón que sea demasiado pequeño se perderá en la confusión de todos los demás contenidos de una página. Desea que su botón sea lo suficientemente grande como para sobresalir sin abrumar el diseño.

El color se puede utilizar con gran efecto para ayudar a equilibrar el tamaño de sus botones. Para botones más grandes, elija un color que sea menos prominente dentro de su diseño (pero que se destaque nuevamente en el fondo). Para un botón más pequeño, es posible que desee elegir un color más brillante y contrastante para que el botón resalte. En cualquier caso, asegúrese de que el color que usa distinga el botón sin chocar con el diseño general del sitio.

Algunas pautas:

Los botones de llamada a la acción deberían ser idealmente los botones más grandes en una página determinada
Usa colores contrastantes para hacer que los botones más pequeños se destaquen más.
Usa colores menos definidos para hacer que los botones de gran tamaño se ajusten mejor
Los botones de llamada a la acción deben llamar la atención sin sobrecargar el diseño.

Idioma

La redacción exacta que elija utilizar en sus botones de llamada a la acción puede tener un gran efecto en la conversión. Comparar “Compra ahora” con “añadir a la cesta“. Una es mucho más urgente que la otra. O que tal “Pruébalo gratis” con “Prueba gratis“? Uno es mucho más fuerte que el otro y se destaca más..

El idioma que usa en los botones de su llamada a la acción debe ser lo más sencillo y simple posible. Usted quiere que los visitantes sepan con solo un vistazo exactamente lo que obtendrán cuando haga clic en un botón. Si lo cuestionan, eso significa que se han detenido, lo que puede llevar a tasas de conversión más bajas.

No olvide sus tamaños de fuente, también. El texto en el botón de llamada a la acción debe ser grande y en negrita, de manera adecuada al tamaño y color del botón. Asegúrese de que haya suficiente contraste y que el texto sea fácil de leer.

Algunas pautas:

Usa un lenguaje simple y directo.
Use una fuente grande y en negrita en el botón para el texto principal
Asegúrese de que el lenguaje claramente requiere una acción específica

Crear urgencia

Desea que los visitantes de su sitio realicen las acciones deseadas con la menor reflexión posible. Si bien no quiere engañar a sus visitantes, cuantas más oportunidades les brinde para detenerse y considerar lo que están haciendo, más oportunidades tiene para decirles. “no”.

Usted quiere que sus botones les den la impresión de que necesitan actuar de inmediato. Desea animarlos a tomar su decisión de inmediato, en el impulso del momento. Si bien esto no funcionará con todos los botones de llamada a la acción (especialmente aquellos para comprar artículos de alto costo), para acciones gratuitas o de bajo costo, es conveniente que los visitantes hagan clic con poca previsión..

Algunas pautas:

Anime a sus visitantes a actuar de inmediato
No le dé a sus visitantes ninguna razón para hacer una pausa
Si bien la urgencia es importante, no engañes a tus visitantes de ninguna manera.

Proporcionar información adicional

Cuando sea apropiado, use los botones de llamada a la acción para brindar a los visitantes información adicional sobre lo que obtendrán si hacen clic en el botón. Esto se ve más comúnmente con los botones de prueba o los botones de descarga. Los ejemplos comunes de información adicional incluyen el tiempo que durará una prueba gratuita o el tamaño de la descarga de un archivo. La información de la versión también se ve comúnmente.

Cuando incluya información adicional, recuerde que debe concentrarse en la llamada a la acción real. Asegúrese de que el texto para el idioma que incita a los visitantes a actuar sea más prominente, con otra información mucho menos visible.

Algunas pautas:

Solo incluye información adicional cuando se agrega a la experiencia del usuario
La información adicional solo es apropiada en algunos tipos de botones de llamada a la acción, especialmente en los botones de descarga o de prueba
Asegúrese de que la llamada a la acción principal sigue siendo el texto más prominente en su botón

Priorizar

Es importante priorizar los botones de llamada a la acción en su página si hay más de uno. Esto se puede hacer de varias maneras, pero las más comunes son a través del uso del color y el tamaño..

Use el color para resaltar el botón más importante de una página o para hacer que los menos importantes parezcan menos prominentes. O use el tamaño para que el botón más importante se destaque (haciéndolo más grande) y quite el énfasis de los menos importantes.

Iconos e Imágenes

Incluir señales visuales en los botones de llamada a la acción también puede ayudar a aumentar las tasas de conversión. Un icono de un carrito de compras en una “añadir a la cesta” botón, por ejemplo, o una flecha en un botón de descarga son dos buenos ejemplos. También piense en iconos únicos para usar, pero asegúrese de que el icono se agregue a la experiencia del usuario aclarando para qué sirve el botón y no agregue confusión..

Algunas pautas:

Asegúrese de que los íconos que usa ayudan a aclarar el significado de su botón, en lugar de confundirlo
Los iconos reconocidos fácilmente pueden indicar inmediatamente el significado a sus visitantes
No tenga miedo de usar iconos menos utilizados, siempre que su significado sea claro

Ejemplos

Aquí hay algunos ejemplos de gran llamada a los botones de acción. Si bien no todos se ajustan perfectamente a las pautas anteriores, cumplen con los criterios suficientes para ser considerados excelentes.

Livestream - Diferenciar los botones "comprar ahora" (para opciones pagadas) y "registrarse" (para opciones gratis) es una buena estrategia.

Windows 7 - El gran botón verde "Get Windows7" es fácil de localizar para los visitantes.

Cuota de archivos - El botón verde brillante aquí realmente destaca sobre el fondo blanco..

Cuaderno - El uso de diferentes colores para los botones "Descargar" y "Comprar" los distingue y le da prioridad al botón "Comprar".

Libro del gusto - Este botón hace un gran uso de un icono y utiliza un texto más grande y en negrita para destacar.

Goodbarry - Otra llamada verde brillante al botón de acción.

Lifetree creativo - Continuar con el mismo tipo de letra desde el cuerpo hacia el botón de llamada a la acción crea una sensación de cohesión.

El reanudador - Un brillante botón rojo de llamada a la acción en negrita se destaca sobre el fondo azul.

Notepod - Un buen ejemplo de incluir información adicional en un botón de llamada a la acción.

Inkd - Un gran ejemplo de priorizar botones con tamaño..

Temas elegantes - Otro excelente ejemplo del uso del color para destacar sin chocar con elementos de diseño circundantes.

ZenDesk - Otro gran ejemplo de hacer que un botón se destaque usando color..

Storenvy - Un botón redondo es inesperado y destaca, especialmente cuando está rodeado por un borde blanco.

Bara'Mail - A veces, un botón que se integra funciona mejor en el diseño general de su sitio, especialmente cuando la acción es menos urgente.

Más recursos

Botones de llamada a la acción: ejemplos y mejores prácticas - De la revista Smashing
Buenos botones de llamada a la acción - Desde UX Booth
Botones de llamada a la acción: ¿El tamaño importa? - De Get Elastic
10 técnicas para una efectiva “Llamada a la acción” - Desde boagworld
5 consejos para crear un botón efectivo de llamada a la acción - De SitePoint