Use colores de acento para aumentar las conversiones web

Use colores de acento para aumentar las conversiones web

Entonces, ¿qué es exactamente un color de acento?

Un color de acento es un color de contraste que se utiliza para llamar la atención sobre piezas clave de una página web.

Es una forma de usar el color para garantizar que los enlaces, botones o secciones más importantes de un sitio web no se pasen por alto.

Lo que es más importante, los colores de acento se utilizan para llamar la atención sobre las llamadas a la acción (CTA) clave. Si hay un botón CTA como «Haga clic para obtener más información» o «Comprar ahora», es fundamental llamar la atención sobre esos botones.

¿Por qué?

Porque esa es la acción más importante que quiere que la gente tome. Para que los clientes sigan avanzando a través del embudo de ventas, desea que sea increíblemente obvio qué acción desea que realicen. No querrás que haya ningún error sobre cuál es el próximo paso más importante.

Los colores de acento ayudan a hacer esto, y aquí hay algunos ejemplos que muestran cómo usarlos:

Ejemplo #1: Basecamp por 37 Signals

Basecamp es un software de gestión de proyectos y una herramienta de colaboración en línea producido por 37 Signals, y hacen un gran trabajo al usar colores de acento para provocar más acciones.

Colores de acento del campamento base

La primera forma en que usan colores de acento es llamar la atención sobre el CTA número uno en su página de inicio: «Ver planes y precios». Esa es la acción más importante que pueden tomar los clientes potenciales, para llamar la atención de los visitantes con un botón verde grande colocado en un lugar destacado que se destaca del resto de la página.

El color de acento verde asegura que el botón no se perderá y, dado que no se perderá, recibe más clics.

Diseño del sitio web de conversiones de Basecamp

Otra forma en que Basecamp usa colores de acento para su página de inicio es en el menú de navegación principal. Acentúan «Planes y precios» e «Iniciar sesión» con el mismo color verde que el botón CTA principal.

Basecamp los considera los dos enlaces más importantes y se asegura de que los clientes puedan encontrarlos resaltando los enlaces en verde.

Ejemplo #2: MailChimp

MailChimp tiene uno de los sitios web más hermosos de Internet y también usa colores de acento de manera efectiva.

Colores de acento de Mail Chimp para conversión

Al igual que Basecamp, usan un botón CTA acentuado en su página de inicio para resaltar su llamado a la acción principal. Es un botón rojo que dice «Regístrese gratis» que se encuentra en un lugar destacado cerca del centro de la página. El rojo se destaca de la paleta azul utilizada para el resto de la página y llama la atención sobre el botón «Registrarse gratis».

¿Qué acción crees que desear clientes a tomar? Basado en el CTA rojo, ¿qué acción crees que los clientes voluntad ¿tomar?

Para MailChimp, el siguiente paso más importante que pueden dar los clientes es registrarse para obtener una cuenta gratuita. Se aseguran de que la acción sea fácil de realizar al enfatizar y acentuar la llamada a la acción en la página de inicio.

Ejemplo #3: Copyblogger

Copyblogger está calificado como el blog de marketing número uno del mundo por Ad Age, y hace muchas cosas bien cuando se trata de marketing en Internet.

Dado que Copyblogger es más una publicación que un sitio de ventas, no utilizan colores de énfasis en la página de inicio para las llamadas a la acción estándar «Comprar ahora» o «Más información». En su lugar, usan colores de acento para que los lectores tomen los pasos que quieren que tomen a continuación, es decir, leer publicaciones y suscribirse por correo electrónico.

Colores de acento de Copyblogger

El primer paso que quieren que la gente tome es leer la publicación completa. Si a los lectores les gusta una publicación, es muy probable que se suscriban.

Para que las personas den este primer paso, Copyblogger incluye un botón rojo «Haga clic para continuar» debajo de cada publicación. Este botón se destaca del fondo blanco y enfoca la atención de los lectores en esta acción crítica.

Hace que sea obvio que Copyblogger quiere que hagas clic y leas más. Los lectores no se lo pueden perder. (También resaltan el título en rojo, lo que ayuda a que se destaque también. Ambos son efectivos para ayudar a los lectores a tomar la acción de leer más).

Conversión de Copyblogger con diseño

Copyblogger también quiere que los lectores se suscriban. Para ayudar con esto, llaman la atención sobre su opción de suscripción con un cuadro negro que se destaca sobre el fondo blanco y un botón rojo «Únete a nosotros».

¿Qué quiere Copyblogger que haga la gente? Quieren que los lectores se unan. Fomentan esto acentuando el botón «Únete a nosotros» en rojo.

Ejemplo #4: Dropbox

Un gran ejemplo de un sitio web optimizado que usa colores de énfasis es Dropbox.

Su página de inicio está despojada de todo, excepto de un video para explicar su producto. No hay nada que se interponga y distraiga a los visitantes.

Está bastante claro que la acción número uno que quieren que realicen los visitantes es ver el video. Lo hacen obvio con «Ver un video» como punto focal de la página de inicio.

Conversión de Dropbox a través del diseño

También quieren que los visitantes descarguen su producto, y hacen que sea muy fácil realizar esa acción con un botón azul «Descargar Dropbox» acentuado.

¿Qué es lo que quieren que la gente haga? Primero, mira el video; segundo, descargue el software de Dropbox.

El sitio web optimizado y el botón CTA acentuado hacen que estas acciones críticas se destaquen para cada visitante.

Ejemplo #5: Huevo Loco

Webinpixels, el propietario de este blog, vende un software eficaz para la optimización de sitios web. Ayuda a los propietarios de sitios web a dejar de leer la mente de los clientes y comenzar a obtener resultados mediante la optimización en función del lugar exacto en el que los usuarios hacen clic y buscan en una página web.

El software no tiene precio.

Colores de acento de huevo loco

También usan botones amarillos «Mostrar mi mapa de calor» acentuados en varios lugares de la página de inicio. El uso de múltiples CTA brinda a los clientes la opción de avanzar en el proceso de ventas en cualquier punto en el que estén listos.

Si están listos para ver su mapa de calor después de leer la mitad de la página, pueden hacerlo; Si quieren esperar hasta el final de la página, también pueden hacerlo.

Sin múltiples CTA, los clientes tendrían que llegar al final de la página antes de hacer clic para avanzar.

Dado que mostrar el mapa de calor es la primera acción que Webinpixels quiere que los clientes realicen, brindan siete oportunidades para hacerlo. Esto es mucho mejor que un CTA en la parte inferior de una página de ventas larga donde los clientes nunca pueden llegar al final. Múltiples CTA acentuados brindan una excelente manera de hacer que los clientes sigan avanzando a través del proceso de ventas.

Ahora, aquí hay una pregunta para usted: ¿cómo usará los colores de acento para obtener más acciones en su sitio web?

Por favor, deje un comentario para informarnos.