Will a Specific Color Change the Behavior of Your Website Visitors?
Color is shown to be a significant determinant for both website trust and satisfaction.
Color has the potential to communicate meaning to the user and influence their perception through the priming effect, how the exposure to one stimulus influences the way we will respond to another stimulus. In that way the exposure to a certain color can influence the visitor’s reaction towards the site in a carryover effect, meaning that the emotional reaction towards a color can be translated into a positive or negative interaction with the website.
There have been numerous (unsuccessful) attempts to classify consumer responses to different individual colors. Those findings revealed that the reaction towards color is designed by personal experiences, so it can’t be universally translated into specific feelings (such as pink will make you happy).
Our reaction to color is not absolute. There is no collective preference for one color over another and there is very little evidence to support that a green call to action will universally make people purchase a product more often than a yellow one. The truth of the matter is that certain colors are perceived to be favored across certain situations, thus, they are perceived to be more appropriate than others in specific context.
Mandel and Johnson (2002), for example, demonstrated that background colors and images on a website could act as primes influencing attribute importance and product choice. Specifically, the “wallpaper” on a car website featuring green with dollar signs successfully primed price, while red and orange flames primed safety.
Similarly, Gorn, et al. (2004), showed that color influences how quickly a web page is perceived to download, and this effect is mediated by feelings of relaxation. Thus, we are talking about the suitability between a color and the context of which it is presented and not about the effect of a certain color per se.
There is no innate preference towards a certain color.
One of our retail clients ran an A/B test to learn about the effectiveness of one color compared to the other. The results were conclusive: A blue CTA increased the conversion rate by 20 percent. These results might lead most designers to conclude that a blue CTA leads to higher conversion rate compared with the red one and to implement this knowledge in other websites.
However. a deeper look at “mouse move” heatmaps uncovered that the difference in conversion was due to the buyer state of mind, rather than due to the CTA color. Visitors that did not convert show a different pattern of behavior. They were more details oriented, spending a longer time on every piece of information, and their engagement time was significantly higher.
On the other hand, visitors who converted tended to be more impulse buyers and spent less time on the page and were less focused on the details.
The only thing we can say is that the red CTA button is more appropriate to the “impulsive buyer” than the blue one. Thus, color alone can’t explain the variance in the visitors’ behavior. The attractiveness of a certain color is determined by its context and not by a visitor’s preference to specific color.
The cognitive process behind the sense of color appropriateness.
Anthony G. Greenwald and his colleagues observed that people make connections much more quickly between pairs of ideas that are already related in their minds than between pairs of ideas that are unfamiliar. An example for such cognitive association is the strong link that we have between “man” and “soccer” or “women” and “makeup.”
It means that when we view the word “soccer,” we will react faster when presented with the word “man” compared to the word “women.” We are primed to connect “man” and “soccer” and “women” and “makeup” due to their strong connections in our minds. The extent to which these ideas are related differs for people according to their cultural heritage.
The same goes for colors. Our reactions towards colors stems from the conditioned links between a certain color and what this color represents. Thus, if pink is automatically linked to pretty little girls, this well-established connection can be used to communicate a message to the customer. For example, if a new website for girls clothing will use pink for the new brand, it actually takes advantage of everything that this color stands for.
When such a connection exists, it leads to a more positive attitude toward the product. Therefore, congruent color-product combinations will be processed more fluently and thus will be liked more, and rated as more appropriate than incongruent combinations.
That is why certain products are perceived more appropriate when displayed in certain colors, for example, breakfast foods and soap (functional products) were best received in green and yellow, the color combination most strongly associated with economical and cleanliness (functional benefits). Similarly, dignity and luxury (sensory-social benefits) were most strongly associated with silver and black.
There is no set of rules that can guide you through the process of choosing the right color for your websites. The color should be connected to the specific massage you want to convey. The usage of a specific color should take advantage of our past experiences and rely on our existing associations and most importantly, be congruent with the product.