September 13, 2017
When somebody talks about using A/B testing on a webpage, they are usually doing so for the purpose of conversion. However, as a Web developer, there is another benefit you can gain from A/B testing, and that is learning how people react to your design by testing the overall response to your page and site designs. Using conversion results, tracking page views, and recording bounces on your landing pages can show you just how effective and aesthetically pleasing your design is.
Conversion and decreasing bounce rates are the primary ways to know your page is hitting a good chord with others aesthetically. But before we dive into how to use A/B testing, we must quickly define it.
What is A/B Testing?
One of the best sources on A/B testing that the Internet has to offer comes from Instapage, which has a free six-chapter (page) resource on the matter. “[A/B Testing] involves testing an original design (A) against an alternate version of that design (B) to see which performs better,” it explains. “That original design is also known as ‘the control’ and the alternate version is known as a ‘variation’.”
So in other words, A/B testing is making variations to a page to see if it performs better under the former or latter design. A/B testing can deal with small variables that are changed or big page reconstructions.
For instance, a common one talked about is “call-to-action” buttons. Meaning, your “add to cart” or “subscribe to our e-mail list” type of buttons on a website. Research shows that the color of those buttons makes a difference in many cases as to who buys a product and who doesn’t. Red is commonly considered the best. Changing the button from black to red then waiting to see if your conversion rates change is an A/B test, black being A and red being B.
Conversion Reflects on Your Design Skills
There should be demand for a product before a business starts selling it of course, but good presentation is necessary for beating competition as well. Higher conversion rates may reflect on the design of your website.
If your products are converting more after your B change, your change was beneficial. If they’re not converting as well, your change may not have sat well with potential buyers and site visitors. And of course, sometimes these changes don’t matter and you may not see any difference in sales before or after your A/B test.
To choose what variables on the page to mess with, start with the aspects of your page that tell the site visitor about your products and what they can purchase. Different headings, moving the navigation bar, changing colors/color schemes, making descriptions shorter, changing pictures, or recreating the entire format of a page are all things you can change to try boosting conversion rates.
Keep in mind that if you want to know exactly what changes bring on these conversion rates, then the less the better. For instance, instead of changing the format of the page entirely, your A/B test could involve a button color switch first. Or moving the navigation on a page.
Your site changes can be the determining factor in how long people stay to check out your page. We call this “bouncing” — when people visit a webpage and immediately leave. Making your site more eye-grabbing upon arrival will absolutely help with this. Your design in general may even have something unique that invites people into staying, such as a “welcome” text or a strange heading picture.
Color has a lot to do with this. Colors like blue are inviting while colors like red are more abrasive. A good color scheme for the entirety of a page should be eye grabbing and make it easy to read anything written on the page. The content, in other words, should “pop.” So for an A/B test, it may be wise to assess the color of your page in comparison to the kind of feeling you’re trying to get the site-visitor to experience, and adjust accordingly.
In a Hubspot infographic about decreasing bounce rates the authors give a list of Web design tools that do just that.
• Enhance Usability (Responsive layouts, readable and followable text);
• Speed Up Page Load Time (Remove pop up ads and self-loading multimedia content, open external links in new tabs and browsers);
• Provide Quality Content (clear headers and subheads, stylish copy and images, clear call to action links and buttons).
Messing around with some of these things – font, headers and subheads, removing obstacles for usability – could easily be the difference between a bounce and someone who stays interested in what you’re doing.
It is necessary to address two things here specifically. The first is A/B testing with different title tags, header tags, and meta descriptions.
If your site isn’t findable by Google for the keywords you want to rank for, and you haven’t paid much attention to things like your title tags or your H1 and H2s, get in there immediately and make the proper adjustments. Test your title tag and your meta description over at Moz.com. Then make sure the rest of your code, such as that which includes H1 and H2 tags, is in order and arranged properly. It may take a while, but the more you promote your page, the more these code changes will help in boosting your rankings.
Second of all, optimize your photos for SEO as well. Granted, Google can’t see a photo like humans do, so you may be wondering how this is possible. Fear not, the answer is found!
Tuts+ has an entire resource on this very thing. Google recognizes photos for being photos, but it needs some extra help to know what’s in the photo. Ever wonder why on Google images you can search “car” and find a car? Well, the top results probably are optimized for that keyword. So go ahead and try it, optimize your pictures (see the Tuts+ article linked to a few lines up to learn how), and you might see your pictures ranking for your keywords in the future.
Again, SEO A/B tests may take longer than simply watching conversion and bounce rates but they can be extremely beneficial in the long run.
If you have more experiences with A/B testing in sites you’ve designed or been hired to, I’d love to hear about them. Let me know in the comments.