{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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?

Cluttered Page Design

 Clean Page Design

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

 Genicap Example

SITE #2 from Vista College

Vista College Example

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.

12 Palms Recovery Center Example

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?

 Square Hiearchy

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.

Cracking Text Hierarchy

Here's another example:

Type Hierarchy 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!

Shane Jones

Published 20 June, 2013 by Shane Jones

Shane Jones is Senior Outreach Analyst at WebpageFX and a contributor to Econsultancy. You can follow Shane on Twitter and Google Plus

10 more posts from this author

Comments (6)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

AZ

Very good thoughts.

In many cases simple design and white space can distill the website to deliver the most important message to users like Apple.

over 3 years ago

Shane Jones

Shane Jones, Director of Earned Media at WebpageFX

@AZ Thanks for the input. Glad you enjoyed the post! And you're absolutely correct, whitespace is a great tool to utilize in order to emphasize the focal points of your web design. Using it allows viewers to focus in on the pieces of content. And that helps you attract their attention on the areas you want them to convert!

over 3 years ago

Anna Lewis

Anna Lewis, Google Analytics Analyst at Koozai

Great post Shane, very engaging and so many things to get you thinking about design. I'll be adding Blink: The Power of Thinking without Thinking to my reading list. Some of the ideas seem so simple yet when you're reviewing new sites you often find not enough thought has gone in to making it as easy as possible for the user to complete the best journey. Information overload is almost expected.

over 3 years ago

Shane Jones

Shane Jones, Director of Earned Media at WebpageFX

@Anna

So glad you enjoyed the post! Getting you thinking about design is EXACTLY what I was going for! :P - I'd definitely recommend reading Blink, or really, any Malcolm Gladwell books. They are really fun reads, and cover really interesting theories about general life experiences. The real treat with his books though, are that they are SO applicable to business practices and design, and really understanding why people react certain ways. Among other top reads by him, I would check out "The Tipping Point."

Thanks for reading! I connected on Google+ and Twitter! Let's be friends!

over 3 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

Interesting post!

Related to this, we've started using EyeQuant to evaluate saliency on pages we're trying to improve, it's early days but I think it's helping us think about how the user views the page.

An interesting book I read recently which has a section on colour is Nathalie Nahai's "The Web Psychologist", a great general read on applying neuroscience to the web.

about 3 years ago

Shane Jones

Shane Jones, Director of Earned Media at WebpageFX

Hey Stuart! Thanks for the comment and the read! That's pretty awesome stuff! I'd love to hear more about your discoveries, would you share on your own blog? Or I'd love for you to reach out on Google+!

And great suggestion on the book, I'll have to check it out!

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.