Current Issue
Color on Web Design - 1 March 2005
by Xiaowei Yuan and Xiaoqin Wang
Read this article in Chinese (translated by Sean Liu)
Published with Beijing ISAR User Interface Design Co. ’s permission
Abstract
Psychologically speaking, different color has different meaning. From this point, this article focuses on the relationship between the background color and content of the web interface. Once the relationship found, it can help to a) Choose suitable color for different contents on web; b) Easily find the position when you are surfing the Internet.
Key words: color, interface, web design
1. INTRODUCTION
1.1 Research Origin
“Color is one of the most important cultural factors that can facilitate the interface design”, Chen (1999) stated. Luscher and Scott (1969) cited nearly 150 articles supporting the color/personality relationship as reflected through the Luscher Color Test. It is sure that different people have different color preference. However, the preference alternates with specific objects (Cooper B. Holmes and Jo Ann Buchanan, 1984). During our work in web designing, we notice that there should be certain color preferences for various contents on the web.
1.2 Research Aim
Nowadays we are living in a net world. With the development of Internet and intranet, we have more and more colorful contents included in web interface. For example, Sun Microsystems has about 20,000 pages on its external website and about 2 million pages on its intranet. The large quantity of information really provides plenty of materials to users. However, it also brings users trouble to find out what they need. Badly designed web interfaces make the users even more puzzled. Therefore, we need to apply suitable background color as a guide to various contents on web besides of defining catalogue titles and designing web structure.
We found a phenomena in our past researches: users troubled to find out where they were among the complicated web structure while it was important for them to decide whether to go ahead or to go back.
With this research we aim to find out the right background color and the matching writing color for various catalogue in web design. This can provide rules to web design.
2. STUDY METHOD
We research by testing. Our subjects include 17 girls and 16 boys between 20 to 35 years old. Some of them are students in different grades from different schools while some already have their jobs. We believe that young people at these ages are main visitors of Internet.
The detail of research procedure is as flowing. Firstly, we visited the web page of 30 famous enterprises in China. We found out 8 mostly used catalogues. They are given in order as below:
- Homepage
- About us
- Company news
- Product introduction
- Service/Technical support
- Finance (stock, financing, purchasing or purchase through internet)
- Human resource (recruitment or training)
- Web community (partners, member center or enterprise culture)
Secondly, we asked the participants to match the above catalogues with different colors. They could use drawing tool of Microsoft Word to fill whatever they think it fit best. Then we collected all the questionnaires for analyzing.
3. RESULT AND ANALYSIS
According to Chromatics, we have three primitive colors: red, green and blue. And when they are mix one by one, we get another three: yellow, blue green and purple. They appear in chromatogram alternatively: red, yellow, green, blue green, blue and purple. Besides, black is the mixture of red, green and blue. If we classify them based on the warmth degree, we will have eight sorts: the warmest color is orange, red and yellow are warm color, red purple and yellow green are a little warm, blue green and green purple are a little cold, blue is coldest, white can reflect light strongly but feel cold, while black can absorb light a lot but feel warm ( Munseu, 1915).
We get participants choose background color as Table 1 shows:
Table 1. Numbers stand for quantities of participants who prefer that above color when thinking of the left-hand content in web.
Now, let us analyze each of them.
3.1 Homepage
When we talk about homepage of one company’s web, we get chart as the following:
Figure 1. Color and Homepage
As the chart shows, most participants tent to choose blue as the background color for homepage of a company. The percentage is 50% in this test. Blue is a color that stands for purity and magnanimity in their eyes. Using it for homepage can let visitors feel comfortable then trust the company easily. An introductory blue is a good beginning.
On the base of blue, white script is most noticeable. Yellow is less.
3.2 About Us
Now, let us have a look at About us:
Figure 2. Color and About us
From the chart we find that half of the participants prefer red, orange and purple when mentioned of the content introducing a company. While another 25% of them like green.
Red, orange and purple are all belonging to the same color serial. All of them are warm colors. Red and orange are enthusiastic. Having this kind of color as its web page’s background, a company looks forceful and dynamic. The color of white is most obvious with the background of red or orange. The color of yellow is the second.
Most people who chose purple as the background think it stands for nobleness and dignity. It lets visitors have respect to the company.
Green means life or hope. It is always related to youth or growth. So people took it with the same reason as they chose red and orange—companies full of vitality. White and yellow scripts are also the most obvious on green background.
3.3 Company News
When we come to the catalogue Company news, which provides information of a company to visitors, we found that more than one half of the participants preferred the color blue. Why? Blue is peaceful, tranquil and sane. With it companies can let visitors feel their information believable.
Figure 3. Color and Company news
3.4 Products
From the following chart we can see that more than 20 people—about 66% of the total—chose blue and the near colors. All of them are cold. People who did it believed this kind of color seems stately and secure so gives confidence to the company’s products.
Figure 4. Color and Products
3.5 Service/Technical Support
For the catalogue Service/ Technical support, our users have the same partiality as for Products. That is colors near blue. The reason is that companies need their customers to trust not only their products but also their service. Anyway, service is more and more important for a company to sell itself.
Figure 5. Color and Service/Technical Support
3.6 Finance
The sixth catalogue is usually about the company’s finance, purchasing, investment or purchase through Internet. For their background, users tend to have warm color: red or yellow. Traditionally, red stands for luck and yellow for fortune. Nowadays, red is often used to warn investors of danger in stock market. So red here is easy to catch investors’ eyes. By the way, 33% of participants chose blue for they thought it more necessary to seem dependable in this content. We should not miss the result that another 14% chose black to show firmness and stability.
So we get two kinds of totally different color here: warm color for special vision and cold one for abstract meaning.
Figure 6. Color and Finance
3.7 Human Resource
As for the catalogue Human resource/Personnel/Training, we get the number dispersed widely. Some users chose red, some chose green, yellow or offwhite. However, each of them has their own reason and each sounds reasonable:
- Red: attractive, welcome mew employees;
- Blue: developing, (it lets people think of sea or sky);
- Green: active, dynamic;
- Yellow: full of hope, having a splendid future.
However, none of these colors is very cold. They are all colors full of hope.
If we choose yellow as the background, we’d better match it with black or red writings.
Figure 7. Color and Human Resource
3.8 Web Community
Web Community or Club Member is the catalogue where companies communicate with their customers. In which users can give suggestions or opinions, get information about activities of the company, or join clubs organized by the companies. We noted that 19% of the participants chose red, 29% chose blue, 33% green and 19% yellow for this catalogue. So people who preferred green is the majority. Green is in the middle of spectrum. It is a color good for eyes because it is bland, not thrilling. With the use of it customers can feel warm and relaxed to join into the communities.
Figure 8. Color and Web community
4 CONCLUSION
Generally speaking, our participants tend to have the background color of webs as red, blue and green, which we call three primitive colors. They are the purest colors within the spectrum. It is to say that our participants prefer pure or sterling web pages.
People prefer some kind of color when they visit some catalogue of companies’ web. There should be certain relationship between catalogues on web and their color. We find that from the test as following:
- About us: Red, Orange, Green
- Company news: Blue
- Products introduction: Blue Green
- Service/Technical support: Blue Green
- Finance (stock, financing, purchasing or purchase through internet): Red, Blue
- Human resource (recruitment or training): Blue, Green, Yellow, off-white
- Homepage: Blue
- Web community (partners, member center or enterprise culture): Green, Blue
After the research we find it important to choose suitable color for certain catalogue in web design. It can not only help users to find out which catalogue they are in but let them feel very comfortable surfing the net. Gratifying web design let users have respect on the companies. And that is the most important thing.
REFERENCES
Adels, J. An assessment of Luscher’s Eight Color Test as a screening instrument for emotional disturbance in school children. Dissertation Abstracts International. 39, 967B-968B. 1978.
Birren, F. Color in Your World. New York: Collier. 1978
Chen, C. H.Using color to facilitate the internationalization and localization of user interfaces pp.47-45. Backhouse
Press. New York.1999.
Choong, Y. Y.. Design of computer interfaces for the Chinese population. Doctoral dissertation. Purdue University.
USA. 1996.
Luscher, M., Scott, I. The Luscher Color Test. New York: Random House. 1969.
Murch, G. M. The effective use of color: Cognitive principles’. Tekniques. 8(2).25-31. 1984b
Murch, G. M. The effective use of color: Perceptual principles’. Tekniques. 8(1).4-9. 1984a.
Murch, G. M. The effective use of color: Physiological principles. Tekniques. 7(4). 13-16. 1983.
Sharpe, D. The Psychology of Color and Design. Chicago: Nelson-Hall. 1974.
Tullis, T. S. An evaluation of alphanumeric, graphic, and color information displays. Human Factors. 23(5). 541-550.
1981.
Comments made
Possible Related Articles:
Karin Gerardin
Karin Gerardin