Colors, can have a tremendous impact on a consumer’s decision to purchase. With today’s 3 seconds to convince visitors to convert kind of world it’s important to use colors, images and messaging the best way we can. As our brains process images 60,000 times quicker than text, color can have a huge impact on your landing page’s conversion rate. In the following article we will explores the emotional power color has on our brains and decisions, along with tips for how you can incorporate color psychology into your landing page designs.
The Emotional Power of Color
Colors are a way of communicating certain messages and feelings in a matter of seconds. When we use the right colors, they can have an emotional effect on our visitors and direct them in to action. According to Kissmetrics, 85% of shoppers place color as the primary reason for why they buy a product and color increases brand recognition by 80%. People are also said to make subconscious decisions in under 90 seconds, and color is a great way to trigger action.
Segmenting Colors by Gender & Age
In general when we design our landing pages we don’t put a large emphasis on gender unless we’re targeting our product to a specific gender. We use colors to portray specific emotions and make a memorable experience for our client’s users. Depending upon the type of product or service you offer, and the industry in which you operate, gender preferences may play heavily into purchase decisions. It pays to understand which colors persuade a particular gender to stay on a page or make a purchase.
According to research from Sherwin-Williams colors that appeal most to women are blue, purple and green while orange, brown, and gray are least appealing.
Earlier this year we worked on a women’s ecommerce store selling prom dresses in the US. in this test we introduced the color pink to project calm, hopeful and positive feelings towards shopping prom dresses online. The color pink was introduced to more than just the banner or background, the images on the page were given a pink hue and were all directing to a certain type of experience – our goal was to help women (mothers and daughters) experience the delight of shopping online in a world of calm and positive emotions . These changes and others increased revenues by 86%.
According to the same research from Sherwin-Williams, men preferred blue, green, and black, while brown, orange, and purple were the least loved. Again, again and again we see that the emphasis shouldn’t be on the gender or age but on the experience you’re creating for the visitor.
When designing your landing page you should also take into account the age of your audience. You may already have a clear sense of the age of your audience, or if you are using Google Analytics, you can find this information under the Audience tab. Children and younger generations tend to prefer warmer colors that are associated with positivity and high energy. These include red, orange, pink, and yellow. Brown, purple, yellow, and blue are generally associated with sadness and negativity by children.
Colors & Types of Consumers
Color also has a unique ability to attract certain types of consumers and impact shopping behavior.
- Impulse shoppers tend to gravitate toward black, red orange, and royal blue. This is evidenced by the colors found in fast food, outlet malls, and clearance sales.
- Shoppers on a budget tend to be influenced by navy blue and teal. This is evidenced by the typical color schemes found in large department stores and retail banking.
- Traditional buyers are drawn to pink, sky blue, and rose. Clothing stores will use these customers to attract traditional buyers to their shops.
Designing For Emotion
Color is one of the most subtle and effective ways to instill a specific emotion. Colors can make us feel happy or sad, relaxed or hungry. Different research shows that certain colors elicit particular emotions, and by understanding the psychology of color you can establish an emotional connection with consumers.
Yellow is a great color to give a gentle energy to a landing page. It is mainly used to inspire happiness, laughter, hope, and sunshine. However, you should use yellow sparingly as it can also irritate the eyes if it is overused. In the landing page below we used the color yellow and other yellow elements to generate fun and sunshine.
Red can be a great way to draw attention to an element, like a call to action, but use in moderation as the color can become overwhelming. Red can can bring out emotions of passion and love, as well as anger or danger. Red also has a tendency to cause us to feel hungry, which is why you see fast food chains like KFC and McDonalds make heavy use of these colors in their branding.
The use of the color green can be done to emphasis regeneration, clean, health and wealth. Green is commonly found in financial institutions, as it is indicates growth, financial health, and possibility. Earlier this year we introduced the colors green to establish a look and feel of wealth, relaxation, fresh and new. Green is also known as being the easiest color our eyes can process making it easier for us to focus on other elements on the landing page.
This increased conversions by 65% in the first round.
Orange is more inviting than Red, but still grabs attention. Orange is one of the most common colors for creating call to action buttons. Earlier this year we discussed Fanta’s use of the color orange and
Seeing the color blue causes the body to release chemicals that are calming, which causes it to evoke feelings of soothing, calmness, and spirituality. Dark blue is commonly found in corporate designs because it promotes stability and professionalism. Lighter blues give a more relaxing and friendly feel. Take Twitter and Facebook, for example.
This color is associated with creativity, royalty, nostalgia, and wealth. Like blue it can also have a calm and soothing effect, however depending on the shade it can also be used to create intrigue. Purple can be used to make a design appear more luxurious or wealthy, and is often used in beauty and anti-aging products.
The Impact of Color on Conversions
There are plenty of examples where a simple change in the color of increased sales and conversions, since other than copy, design and color play a huge role in the success or failure of any landing page or product. Although changing an elements color on a landing page can have great impact on conversions, it is very hard to analyze results from these types of tests and scale from them. Deciding on the colors of your landing page or brand is more than just the color of your Call to Action button, it’s a strategy. Since colors portray emotions, you can use them in a way that communicates a certain experience.
I just got back from Europe and witnessed all of the McDonalds chains around me in Green. It intrigued me to understand why such a strong brand known for its RED color would change to Green and apparently McDonalds is swapping its traditional red backdrop for a deep Green — to promote a more eco-friendly image in Europe. The power of color.
McDonalds isn’t alone, in a marketing study, Heinz changed the color of their signature ketchup bottle from red to green and sold over 10 million bottles in seven months, resulting in sales of $23 million.
With all of the information and data provided you should be able to start incorporating color psychology into your landing page designs in order to see which colors resonate with your target audience. It’s important to understand that work does not end with simply creating a landing page and that continual testing of copy, layout, imagery, and particularly color is need to truly impact conversions. How have you incorporated color into your designs?
This post was originally published on Conversioner blog
How Artificial Intelligence is Changing The Art Industry
At the end of last year, a work of art created by an algorithm was auctioned off for the first time ever. It was a painting and, though it was only expected to sell for around $10,000, it sold for a whopping $432,500, further cemented the growing interest in AI art. Artificial intelligence is undoubtedly changing the future of technology and business practices, but it’s making waves in the visual arts sector as well. AI artists are collaborating with machine learning technology to write novels, produce fine art, expand capabilities in the culinary arts, produce music, and even help with choreographed dances.
The idea of artificial intelligence creating art has been met with many divisive thoughts from creators, artists, and collectors alike. Who technically owns the art and should profit from its sale? Can a machine evoke the same creativity that human can? Will it ultimately replace artists? Auction house, Invaluable, explores the capabilities of AI art and answers these questions in their infographic below. You can see the full article here.
The Ultimate Guide to Choose the Right Image for Your Landing Pages
Web design is an extension of page design, and when it comes to page design, there are plenty of rules and principles for putting together a winning website. Landing pages can be tricky; they have many elements to them that require careful consideration;
- The main headline
- The call to action button
- Social Proof
- Dedicated content
- The form and fields people need to fill in
- and of course the main hero image
While each element is equally important and cannot work without the other, the image and the colors we use on our landing page have the largest impact on our customer’s initial impressions of us, their experience and as a result, our conversion rates.
Since our brains process images much faster than text, the first thing our potential customer sees on the landing page is the image and it is all that’s standing between your customer bouncing from the page or choosing to read more or convert.
How to choose an image strategy for your landing page
The main hero image is meant to help potential customers see the value in our offer within the first couple of seconds, understand what’s in it for them and why they should take the next step in our customer journey vs. the competitor’s.
On average we see between 4000-10,000 messages a day, we’re constantly bombarded with ads, text messages, calls and content everywhere, the possibilities and options online are endless and tiring.
This is one of the main reasons potential customers easily and almost automatically navigate from one site to another without giving as much as thought for the page they just visited. As consumers we move quickly from one competitor to another until something clicks in our brain and catches our attention. That something is the value, the “What’s In It For Me?”
To stand out from your competitors and gain your customer’s attention (therefore increase conversion rates), the hero image on every landing page, email campaign and especially your website should project immediate value to your customer.
This isn’t an image of your product, service or features, it’s an image that highlights the emotional value customers gain from being your customers (e.g increase self confidence, get appreciated by your boss or find true love). As I mentioned at Mozcon, insurance companies don’t sell insurance policy, they sell peace of mind; a happy carefree family.
While most landing pages show an image of the product, platform or service they’re providing, we’ve ran countless tests proving time and time again that value wins almost every time.
For example, this company provides an all-in-one solution for creating birthday and party invitations. While the original landing page featured images of the different templates available and featured a product focused headline: “Custom online invitations in minutes”
The variation we created visualized the party scene for our potential customers. Utilizing different colors to enhance certain feelings, an image of the park, a picnic basket and a dog this variation focused on helping people envision the perfect party, which starts with a great invitation. The results: 65% uplift in purchased subscriptions!
Today, I’m going to show you exactly how to do that yourself.
There Are 3 Ways to Define Your Image Strategy
Before setting down to design your landing page and randomly choose your image, take some time to follow the 3 step process we use to define the customer’s value and the images we want to test:
Step 1: Talk to your customers
The great thing about talking to customers is that they have all the answers. They know why they purchased an item or service and have a clear reason for doing so. However, most customers will give you a list of tactical reasons for their purchase. This happens due to our brain’s tendency to rationalize our purchases, we may purchase on emotion but our brain quickly finds a way to rationalize that decision. For example – buying an expensive suit, or that lamp you don’t really need is then explained by attaining a good deal for it or your sudden need for more light around the house.
So a great way to discover your value and avoid technical answers is asking them how they would feel about removing certain items from your stock or certain features from your platform. This will give you a clearer understanding of the real value people find in your service. You can also ask what may have stopped them from converting and more importantly, ask them about THEM: What are their dreams, aspirations and even what scares them – get to know them so you can offer relevant, more compelling images, colors and content.
Talk to your team
Your customer success team, your sales team and anyone who talks to your customers on a daily or weekly basis can provide key insights. They know what people complain about, what their main issues are and what people find exciting. Talk to your team, interview them and learn how they view the customer, what values they believe you offer and compare these to your customer interviews.
Analyze direct and indirect competitor sites
NO I’m not suggesting you copy from your competitors in anyway. What I am saying is that you should analyse the testimonials and especially the reviews found on your competitor’s site. This comes straight from Joanna Wiebe’s research process: See what reviews customers are leaving, what bothers them and what they care about to discover what you need to highlight on your landing page and what value you should focus on.
Once you’ve compiled all this data together you’ll be able to define the image strategy you want to test. The next step, is finding these images that highlight the value and have all of the qualities you’re looking for. Below are 6 rules you should follow once you’ve defined you’re strategy and ready to choose an image for your landing page:
6 Rules for Choosing a Landing Page Image
#1 Use Real, Relatable and Authentic Images
A successful image is one that your customers can to relate to. Either by seeing themselves in the image or someone they would want to be like, someone that reflects their challenges and values, or someone they can and want to connect to.
Use authentic images of people and avoid ones that are clearly stock photos, bought for the sake of the page. Best case scenario – use real images of your customers or your team, if you can’t use those choose your images wisely. A quick google images search can show you how many companies are already using that image. Ask yourself, is this image authentic? Will my customers relate to it? Or does it look like this (in case this isn’t clear –> this is a bad image!):
Mailchimp’s new homepage redesign (launched just a few weeks) ago baffles me. The image is clearly a stock photo image (if not… then bad execution) that feels cold and has no relation to their headline “Being yourself makes all the difference”. Does this image represent their target audience? The colorful background with different shapes, colors and palm leaves distracts the customer and has no value that I can personally detect. As a Mailchimp customer, personally I don’t feel comfortable with this women staring me in the eye and telling me to be myself. This image feels fake and I have a hard time relating to it in anyway.
Gusto on the other hand, has an image of a women sitting in front of her desk smiling. Now, granted I don’t really know if this a real photo of an HR person or a stock photo but it feels real and the connection between the image and headline is clear. I can immediately resonate with it, it’s authentic and relatable to HR personnel who do it all. Gusto makes the main image work with the strategy of the page, makes it about the customer and as opposed to the lady staring at us from Mailchimp’s new design, this women doesn’t feel alienating – she feels welcoming, someone you might want to meet. This is the difference between using authentic images that relate to your target audience vs. images that just look nice and have a “cool” composition.
#2 Reduce Visual Noise
“With great power, comes great responsibility” – As we’ve seen, our image captures most of the attentive mind of our landing page visitor, it’s almost always the first thing we see and it’s what determines if we should hang around a take a few more seconds to read and understand the offer. This means, that other than choosing a good strategic image, we also need to think about reducing the noise it creates so it doesn’t have a negative affect. We need to make sure it’s easy for customers to quickly see what’s in it for them and asses our services. How do you do that? By following these 3 simple rules:
- Ensure high contrast between the image and the page content so it doesn’t “drown” out the text, making it hard for people to read, like this for example:
- Ensure the photo is distraction “clean” as possible and helps customers focus only on the most important elements of it unlike the landing page below for example. There’s so much going on within this image that it’s hard to focus on anything. Not to mention the fact that this is yet another common image used by thousands of startups to show another “unique” office space. This image has nothing to do with the service. How exactly does an image of random people in an office make you feel that this a “new model for talent development”? Clean images, mean using only the objects that help get the message across, remove any details that can cause confusion or stress on the eyes.
- Consider the colors you use – colors have an emotional effect on us and can assist us in saying things without actually spelling them to people. For example, you don’t have to say you’re trustworthy, you could (in Western cultures) use blue for that. Also, remember to reduce the amount of colors you use so it’s easier on the eyes and easy to take in.
#3 Use Images as Direction Cues
Our main image is there to create a certain atmosphere and feeling, but it’s also there to navigate the customer in the right direction and point them towards the next step (whether it’s subscribing, downloading something or simply reading more). You can use your main image as a directional cue to show people what to do next like the visual below.
You’ll notice that all elements (computer, paper, earphones and pens) are placed around the call to action button making that the main focal point of the page. Granted, I’m not sure this is the best image to use to sell a UX class, since it’s only showing specific elements you’re going to use during the course, but doesn’t explain why you should actually take it. However the placement of elements is done well.
Perhaps a better example is by ‘Here One’. As you can see they’re using their main character (seems authentic and wearing product) to point with his entire body towards the call to action button.
#4 Avoid carousels and auto play videos
While tempting, carousels confuse visitors and make it hard on them to focus on the action they need to take so don’t use them. This is actually a well known fact and many case studies have shown that rotating images reduce conversion rates. And so do automatic background videos! instead of reading your content and taking the next step, the visitor is now engaged in a moving video that’s distracting and has nothing to do with your goal. Have multiple images in mind? Test them, don’t use them all at once.
#5 Consider Mobile
Just because an image performs well on desktop, does not mean it will work or look well on mobile. First, you’ve got the fact that technically the image may look bad on mobile:
- It may look stretched
- Take too long to load
- Completely dominate the page
- Move all your content below the fold
- or simply won’t make sense to a visitor on mobile.
Let’s look at the same example by ‘Here One’: it looks and works great on desktop. However, on mobile it’s a different story. The image of the guy and the colors they’re using make it hard to read the text. It’s not immediately clear what this product is and could be perceived as a hearing aid rather than advanced, cool earphones. The strategy of this image, doesn’t work well on mobile.
#6 A/B test your Strategies
Once you have an hypothesis for your image strategy, take the time to test it vs. the one you already have. In fact, test different strategies, for example an image of your product or someone using the product vs. an customer centric image. This is not only a great way to validate your hypothesis but also a good way to show numbers, figures and facts to your team who might have a hard time getting behind this new initiative. A/B testing image strategies instead of just simple elements such as the color of the call to action button will give you greater insights that can then be presented to your team for convincing them to get on board.
Use the following checklist and process to define the images for every landing page, email campaign or website you launch:
- Define the goal of your page (e.g – subscribe, download)
- Evaluate current image strategy (Does it highlight the customer or yourself?)
- Use heatmaps to determine current image (e.g – is it a focal point, are people clicking on it)
- Conduct customer surveys
- Conduct interviews with team
- Analyse competitor websites for reviews and testimonials
- Combine all data to define a customer centric image strategy
- Choose image (using the 6 rules)
- Launch A/B test of current variation vs. new variation
Over to You
Remember that the image doesn’t work alone, it’s part of a whole composition working with the copy, your fonts, colors and call to action button. All elements together should be geared towards helping the customer immediately seeing what’s in it for them and helping them take the next step.
This post originally published on Talia Wolf’s blog
The Ultimate List Of AB Testing
Building a conversion optimization strategy is a process. You’ve spent time on tracking, analyzing, building a hypothesis and building your test. Moments before you launch, take the time to go over the following AB test checklist to make sure you have everything you need and to ensure your test results are meaningful and scalable.
Everything you need to do before launching:
The first thing to do when you decide to start testing is ask yourself where you’re going to test. That’s where planning comes in. Usually you want to start where you can both have the biggest impact and also learn the most. Oftentimes, this is at the top of the funnel where there are the most users, but take a look at this section and see what works best for you.
Measure your website’s performance (Read more about where to start and what to track)
Use heatmaps to understand user behavior (Read more about heatmaps to increase conversion)
Define your goal – (e.g – registrations, sales)
Define KPI’s – what will you track?
How long will it take you to reach significance? Make sure to chose a part of the funnel that will generate results and matter.
- If you have other tests planned or ongoing – would yours conflict?
Choose the best platform for your test
- Create an hypothesis – How can you create a better journey for your customers?
The design process of a test is where you make the difference. Knowing what to test and how will be the difference between a successful or failed test. The steps you take to optimize your assets will determine if your test results in relevant or non-essential conclusions. Here’s what you need to make sure of before you complete your new variation:
The Call to Action Button:
You have one call to action (CTA)
Your CTA is above the fold
The text on your call to action contains no more than one or two words
Your CTA is clear – people will know what to do immediately
- The call to action button stands out – in color and size
Check out these best practices and tip for higher converting call to action buttons
The content focuses on value – not features
Your headline matches your message on ads
Your title is actionable and tells people what to do
- You’re using one font type
Your unique selling proposition is clear
You’re using social proof – testimonial, customer logos, reviews
Your keywords are relevant to your SEO needs
All text is HTML for SEO
- You are mobile focused
You have no or a minimum of links on the page
Learn more about the importance of content for your tests
The Main Visual:
You have no more than 2 main colors on your page
The visual compliments your USP
The visual directs user attention to the call to action
The visual projects trust and reliability
The Registration Form:
Requires a minimum of fields to get started
Required fields are easy to distinguish from non required fields
- Highlights your USP and why people should sign up
You have a confirmation page/layer
You send a confirmation email to signups
Before launching your test, there are a few important elements you have to check. This AB testing checklist may take sometime to go through but once you move forward with your test, you’ll know it has been set up in the best way. You should always be sure that the changes you made are working well and are trackable:
Your goals are set up in Google Analytics
Your goals are set up in AdWords (if relevant)
Your Google Analytics tracking code has been implemented
Google Analytics events have been set
- Images are rendering correctly
Adwords account is connected to analytics (if relevant)
Ecommerce tracking is enabled (if relevant)
Goals are firing within Google Analytics
Segmentation is correct: your experiment is appearing to the right audience
Page load time is at minimum – use Google’s speed test tool
Variation is compatible with all browsers using BrowserStack
Demographics and Interest reports are enabled on GA
All links work (and send to the right page)
All links open in new tab
Links have anchor text
Image size is at minimum
Variation is compatible with mobile or excludes mobile traffic
You’ve QA’d the entire funnel of your variation (not just the page you’re working on)
Heatmaps are working well
You’ve located any 404 non existing pages
Lead box is working correctly
Your main title is in H1
Experiment parameters are setup
Time to launch that test!
A test isn’t complete until we’ve reached conclusions, analyzed our results and have a plan for our next steps:
Test for a minimum of 7 days – to make sure there aren’t any changes due to special occasions or unknown criteria
Make sure you reach statistical significance. Don’t be quick to the trigger – allow tests to run to their full extent until you’ve reached significant validity
Analyze the data and draw conclusions
Get the team involved – the best way to keep testing is to showcase your results to others and get them on board with testing
Take the next steps – optimize
There are many tools that can make your job easier and faster:
Hotjar – The all in one solution for heatmaps, surveys, analysis and visitor recordings. If you haven’t tried it yet you’re definitely missing out.
- Invision – Use invision for better communication around design and creative. Comment and collaborate on creative projects with your team and clients.
VWO – Like Optimizely, Visual Website Optimizer allows you to edit pages via its sleek user interface and AB test them without needing developers or designers.
Webmaster tools – Google’s webmaster tools lets webmasters tell search engines about their site to make it understandable by bots and maximize visibility to people.
Kissmetrics – Analytics platforms like these, in conjunction with Google Analytics, can give you access to extra-accurate and different types of reporting
Site speed checker – Speed checkers such as Google PageSpeed tool allow you to assess the load time of your page and learn of ways to optimize it
Test Significance Calculator – Sometimes, for one reason or another, we run AB tests outside of a true testing platform and just wind up with raw data. Having a significance calculator allows you to determine statistical significance in these scenarios.
This post was originally published on Conversioner blog