Website Optimization: 5 mistakes marketers and designers make with color

Webpage designers often overlook the element of color and the role it plays in a site’s performance. In fairness, it’s often not completely their fault.

“Most of us don’t know how to use the elements on the page to control the eyes so that the eyes go across a set of visual cues that are synchronized with the ideal sequence of thoughts.” – Flint McGlaughlin, Managing Director, MECLABS

Smaller business owners may not have the experience to design and test on their site or a large budget to hire experts. Even many larger organizations find themselves in a company-logic entrapment in which their Web design’s color scheme is dictated by executive decisions with no regard for the analytics screaming otherwise.

Today’s MarketingExperiments blog post will share the five common mistakes designers make with color, from one of our recent Web clinics, which you might find helpful depending on your design situation.

Marketers should not try to optimize Web designs; they should optimize thought sequences. Yet often, our webpage design is NOT created with intention of guiding the visitor through a clear sequence of thought.

Primarily, five design elements enable a marketer to guide visitors through a conversion process.

“Each of these elements draws its power from the principle of relevance,” Flint said.

In other words, the strength of each of these elements — color, for example — is relative to the influence that the other elements have on it. The five design elements include:

Of the five elements, color is likely the most overlooked and misused.

Now we’re ready for a look at common mistakes designer make with color …

Also, to help you get the information you need faster, the links below will start the Web clinic replay at the beginning of each mistake segment.

Mistake #1: Wrong Emphasis – Colors can be used to guide thinking by placing stronger emphasis on particular elements and less on others.

Click to enlarge

If you need to learn more on testing color emphasis, this section of the Web clinic will show you how one organization increased its clickthrough rate 81% by strengthening the communication of its value proposition using color, copy and layout changes.

Mistake #2: Wrong Amount – The amount of color being used can be too much, resulting in the primary objective of your page getting lost in a sea of colors.

Click to enlarge

To help you overcome the wrong amount of color; this section of the Web clinic features an experiment that shows how a debt consolidation service increased its clickthrough rate 63% by changing the amount of color used to emphasize the call-to-action.

The experiment featured in this section of the clinic reveals how an art community offering subscriptions to content was able to increase its clickthrough rate nearly 20% by adjusting the contrast dial on its homepage.

Mistake #4: Wrong Message – When customers associate familiar brand colors with an implied value proposition, the performance of your page can be affected if you’re not testing to determine which colors are associated with your brand in the minds of your customers.

Click to enlarge

“Tests are designed to fill in the gap between what you know about the customer and what you SHOULD know about the customer,” Flint said.

Mistake # 5: Wrong Flow – Although you may have tested your way into the right color combination, placing the elements on the page in the wrong sequence puts the same problem of underperformance into a new package.

Click to enlarge

In the last section of the Web clinic, you can learn how a financial organization was able to increase conversion 51% by changing the color flow of page elements.

Excellent article. However, I question the graphical change in number 5 where the people were removed from the image. Did you test this separately from the CTA? Several studies I’ve seen show having a person in the image will actually increase your click-through. I would be interested to learn more about this particular study. Thanks!

Great question. I followed up with some of the research team members that worked on the test and they did not test the specific effect of the people in the banner. The team explained that when they initially assessed the image in test planning, it was determined that the image did not add value to the offer, instead it distracted from the credit card offer which was the main value exchange of the ad so they did not carry it over into the treatment design.

The team’s primary hypothesis was that the presence of fences created confusion and friction that was unnecessary. Ultimately, the result of the treatment was a clickthrough rate increase of 131%.

The senior research manager who worked on the project also offered these thoughts on the additional research you mentioned. “We are constantly reminded that “best practices” for online efforts do not always result in increased effectiveness, and this is why we always test before adopting a new strategy.” I hope this answers your question.

Great information and examples. I learn so much from the webinars and posts you offer. I do have a questions about #3. In a couple of Marketing Experiments’ webinars it’s been mentioned no to use dark back ground and light text. I realize the treatment is much better than the control in the example, but was there a reason not to lighten it up for the treatment?