En una landing page, el color es el primer elemento que se procesa, antes incluso que el entendimiento. Cuando un usuario llega a nuestra landing, antes de comprender cuál es el producto que se le está ofreciendo, el ojo ya ha procesado la información. Si le añadimos el hecho, de que la gente tiene la primera impresion de una web en los primeros 50 milisegundos, nos podremos dar cuenta de cuál poderoso aliado es el color, según Google researh report de 2012.

El color produce en nosotros una reacción física. Cuando nos situamos frente al estímulo visual de un color, nuestro cerebro reacciona y nos provoca una idea de atracción o rechazo hacia lo que vemos. Esta cualidad ha sido fundamental para nuestra supervivencia y nuestros antepasados -como otras muchas especies- desarrollaron esta capacidad por resultar una ventaja en el mecanismo de selección natural.

El color es a la vez simple y complejo. Significa cosas distintas para distintas personas en culturas diferentes. Ningún color es visto del mismo modo por dos personas. El color es personal y universal, y envía mensajes de inagotable variedad. La psicología del color tiene una base teórica universal bastante sencilla de aprender. Sin embargo, la complejidad reside en los elementos subjetivos que tienen que ver con la cultura, edad, sexo y preferencias personales. Podemos encontrar cientos de infografías acerca de las reacciones que produce el color en el ser humano. Encontraremos que ante el rojo puro, reaccionamos con precaución y ante colores pastel relajación. Pero si fuera tan sencillo el arte de la persuasión, con tan sólo realizar nuestra landing en azul, conseguiriamos cientos de leads gracias a las capacidad del azul para trasmitir credibilidad…sabemos que no es así por desgracia. Ilustremos esta idea con un ejemplo:

No se puede generalizar con el uso del color, pero si es importante cuando hagamos un test A/B, realizar pruebas del color. La teoría del color es un punto de partida para testear y optimizar los elementos de la pagina de llegada como botones, palabras, tonalidades de las fotografías o llamadas a a la acción.

Olvídate de las estadísticas que dicen que un botón verde tiene más posibilidades de ser clicado. Si tu web es amarilla, problablemente el botón verde no afectará igual que si es roja. Heinz cambió el color de su firma ketchup de rojo a verde y vendido más de 10 millones de botellas en los primeros 7 meses, resultando en USD$ 23 millones en ventas. Sin embargo Perfomable, ahora  hubspot, al cambiar el color de una llamada a la acción (CTA) en un botón de verde a rojo, resultó un aumento del 21% en las conversiones. ¿Existen entonces alguna guía a seguir? La respuesta es sí.

Clockwork Conversion Color Model, muéstrale al ojo el camino hacia la conversión.

Recientes estudios sobre cómo el ojo procesa el color, se basan en la psicología humana y si los aplicamos, podemos mejorar la conversión de nuestras páginas. Es el “Clockwork Conversion Color Model”. Desde un punto de psicológico, cuando el ojo humano está cansado de la impresión de un mismo color, especialmente los colores puros, el ojo tiende a visualizar el complementario. Este concepto puede aplicarse a breadcrumbs para mejorar la usabilidad o al Call to action para persuadir a hacer clic.

Existen cuatro principios básicos que pueden aplicarse directamente a nuestros diseño.

circulo-cromatico

  1. Usa un color complementario en el call to action. Los colores complementarios son aquellos colores del espectro visible dispuestos en una circunferencia de tal manera que un color queda diametralmente equidistante de otro, formando el círculo cromático. Según este círculo cromático, el complementario es el opuesto. Esto vale exclusivamente para un modelo RGB.
  2. Reserva este complementario exclusivamente para el botón. Si nuestra web es verde, el color complementario será el rojo. Si dispersamos tonos rojo por la web, el color rojo de nuestro botón perderá fuerza. Es por ello que debemos usarlo exclusivamente en el botón.
  3. Usa un color puro para este botón. Es mucho más efectivo, si el color complementario no lo mezclamos con negros, blancos u otros tonos. Si usamos colores primarios o secundarios, será más efectivo. No olvidemos una sombra o degradado, que ayude al ojo a saber que se trata de un botón pulsable.
  4. Usa sombras, luces y matices de tonos en el resto de colores de la web. No olvidemos la regla de color saturado+complementario no saturado. Si el botón debe ser el puro, por ejemplo verde, en el resto d la web deberá predominar un naranja con matices, para que nuestro visitante no se vea sobreexcitado. Dos colores complementarios saturados juntos, generan tensión, mientras que si uno está matizado con negro, blanco u otro leve matiz, se produce una armonía de color que siempre funciona.

 

Para ilustrar esta teoría y que esto no parezca un acto de fe, he querido dejar para el final este experimento para que compruebes por tí misma esta teoría.

Instrucciones: Mira fijamente a la x  durante 10 segundos. ¿Qué colores puedes ver?

illusion-color-fatigue-dots-animation-fuschia

Elena Infante Pérez
Escribo en este blog sobre lo que aprendo en libros, cursos o de mi propia experiencia. Si a algunas personas les sirve, bienvenidas.

He trabajado tanto del lado del marketing como de la publicidad, lo que me ha ayudado a trabajar en una constante retroalimentación entre la estrategia marketiniana y la creatividad.

Competencias: Branding, dirección de arte, desarrollo de proyectos web, social media

Portfolio: Behance
Email: yosoyelenainfante @ gmail.com