Learn the best practices and common pitfalls to avoid when optimising your website for conversions.
Learn the best practices and common pitfalls to avoid when optimising your website for conversions.
Seeing Is Believing
You hardly ever buy something without seeing it, right? Before making a purchase online, your prospective customers will want to see exactly what they’re buying.
1. Use Good Product Images
Adding images therefore, is vital in allowing your products to shine! Your images should:
- Be large, or a good enough size that the customer can see the product clearly.
- Be high resolution.
- Provide detailed views and allow the users to zoom in.
- Show the product in context of its use.
We can see from the example below, that Next allows users to zoom into the products to see these details as well as envisage how they look when worn.
2. Add Product Videos
By extension, videos are another great way of allowing your products to speak for themselves.
- Use videos on product pages to show your products in use.
- Use video testimonials from happy customers – this is a great way of inspiring more trust within the product and your brand as a whole.
- Use a video on the Homepage to explain the offered service and its benefits.
For example, headphone retailer Nura, have included a video showcasing their latest pair of headphones on their product page.
The product video features customers and audiophiles trying out and reacting to the headphones.
A great way of diversifying your traffic whilst also improving UX is to host your brand videos on a YouTube channel. This allows you optimise your videos for YouTube, but also gives you an opportunity to embed these clips directly on your web pages.
eCommerce CRO
If you have an online store, these simple and effective recommendations are simple yet effective ways to optimise your core landing pages.
1. Optimise Shopping Cart & Checkout Pages
How many times have you left a product in the shopping cart without checking out? These steps should help prevent customers from doing just that.
- Ensure your products are displayed with clarity – all details about the order should be clearly laid out.
- Your customers need to be in control, make it as easy as possible for them to make changes to their order (update quantity, remove products, edit shipping info, etc.)
- If you have coupon codes, don’t make them too prominent – the main CTA (Call to Action) button should be the “Checkout” button.
- Include trust indicators and reassuring elements to remind the customer about shipping and payment security.
- Show CTA buttons in the Above The Fold area.
- Emphasise any potential upsells (i.e. if you have a buy 2 get 1 free offer and the user only only added one product) and “Continue Shopping” option after a user has added a product to their cart.
- Offer live chat support and clearly display contact information.
- Offer Free shipping whenever possible – how many times have you not made a purchase because you couldn’t justify paying the shipping cost?
- Design a payment form that looks like a card to simplify the input of payment/credit card details.
- Offer multiple payments options – PayPal, Credit/Debit card etc.
2. Defer Account Registration
The process of creating an account can easily deter a user from completing their purchase online.
- Do not force customers to create an account in order to complete their purchase, instead offer guest checkouts.
- The terminology you use plays a role in how a customer perceives and interacts the site, for example, use “New Customer” instead of “Register”.
- Wait until after the user has completed their order before offering account creation on the “Thank You” or “Order Confirmation” page.
- Make the registration process incredibly easy – only ask for the most important information.
- Account registration can be offered with an incentive upon completing the purchase.
- Registration using social logins.
3. Include Product Reviews
An important trust signal, product reviews from happy customers are a great way to help users in their decision-making process and help alleviate any worries that they may have had before.
- As mentioned before, try to include video testimonials.
- Show as many details as possible on the people who left the review.
- Include star ratings, average star rating to allow users to quickly gauge the consensus on the product or service.
4. Optimise Category Pages
Making it easy for users to find the right products that they’re looking for is key – so here are some tips on how you should go about improving your category or collections pages on your website.
- Allow users to narrow down the choice of product
- Use good filters
- Include product badges
- Show user ratings
- Allow users to sort products
- Price – high to low, low to high
- Ratings – highest rated, lowest rated
- Best Selling/Most Popular
- Add details of products to give users quick information about the product
- Price
- Images
- Short product descriptions
- Remove any distractions i.e. links to blog articles.
- Use breadcrumb navigation – this helps make navigation easier for the user and reduces the number of clicks as well as the bounce rate.
- Use clear CTA buttons without rushing commitment – the copy you use on your category pages and CTA buttons is really important. For example, using “Buy Now” might not be the right choice as users may want to see the products and read about the details before adding the item to the cart. Something like “View More” or “Add to Cart” would be more appropriate.
- Offer the option to add products to their wishlist – this invites users to create an account too, so other marketing strategies could be implemented with their details.
5. Improve Internal Search
You want to make it as easy and simple as possible for users to search for products or services that they’re looking for.
- If you have more than 20 products, add internal search.
- People who search tend to convert more.
- Make the search box bigger.
- Auto-complete.
- How does it avoid typos? Offer alternative products.
- How does it avoid “No Results” found? Offer other products. Avoid dead-end pages.
6. Write a Strong Value Proposition
A Value Proposition communicates what is in it for the user, what they’ll get. Essentially, it’s a promise of the value to be delivered and should be placed on each of your key landing pages.
Here are some tips on how to write a strong value proposition:
- Communicate solutions or benefits that can be quantified.
- Include simple language – clarity is more important than persuasion in this case.
- Include boosters for Value proposition
- Free Shipping / Next Day Shipping
- Free bonus with purchase
- Free setup
- No long-term contract
- Money-back guarantee
- Customisable
- How to craft a good value proposition?
- Provide a reason to buy
- Make it clear who the target audience is
- Make it clear what value the customer will get from it
- Make it clear what sets you apart from your competitors
- What does your product do better than anyone else?
The value proposition from rideshare company Uber servers as a great example.
The proposition highlights exactly why Uber’s service is better than that of a traditional taxi. This achieved through the tempting copy like:
- One tap and a car comes directly to you
- Your driver knows exactly where to go
- Payment is completely cashless
Each of these points explicitly express a benefit to the prospective customer.
General Optimisations
Here we will go through some tips that we like to look out for and apply to just about any web page on a website.
1. Make Your CTA As Big and Clear As Possible
You want the call to action on your web page to be one of the first things that the user sees – it needs to stand out and grab their attention.
- Each page should have one primary CTA button and ideally, a second less dominating CTA button.
- Use colour, font and text size, contrast to emphasise their importance.
- Use the right copy – this should be specific, convey a benefit to the user, and contain a trigger word. Use language people will understand as opposed to niche specific jargon.
- Choose colours that convert – the colour itself makes little difference on its own, what’s more important is how this changes the visual hierarchy of the page and how it makes the CTA button stand out.
- Reduce the risk and inspire trust – include incentives like ‘Money Back Guarantee’ to ensure satisfaction, ‘Lifetime Warranties’ to guarantee quality, ‘Try It For Free’, etc.
2. Optimise Web Forms
Convincing users to fill out a web form can be incredibly difficult – here are some tips on how to ensure that you make this process as swift and simple as possible.
- Set clear expectations and be transparent upfront about what filling out the web form entails i.e. “Takes only 20 secs”, “Fill out the form and get access to…”.
- Minimise the number of required fields – only ask for info you absolutely need and avoid optional fields.
- Intentionally increase friction to improve lead quality – the quality of leads is higher when people are more willing to complete more fields. Long and clear forms enable businesses to stop wasting time on unqualified leads.
- Use multi-step forms or single-step forms that are organised into different sections – this reduces the perception of any friction.
- Start with easier fields – Commitment (sometimes referred to as Consistency) is one of Cialdini’s 6 Principles of Persuasion and states that once users have committed to something, they will be much more likely to continue till the end.
- Dropdowns? Aim for no more than 15 choices
- Radio button? Aim for no more than 5 choices
- Password fields – remove the confirmation field, and add the “Show Password” text instead.
- Feedback error validation – avoid any risk of users getting error messages, this may put them off from continuing. Instead, set clear instructions and expectations.
- Real-time inline validation i.e. green checkmark when a field is correctly filled out
- Let your backend code do the formatting and processing of the information filled out
3. Making Your Design Persuasive
Understand your audience and persuade them in their decision-making process by making the design of the page persuasive.
- Clarity – ensure you get the core points of your page across clearly.
- “What is it?”
- “How is it useful?”
- “How easy is it for users to find what they’re looking for?”
- Visual Appeal – design has more impact than the content itself, in fact according to a Google study, it takes only 50 milliseconds for users to form an opinion on a website.
- Being familiar with the experiences and language they’re expecting can be incredibly useful for increasing conversions.
- Cognitive fluency (or Processing Fluency) – How easy is it to think about something? If it’s easier to understand, the user is more inclined to trust it.
- Prototypicality – How similar is the product/service to others in the same category or industry? We normally want things to be the way we expect them to be so try to avoid weird or unusual layouts.
- Habit – How well does it match previous, similar experiences that the user may have had? Use their current habit to persuade them.
- Visual Hierarchy – draw the user’s attention to the most important information.
- F Reading Pattern – this refers to the way our eyes move when we read content online for informational or text-heavy pages.
1. Across the top of the page to read important headlines
2. Down the left side of the page to view numerals or bullet points
3. Finally, across the page again to read bolded text or subheadlinesAlign the most important information to the left and make use of short, bolded headlines, bullet points and other attention-grabbing indicators to break up paragraphs.
- Z Reading Pattern – this refers to the way our eyes move when we read content online for web pages where information is not necessarily presented in block paragraphs.1. Across the top of the page
2. Down the opposite corner at a diagonal
3. Finally, Across the bottom of the pagePosition the most important information in the corners and orient other information along the top and bottom bars to connect the diagonal. See an example below.
- Whitespace – use whitespace to improve the focus and cut through the clutter to signal importance.
- F Reading Pattern – this refers to the way our eyes move when we read content online for informational or text-heavy pages.
- Maintain the user’s attention at all costs – use pictures, images of people, contrasting colours, product badges, headlines, sub-headlines.
As we’ve mentioned several times throughout this section, each of these recommendations are incredibly simple yet effective, and have helped improve our clients’ conversions significantly.
HotJar
Once you’ve carried out your quantitative and qualitative analyses to tell you how users interact with your website, you need to design, implement and test the improvements that you’ve made.
There are several tools out there that enable you to achieve powerful results, but the tool we at SUSO use is HotJar.
Here are some of the core features that HotJar provides:
- A/B testing – helps you to test several variations of a page to find which one converts better, for example ,you may want to test whether a larger font size for your CTA converts better than the original smaller font size.
- Website heat map and session recording – These powerful tools allow you to see which parts of your page users interact with the most and spot user trends on which products or pages users are looking at the most etc.
HotJar Heatmap Tracking Example
HotJar Session Recording Example
- Conversion-tracking Analytics – allows you to track and monitor the conversions on your website i.e. you can see where visitors are dropping off on your website or how your forms are being used etc.
- Website feedback polls – helps you to collect qualitative feedback from visitors and quantify it, enabling you to compare the before/after response to any changes that were made.
