5 consejos para diseñar un botón de compra ganador

Si usted es un diseñador, un comercializador en línea, o simplemente es propietario de un sitio web donde intenta vender algo, en algún momento tendrá que diseñar un "botón de compra" adecuado. Y luego, rápidamente descubrirá que simplemente colocando un “compra ahora” el texto en un rectángulo azul no es suficiente si espera obtener buenos resultados.

Afortunadamente, diseñar un "botón de compra" adecuado no es tan difícil una vez que conoces algunos conocimientos básicos. Aquí va.

En primer lugar, el El texto en tu botón es lo más importante., Pero hay algunas otras características que deben abordarse. ¿Por qué digo que el texto es lo más importante? Imagina esto: ¿cuál es el punto de tener un botón bellamente diseñado si el texto en él dice? “Vete al infierno!”? Caso cerrado. Buena copia es donde se hacen los dineros..

En el artículo de hoy, discutimos 5 rasgos cruciales de un "botón de compra" adecuado. Vamos a ver!

1. Estilo general

Este es el punto # 1 en esta lista, no sin una razón, ya que es el rasgo más importante.

Tú quieres convierte tu botón en una vaca morada. Este es un concepto popularizado por Seth Godin. En resumen, quieres que sea notable; Por notable me refiero a algo que no se puede pasar por alto. Algo como una vaca morada en medio de un pasto.

Algunos diseñadores no son particularmente buenos en esto. Es tentador crear un botón que se adapte a la perfección con los colores y el estilo del sitio web en el que se encuentra. Al principio parece una muy buena idea, pero no lo es..

El problema es que tal botón está lejos de ser notable. No quieres que tu botón se mezcle; quieres que se destaque Por lo tanto, debe crearse como un elemento totalmente separado que simplemente se sienta en algún sitio web, no como algo que deba ser congruente con ese sitio web..

Déjame darte un gran ejemplo de un botón similar a una vaca púrpura.

Mozilla Firefox

Así es como se ve una página de descarga de Firefox. Quiero que noten una cosa. El botón de la izquierda, el botón de descarga, no se parece en nada a nada más en esa página. Es la única cosa verde. Es el único lugar que presenta el logo de Firefox. Es uno de los elementos más grandes allí. Se encuentra por encima del pliegue..

Todos estos rasgos hacen que este botón sea extremadamente visible. Es una vaca morada. Si estás diciendo que no lo ves, solo estás tratando de impresionar a alguien..

En una palabra: Apunta a tener un botón notable..

2. Apariencia

Empecemos con el color.

Si desea ser notable, use un color que no se haya usado en ningún otro lugar de la página. Al igual que los chicos de Firefox están haciendo en su sitio web. Puede usar una herramienta como Color Scheme Designer para encontrar un color que se vea bien con la combinación de colores actual de su sitio web pero que aún sea muy diferente.

Y “diferente” es la palabra clave aquí. Si su sitio web es mayormente azul, no desea un botón de compra azul. No quieres un tono de azul. No quieres nada que se vea azulado. Quieres rosa o naranja, etc. Estoy seguro de que entiendes el punto.

Un truco más. El naranja es conocido como el color más visible justo después del rojo. Pero, no levanta todas las emociones negativas que hace el rojo (cosas como “detener”, “Estar atento!”, y “peligro”). El botón naranja más popular en internet se puede encontrar en amazon.com.

La siguiente cosa para centrarse es el tamaño del botón. Bueno, qué puedo decir, tiene que ser GRANDE. Cuanto más grande sea, mejor. (De nuevo, ejemplo de Firefox.)

“¿Puedo hacerlo aún más grande??” Es una buena pregunta para hacer durante la fase de diseño. Hazlo mucho.

Deberia ser simple o llamativo? Un botón no puede ser demasiado llamativo. Mira el botón de Firefox una vez más. Es llamativo Tiene un zorro anaranjado, pero aún parece un botón. Y ese es un límite que no puedes cruzar. Si su botón no se ve como uno, nadie lo pulsará.

Es por eso que no hay una respuesta simple a la que uno está mejor: llamativo o simple. Solo tienes que descubrirlo por ti mismo. Siempre dividir la prueba. Crea dos botones, uno llamativo y otro simple. Use ambos al mismo tiempo y vea cuál funciona mejor. Google Website Optimizer te ayudará con eso.

Solo un rápido ejemplo de un simple botón..

ThemeFuse

Como puede ver, el botón no utiliza ningún zorro naranja, pero sigue siendo muy visible. De hecho, ThemeFuse (una tienda de temas de WordPress premium, de la que formo parte) proporciona un poco de algo llamado códigos cortos. Entre otras cosas, esos códigos cortos hacen que sea realmente fácil crear botones atractivos.

Por ejemplo, con una sola línea de:

[button link = "domain.com"] ¡Haz clic aquí para comprar mi increíble producto! [/ button]

Obtengo este resultado:

3. Fuente

Fuente sans serif Es el estándar para todo tipo de botones. Esto se debe a que las fuentes sans-serif son muy legibles para cada uso en línea. (Por otro lado, las fuentes serif son mejores para las publicaciones impresas).

Desea que la copia en su botón sea lo más legible posible, ya que es la pieza de texto más importante de la página. Las mayúsculas no son una buena idea. Caso mixto funciona mucho mejor. Por caso mixto me refiero a que la primera letra de cada palabra es un carácter en mayúscula. (Excepto palabras como “para”, “la”, “y”, etc.)

(Fuente de la imagen: Gomediazine)

Algunas fuentes seguras que puede usar son: Arial, Helvetica, Franklin Gothic, Myriad, o cualquier otra fuente clásica de sans-serif, realmente.

Ahora qué pasa con el color. La copia debe, por supuesto, estar en alto contraste con el color del botón. No quieres gris sobre gris. Quieres negro sobre blanco, o azul sobre naranja.

De nuevo, el texto debe ser altamente legible..

4. Colocación

La mejor ubicación depende del diseño de su sitio web, lo que probablemente no sea sorprendente. Pero todavía hay algunas reglas dignas de permanecer.

Colocarlo en el lugar más obvio posible. No trates de ser creativo aquí. La colocación debe ser obvia para el cliente / usuario..

Cada vez que alguien visita el sitio web espera ver ciertas cosas en ciertos lugares. Cosas como: el logotipo en la esquina superior izquierda, el resumen del carrito de la compra en la esquina superior derecha, la cláusula de copyright en el pie de página, etc. Su trabajo es tratar de averiguar cuál es el lugar más obvio para un botón de compra y colocarlo allí.

Por supuesto, tiene que ser el lugar más visible al mismo tiempo. Esto significa dos cosas:

1. Eso absolutamente tiene que ser colocado encima de la tapa, y
2. No tengas miedo de los espacios en blanco. Whitespace es amigo de todo buen diseñador web. Recuerde, no importa cuántas cosas pueda colocar en un sitio web, lo que importa es cuántas cosas puede eliminar de él..

Puedes poner tu estrategia de colocación en esteroides duplicando el botón y también colocándolo en la parte inferior de la página. De esa manera, cuando alguien lee toda la página, aún puede actuar al final de la misma..

5. Elementos extra

Esta es la guinda del pastel. Los elementos adicionales mejoran aún más la visibilidad de su botón. Ejemplos de elementos: Flechas, carritos de compras, lupas, signos de suma o varios elementos de marca..

Mi ejemplo favorito, el ejemplo de Firefox, usa un elemento extra realmente genial: el zorro naranja (también conocido como su logotipo).

Una regla de oro es usar elementos adicionales que Enfatiza el propósito del botón.. Por ejemplo, dos flechas apuntando hacia abajo funcionan bien para un botón de descarga. El ícono de un carrito de compras funciona muy bien con un botón para agregar al carrito (el ejemplo de Amazon anterior). La lupa funciona muy bien con un botón de búsqueda. Y así.

También puede utilizar algunos elementos de marca. Por ejemplo, cosas como: icono RSS estándar con un botón de suscripción a la alimentación, un icono de pájaro con un botón de seguirme en twitter, un zorro naranja con un botón de descarga de Firefox, su propio logotipo con un botón de comprar mi. botón de cosas.

Aquí hay unos ejemplos:

Wakeinteractive

Comercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Subir

Poder de "gratis"

Un truco más es el uso de la palabra más poderosa en inglés: GRATIS. Cada vez que se anuncia algo como gratuito, las personas comienzan a actuar predeciblemente irracionales (consulte un gran libro de Dan Ariely, "La ventaja de la irracionalidad" para averiguar a qué me refiero.

Más ejemplos:

Libros de frescos

Wufoo

Freeagent.com

Que sigue?

Si eres un experto en Photoshop u otro software similar, puedes continuar y crear un bonito botón ahora mismo. Otra forma es convertirte en un afortunado propietario de cualquier tema de WordPress de ThemeFuse, como mencioné anteriormente en esta publicación..

¿Cuál es tu consejo para diseñar un gran botón de compra?? Me encantaría actualizar este post con vuestras opiniones..