Relationship between color perception and website page access behavior

Source: Internet
Author: User

Compared with our animal neighbors, our vision has both strengths and weaknesses in color perception, A considerable number of features have profoundly influenced our perception process and behavior patterns during the long evolution process. Today, these evolutionary capabilities are closely linked to our webpage access behavior. To effectively use visual la s to achieve the expected design goals, you must understand the visual characteristics that our ancestors left us.

 

 

 

How do we identify colors?

To truly understand our color perception features, we need to first understand how human visual systems process color information in the environment.

High School Biology tells us that we use photosensitive cells in the retina, cone cells, and rod cells to learn about light stimulation in the external environment. After learning carefully, the shoes may remember how these two types of cells are divided: the rod cells can only identify the intensity of light, but cannot identify the color information, the cone Cell collects the color information. These are all true, but the features that have been produced during the evolution for thousands of years have always been inadequate in the face of social changes in the last 200 s.

First, the rod cells almost completely lose the space to play a role. Pole cells work effectively only at extremely low brightness, such as every dark night without lighting equipment that our ancestors had lived before the 19th century. But now, let's look back at how long you 've been in the dark environment for the last time. In the bright daytime and artificial lighting environments, in fact, we spent most of our time in these lighting conditions, and the pole cells were completely exposed like the owl eyes during the day, almost no real useful information is provided. In this case, our visual information is almost entirely based on the information provided by the cone cells.

In this case, how does the cone cell work? We know that human cone cells are divided into three types. Many animals have more kinds of cone cells. For example, birds often have four cone cells, which correspond to three basic colors, the sensitivity scope of each type of cone cell is not only determined by its main color, but also a model that is too simple for teaching and publicity, the three types of cone cells can basically respond to the entire visible spectrum. The difference is that the number and sensitivity of the Middle and Low Frequency cone cells are higher.

Since our three types of cone cells can respond to the entire spectrum, how does the brain handle a mixture of data? The answer is subtraction. The brain merges the data returned by the three-frequency cone cell and attaches an overall brightness signal from the middle and low frequencies to obtain the image that enters our mind in the final sense.

These complex processes are made by our ancestors to adapt to the needs of the environment. The first thing we can understand is:

Human Vision is optimized for edge contrast, not brightness

The subtraction of colors makes us endThe relative difference between the color and brightness of the visual system, that is, the contrast of bright edges, the sensitivity is much higher than the absolute difference in the brightness.

To verify this, take a closer look at the two green sections.

The two green circles are exactly the same. In fact, the green circles on the right are copied from the left, and their brightness is of course the same, however, their different backgrounds lead us to think that the right side is brighter for contrast-sensitive visual systems.

Contrast-sensitive, not brightness-sensitive. In fact, we are gradually developing an advantage in the evolution process. This makes the ancestor who just walked down from the tree, whether at noon in the safe sunshine or in the evening of the overcast rain, it is easier to identify cheetahs or other dangerous animals in the background. For our behavior today, we can also have a great advantage in color contrast, not absolute brightness sensitivity. At least we can agree that whether in the sun or in the shadow, the same Rose is always the same red.

There is a more direct and better example of our vision being insensitive to absolute brightness from edward h adelson, for example:

What is incredible is that the colors a and B in the figure are the same, because B is in the shadow, our vision tells us that this is a white part that is much brighter than Area.

Since our vision is so unreliable, what is our vision's ability to distinguish different colors?

The ability to differentiate colors depends on how colors are presented.

In addition to the inherent defects in the recognition of brightness, our vision also has great limitations in recognizing different colors. Based on the way in which we analyzed the human visual system, it is not difficult to find that our vision is closely related to the following three external factors in color recognition.

Color Depth: In general, the two colors tend to be unsaturated, that is, the lighter the color, the more difficult it is to distinguish it.

The color blocks in the light and dark colors are equally different, but we can see at a glance that a dark color group is two colors, but a light color group requires much effort to compare, in order to barely distinguish between two colors.

 

The size of the colored area: it is difficult to distinguish small colored areas even if there is a certain color difference.

Although the left side and the right side are completely consistent, it is difficult to separate the first two small-sized parts. Even the third side of the Color Block has only blurred and inconsistent senses, rather than decisive judgment.

 

Distance between different color blocks: our ability to recognize different colors is inversely proportional to the distance between different color blocks, especially when the distance reaches our need to rotate or move the eye.

When the yellow of the two payment options is very close, we can effectively distinguish the differences between the two colors by means of comparison, but when the distance between the two is increased to an order of magnitude, after such convenience disappears, our judgment becomes very difficult.

 

After learning about the features of human visual recognition, how can we better balance the page color layout?

Five basic principles of using colors

In most interaction pages that rely on colors to transmit information, we 'd better follow these basic rules to ensure that our users can obtain information as effectively as we expected.

1. Make sure that the color has a sufficient contrast. Do not use a slightly different color to represent different concepts or information. In color terms, the saturation, brightness, and color phases are used to distinguish colors.A simple way to determine whether the color has adequate contrast and contrast is to convert the color image into a grayscale image.If we cannot identify different colors in grayscale images, we need to reconsider the differences between these colors.

2. Use basic colors. When dealing with basic color subtraction, the brain mainly has three groups: red-green, yellow-blue, and black-and-white. The stimulus signals produced by the three colors are the strongest. We can simply use one of them to express our concept, without being unable or difficult to identify.

3. Avoid colors that are often unrecognized by visitors who are blind or weak. The most common color blindness is the red-green color blindness, but it does not mean that they only have difficulties in red-green, but express their difficulties in red-green subtraction, as a result, the colors that visitors cannot distinguish are very diverse, such as blue and purple, green and khaki.

The following is a homepage for a normal visitor.

The following is the homepage of the website that the red-colored blind visitor sees. In addition to navigation, the comparison has not decreased significantly ~ Yes

The following figure shows the homepage of the website, which is displayed in green mode. What is the difference between the homepage and that of the website in red mode? Very small difference

This is the third type of color blindness, which is also known as weak color. Visitors can see the homepage of this website:

4. retain at least one information transfer method out of color. In general, there are too many uncontrollable factors in color, especially in different cultural backgrounds. If you decide to use color to represent a certain concept, we recommend that you use another method for security.

In addition to colors, oneNote uses different opening and closing and globe States to indicate the current editing project and synchronization status. The color of the notebook only plays a secondary role in distinguishing.

 

5. Avoid using strong contrast colors at the same time: this is an old saying that we need to avoid using conflicting colors in any way, which will generate a strong flickering sensation unacceptable to viewers, it must be avoided.

This article provided by http://www.jnsino.com, reprint please note!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.