Cómo aumentar clics y conversiones con la psicología de los colores.

¿Sabes hacer marketing en tu página web? ¿Tu sitio está optimizado para que resulte irresistible suscribir, comprar, descargar, probar un producto o llenar un formulario? ¿Sabes si los colores que has elegido y la disposición de los elementos son los correctos para que el usuario recorra la landing page de la manera que tú lo deseas hasta llegar al punto y click que tú necesitas? ¿Acaso sabías que el color es uno de los factores con mayor influencia a nivel “subconsciente” en el proceso de decisión de compra?

Trabajar sobre los canales de social media es sumamente necesario, y seguramente ahora le das más importancia a Facebook, Twitter o Google Plus, que a tu página web, o quizás aún no has creado una, por el temor de que resulte obsoleta. ¿O no?.

la psicologia del color

Es necesario entender que el diseño de una página web, no debe ser sólo pensado para gustar visualmente, sino que debe ser optimizada para guiar al usuario a lo largo de una secuencia de pensamientos, para que realice la acción que nosotros esperamos de él. El color es un componente fundamental que ejerce influencia en todo este proceso y por ello es tan importante, si deseas obtener más ventas, suscripciones, descargas, etc., que leas este artículo para aprender qué errores no debes cometer en tu página y cómo utilizar la psicologia del color, para conseguir tus objetivos. Las modificaciones que podrás hacer son muy simples, y pueden significar ¡cambios increíbles!

¿Con ganas de empezar a leer? ¡Allá vamos!

anigif_enhanced-11903-1398730207-1

A- La psicología del color: un repaso rápido por datos que no tenías idea al respecto

1.A- El sentido de mayor influencia en la decisión de compra:

la psiclogia del color 1

2.A- 90 segundos necesita el cerebro para realizar un análisis subconsciente del producto y hacer un juicio al respecto:

la psicología del color

3.A- Colores preferidos según el género:

  • Hombres: Azul, Verde y Negro.
  • Mujeres: Azul, Púrpura y Verde.

la psicologia del color

4.A- Existen 3 perfiles básicos de comprador, y cada uno es atraído por colores distintos, que funcionan en cada caso como activadores:

4

5.A- El azul es el color más usado entre las marcas más importantes del mundo.

5

6.A- Los colores más usados por industria:

Cada ícono representa una industria:

6 INDUSTRY

Colores más usados por industria:

Rojo es: agresivo, energético, provocativo y llama la atención.
Es popular entre las industrias relacionadas con : comida, tecnología, autos y agricultura.

6 red

Púrpura evoca: elegancia, sofisticación, nostalgia, misterio, espiritualidad
Es popular entre las industrias relacionadas con: tecnología, cuidado de la salud, finanzas.

purple 6

Azul transmite: confianza, credibilidad, seguridad, responsabilidad.
Es popular entre las industrias relacionadas con: tecnología, cuidado de la salud, finanzas. energía, agricultura, aerolíneas.

blue 6

Verde evoca: riqueza, salud, prestigio, serenidad
Es popular entre las industrias relacionadas con: comida, tecnología, finanzas, energía, vivienda.

green 6

Amarillo evoca: positivismo, luz, calidez, motivación, cretividad
Es popular entre las industrias relacionadas con: comida, energía y la vivienda.

yellow 6

Naranja evoca: vitalidad, diversión, exuberancia, alegría.
Es popular entre las industrias relacionadas con: tecnología y cuidado de la salud.

orange 6

Marrón evoca lo: terrenal, natural, simplicidad, duradero
Es popular entre las industrias relacionadas con: ropa, autos y agricultura.

brown 6

Negro evoca: prestigio, valor, atemporalidad, sofisticación
Es popular entre las industrias relacionadas con: tecnología, autos y ropa.

black 6

Blanco evoca: pureza, nobleza, limpieza, suavidad.
Es popular entre las industrias relacionadas con: ropa y cuidado de la salud.

white 6

B- Los errores que debes dejar de cometer en tu landing page en relación a los colores

Como bien habíamos dicho en un principio, la psicología del color es muy poderosa, ya que es el color el factor que mayor peso ejerce en el proceso de conversión en una landing page, junto con otros elementos del diseño como: el Tamaño, la Forma, la Ubicación y el Movimiento.

Tomamos el excelente análisis realizado por Marketing Experiments para desarrollar los siguientes 5 errores fatales relacionados con el uso de los colores, para que ahora mismo analices tu página y comiences a optimizarla:

7.B- Error 1: Enfasis

El error puede ser la falta de énfasis o colocar el énfasis en un elemento o lugar incorrecto.
Marketing Experiments analiza un caso que necesitaba aumentar la cantidad de suscriptores.

Original: en la página no se hacía énfasis en ningún plan, y nada llamaba la atención. No había ningún elemento que guiara al usuario a tomar una decisión concreta. Cuando una persona se enfrenta a opciones que aparentan ser todas “iguales”, ingresa en una situación confusa, de la cual es más fácil retirarse, que parar un minuto y tratar de entender qué es exactamente lo que se ofrece y qué opción es la más conveniente. En cambio, cuando se simplifica el proceso destacando e indicando una opción sobre otra, la duda desaparece más rápido y con ello más fácil es obtener el SI del cliente.

7b original

Optimización: se utilizó un juego de sombras y gradientes de colores que guían la vista hacía el punto principal, que se destaca con un color distinto para fortalecer la propuesta de valor. Así mismo, se simplificó la información que se daba a través del texto y junto con la utilización de los colores, se guió al usuario, hacia el plan que la empresa quería que fuera elegido. Con estas modificaciones se registró un incremento del CTR en un 81% .

7B optim

Otro ejemplo: colocar el énfasis en el lugar incorrecto.
El error en este caso, es que el color genera distracción al colocar el botón del Call To Action (CTA) fuera del formulario y en el medio del recorrido visual que realiza el usuario a través de la página. En la versión optimizada, el color del botón de CTA es más intenso y es colocado al pie de la página, “obligando” al usuario a atravesar con su vista, todo el formulario para llegar finalmente hasta el botón del CTA, guiando la acción. Resultado: 97% más de CTR

7B2

8.B-Error 2: Cantidad

En este caso, la saturación de colores, o “la falta de”, afecta muchísimo el proceso decisivo. Ya que puede ser un factor de confusión o de lo contrario, un factor que ayude a asimilar mejor la información.
Veamos este ejemplo del análisis realizado por Marketing Experiments:

Original: Muchos colores compitiendo al mismo tiempo por la atención de la persona que visita la página.

8 b original

Optimizado: se quita el ruido producido por tantos colores, dejando la caja que incluye el call to action, como único elemento enfatizado por el color.

8 b optim

9.B- Error 3: Combinación

En esta ocasión, me parece que viene como anillo al dedo traer una explicación realizada por Derek Halpern en uno de sus videoposts, que resulta súper lógica, pero que al parecer cuesta asimilar. Él indica que existen dos colores que debes usar en tu página web: colores pasivos y colores accionables:

  • Colores pasivos: aquellos que se usan para generar el atractivo visual del sitio, para “maquillar” la página, y también es el que le da personalidad a tu marca.
  • Colores accionables: indican a las personas que “X” color significa acción = click. Este color debe servir para educar a los visitantes de tu página y usuarios regulares, que sobre ciertos botones, links, y cajas, se debe hacer “click”. Si utilizamos colores similares para resaltar titulares, para links, para otros mensajes que no llevan a ningún lugar, desperdiciamos el recurso del color, que debe en este caso, servir para indicar qué queremos que realice la persona que recorre la página.

Marketing Experiments, destaca en este caso, un gran error de combinación, en una caja de diálogo la cual contiene un CTA para un acceso premium al contenido que este sitio ofrece.

9 b orig

En la versión optimizada, a la caja con el call to action, se le asignó un color accionable que permitió traer adelante el mensaje o el pedido de acción, lejos del fondo, para evitar que se perdiera entre el resto del contenido visual.
No hay que confundir a los usuarios, por ello es necesario que exista una coherencia en el uso y combinación de colores, para no desconcertar a las personas, y simplificar la toma de decisiones .

9 b opt

10.B- Error 4: Mensaje

Cada color transmite un mensaje y es por ello que es fundamental conocer que significa cada color para entender qué emociones activa cada uno y qué asociaciones se disparan con su uso. En el siguiente caso, la versión original no transmite ni connota credibilidad, seriedad o confianza, valores necesarios para este tipo de producto.

10 b

Piensa en tu industria, en tu producto, en qué mensaje deseas transmitir y qué acciones deseas que realice cada persona que visita tu página, para tomar la decisión de qué color es el mejor para cumplir tus objetivos.

11.B- Error 5: Flujo

El caso que vimos en el error de “énfasis”, también podría ajustarse a este escenario. Es necesario acompañar y guiar a través de los colores, a quién visita la página para que el mensaje que se transmite con cada elemento de diseño, sea interpretado correctamente por cada usuario.

El siguiente, es otro claro ejemplo de cómo la utilización del color puede interrumpir el recorrido visual y la secuencia natural de pensamientos que va construyendo cada persona al repasar el contenido de la página o landing page. Con un buen uso del color y su disposición, se puede conseguir que el usuario realice la acción que nosotros deseamos, sin esfuerzos.

Original: aunque se utiliza un color en el botón del CTA que potencialmente atrae toda la atención, al estar colocado en una caja blanca, fuera del mensaje principal, interrumpe la secuencia natural de pensamientos de la persona que está leyendo, dejando un espacio que genera ruido, que desencaja, y en ese instante, puede ingresar la duda, y es eso lo justamente debemos evitar.

11 b

Optimizado: el botón es parte del mensaje, no interrumpe el recorrido visual y simplifica la toma de decisión, sin aportar ruido en el medio de todo este proceso. El botón azul es el único elemento que carga todo el peso de la atención, optando en este escenario, por una estrategia de diseño que utiliza un contraste bajo, con menos colores, pero mucho peso en un solo elemento.

C- Tips para optimizar los botones de un Call To Action

12.C- Encapsular

No dejes que el mensaje o el punto de interés en el que deseas concentrar toda la atención, quede suelto o perdido entre el resto de los elementos de tu landing page. Encapsula el botón para incorporarlo al mensaje y llamar correctamente la atención.

12 c

13.C- Direccionar

No dejes librado al azar el recorrido visual del usuario alrededor de la página. Guía e indica dónde se debe prestar atención en tu landing page. Utiliza si es necesario, elementos que ayuden a direccionar el paso del ojo por la página.

13 c

14.C- Contraste

Como bien repasamos en los puntos anteriores, recuerda que contraste no significa usar muchos colores. Significa aplicar todo el peso del color, en el lugar correcto.

14 cc

15.C- Espacios en blanco

Puedes destacar los botones o cajas con un CTA a través de los espacios en blancos, para no generar ruido con demasiados colores o elementos extras para llamar la atención.

15 c

16.C- Además del color, optimiza tu página y botones con un CTA inteligente y diferente.

Mohita Nagpal hace una excelente recopilación de ideas para optimizar botones y texto de una landing page, en el blog Visual Optimizer. Hagamos un repaso rápido:

  • Usa una frase a la cual sea difícil responder con NO, o que sea lo suficientemente incómoda, para que la persona que está del otro lado, considere la decisión que ha tomado Sorprende a los visitantes de tu sitio, recuerda que constantemente estamos expuestos a CTAs, y debes romper la barrera del escepticismo que todos hemos generado por el constante bombardeo información..

16 C1

16c4

16C3

16 C 5

16 C2

  • Para los errores de sistema, los “404 – Page Not Found”, o pop-ups, también puedes optimizar los mensajes para no perder a ningún potencial cliente. Ya no puedes simplemente decir “Page Not Found”. Piensa en las personas que visitan tu página, qué lenguaje usan y qué sería inteligente decirles para atraer su atención, y que sigan en tu sitio.

16 C6

D- 2 herramientas que te ayudan a tomar mejores decisiones respecto de los colores, que vas a amar!

17.D- Navflow:

Esta app analiza el recorrido que realizan los visitantes a través de tu sitio y en qué puntos encuentran dificultades para seguir el flujo de acciones dentro de ésta.

tool 1

18.D- Kuler de Adobe:

Esta app te permite analizar según diferentes criterios de test de colores, cuáles son los mejores para combinar en tu sitio.

tool 2

Para concluir:

Comprender el poder del color y su significado, es muy importante porque los colores no solo sirven para llamar la atención, sino que principalmente comunican un mensaje a través del entramado de asociaciones que disparan cada uno de ellos. Como bien dijimos en un principio, es necesario también aprender a hacer marketing en una página web, y aprovecha cada elemento del diseño para comunicarte con las personas que visitan tu sitio, guíalos y haz que ellos realizan la acción que tu necesitas.
Ahora bien, si te gustó este artículo…

anigif_enhanced-21430-1398792791-23

Fuentes Principales:
http://unbounce.com/conversion-rate-optimization/design-principles-increase-conversions/
http://visualwebsiteoptimizer.com/split-testing-blog/copywriting-examples-for-high-conversions/
http://socialtriggers.com/
http://www.marketingexperiments.com/site-optimization/website-colors-and-conversion.html
http://blog.kissmetrics.com/psychology-of-color-and-conversions/?utm_source=hootsuite&utm_campaign=hootsuite
http://thelogocompany.net/blog/infographics/psychology-color-logo-design/
http://brandongaille.com/how-colors-influence-consumer-buying-decisions/
http://blog.kissmetrics.com/how-colors-affect-conversions/?wide=1
http://www.pinterest.com/pin/100838479128968459/
http://blog.kissmetrics.com/color-psychology/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s