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.
How can one optimize website colors?
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:
I have experimented with different colors in order improve site performance toward these goals.
Once I had a good understanding of my goals, I had to figure out which criteria affected LeerWiki’s ability to reach those goals.
Many things may motivate a person to register on a website. On LeerWiki, motivations include money, curiosity, community, desire for attention, etc.
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:
Why do people write? Why do people write more? Some reasons are:
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.
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:
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.
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%.
the color of the links towards the registration pageis 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.
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.
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.
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.
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.
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.
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…)
People like darker backgrounds when it is late and white backgrounds when it is day.