The ultimate guide to colors and formatting for better conversion

It's a concept that has been instilled in us since the beginning of grade school: reading is a powerful tool for learning.  

In the book Blink: The Power of Thinking without Thinking, Malcolm Gladwell imparts a series of case studies to explore the psychology of the human decision-making process, which is ever so applicable to the practice of engaging users on the web.

My greatest takeaway: Human decision-making has little to do with the amount of knowledge or information available, but rather what we do with a shockingly small amount of data.  

Gladwell states that:

Intuition strikes me as a concept we use to describe emotional reactions, gut feelings - thoughts and impressions that don't seem entirely rational. But I think that what goes on in those first two seconds is perfectly rational. 

Those first two seconds, just enough time to Blink, are the most essential to converting any visitor.

The theory of thin slicing

Through what Gladwell refers to as "Thin Slicing," visitors are able to instantaneously process a minute amount of information and make "snap decisions" that often times are extraordinarily sound.  

This practice is an essential part of what it means to be human. In order process anything in a given day, our minds naturally "thin slice" in an effort to cut out the rest of the clutter and narrow the options in our decision-making process.  

Thin Slicing is present every time we meet a new person, or are asked a simple question; those snap judgments allow us to provide any sort of reaction.  

To help you understand, here's a great example of thin slicing at its finest. A study was done in which various married couples were filmed while having a conversation regarding a point of contention in their relationships.  

The results of the study were astounding. With 95% accuracy, those conducting the study were able to predict whether the relationship would end in divorce with just an hour's worth of tape.  

With only 15 minutes of tape, their success rate was above 90%. Even more amazing, with only three minutes of watching the video, they could predict the outcome of the marriage with 78% accuracy.  

This shows that with only three minutes to evaluate the facial expressions, body language, and tone of voice, the viewers were still able to make highly accurate predictions. 

When translated to the online world, these judgments mean there is a lot of stock in the formats and colors we utilize to engage our customers. A website should persuade and engage simply on these first judgments.  

Hence, persuasive design. 

Designing for conversion:

People make snap judgments. According to some experts it takes only 50 milliseconds to make an impression. At most, you have five seconds. Certainly 10 seconds is a little longer than it takes to blink, but not much.

But how can you grab attention in that short of a time span. Let's consider the three things a visitor can probably take in in that time.

• Visual Complexity. 
• Prototypicality.
• Color – Our first impression.

Visual complexity:

I'll use the same practices in my writing as you should in your website design. Visual Complexity means: the simpler your design, the better.  

Let's experiment, which site would you stay on longer?

 

Prototypicality

This refers to how much a design matches your expectations. When we make snap judgments our decision-making relies on assumptions based on previous experiences or those that have been hardwired by society.  

Consider the following example, which site would you stay at longer? The innovative site or the familiar site?

SITE #1 from Genicap

 

SITE #2 from Vista College

Visitors to both of these websites would likely want to stay longer on the Vista College website. Genicap's design is innovative but slightly confusing. Instead of providing a normal navigation, they used variations of their logo for each of the navigation pages.  

Contrary to Genicap, Vista College has a very protypical website. There's a moving slider, which takes you over each program they offer.  

Each slider has a call-to-action button and they've made it very clear where they want visitors to click.  

Colors and conversion

Color is more or less a subcategory of prototypicality. Naturally, our mind has developed associations for each color. We've learned to expect certain things from brands that utilize these colors within their designs.  

In fact, "90% of a person's assessment of a website is based on color alone."  

Let's look briefly at each color and the snap judgments we make about them.  

Red: It's attention seeking. It represents a mix of power, passion, and excitement, and in terms of conversion, it's best used to attract attention to critical elements as an accent. Other emotions that come with red are love, lust, and anger. 

Orange: A less intense version of red, it's the perfect middle ground. It's vibrant and friendly, and carries a much more neutral, welcoming emotional tone. The inviting warmth of orange is the prime reason it's the most recommended color for call-to-actions.

Yellow: A universal symbol of happiness and energy. The bright radiation of yellow stimulates the mind and carries a lot of associations to joy. We've been hardwired by society to believe yellow is the color of encouragement. 

Green: When we see the color green, we think a lot of different things. The color tone implies calmness, stability, and growth (think of nature), and of course we associate green with money. 

Blue: The color blue is highly subjective based on its hue and amount of usage. Generally it evokes emotions of trustworthiness, security, and dependability, and is used a lot for corporate brands.  Too much blue and you evoke feelings of coldness and depression.

Purple: If your trying to convey the image of a luxury brand, purple is a great color. It's been a long-time representation of royalty and with that comes assumptions of wealth, sophistication, and power.

Whites and Blacks: These colors imply clarity, cleanliness, purity, and perfection. Use them to release readers from any overwhelming blocks of text. Their sophisticated when put together, and can alleviate a lot of harmful emotions your visual complexity can create.

Here's a great example of color choice employed to relate to the businesses functions.  Check out how 12 Palms Recovery Centers utilizes a calming blues and greens within the design.  

For a market aimed at capturing the attention of drug addicts and alcoholics, a design that comforts and puts viewers at ease is perfect for conversion.

Formatting via Visual Hierarchy

How a webpage is formatted can mean a lot to the user.  In general, we take in shapes within our first impression of a site, and our eyes will naturally be draw to certain shapes.  

This is where visual hierarchy comes in.  As a designer, you can increase conversions simply by putting the right emphasis on certain objects.  

Develop the hierarchy for those things that are most important on your website. Make these parts of your design more prominent.

EXERCISE: Look at the below picture. What did you see first?

 

Probably the actual image.  Despite the question being asked first and foremost, I'm sure your eye was drawn to the actual square first. That's a direct example of visual hierarchy.  It can be done with text as well.

Here's another example:

I bet without knowing anything about the context of these words, you still felt that Shiva was the most important. This is yet another fine example of visual hierarchy. 

Finally, putting more effort into the visual hierarchy of your blog posts can do a lot of good. Google even favors pages that utilize different visual formats, from images to videos, to lists. 

In my latest bucket list post I utilized photos, videos, animated gifs, and a variety of other visual variations. The result?  The average visitor stayed for over seven minutes, whereas my small personal blog typically keeps readers for three minutes.  

Conclusion:

You can do a lot to influence behavior and increase conversion simply by evaluating the core design elements of a page.  

Try to focus on Hierarchy, Color, and really think about what visitors expect in a website. By taking care to apply these principles, you can keep visitors coming back and staying longer!