What's in a colour?

We're surrounded by it and it makes up everything we see, feel and touch but most people don't take a great deal of time to stop and think about it. Colour is fundamental to our everyday life and it means more than what we just see on the surface.

There have been numerous studies on how colour alters our mood and directs us to take action, be that for fight or flight. In a study by the University of Winnipeg, Colours influence up to 90% of an initial impression. Other research has found that:

  • Users form an opinion about a product within 90 seconds. People base that assessment mostly on its colour.
  • Colours alone are responsible for 60% of users’ acceptance or rejection of a product.
  • People read ads in colour 42% more compared to the same ads in black and white.
  • The logo colour is the first thing a customer will notice when they see a brand.

We've done a little research and pulled together a bunch of information on different colours and their meaning and symbolism. This will help you when it comes to picking colours for your brand, product or even your next promotion. But, you can do some much more when you understand how people react too colour. Using it correctly can lift your conversion rate, keep people on your site and ultimately help you sell more.

Getting people to take action on your website can be enhanced with colour, as part of an effective CRO programme.

We’ve got specialist teams that advise and then action Design, UX & UI for your digital storefront. We’ve also got geniuses to work with you on how to drive brand engagement, solicit positive sentiment, strengthen your content marketing, SEO & PPC plus work with you to boost your conversion rate through CRO or help you learn more about your customers through user research as a first step. You can reach out to us and we can help you make the most these insights.

Click the picture below to take a look at what we found.


The ROI of UX & why not investing in it is a huge problem for you.

Good user experience (UX) is the difference between being part of the best and worst online. That’s why Facebook, Apple, Google and other world-class companies invest heavily in UX. They know UX is the secret weapon for growth. While they are exceptional examples, the vast majority of companies today do not invest enough in UX. As a result, CareerFoundry found a trillion dollar UX problem in the making- and this is looking at e-commerce alone. Their discovery called for a thorough investigation of the true impact of user experience design on the world. They interviewed more than 60 of the world’s leading UX experts to get their insights into the return on investment (ROI) of UX design.

Our report compiles highlights from these insights that make the case for investing in UX design. We’ve taken all our experience in the world of UX and done some reading of the Comprehensive Guide to the ROI of UX, by the team at CAREERFOUNDRY, to bring to you a high level overview of why you need to be paying it a more attention and how we’ll be able to help you achieve that.

Click on the image below to take a look at the report.


Website Speed Tips

6 Tips to Increase Your Website Page Speed - Part 2

Looking to get a better page speed on your website? Look no further...these tips will get you moving.

This is part 2 of a two part series, read part 1 here.

Upgrade your server to HTTP/2

HTTP/2 has been a long time coming, for too long we’ve been building on top of a legacy protocol, this means a lot of our techniques have been put in place because we’re working with HTTP/1.

One of the many benefits of HTTP/2 is that we can now download assets in a much more fluid way, HTTP/1 forced us to download assets in batches, this was useful to keep connections open but meant we’d wait for the largest file to finish before we could move onto the next batch.

HTTP/2 has done away with this meaning that we can now download assets as soon as we finish any other asset currently being downloaded, this means that techniques like concatenation of files and turning images into sprites are now not best practices and should be avoided, favouring more smaller files which can be downloaded and displayed to the user as and when they get delivered.

HTTP/2 does have some requirements, one of which being browser support, the other being that it must be used in conjunction with a valid certificate. Both of which aren’t a problem to get over to help you reap the rewards of HTTP/2.

HTTP/2 has other huge benefits, Daniel Stenberg has written http2 explained if you’d like to dive in deeper.

Optimise for the critical render path

If you’ve use Google Page Speed Insights, you’ve seen this phrase. This is a much more complicated challenge than anything else we’ve discussed so far, but I’ll outline what we’re trying to achieve here.

The critical render path defines the assets required for the browser to do it’s first render, this means everything the browser first sees when scanning the initial HTML that’s delivered. The challenge of optimising the critical render path is all about prioritising your assets to get that first render as quick as possible.

This means we may want to delay our JavaScript completely, we may even want to delay a large section of our CSS and only focus on what the user can see which, if they are on mobile, could be as little as the header and some initial content. The goal here is to try and make our critical render path so small, that even on a very slow network, we could get for that ever ideal goal of our first render happening in under 1 second.

The reason this is a more complicated solution than anything we’ve discussed previously is that after we’ve delayed all those assets we then need to pull them in in a way that isn’t jarring for the user and doesn’t impact the rest of their experience. We still need all these assets delivered quickly and giving to the user without them noticing.

Ilya Igrigorik has done amazing work on the critical render path and you can see his video here.

Increase your perceived web performance

Okay, so this isn’t going to make your website faster on any metric, but it can have just as much impact on your user experience.

Perceived web performance is all about how fast your website feels as opposed to how fast it actually is.

There are a few accepted ways of increasing your perceived web performance:

Sleight of hand

I call this Sleight of hand because it works similar to how a street magician can steal your watch, we are essentially distracting the user while we load the assets to the website. The most simple way of doing this would be adding in some animation while loading in a new section of the website, if our animation takes 2 seconds and it takes us 1 second to load in the new thing, the user may not even realise it’s taken any time before they can interact with the new part of the website. If this seems pointless to you, the web already uses this a lot and you’re probably not even noticing it.

Skeletons

This is a technique that is heavily used by social media website such as Facebook, Twitter and Instagram, the technique here is basically just loading in something that looks like the asset the user is trying to get at. In the case of Facebook, who use this heavily on your timeline, it’s a dummy post, your brain is already expecting to see a post so by seeing this skeleton in place, your head is already partly accepting the fact that the page is loaded. This is really effective and although has no increase to the actual page speed, it can increase your conversion rate massively.

Keep ‘em busy

This should be saved for when we’ve got a long wait that we can’t speed up for some reason, give the user something to do. The gaming industry will often give users a mini game to play while they load the main game. This could be a simple version of what they’re going to be playing or a tutorial. We could just give the user some information, if we’re a holidays website, we could display the weather while we’re doing some heavy processes that can’t be sped up for example.

Everything I’ve said about are all web performance techniques that actually work, I’ve implemented them, I’ve seen the results and I can vouch for them.

I’d love to hear your stories implementing some of these results, equally, I’d love to hear some of your web performance techniques that do or don’t work, so please reach out in the comments.


Biometrics Space Between

An Introduction to Biometric User Testing

What is Biometric Testing?

Biometric User Testing is relatively new on the digital marketing scene. Don’t panic - it’s really not as scary as it sounds. Essentially, it applies the principles of psychological testingtechniques to the context of digital marketing. That translated? It is used to test and record the responses of users when interacting with retailers’ websites and apps. Both emotional arousal and stress reaction measures are used in order to achieve this and data is then collated to provide insights on the findings.

grid

Subject Connected to Galvanic Skin Response Kit while conducting Website User Session. (Source: Space Between Ltd).

How does Testing Work?

Testing a sample using qualitative and quantitative data, opportunities for these refinements quickly becomes apparent in the data reports. Subjects are selected to match the demographic profile of the website being tested. They are set up in a Biometric Laboratory, which guarantees consistency in the testing environment. The testing itself involves the application of various measures, including: Galvanic Skin Response (similar to polygraph testing in measuring palm sweat levels), Eye Tracking (what the subjects are looking at on screen), Mouse Tracking (what the subjects mouse is doing on screen), Facial Expression Analysis and Attention Analysis (captured with various user cameras during the testing session). Subjects also provide direct feedback on their experience using the website, usually in a series of questionnaires and surveys. Subjects are given several tasks to complete on the website, such as searching for a specific item, and proceeding to cart checkout. This testing process usually takes around one hour per subject and is highly valuable to highlighting key issues with eCommerce and functionality and overall usability. A deeper level of analysis can be achieved by repeating this testing process again with the same subjects, but this time performing the same test on competitor websites. This highlights the areas of success and improvement for an eCommerce site in the context of competitor presence.

grid

Subject Facial Analysis recording and data feed during User Session (Source: Space Between Ltd).

How is it Applied?

Unsurprisingly, Biometric Testing has seen its early adopters in the mega eCommerce Retailing Market (think the big online supermarkets like WholeFoods, travel booking sites like Skyscanner, and marketplaces like Amazon). The reason being that they all have huge traffic volumes and huge online sales in common. When it comes to refinement, or optimization of their eCommerce site, a small tweak can mean the difference of millions of dollars in sales. So their common interest is in complete eCommerce refinement for the ultimate User Experience. But the benefits of Biometrics are now being recognised by smaller businesses too, and rightfully so. In a culture where a smooth online experience is so vital to successful business, particularly when financial transactions are involved, public expectation is constantly growing. This isn’t just isolated to big business - consumers have come to expect this now of all eCommerce interaction.

grid

Biometrics User Testing - Applied  by the Big eCommerce Retailers (Source: Christian Wiediger, Unsplash)

Now What?

If you are in the business of eCommerce, it’s time to consider if Biometric Testing  is a marketing method you should be applying. As a general rule of thumb, the greater the site traffic, the greater the potential for achieving big results. So, if you are only just starting up, it may not be the right time for you. If you are a bigger business, with a robust online presence and marketing team, this could be your big opportunity for untapped growth in 2019. With User Experience and Conversion Optimization being high on the agenda for most digital teams, it’s time to consider if Biometrics Testing should become part of your ongoing digital strategy. Remember, when it comes to website traffic, users expect a seamless journey. The only way to truly test how your users interact with your site, and to identify any common pain points they may have, is to apply Biometric Testing.


Social Proofing - Space Between - Blog

Social Proof - What is It and How Can I Apply It?

There’s no denying the new ‘social’ way of life is changing the way we live and in turn, the way we interact online.

There’s that word again. Social.

Social, this, social that...

There’s no denying the new ‘social’ way of life is changing the way we live and in turn, the way we interact online.

We want to jump in head first to the world of social proofing; what is it? How has it changed online behaviour? How it affects customers decisions and therefore, business decisions. We look at strategies and will hopefully provide you with a nice little doggy-bag of actionable takeaways.

Social Proofing: Back to Basics

We all know by now how social media can influence users decisions, an image or an opinion can soon change somebody’s mind. But what do we know about social proofing as a whole?

Social proof (also known as informational social influence) is a psychological and social phenomenon where people assume the actions of others in an attempt to reflect correct behavior in a given situation.

Social proof goes far beyond social media and in fact social proofing as a marketing tool far out dates social media platforms. It’s simply the increase in the number of platforms and users of social media that has enhanced the importance of social proof. Keeping up?

Social Proof is identified in six different forms:

1) User Social Proof

This social proof can come in the form of testimonials, reviews or case studies from your existing customers.

2) Expert Social Proof

This social proof comes from reliable, trustworthy and credible experts in the same industry.

3) Celebrity Social Proof

Social proof from celebrities or other esteemed influencers who have bought your product, used your services or visited your establishment, it helps a great deal if the celebrity is properly matched to the brand.

4) ‘Wisdom of the crowds’ Social Proof

This comes when a large number of people or groups provide social proof proving that thousands of people or more have taken the desired business action, be it buying a product or subscribing to a newsletter.

5) ‘Wisdom of your friends’ Social Proof

As above but the social proof is on a smaller scale and comes from  friends of your users or website visitors. An easy example is the ‘like’ button on Facebook.

6) Certification

This one often gets forgotten, however we feel it’s just as important to get a mention. This comes from an accredited 3rd party entity which certifies that you are knowledgeable and trustworthy source.

Why is social proof important for your business?

Users’ movements can be unpredictable especially as technologies change and the Internet adapts. However, a consumer behaviour that continues to remain consistent is social proof, this is why it’s becoming such an important focus for businesses.

FACT: “Studies show that 61% of consumers say they look at product reviews before making a purchase and product reviews are 12x more trusted than product descriptions from manufacturers.”

Knowing that over half of customers read reviews before making a decision is monumental, it shows how much trust a consumer puts into others and how they can be influenced.

And in fact, there are further stats to prove the significance of reviews on page, how about these as food for thought: Reevoo research claims that having reviews present on your site can lead to an average of 18% increase in conversion. In 2011 iPerceptions proved that 63%of customers are more likely to buy from a site that has reviews and finally, Bazaarvoice showed that consumers who take the time to read reviews and customer questions are 105% more likely to make a purchase.

By getting the best results from your conversion rate optimisation you will of course increase your ROI. However, in the process social proof marketing can benefit your website in more ways than one. Another significant benefit is boosting your companies brand.

Brand awareness is mostly self explanatory; it’s building your brand to be a well-known, trusted business. Positive reviews, customer recommendations, shares, and media mentions for example, are all social proof strategies that will help build your brand and increase your brand’s awareness. This leads us to the ‘halo effect.’ The halo effect is described as:

...an evaluation by an individual and can affect the perception of a decision, action, idea, business, person, group, entity, or other whenever concrete data is generalized or influences ambiguous information.

In layman's terms it can be said that a well established business brand has an influential effect on a person's decision.

List of further benefits of Social Proof Marketing:

  • A better ROI.
  • Social proof is a way of finding new visitors.
  • An increase in engagement throughout your site.
  • Enhanced customer insights.
  • Social proofing can help you to find the right customers for your business.
  • Social proof breeds trust into customers.

It’s clear to see why businesses are spending time and money on perfecting their social proof marketing; the power of the strategies are undeniably significant in easing the minds of customers, and in turn benefitting your conversion and ROI.

 

27 of the Best Social Proof Strategies to Increase Conversion

Below is a table showing you the best social proof strategies to increase conversion. We’ve given you a helping hand by advising how hard each is to implement and their potential reward.

Social Proof Strategy What is it? Type Implementation Conversion Value
E.g Review E.g Displaying customers case studies E.g Expert E.g Easy - Hard E.g High - Low
Ratings & Reviews Reviews left by existing customers User Easy High
Testimonials Testimonials left by existing customers User Easy High
Influencer / Celebrity endorsements Influencer/celebrity approval of your product/service Celebrity Hard High
Industry badges/certifications The display of certifications and accreditations on your site Certification Easy Medium
Media mentions The display of mentions of your product or brand in the media Expert Easy High
Social Media Proof Use of social media User Easy High
Counters - Real time statistics How many people are viewing the page/making a purchase Friends Medium Medium
Social shares/connections Show real time number of shares Friends Easy High
Subscriber/User/Customer Count The display of your user, subscriber or customer count Crowds Easy Medium
Customer base/Clients The display of client logos on your site Expert Easy Medium
Trust seals - eg payment protection Use Trust Seals such as Norton, McAfee on your check-out page Certification Easy High
Best sellers Show customers which products are best sellers User Easy High
Customers also bought The display of which products customers also bought User Medium Medium
Customer recommendations Present an average of customers that would buy again Crowds Medium Medium
Number of past orders/sales The display of how many orders you've had Crowds Easy High
Ambassadors - highlight comments etc Allow customers to become ambassadors of your brand Celebrity Medium Low
Popular content/products Sharing your popular posts or products User Easy Medium
Customer Showcase The display of happy customers User Medium High
Platform Integrations The display of the logos of integrated third-party services Certification Easy High
Case Studies Encouraging and the display of customers case studies User Medium Medium
Test Scores The display of test scores from independent third parties Certification Easy High
Photos Include photos with any of the above User Easy High
Similarity Use sources that are similar to your customer base User Medium High
Stories and Examples Provide stories and examples User Easy Low
Avoid negative social proof Don't use negative examples about missing out on a product/service User Easy High
Avoid minimal social proof Have a substantial amount of social proof before you put it live User Easy High
FOMO Allow customers to feel like they are on the verge of missing out User Easy High

Summary of Social Proofing

Seeing a long queue might not always make you want to jump in it, but it does spark an interest into what the queue is for and whether or not you’re missing out, it’s a natural reaction and as we’ve proved it’s this psychology of your audience that you need to explore.

When we consider the numbers; over 60% of customers reading reviews before making a purchase, it’s evident that businesses cannot ignore the power of social proofing. Using our comprehensive list of strategies you will be well on your way, from ‘like’ buttons to customer case studies, the list shows how easy social proof is to put into practice. What are you waiting for? Get sharing!

 


CRO Biometrics Conversion Rate Optimization Article Space Between

The Future of Conversion Rate Optimisation Demands Biometrics

Conversion Rate Optimisation (CRO) as we know it is limited. A part of the user testing process is to ask people what they think of your site and observe how they use it.

What is biometrics?

Where conventional user testing asks people to give verbal, conscious feedback while they use your store, biometrics measures the unspoken, physical response that's happening in the background. As with any scientific study, tests take place in a lab using specialist equipment. You'd be forgiven for not knowing a great deal about it since only a handful of biometrics labs exist in the world.

Inside the lab, people browsing your site have sensors attached to them; they track things like heart rate and monitor activity in different areas of the body. These calculations are then recorded on a computer system and examined by data analysts as well as trained psychologists. Like Yin and Yang, the statistical facts and psychological interpretation complement one another to form a complete picture.

Where do biometrics and CRO meet?

CRO involves conducting experiments. You might test two pages to see if page A converts better than page B, or use heat maps to see which area of a page gets the most clicks. What CRO experts can get frustrated by is the missing finer detail. Biometrics can highlight information that simply isn't possible to determine using other methods. Here are just three of the techniques used to uncover more data:

 

1. Facial expression analysis

Biometrics testing will challenge even the best poker face. It's used to monitor 34 points on the face, such as the corners of the mouth and the tip of the chin. Movement in these areas gives away our true feelings. Through machine learning 20 facial expressions can be determined, plus seven key emotions are detected, including surprise, contempt, and joy. You'll soon know if your content is dire or delightful.

2. Galvanic Skin Response (GSR)

The amount of sweat people secrete gives away the secret to how people feel about a situation, knowingly or unknowingly. We're not talking about a jog in the park type of sweat, but subtle cues in the moisture level on the palm of the hand that can be measured using biometrics. Sweat can signal stress or arousal. Combine GSR with facial expression analysis, for example, and it's clear which it is.

3. Eye tracking and Areas of Interest (AOI)

Using biometrics, you can see how long it takes for a user to find the information you want them to see, then how long they spend looking at it. If it takes people a long time to find your call to action, that's quickly evident. Or if they linger over a message that—clearly—isn't clear. Armed with this information, you can move things around the page or change content so any barrier to conversion is taken away.

How can biometrics improve CRO?

Let's consider that someone reaches your call to action quickly but spends a long time looking at it. Maybe they don't want to admit to being confused in case they look silly, but GSR tests reveal they're feeling stressed and facial expression analysis detects fear. Biometrics reveals what's not being said, so you can edit out any points of confusion and guide users through your store without delay.

There is all manner of fascinating nuances that exist in our brain, which biometrics can help to capture:

  • Did you know the faster you take something in, the better the feeling you have about the source of the information? It's called Processing Fluency. Remove sticking points on your site so shoppers can glide through it quickly and those positive vibes are all projected onto your brand.
  • Researchers found the brain is seven seconds ahead of the actions we take. That means when someone adds to their cart, their brain decided to buy your product before you see this unfold with a click of the mouse. Biometrics can highlight the journey that precedes the click.

"By looking at brain activity while making a decision, the researchers could predict what choice people would make before they themselves were even aware of having made a decision." – Nature.com, 2008

Verbal mutterings and visual clues can only get you so far in your quest for more sales. Add biometrics user testing to the process and you add depth to your hypothesis. Rather than waste time on an incorrect assumption, you can work with greater accuracy to increase your conversions.

Is biometrics likely to replace traditional methods?

All user testing is about getting to know your customer better. For a site to be successful, you have to know their every foible. It's the reason why brands create customer personas and use personalization, so you can focus on what your customer likes the most and give them more of the things they want.

Biometrics testing lets you peek inside the minds of those consumers. Without this, results from conversion optimization experiments can feel incomplete. Biometrics is not a replacement for other user testing methods but does provide more meaningful insight into your buyer's behavior.

Current success stories

When HR GO Recruitment worked with British biometrics lab, Space Between, they saw a 153% increase in conversions. Advertising jobs online, HR GO used a sense of urgency in their copy. Yet instead of encouraging candidates to act quickly, biometrics tests revealed that people were stressed out by them. It had the opposite effect. Sweat production increased, as did heart rates. Facial postures and emotions were negative. A change in tactic increased revenue for the company by £2 million.

 


Colour Psychology Space Between

Colour Psychology: Increase Sales With One Simple Change

The colours you choose lay the foundation for your online image so it's important to choose carefully.

Web design sounds fancy. Yet, like all elements of conversion rate optimisation, building a website is more about construction than design. The colours you choose lay the foundation for your online image so it's important to choose carefully. Using colour psychology not only helps you look good, it can help attract the right kind of customer to your website and increase conversions.

What is colour psychology?

Colour psychology is the study of how people are affected by colour. You can test how powerful colours are just by thinking of some of the biggest brands in the world. What colour do they use? You'll recall it instantly for Coca-Cola, FedEx, Nike, and Facebook. You also know Coca-Cola is pillar-box red, not burgundy. FedEx is a rich purple, not lilac. And Facebook is a muted blue, not sky blue or sapphire.

Now think about how those brands make you feel. It's common knowledge that red represents a 'bold' attitude and pink points to products for women. But do you know that purple divides people by gender? Women are drawn to it and men are not. These findings reveal how people might react to your website.

What do colours mean?

Site visitors take just 50 milliseconds to make a judgement about your brand and colour plays a key part in this. No doubt you're already familiar with some of the basic assumptions of colour psychology:

  • Blue and green are universally popular. Blue is steady and reliable; green is fresh and calm. An edgy brand wouldn't go for these colours, but a corporate or more reserved company might.
  • If black, white, and grey are flat, unemotional colours (frequently used by tech and engineering companies), red, yellow, and orange are stimulants. These warm colours grab attention, generate excitement, and can create a sense of urgency.
  • Where pink is mostly associated with girls, purple is the grandmother of the colour chart. Pink is energetic and youthful, but purple oozes calm and wisdom.
  • Poor brown is typically unloved. Yet nobody can pooh-pooh the success of UPS – it's still going, since 1907. Brown is a rich part of the company's history and the colour of the original uniform.

The thing that makes colour psychology so interesting is that, despite the trends, everybody is different. People can become obsessive over a particular colour. Just the sight of it can stoke an old memory — good or bad. It's this reaction to a colour trigger that you can test in conversion rate optimisation:

  • What does your audience respond to?
  • Which colours work best in your niche?

How to use colour psychology in web design

Number 1

Use harmonious colours to keep people on the site

The last time you read about complementary colours might have been in school.

If you remember, these are the colours opposite one another on the colour wheel: red and green, blue and orange, yellow and purple. The colour wheel has been around since 1666. It was invented by Sir Isaac Newton and used by Claude Monet. Ever since then we've trusted that these pairings are pleasing on the eye.

Image source - http://crobbesart.blogspot.com/2015/03/warm-and-cool-colours.html

More modern depictions of the colour wheel show twelve colours, which make up the RYB (Red-Yellow-Blue) colour chart. For web design, you can pick three colours that sit next to each other on the wheel because they'll always hang nicely together. Or draw the corners of a triangle, rectangle, or square shape evenly within the wheel; the corners pinpoint the selection of colours. These will always work well together because they're part of the same tried-and-tested RYB chart.

Number 2

Keep colours consistent for a dramatic increase in conversions.

Research by the University of Loyola in Maryland suggests that sticking to the same palette of colours on your website can increase brand recognition by up to 80%.

If you don't want to mix colours, add black, white or grey to just one colour to create a different hue:

  • Make a colour lighter by adding white (tint)
  • Make it darker by adding black (shade)
  • Change the intensity by adding grey (tone)

A selection of different tints, shades, and tones of your chosen colour can form a colour palette too.

Number 3

Add accents of colour to prompt people to click.

Think about the conversion elements on your website. All the thought that goes into the headline, the description, the navigation, the images, and the button placement.

Do you give the same amount of thought to the colour of these key areas? Is it clear to your viewer what they should click on next?

In the EE example below, they highlight the headline and the button with a flash of yellow.

To keep colours balanced, not garish, use this design tactic:

  • Establish your brand colour by using it across most of your site (60%)
  • Make the brand colour stand out more by using a contrasting colour in places (30%)
  • Highlight areas key to conversion by using an accent colour sparingly (10%)

Think about the colour you use to showcase headings, navigation, buttons, and hyperlinks.

Tip! Background colour affects conversion.

Most websites have a plain background and lots of white space because it makes the text easier to read. Breaking convention with yellow text on a grey background may feel rebellious, but is it a smart move if nobody can read it? If your message is lost, your sale is lost too.

Conversion experts don't guess

Get to know what each colour means and it could give you an advantage in your optimisation strategy. Your next test could reveal something unexpected that turns a poorly performing page around.

  • Colour specialist, Carlton Wagner, once claimed yellow "activates the anxiety centre of the brain". If you're a gentle brand with a peaceful product, you should test yellow against green.
  • The University of Rochester suggests red makes people nervous when taking a test. If you're in the education sector, you might want to avoid red buttons on your website.
  • Orange is said to be a polarising colour; people can hate it as much as they love it. It's worth testing orange with your audience before you launch.

What works for one website won't work for another. Not all women like pinks and purples and some people love brown. Test it in your niche to avoid a flop—like Heinz, who famously tried and failed to launch a green version of their tomato ketchup. Parents didn't respond well to the conflict of colour. Kids didn't like it either because they associate green with vegetables and food they don't favour.

Putting colour psychology to the test (and winning)

When VegasSlotsOnline.com changed a "Sign up here!" button from green to yellow, they saw a 175% increase in conversions. Conversion optimisation is all about human behaviour and this brand knows their customer well. Because of that they were able to test what they thought might be most successful:

"Psychological effects of colour do matter. In our case, we chose two colours, both of which produced convincing arguments for their use. Our test likely would not have been fruitful if we had used white or black buttons. Our niche’s characteristics were paramount to our colour selection."

Try out colour psychology on your own site design

Will colour psychology testing work for you? If you work in conversion, you know there's only one way to find out: Test it. Find out if choosing one colour over another changes the way people behave on your website. It might just result in more click-throughs and more sales.

Here are some tools to help get you started...

Choosing a colour

Selecting colour palettes

W3C compliance

Let us know how you get on in comments. How do you use colour psychology in conversion rate optimisation?


Website Speed Tips

6 Tips to Increase Your Website Page Speed - Part 1

As anybody who knows me will tell you, I’m a huge self-confessed web performance geek, I love websites that download fast, I believe that fast internet is a basic human right and I think hotels that claim to have WiFi but instead have LiFi (WiFi that doesn’t quite seem to download anything) are criminal and should be boycotted.

This means that I’m always on the hunt for a good website performance technique and I thought I’d share 6 of the best web performance techniques that work every time.

Reduce the size of your images

The most commonly overlooked technique to get a faster website, can not only give you some of the biggest rewards but it’s also the easiest technique to implement.

There are a few areas in which you can reduce the size of your images:

Reducing the aspect ratio
This sounds very obvious but a huge amount of websites I’ve optimised and found that their main banner at the top of every page is 5000 pixels wide but is being displayed at 20% that. Just by reducing that you can save yourself a huge amount of bytes and therefore save your users from a huge download for no real benefit.

Make sure you’re showing the right image for the device
If your customer is viewing your product on their mobile, show them a version of the image that’s no wider than the device. When CSS is used to reduce the size of an image, it’s still the same size to download, just the browser then has to process it to the size required by the CSS, adding more time. Consider looking into srcset which is becoming more widely supported.

Compress the image

Tools like TinyPNGTinyJPG and ImageOptim can save your users from many kilobytes of download without reducing the visual of your image in any way your users will notice. This means that you can save a large amount of bytes on your page, without actually impacting your users. If you can have this built into your media upload, you don’t even need to think about it.

Reduce the ‘quality’ of the image

By reducing the quality of our images, we’re really talking about simplifying the amount of colours being used. This means that we can not only reduce the file size but also making tools like Gzip more effective. Other more advanced techniques of this include reducing the quality significantly to the point where you can see but saving the image at double the resolution, this has been proven to deliver even smaller file sizes without impacting the asset visually.

Remove old and unneeded code

Technical debt is an unavoidable part of any development, making sure you go through and remove old CSS, HTML and JavaScript is hugely important, though.

A few common areas that get overlooked regularly:

Removing vendor files

Pulled out an old version of a carousel or a split testing tool, make sure to pull out the assets as well, that includes the JS and CSS that goes with it.

Removing losing variants of split tests

Very often I’ve seen examples where 2 or more versions of the same element have been created and tested. After this has been analysed and a winner decided, the traffic is pushed down one stream to the winning variant only for the old versions to be forgotten about. Make sure to remove any old code associated with the losing variants of the split test.

Not including the entire framework

This is the most common cause of removing unneeded code, when people include frameworks like Bootstrap or Zurb, they very often include the entire framework, this means all the JS and CSS that build elements that the website might never even use. You can build these files up as and when you need them by not including the unneeded Sass files or only downloading part of the JS. For instance, the entire bootstrap CSS and JS is 668KB whereas the bootstrap grid is just using the grid is 13KB. You can use the customize tool on the Bootstrap website to do this for yourself and tailor the download to your needs.

Prioritise your assets

This is equally as important as anything else, make sure you’re downloading your assets as and when you need them. The simplest case of this is making sure to put your CSS in the head of your file and the JS in the bottom.

Even more than this though we can look at preloading pages and lazy loading.

Preloading

Preloading is when you download an asset before the user requires it and store it in cache or local storage, this means when they get to the area of your website where you think they might need it it’s already available and you don’t have to download it. A good example of when this could work is if you have a booking flow on your website, your booking flow will probably have some extra functionality, so before the user clicks on the search button on your booking engine, you could preload some of this functionality meaning you can load the page quicker and hopefully convert that user.

Lazy loading

Lazy loading is the other side of this, delaying your assets on the page the user is currently looking at until they actually need them. If for instance, you’ve got a gallery on your page, you don’t need to load all of the images the moment the user lands on the page. A more optimal way of doing this would be to download nothing at first, this allows for the first render to happen. Once we’ve displayed the page we download the first couple of images, and maintain being 1 or 2 images ahead of the image in view. This means you’re not downloading images that your user might not ever see but still make your users feel everything is instant as they slide through your gallery.

This is part 1 of a two part series, read part 2 here.

Everything I’ve said about are all web performance techniques that actually work, I’ve implemented them, I’ve seen the results and I can vouch for them.

I’d love to hear your stories implementing some of these results, equally, I’d love to hear some of your web performance techniques that do or don’t work, so please reach out in the comments.