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.


E-Commerce Statistics That Are More Relevant Now Than Ever Before

With physical retail set to open again this coming week, the way we shop in 'bricks and mortar' stores is changing forever. Data from the Bazaarvoice Network and analysed by MarketingWeek shows that whilst in lockdown "customers started to really embrace online shopping and began setting themselves up for what looked to be a long period spent at home."

There was a 21% increase in online orders in March 2020 vs March 2019, and in a survey they conducted with over 3,000 members of the Influenster community, 41% of respondents answered that they were "currently shopping online for things they would normally shop for in-store." New data from Signifyd also found that buying online to pick up in store, where it was available, saw purchases surge 248% at the end of May compared with before the pandemic.

eCommerce is booming. It is becoming the first port of call for shoppers and the need to be doing it right is vital. Even with stores opening up again, the trend to purchase and collect in store is expected to continue to rise.

The team at smartminded read through a series of articles published across a number of B2B blogs and searched for the most important stats. They looked for the ones that would help companies to take action and grow their business as fast as possible. They created an amazing infographic with what they saw as the six most important points, that they thought you should keep in mind. It's attached to this article for you to take a look at.

We looked through what they found and pulled out our favourites to help you drive your business toward growth. You can take a look at their full list and download a handy pdf checklist to keep on hand whilst you're planning your next steps.

 

Here are our picks.

93% of the millennials compare online offers with a mobile device. (Statista)

32% of shoppers changed their decision to purchase items after viewing the product information on their mobile devices in a physical store. (Invesp)

Aborted shopping cart emails have an average opening rate of 45%. (Moosend)

Last year, companies lost $756 billion due to poor personalization of e-commerce. (OptinMonster)

73% of consumers will switch from a badly designed website to one that makes shopping easier. (Google)

46.5% of small to mid-sized businesses say that offering free shipping increases their profits. (MCM)

If it is necessary to create an account during the checkout process, 23% of people will immediately abandon the shopping cart. (Baymard Institute)

eCommerce sites can gain a 35% increase in conversion rates with an optimized checkout design. (Baymard Institute)

The biggest reason for shopping cart abandonment is extra costs that are too high. (Baymard Institute)

 

e-commerce statistics

 

If you're looking for advice on how to take advantage of these stats we’re here to help. Both our Experience team and Magento team can help you out. The Experience team can start with a quick audit which within 2 weeks will have delivered a report outlining your users’ frustrations, your website performance and have the first solution live. Our Magento team can talk to you about accelerating your business growth. We’ve tailored a solution for everyone, no matter where the start point in the market is. Take a look at what we have on offer and reach out so we can help you launch your new digital shop front.


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.


eCommerce Site Search Best Practice

eCommerce Site Search - Best Practice

In this article, we discuss the importance of a good search bar and how to make the most of yours.

On eCommerce sites, up to 30% of visitors will use the site search bar to navigate.

These users are showing a clear intent to purchase by entering product names they may wish to browse. Therefore, you want to ensure you’re making the most of it and create the best experience for your visitors.

Make it easy to find

This probably sounds simple but it’s very important - make it easy to find. If the user can’t find the search bar, you could be losing out on that potential extra 30% of sales. It doesn’t necessarily need to be too big or bold but users should be able to find it quickly when they arrive at a page and look around. Here, Halfords have gone as far as to dim the rest of the site when a user clicks on the search box.

Positioning the search box

The position of the search box on the site can influence the user's decision to make use of it to look for products. Navigation should be clear across the entire site, including the site search boxes. This is so that visitors can move around easily, whichever page they happen to arrive at.

However do bare in mind that you want to avoid any confusion on your site. So to do so, make sure you do not locate the search bar too near to other boxes, such as newsletter sign-ups or postcode searches for stock information.

Use autocomplete for site search

By applying this feature to your search bar you improve the search experience by reducing the work that the visitor needs to do. As they type, products are suggested. The use of images not only provides a visual appeal but it also allows them to check the products quickly, such as is shown with PrettyLittleThing.com

If I were the user and I typed in ‘red’, not only do suggestions appear, such as ‘red crop top’ and ‘red denim skirt’ but images appear too which makes the experience for the user better as they get to instantly preview the items.

Filtering the results page

 

Whether a customer clicks or leaves your website can be down to your search results page. Not only do you want the searching experience to be easy and hassle free, you want to bring up relevant results.

With a good site search engine, you should be able to customise your users search to great deal. For instance, if you were a womens fashion retailer, one of your visitors could search for ‘black dress’ and all black dresses would appear. I have used retailer ASOS for this example (see images).

That user should then be able to filter their search more by features such as size, length (do they want a midi, mini or maxi length?), price and so on. Using filters helps to narrow down the options available for the customer so they aren’t overwhelmed and can therefore find their desired item faster.

You can see that just by adding a few filters the search for black dress has gone down drastically.

Track your searches

Some tools you should be taking advantage of are Google Analytics and Google Keyword.

The majority of search engines or hosted searches will keep a list of search terms that users have been looking for on your website. This is a great way to keep track of what the most popular items are and you can see what users are after. With this information you are then able to place these items nearer the top of search results.

Leaving the right breadcrumbs

It can be very irritating when a website produces breadcrumbs like Home > Search > Your Search Result. But leaving the right breadcrumbs can make the users life much easier. People use them to get a more precise search. Helpful breadcrumbs allow people to search without clearing everything and starting from the beginning.

For instance, using this John Lewis camera search query, we can see that convenient breadcrumbs have been left on the site. The item selected while browsing, in this example the Sony camera, might not be exactly what the customer is looking for, therefore leaving useful breadcrumbs such as ‘Cameras & Camcorders’ or even ‘Electricals’, makes searching easier. Furthermore, a faster and hassle-free shopping experience will more likely result in a sale.

Make sure it works and it’s fast

Or risk losing revenue. There is correlation between the amount of users who purchase something from your website and the load time. The same is true for search results. When load times increase, profit decreases. Amazon reported that “one additional second would cost them $1.6 Billion dollars in sales”. Therefore, run tests and ensure your load time is acceptable - this includes checking the load time on mobile devices.

When considering search result load times, even loading time by half a second can be detrimental. In 2012 Google conducted an experiment on search results by increasing results from 10 to 30. The outcome showed that revenue and traffic decreased by 20% because the additional search results took milliseconds longer to load.

Give search suggestions

Placing suggestive text in your search bar will encourage or prompt the user to search for something on your website, but make sure you limit your hints to just a few words.

Not only does a sample search query give them suggestions but it also makes it clear on what they can search for on your website and how many criteria are available. For instance Triavago.co.uk search for hotels and have given ‘New York’ as their search sample, whereas Odeon have given multiple samples, ‘Films, Cinema’s and Questions’.

 


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.