Top 9 Elements To A/B Test On Your Website

A/B testing, also known as split testing, is where you create two versions of a web page and see which version drives more conversions.

You can see this as continuous improvement where you regularly test different elements of your website and improve your conversion rates.

To start an A/B experiment, you’ll first need to decide which element on your web page that you would like to test.

Here are some elements that you can consider testing.

Disclosure: Some of the links below are affiliate links. I will earn a small commission, at no extra cost to you, if you purchase through these links. Your support encourages me to continue blogging and help with the costs of hosting this site. Thank you!

1. Call-To-Action (CTA)

As the name suggests, call-to-action (CTA) is where you tell the audience the specific action you want them to take. This should be a word or phrase that provoke an immediate response or encourage an immediate sale, newsletter sign up etc. It should be a valuable action for your business.

CTAs usually include an action verb where you make your audience do something. You can also encourage audience to take prompt action by including “now” or “today”. Some common CTAs are “call now”, “find out more” or “visit a store today”.

This is the most impactful element. Hence, I strongly recommend that you A/B test this first. If your CTA resonates with your audience, they are more likely to click on the button and do whatever you tell them to do. Or if your CTA is eye-catching, you’ll arrest their attention and make them consider taking action.

Check out the 5 must-haves of a converting call-to-action!

Source: Platonik

2. Hero Image

When you land on a web page, the first thing that will catch your audience’s attention will be the hero image above the fold.

As the first visual element that your visitors encounter, this image will give a glimpse of the most important content on the page.

This image is thus prominently placed, usually in the front and center.

Here are some common hero images that businesses use

• Human Face: Evoke warmth. Close the distance between your brand and audience. Hence, it’s more personal because it builds a relationship/connection.
• Product/Software: Direct and straightforward about what you’re selling. However, your brand may come across as cold and distant.

You can also use other formats besides static images like

• Video: Showcase how your product or service works but it may be distracting. Hard to see headline due to the moving background.
• Slider/Slideshow: Scroll through many images and text and effectively tell a story. The key is to focus on 1 message or CTA.

3. Headline

If your hero image is clear and direct, your audience might get your message immediately.

Otherwise, you’ll definitely need a compelling headline to convey your message, arrest your audience’s attention and perhaps, encourage them to take action.

As David Ogilvy mentions, “On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar.”

You should thus spend 80% of your time and effort to get your headline right.

Writing a headline is easy. But writing a good headline is hard. It requires copywriting skills and testing.

Check out copywriting classes like Copywriting For Crafters or Write Copy That Compels And Sells. Or watch streaming broadcasts of CreativeLive free online classes. You can also join online courses at Fiverr Learn.

You can test the various copywriting strategies you learned. Or just use any of the copywriting tips I covered in my blog.

Source: QuickSprout

4. Body Copy

You shouldn’t neglect your body copy too. Body copy plays a key role in persuading your audience.

If your headline manages to intrigue your audience, they’ll continue to read the rest of your copy. Your body copy will thus have to push them towards the CTA. Every word should encourage them to take action.

Your body copy should add to the headline. For example, you can highlight facts about your products or services or include customer testimonials.

Your body copy should reinforce your headline. If your headline is the key message that you want audience to know about your product or service, the body copy should thus reinforce this message. You can have a paragraph or section to elaborate more on the benefits of your product or service.

Again, you can test quite a few things such as

• Tone
• Long Copy vs Short Copy
• Features vs Benefits

Source: By Dan Shewan via WordStream

5. Layout

White space, also known as negative space, is the space between elements on a web page. In other words, it’s the blank or empty space between text, images etc. White space directs the eyes and helps users to navigate through the content.

In fact, using white space to highlight or emphasize important elements on a website increased visitor comprehension by almost 20%.

Therefore, we need to keep white space in mind when creating the layout of your web page and content. Ensure that your web page isn’t cluttered or your audience will have difficulty reading the content. It has to be easy on the eyes so they can quickly scan and linger on content that interests them. And most importantly, so they can stay engaged.

There are many things you can test

• Line Spacing
• Paragraph vs Bulleted/Numbered List
• 4 box grid vs 1 column with 4 sections
• How sections are arranged: eg. Version A has form section at the top while Version B has form section at the end of the page (before FAQ)

Source: By Karla Cook via HubSpot

6. Font

Okay, so I’m not a designer. But I’m quite fussy with fonts.

If there’s an article that has small or hard-to-read font, I immediately close the page without bothering to read the content.

So the first thing you need to do is choose a legible font and ensure the size is readable. You can shortlist a few fonts that align with your brand.

Again, you can test things like

• Serif vs Sans-serif
• Font Size: This makes a lot of difference especially for older audiences who need bigger font like me hahaha
• Font Color

I would go a step further and also test things like

• Letter Spacing
• Font Weight/Style: Light, Regular, Bold, 600, 900

Source: Wikipedia

7. Color

Colors are associated with different emotions and meanings.

• Blue: trust, peace
• Green: environment, organic, nature, health
• Yellow: happiness, fun, friendly
• Orange: warmth, urgency (not as intense or aggressive as red)
• Red: passion, excitement, power
• Black: luxury

Therefore, you might consider testing different color schemes and see which works best for your brand.

Or you could start simple and just test the color of your CTA button or font.

Source: By Ott Niggulis via conversionxl.com

8. Button

Button is another crucial element in web design. It’s like the middle man between your target audience and your products/services.

In addition to your CTA button, you might have a button to

• Scroll down the page
• Jump to the form section

Your buttons should first and foremost look clickable. It shouldn’t blend into the background. It needs to stand out. It should be prominent such that users can easily find these buttons. It needs to be direct so users know exactly what each button does.

In addition to testing button color, you can also test button shape, button location and button copy. You can also consider adding animation like making the button change color when a cursor hovers over it.

Source: By anthony via UX Movement

9. Style

This is the overall design of the web page.

Consider how you want your target audience to feel when they land on the page. For example, you may want to change from a cold corporate design to a casual friendly design.

This means that everything has to change, from images to copy to color. And maybe even the layout too.

However, this is quite a big change since you’re changing many things at the same time. Hence, I wouldn’t recommend it because it’s hard to pinpoint which exact change improved or worsened the performance of your page.

Moreover, you should have already discussed or reached a consensus on what the overall style should be like when you launched your website (which probably aligns with your brand).

Bonus Tip: Test One Element At A Time

As mentioned earlier, you shouldn’t be changing many things at the same time because this complicates the result. You wouldn’t be able to conclude confidently that the result was caused by the change in image or copy because you changed so many elements.

Thus, it’s better to just test 1 element at a time. This makes it easier to attribute the results.

If you have time or budget constraints, I highly recommend that you test the following 3 elements. They have the strongest impact on conversions.

• Call-To-Action (CTA)
• Hero Image
• Headline

Photo by jdn2001cn0 on Pixabay

Bonus Tip: Analyze Your A/B Test Results

After running your A/B test, you will need to analyze the results. Depending on your objective, you might evaluate performance based on certain metrics.

The key is to continuously learn from the A/B tests and optimize your website.

There are many tools you can use to analyze the results such as Divi Leads from Elegant Themes.

Now It’s Your Turn

Have you run an A/B experiment on your website? What elements did you test? How was the performance?

Do you have any tips to share about A/B testing?