MONOSUS
ICECREAMING MAG

"Web design tips" based on the impact of color

Hello. This is Takita from the design department.

When you work on a web design from scratch, how much effort and time do you devote to selecting colors?

In my case, when I'm designing, my thoughts about "color" tend to be quite simple.
We start by thinking about the "main color." For example, in the case of a corporate (BtoB) website, the corporate color is often decided in advance and this will also be the main color.
Next, select the appropriate "accent color." However, this is not a difficult task. The general flow is to focus on the complementary color of the main color and adjust the brightness and saturation.
And for the base color of the background, I usually choose "#ffffff (white)" without thinking about it.

I fully understand that the choice of color greatly affects the overall tone of a site and the impression given by the page, but in reality, I often feel that people just follow existing rules and start working on things like link colors and button colors without giving them much thought.

In addition to these existing rules, I think there is a theory-like "common understanding" of "color" itself. I think we all share to some extent our "image of color" with others in our daily lives.
Except for special cases, we perceive red, orange, and yellow as warm colors, and blue and purple as cool colors.
From there, for example...

"Red"...passionate, energetic, active, vivid, hot

Or,

"Blue": Clean, sincere, cool, cold

I'm sure there are many of you who can relate to some of these images.

This "common understanding" is heavily influenced by what we see in our daily lives, and it feels like an "image acquired from cultural and social factors."
On the other hand, what kind of "psychological and physiological images" do we humans, as living beings, perceive from color?

With this question in mind, I decided to read a book.
I picked up a book by French color designer Jean-Gabriel Causse, "The Power of Color: How Color Changes People's Lives, from Consumer Behavior to Sexual Desire."


Jean-Gabriel Causse (author), Yoshiko Yoshida (translator), "The Power of Color: How Color Moves People, from Consumer Behavior to Sexual Desire," CCC Media House (May 27, 2016) ( Amazon )

This book uses various research and experiments to explain how color affects humans psychologically and physiologically. Some of the experiments were conducted on infants and non-human animals, and some were conducted across countries, so you can learn a wide range of data.
There was a lot of interesting information, from easily understood color characteristics to surprising test results, so I would like to introduce some of it using a few color examples.

1. Red

According to this book, seeing the color red makes people timid and can increase tension to the maximum.

Even a brief glimpse of the color red awakens the human brain stem, altering our abilities and behavior. When the brain stem takes over, we are no longer governed by logic-based intelligence, but by a more primitive intelligence that is driven by survival instincts.
Jean-Gabriel Causse, "The Power of Color: How Color Moves People, from Consumer Behavior to Sexual Desire," CCC Media House, 2016, Chapter 2, "The Influence of Color," p. 63

In other words, when humans see this color, they tend to feel "fear" and become "warranty."
The article states that similar data was observed in experiments involving infants and young children, which makes it seem likely that color characteristics are universal.

Looking at this effect from another angle, wearing red yourself can give the impression that you are in a superior position to others.

The book also introduces how humans are not the only animals that are influenced by color dominance. Of course, this is limited to animals that can detect the color red, but in an experiment using "finch birds," a bird with a genetic trait of having red and black feathers on its head, when black-headed finch birds saw red-headed finch birds, they became extremely frightened and did not try to fight in front of food. The results were the same even if the head color was changed, and it seems that having a red head does not increase aggressiveness.
Based on the results of this experiment, we conclude as follows.

Red is believed to inspire confidence in those who wear it and fear in those who wear it.
Jean-Gabriel Causse, "The Power of Color: How Color Moves People, from Consumer Behavior to Sexual Desire," CCC Media House, 2016, Chapter 2, "The Influence of Color," p. 70

Learning about the influence of the color red made me realize that it all matched up with some of the theories I had used up until now.
I think we have seen many cases where the submit button on a form is designed in red. When we see "red" in a place where we enter important data, including personal information, it may have the effect of making us feel a "sense of crisis" and "carefully" review the information we have entered, which may lead to the effect of proceeding with the submission.

In one of the experiments in the book, when the background of the PC used for work was set to red and blue, the red one was found to be more attentive to details and more accurately described the information shown on the PC afterwards. In other words, it seems that the "red effect" can be obtained even through a screen.

On the other hand, for buttons like "Like" that you want people to press casually, or in some cases "Add to Cart" or "Proceed to Order", it may be better to use a different color that doesn't create a sense of stress.

2. Blue

Earlier, "red" and "blue" were given as examples of colors on PC screens, but what characteristics are observed in "blue"?

The book states that it has the potential to greatly enhance creativity, making it the preferred color for generating ideas.

Having a blue screen background can help you do repetitive tasks more efficiently, but even more than that, it can also boost your creativity.
Jean-Gabriel Causse, "The Power of Color: How Color Moves People, from Consumer Behavior to Sexual Desire," CCC Media House, 2016, Chapter 2, "The Influence of Color," p. 74

There seem to be many experimental examples that prove the above. For example, in a study in which a brainstorming session was conducted using a PC with a red and blue background, users with a blue screen tended to come up with more creative ideas, while users with a red screen tended to come up with more practical and solid ideas.

Blue is often used as the main color on B2B corporate websites, and I personally associate it with images of calm, solidity, and refinement, so I was a little surprised to learn that it is also a color that inspires creativity.
Recently, it seems that the number of brainstorming-style participatory events is increasing. If you are involved in the production of such an event, it may be effective to actively use blue. In addition to websites and presentation materials, you can also look for venues with blue wallpaper, and if you are a participant, you can even get an effect by simply changing the background color of your laptop to blue!

There was also another interesting story about the color blue in this book.
This is a test conducted by Google on "text link color." In 2012, the experiment used more than 50 different shades of blue in search engines around the world. As many of you may already know, the results were announced at an official press conference, but the color code "#1122CC" was identified as the color with the highest click-through rate. Microsoft's search engine, Bing, also conducted a similar experiment and used the link color "#0044CC," which was successful in increasing revenue.

It's surprising that this experiment, which we may have been subjects of without even realizing it, demonstrated how influenced we are by color, to the extent that even slight differences in brightness and saturation, even within the same color "blue," can have a significant impact on click-through rates and ultimately revenue.

3. Green

After "red" and "blue," the color that comes to mind for those involved in web production is probably "green."
When we think of "green," the first thing that comes to mind is the "relaxing effect" that we associate with the natural color green. Of course, this effect is strong, and like "blue," it is said to have the property of enhancing creativity, but in this book, it is introduced as a "convincing color" based on the following experimental results.

The article describes an experiment conducted in nine countries, and the results of a study on the extent to which changing the color of the answer sheet in a survey about "neutral opinions" affects the content of the responses (a survey about "neutral opinions" is one about "things that are of no interest to the respondents").
The answer sheets were available in four colours - blue, black, green and red - and participants were asked to mark them as either "agree", "disagree" or "neutral".

As a result, the number of "neutral" responses was high in blue, black, and green, while red was the color with the most radical and extreme opinions, regardless of whether they were for or against. The influence of the color "green" is summarized as follows:

What's most surprising about these results is that over half (53 percent) of the respondents using the green paper agreed with the statements presented, compared to just 36 percent of those using the black paper. Green is a very persuasive color.
Jean-Gabriel Causse, "The Power of Color: How Color Moves People, from Consumer Behavior to Sexual Desire," CCC Media House, 2016, Chapter 2, "The Influence of Color," p. 83

Even though it's a question I have no interest in, color has such a big impact when asked for my opinion.
Simple questionnaires and public opinion polls can be found in many places, but I think there are often times when more supportive opinions are needed.
In such a case, the results might be different if you try using "green" for fonts, button/icon colors, or partial background colors, within the scope of the overall tone and manner. (If the respondents are not interested at all and their opinions are divided based on mood, it may seem a bit sneaky, but it may also be possible.)

Bonus Pink

Finally, I would like to touch on one surprising property of the color pink, which made me wonder "did I know it had such an effect?"
The book gives the following examples of "colors that have been proven to have a relaxing effect."

Experiments with the color pink have taken place in some surprising places.
In prisons in the US and Switzerland, they painted the walls of their cells pink. What conclusions did they come to?

Prisoners placed in the pink cells reportedly became less aggressive within 15 minutes and completed assigned tasks with ease, and the effects persisted for at least 30 minutes after they left the cell.
Jean-Gabriel Causse, "The Power of Color: How Color Moves People, from Consumer Behavior to Sexual Desire," CCC Media House, 2016, Chapter 2, "The Influence of Color," p. 72

Other institutions that take advantage of this characteristic include schools for children with ADHD.

When you see a girl on TV showing off her all-pink room, you might think, "There's no way anyone could relax in a room like that," but that may not actually be the case.
It's possible that they get a very relaxing effect from that room, so spending time there together could be a supremely relaxing time waiting for you.

summary

Through various surveys and experiments, we have been surprised by the many unexpected and significant effects that color has on humans both psychologically and physiologically.
Since many of the effects were far removed from the color images mentioned at the beginning, we were able to see how the "shared understanding" is influenced by "cultural and social" factors.
If I were to apply this to web production, I would like to pay attention to the following points.

1. Theory is important after all

When I started reading this book, I was fascinated by the "psychological and physiological" effects that we are unconsciously influenced by. However, the more I learned about the magnitude of those effects, the more I realized the importance and influence of "cultural and social" "shared understandings."

One of the important elements to keep in mind when creating a website is to create something that is easy to understand.
We pay careful attention to various aspects, such as creating a navigation system that allows viewers to use the site without getting lost, and designing the screen so that users can find at a glance where they can achieve their goals.
When I thought about my work from this perspective, I came back to the realization that I cannot ignore the importance of using colors in a so-called "theory-based" way that is based on a generally accepted "common understanding."

2. It depends on the time and situation

As mentioned in the book, one of the important points to consider when choosing colors is that the impact of a color depends greatly on the time and occasion in which it is used.

There was an interesting case study on this subject, which I would like to share with you.

The small car "Twingo" released by Renault in 1993 was thoroughly "for young people", and it adopted a revolutionary design and exciting colors, and was not produced in standard colors such as white, gray, or black. However, when it was released, it seems to have been explosively accepted by the "senior demographic" who wanted to look young by driving a flashy colored car.

A few years later, when a black body version was added, the majority of buyers were young people who wanted to attribute adult status to driving a chic-colored car, which was the exact opposite of what Renault had in mind when it first launched the car.
It is further concluded that:

It must be said that the importance of color depends above all on the type of product.
Jean-Gabriel Causse, "The Power of Color: How Color Moves People, from Consumer Behavior to Sexual Desire," CCC Media House, 2016, Chapter 2, "The Influence of Color," p. 143

Even if this isn't an example aimed at the masses, no matter how much you love orange, people who would go out on the town dressed in all orange are still in the minority.
In other words, the "preferable color" for a given situation will change depending on the "time" and "occasion." It is important to carefully consider whether a color is appropriate in light of the "purpose" of the place where it will be used.

3. Keep up with trends

The book also states that the more "social value" a consumption item is, such as cars or fashion, the more important color is often considered.
Trends seem to play a big role in these sales, and of course web content plays a big role as well.
What colors look modern? What are their brightness and saturation? What combinations are they used in? Where are they used?

No matter how much of a psychological or physiological influence a color may have, or even if a color has been established as a cultural or social common understanding, that does not necessarily mean it is the correct answer.
In order to make users want to "experience" your website, I think it is very effective to have a good grasp of color trends and use colors that look modern.

What did you think?
In this article, I have written about the influence of color with the assumption that it will be used in design, but this book also contains a lot of information that I will want to try out right away, such as knowledge about colors that can be used in the workplace and everyday living spaces, and ways of using color that may be effective in interpersonal relationships.
I realized once again that this is an interesting field, so I would like to continue increasing my knowledge and use it to improve my designs.