The Good And Bad of Microcopy

Microcopy is text on a website or interface that helps to guide the user in their journey. This is the text you see on buttons, forms, tooltips and labels. Microcopy must be clear and easy to understand, no industry jargon. It should provide context and let the user know what actions they are taking. It’s not about persuading and selling so differs from traditional copywriting. 

In this article, we’ll look at some good and bad examples of microcopy used across some familiar brands websites.

Let’s take a look at some examples of great microcopy:

Hello Fresh

On their homepage, Hello Fresh has multiple CTA’s that all go to the same page. By changing the copy on these they capture users who are at different stages of the purchasing process. They can be broadly split into two categories, one where users are still in the research stage so less committal CTAs like ‘see our menus’ and ‘learn more’ will appeal to them. The other CTA ‘get started’  captures those users who are ready to purchase.

Expedia

The microcopy in the search field speaks directly to the user with simple language. It also offers suggestions for the type of thing that they can search for. This will help to guide the user and get them to the information they want to find quickly.

 

Evans Cycles

Evans cycles have added reassurance messaging to their checkout CTA. It is concise and is a great addition considering the high-value purchase a user is about to make. Informing the users of the security at this stage will help to relieve any anxiety they may have over their online purchase.

 

 

invision

This handy tooltip from invision lets the user know what exactly will happen when they choose to get a public share link. The link is copied to the clipboard, the word ‘clipboard’ could be considered technical language but considering the users of this product, there is an assumed level of technical understanding. Users are then reminded of this with positive messaging once they have selected this option.

 

 

Typeform

Typeform has created clarity between the two actions, log in and sign up so there is less chance of users selecting the wrong option. This will get users to where they want to be for the first time creating a smooth journey.

 


When signing up and choosing a password microcopy aids the user by defining the password requirements. Explaining what they need from a user upfront avoids users becoming frustrated by not knowing what action they need to take.

 

 

Now we’ve covered what you should be doing let’s see what mistakes we should avoid making:

Amazon

The text in this search field is ambiguous so it’s not clear what the user should input into the field. This may lead to users not finding the information they are looking for.

 

 

Blackboard

In this registration form, the supporting text in the fields is cumbersome. It doesn’t give the user any more information it just adds to the cognitive load by adding to what the user has to read.

The field ‘Registering as’ is ambiguous and has no supporting information. Supporting microcopy would be useful here to let the user know exactly what is meant by this unfamiliar field.

 

Montblanc 

On Montblanc’s website, they use overly complex language. This may be a deliberate choice to support the brands’ image. While this is valid for marketing when considering the user experience clarity is more important than persuasion at this stage.

 



 

As with most things in life microcopy can be used for good and bad. Let’s take a look at a dark UX pattern that utilises microcopy.

 

Treatwell

In the booking process on Treatwell users are asked about marketing preferences. One of these options check the box if you don’t want to receive marketing updates and the other is check this box if you do want to receive updates. This deliberately confusing language is likely to confuse users into opting into at least one of the updates. While this may serve the business goal it may not be serving the users goal. Whether this is good or bad UX writing I will leave for you to decide.

 

 

In Conclusion

Good UX writing vastly improves the user experience, it builds trust and in many cases increases conversion and engagement. So there’s no better time to review the copy on your website or product to delight your users.


Three Things You Can Start Doing to Improve Conversion

So, you’ve got a website and people are visiting it, job done? The answer is a big no. Getting people to your website is one half of a task, getting them to do something once they’re there is the other.

Whether you’re selling a product, generating enquires or getting people to sign up for a newsletter, these actions are what are referred to as conversions and they’re a key component of your overall business strategy which will make or break your success.

The big question now is how do you get more people taking those actions which will result in your conversion rate increasing?

But before we get too far ahead, let’s all just get on the same page about what we’re talking about.

 

What Is A Conversion Rate?

A conversion rate is calculated by using the total number of visitors to your website against those who completed a specific goal, like those mentioned previously. Things that be described as a goal form an almost endless list; it really depends on the nature of the business you’re in.

 

How Is Your Conversion Rate Calculated?

The most common formula is one where you divide the total number of goals completed in a day, week, month or time frame you decide by the total number of visits to your website and then multiply it by 100%. So, if you have 100 visits to your page and three complete a goal, you have a 3% conversion rate.

There is a bit of a debate about whether unique visitors or total visits is the number you should be using against the number of goal completions for this formula, but the most important thing is to pick one and stick to it. Our suggestion is to use visits because:

1) Visits are more accurate than Unique Visitors.
2) Every Visit represents an opportunity to persuade or convert a visitor to a customer.
3) Measuring visits is based on fairly established industry standards

 

3 Ways To Improve Your Conversion Rate

There is a high probability that you’re paying to send visitors to your site through social ads, search ads or with a search engine optimisation company. A higher conversion rate means a better return on your investment. But beyond that, improving your conversion rate allows you to provide a better customer experience to visitors who are hoping to gain value from your site through a product, service or information.

Outside of this standard paid activity and optimisation that drives people to your site there are things that you can do, potentially with the help of industry experts, that can drive that conversion rate up.

 

  1. Run A/B Tests

We previously covered this topic in our article, What is A/B testing and why do you need it? But in brief A/B or split testing is a technique of identifying elements within a website or on a landing page that have the greatest potential to increase your conversion rate, whether it’s for performance, usability, accessibility or numerous other issues.

As an example, if you have two different offers for your product or service or maybe two different kinds of promotion and can’t decide which to use, you can perform an A/B or multivariate test to see which one gets a better response. The decision between A/B or multivariate testing will depend on the amount of traffic coming to your site in order to achieve statistical significance. For example, a low traffic site will take a lot longer to achieve statistical significance than a high traffic site due to the slower collection of data. You create or have created two versions of your page (design A and design B and sometimes, design C) with different designs, calls to action or message. The important thing to remember here is that you don’t test too many things at once. This is especially important if the differences are subtle, to enable you to identify which change actually made the difference.

Then by using tools specifically created to optimise testing, they will send a portion of your traffic to page A and others to page B and C, if you're using three. You can then forecast future projected performance based on the data you’ve collected. The page with better performance is the one to consider making live to increase your conversion rate.

You can continue to optimise the winning page to see if it is possible to further drive an increase in conversion rate.

 

  1. Eliminate Anything Resembling A Distraction

Website visitors are ultimately just people and we are often easily distracted. You can’t afford to have unnecessary images or content on your website slowing down the speed of your page or delaying your customers' understanding of what you have to offer. You want to slim down and remove any elements that are not crucial to emphasising what you’re offering so that you’re more able to get visitors to accept or engage.

A few things you can start with are:

  • Minimise links on your menu so your most important call to action stands out. If you’re using a campaign landing page, remove the menu altogether.
  • Always remember your primary objective – there is a reason ‘primary’ is used in the term. It’s fine to have multiple objectives, but they should all have a priority order to avoid compromising your primary.
  • Avoid any suggestions that your website visitors check out your latest social media posts or head somewhere else to check out more information. The very last thing you want to do is send them off-page and down a rabbit hole, never to return.

 

  1. Highlight Social Proof and Do A Little Showing Off

Social proof might be a term you’ve not heard of before, but it is essentially a digital translation of word of mouth or advocacy.

The undeniable truth is that people buy from people. Potential customers are more likely to make a purchase, enquire or sign up if you've been recommended by a mutual contact, a previous customer, or a trusted third party, or if they've been exposed to your social media content and built up some brand trust based on what you share.

This is why the business of influencers has become such a big market. Brands look for public figures that appeal to their target market and brand ideals and use them to promote their products to their fan base.

Examples of social proof include:

  • Reviews and customer testimonials: These are shared in the hope they will provide a reassuringly direct answer to a visitors’ most important question: “Will I be satisfied with this purchase/information/service?” These can take the form of written statements or as highly effective videos.
  • Case Studies: Often confused with a review or testimonial, these are actually a very different beast and really come into play when you’re offering a service. They allow you to talk specifics and to achieved results, with the added support of advocacy from the client or customer the work was done with. They can in most cases do far more convincing than any description you can come up with about the service you offer. They can again take the form of written studies or videos.
  • Existing customer numbers or number of products sold: This is a very effective benchmark for potential customers. It shows how many people trust your products or services.
  • Endorsements: Coming from key personalities and thought leaders can be worth their weight in gold, but they are worth more if they’re not paid for. Society has become a little more sceptical as a result of fake news and paying someone to say something about your product and service that appears to conflict with previous statements or expressed beliefs will not do you any favours.
  • Accreditations: SSL secure site icons, industry accreditations from people like HubSpot, Google, Trip Advisor, Feefo or Trust Pilot all build credibility. These vary by industry and there will be some that you know about that are specific to the industry you work in. They’ll help for products and services where you require the submission of personal data. You want to communicate that visitors can trust you to manage their information with care.

Having social proof can make you and your company instantly more trustworthy because statements about how your product delivers a positive experience come from unbiased sources.

Conversion rate optimisation is an endless journey and these tips are just a starting point. You should be able to see an uptick in conversions but it’s all about finding out what works and continually working toward making improvements to maximise your results.

Our experience team here at Eclipse are experts in this field and if you’ve got a specific question, no need a little more information or need some help, we’re here for you.

Reach out and we can see what we can do together to get you converting more.


More Good News for Online Retail

It almost goes without saying but Covid-19 has really changed almost all aspects of our lives and one of the things that changed the most is how we shop.

When surveyed as part of the Big Ask Report, almost half of UK shoppers said that they believed the Pandemic would leave behind a lasting impact on their buying habits.

Research conducted by O2 Business in partnership with Retail Economics for the Report revealed that 44% of participants think they will see permanent changes to the way they shop, with many saying they expect to buy online more regularly.

The survey also showed that 47% of people think the number of times they shop online will definitely increase.

 

The Numbers Speak Volumes.

At the peak of the pandemic, around a third of consumers, 34%, said they bought essential and non-essential goods online but that is just the start.

The research also showed that 45% of customers have now purchased a product online that they had only ever purchased in-store before the pandemic.

Jo Bertram, managing director at O2 Business, said: "As a technology partner to the industry, we wanted to find out what the tectonic shifts have been in how people have engaged with each other over the last decade.”

He added, “The effect the lockdown has had to the way we buy has been significant, but they've accentuated these shifts more than redirected them."

49% of consumers now spend more time researching products online even as lockdown eases and when they make a purchase, 83% of consumers will opt for home delivery over click and collect.

Richard Lim, chief executive officer of Retail Economics, said: "The impact of Covid-19 has re-wired the customer journey, leaving many retailers scrambling to assess the impact as they attempt to realign their proposition to meet a new normal.

 

What Does This Mean For Retailers?

For years we've seen a significant shift towards online and some of these behaviours will inevitably become permanent, with digital playing an incredibly important role.

"Many of these consumers are shopping for goods online for the first time, overcoming the barriers of setting up online accounts, entering payment details and gaining trust.” Added Lim.

It is the job of the retailer to enhance these processes and make them as easy and pain-free as possible. The customer is out there wanting to participate but if they’re faced with barriers, they’ll head elsewhere.

"The new normal will involve a step-change in the integration of digital technologies and retailers are assessing what this means for the number of stores, where they should invest and the potential partnerships that could be formed."

Looking for ways to be more easily found, offering truly exceptional shopping experiences and using technology that allows you to stand out from the crowd are all things that retailers should be looking at.

Having a CRO (conversion rate optimisation) plan for your digital store that can continually work on the customer experience is a great place to start. It will give you insights into how customers are currently shopping with you and find opportunities to improve and fine-tune to deliver an uplift in conversion.

And looking into technology like Augmented Reality can help you stand out from the crowd. It offers customers the opportunity to bring your products into their homes and experience it in an ‘as close to the real thing’ as possible without the need to head into a store.

These things will help you prepare and take advantage of this shift change.

 

How Can Eclipse Help

We’ve been building digital experiences for a long time and we pride ourselves on making them beautifully simple.

We unlock your trading potential, creating and supporting beautifully simple sites that are functionally rich and continually perform way above expectations.

Our clients enjoy seamless access to the best analysts, experts and technical resources in the sector. We’re proud of what we do and we’re incredibly good at it (and it’s not just us saying that).

Our Experience team works with clients every day to test their sites and work to create a better conversion rate for them.

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.

And when it comes to Augmented Reality, Our Augmented Reality E-commerce Solution, Ares, changes the game and is all about enhancing the online shopping experience for the end-user. It is about lifting product images from standard 2D into something experiential and visually impactful, that truly brings product shopping online to life.

Ares is dedicated to leveraging the power of AR and 3D for so much more than entertainment – it exists as your next step for achieving peak eCommerce performance.

And the reason it is changing the game is that it works straight from the web browser or mobile device, no apps or downloads required. It can be plugged into any website or e-commerce platform and Ares works on the latest Android and iOS devices.

Ares is a full end-to-end AR service for retailers. You don’t need to be an AR expert to get the best out of Ares.

Reach out to us and we can discuss how we can help you move with the shift change, maximise the opportunity and support you and help make sure that your business lives long into the future. No matter your size or specific industry vertical, our mission is to see you succeed.


What is a user journey map?

The size of the map can vary greatly depending on the number of steps, the subject (e-commerce, SaaS, service etc) and the complexity of the interaction. However, the outcome pays huge dividends in producing better informed solutions and avoiding retrospective design and engineering.

Mapping out a customer’s experience encourages you to consider every aspect of a persona in terms of emotions, thought process and intentions and is just one of the many tools to inform User-Centred-Design. Analysing the map will provide a deeper understanding of pain points and allow you to better understand the reasons for declining performance or other KPIs.

A carefully considered user journey map helps you identify and understand reasons for declining satisfaction scores or business objectives. Focus is put directly on the users actual experience and provides a comparable view vs the intended experience.

COMPONENTS OF A JOURNEY MAP?


PERSONA GOALS

This is a profile that represents a part of your user base which informs the data within the user journey. Each persona will have different considerations, thoughts and interactions and will steer the user journey and is written as a user story. A user story is deliberately succinct and is provided as a single sentence along the lines of “As a [persona], I want to [goal], so that [benefit].

A carefully considered user journey map helps you identify and understand reasons for declining satisfaction scores or business objectives. 

METRICS

This is a profile that represents a part of your user base which informs the data within the user journey. Each persona will have different considerations, thoughts and interactions and will steer the user journey.

EXPERIENCE

The experience section highlights each stage of the journey, along with the positive and negative feelings that persona has throughout each stage. This provides a high level indication of pain points where there may be opportunity. This can help better inform what the user wants or expects to see at that moment in time, as well as the tonality on how things should be communicated.

MORE DATA

We also apply another level of data from analytics, screen recordings and any other tools that may be in place, that you often don’t find in many other user journey maps. This data may could be anything from conversion rates to time on the screen. Where data such as percentages can provide an idea of aggregated behaviour, duration indicates a level of interest, distraction or confusion at that stage.

Cross referencing this with the other data in the user journey map provides another level of clarity of the issues and (this is an important one), the opportunities in their experience. It’s one thing to identify an issue, it’s another to solve it (we’re pretty good at that too).

Aggregated data of persona using all available data sources.

MOTIVATIONS

Motivations are based around the drivers for that persona. A personas motivations can differ quite dramatically and may be based around their character traits. For example (in its most simplistic form), a persona who is particularly busy and impatient and who may be travelling whilst going through the journey, will be motivated by speed and spending as little time as possible. Whereas, a persona who is casually browsing in their free time is more likely open to spending more time and learning more in the process.

There are multiple scenarios and personas for every product or service, which is what makes these journeys so important. In almost all cases, one size most certainly does not fit all. The fluctuation of these motivations as they go through the process will often rise and fall at each stage of the journey.

Motivation fluctuations at each stage.

USER CONSIDERATIONS

This highlights the considerations a user makes, also based on their persona. This will include aspects such as their character traits, marital status or financial circumstances.

For example, making a major purchase will vary from someone on low income vs someone on high income, therefore this persona would be spending far more time thinking about the financial element. This helps inform your design strategy to design an experience that helps the decision making process of that persona.

Potential blockers to conversion.

OPPORTUNITIES

Opportunities are insights gained from mapping. They will help inform your design decisions to optimise the user experience. When you take all this information at each stage, you are able to understand the best way to deliver the right information, at the right time, to the right people. There may be upsell or cross-sell opportunities depending on where they are in the buying process, or maybe at this particular stage of the journey they have no interest in cross-sell and you can identify ways of helping them through the process.

Wherever the user is in the journey, this provides focus on the opportunities at each stage and make design decisions to capitalise on them.

Potential to change in favour of KPI.

WHY USE A JOURNEY MAP?


Mapping out a customer’s experience encourages you to consider every aspect of a persona in terms of emotions, thought process and intentions and is just one of the many tools to inform User-Centred-Design. Analysing the map will provide a deeper understanding of pain points and allow you to better understand the reasons for declining performance or other KPIs.

A carefully considered user journey map helps you identify and understand reasons for declining satisfaction scores or business objectives. Focus is put directly on the users actual experience and provides a comparable view vs the intended experience.

CONCLUSION


Utilising user journey maps in this way allows focus on each stage of the journey and is just one of the many tools in the UX toolkit, but one that is very important. User journey mapping can be a complex process. As highlighted above, adding any additional data and research, you can access to each persona and journey will more provide a platform for more concise decisions and design better solutions.

There’s also no such thing as ‘done’ when it comes to the personas and journey maps either. These should be revisited, reviewed and updated regularly as economic and social climate changes users online behaviours.

The map above is just one simple example a quick overview of what they contain. Hopefully you’ve found this useful and feel inspired to create your own, but drop us a line if you’d like a little help – we’d love to talk to you.


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.