Optimizing by Color: How Color Can Affect Site Activity and Performance

As a beginning web developer you usually think that you know enough to do a great job building a website. As time goes by, you begin taking on larger projects, and then you begin to understand that the road to knowing it all is very long.

You start with HTML. Then you try PHP and think you can already do anything--until you notice the great world of JavaScript! And yet, that is just the beginning. You keep exploring new roads until you notice that your site is too unwieldy, you have too much traffic, you need to optimize code, you need to optimize database queries, etc. Finally you end up with your own dedicated servers, and you’re learning Linux. And then again you may think you know it all.

But do you? Have you thought about optimizing the colors on your site?

At LeerWiki.nl, I have tested how different color schemes affect visitor behavior with regards to site goals, in order to optimize my use of color. This article outlines my research process and results.

Problem:

How can one optimize website colors?

Questions to ask

1. Which website goals are important ?
2. Which criteria are important for these goals?
3. How can colors easily be changed?
4. How can the effectiveness of colors be measured?

1. Web site goals

Take a moment to consider the goals of your web site. Your current goals may not be the reason why the site was setup in the beginning. During the lifetime of a website its reason for existence evolves. The purpose and goals of the site change and grow, as do the roles and interests of its stake holders.

I started LeerWiki.nl, a Dutch learning community site, 2 years ago. It is now reaching a medium size (1 million page views a month). The site is about learning and earning: people write and the get a portion of the ads-income. Currently LeerWiki’s most important goals are:

1. Increasing new-user registrations
2. Increasing clicks on ads
3. Increasing the activity of writers

I have experimented with different colors in order improve site performance toward these goals.

2) Important criteria

Once I had a good understanding of my goals, I had to figure out which criteria affected LeerWiki’s ability to reach those goals.

A. Increasing site registration

Many things may motivate a person to register on a website. On LeerWiki, motivations include money, curiosity, community, desire for attention, etc.

B. Increasing the clicks on ads

Why do people click on ads? Lots of less-than-reliable studies are available on the internet. The basic idea, however, is usually the same, characterized by the following criteria:

• professional trustable image of the website
• consistency of ad design in the website
• perceived value for the customer

C. Increasing the activity of writers

Why do people write? Why do people write more? Some reasons are:

• desire for attention
• community appreciation
• ability to focus on writing (lack of distraction)

3) How can colors easily be changed?

A well-built website consists of many different HTML objects. Within this research the colors of the following objects are assessed: div, h1, h2, a. Colors in a website can be easily changed by applying CSS and PHP. By setting up different color schemes in CSS and calling these schemes with PHP, site effectiveness can be assessed.

4) How can the effectiveness of changes be measured

Although many of you use Google Analytics to measure conversion (I usually did also), but I am only just using a software package of Logaholic.com. I have found its performance astonishingly good. Logaholic is PHP software that handles large websites, provides lots of conversion measurement tools, is very intuitive, and is much faster than Analytics. Besides, you can use the MySQL database to develop your own custom queries, something I am quite fond of.

To get a better understanding of external clicks I developed my own JavaScript click-tracking scripts.

At LeerWiki we tested the effect of color on site effectiveness by the following procedure:

• Setting up different color schemes in CSS
• Changing the color scheme with PHP (6 different schemes are assessed)
• Keeping the color scheme active for one week
• Measuring results with self-hosted analytics software
• Measuring results with custom-made ad click-tracking scripts

Limitations of the study

In this study, only 6 color schemes are assessed on a period of only one week, on a medium-sized website with 1.000.000 page-views a month. However, the results show some very interesting tendencies in user-response to colors.

Results

The results of our tests are shown beneath by showing the differences in a relative format. When it is said that the effectiveness range is 50% it means that the difference in effectiveness between the worst result and the best result is 50%.

A: Increasing the number of registrants

The effectiveness range of the color of the links towards the registration page is 54%

The more a link attracts attention with vivid color, the more people use the link. This means that it is better to change important links to a color that sticks out of the page. Vague colors that match too much with the surrounding are least likely to be clicked.

The effectiveness range of div and header background colors at the registration page is 7% in changes of vividness

When colors of the registration page are boring, people tend to register less. When more vivid and shiny colors are used people tend to register more. This seems to be related to curiosity.

The effectiveness range of div and header background colors at the registration page is 12% in changes of consistency

Consistency characterizes structure and connotes professionalism. When colors are used that give the website a more professional image, people tend to register more. People seem to like and trust a more consistent, professional website.

B: Increasing ad-clicks

The effectiveness range of the colors of the links in ads is 43%

This is one of the most striking results of the research. Visitors seem to hate colors that are vivid and attract attention too much (wrong intentions / impairing trust) on the ads. It looks like you are punished for disturbing the visitor. The more the color of the link is similar to that of the background color, the better the click-through-rate. My simple theory is that people (without knowing) want to click through the site, towards the background.

The effectiveness range of div and header backgrounds on an ad page is 21% for changes in consistency (vividness was not analyzed)

When the color scheme of the website is more consistent and therefore more professional-looking , people tend to click more on the ads. Visitors could trust ads more that are displayed on a professional looking website because these adds are (more) properly selected.

C: Increasing the activity of writers

The effectiveness range of changing the background colors of the user-area is 129%

My users did not really like very dark colors. They said to me that it is depressing (although I thought the site looked professional). Depressed users do not write that many articles.

The effectiveness range of giving the users the choice of installing their own background is 235%

People like to decorate and make their own place. A home on a website does not differ with their home in real life. When they feel more at home, they tend to be more relaxed and tend to write more. Girls liked pink colors more (how straightforward…)

The effectiveness range of changing the brightness of colors appending on the time of day is 43%

People like darker backgrounds when it is late and white backgrounds when it is day.

Interesting miscellaneous results

• When the background was pink, the increase of the feminine usernames was significant
• The effectiveness of colors change with the time of day.
• Visitors stay longer at a the website when a consistent design is applied

Conclusion:

Improving your use of color may open the door toward improving of the effectiveness of your site or portal. Our research shows that simple color-changes can improve click-through rates, registration numbers, and community activity. Watch out though: while vivid colors may benefit you in attracting new users, they can hinder ad click-through rates. Do not be afraid to experiment and change as you optimize your website colors. Experimentation and change can move you forward!