A good Look & Feel of your website has higher conversion rates and is easier to use for your visitors. You may have a very nice business but what you really want is people buying your products and using your services. Therefore, you really want to optimize your website and ensure a high conversion rate!
In this field, you’ll find plenty of recommendations of what may or may not work when designing a website. However, before applying any of these recommendations, you should be sure of what are the preferences of your visitors. The best way to ensure this is to test different alternatives.
In this post, I’ll like to share with you three well-known tips for getting a well-designed user interface and how they have been put in practice by some of our clients, including the results they’ve obtained with Nelio A/B Testing.
Tip 1: Sell Benefits, Not Features
One of the most common mistakes when creating a web page and writing marketing messages is focusing on the “features” of a product or service instead of the “benefits” it would provide to your client. Benefits offer solutions to problems that your market is trying to solve, and appeal to the emotions that motivate people to buy. Features, on the other hand, are often technical and irrelevant.
Theodore Levitt, a well-known professor at the Harvard Business School, used to summarize this concept to his classes with the following example:
People don’t want to buy a quarter-inch drill. They want a quarter-inch hole!
But this notion can be extrapolated to any service or product:
People don’t want to buy web hosting, they want their websites online and accessible to visitors.
People don’t want to buy a hair-cut, they want to look great!
Let’s see how it has been put in practice by one of our customers with a low traffic website that offers digital courses (audio and DVD) produced by experts in their area. He created with Nelio A/B Testing a Split Testing Experiment of Pages in the Homepage. The goal of this A/B testing experiment was to make visitors subscribe to any of the available courses. The layout of the original version was as follows:
The alternative version included a great description of the benefits of the courses in the Homepage. In fact, just four lines of text were added:
Note that with this tiny changes the results were amazing! After four days of running the experiment:
- 6 from 87 visitors to the Original version subscribed to a course. This is a 6.89% conversion rate.
- 9 from 40 visitors to the Alternative version subscribed to a course. This is a 22.25% conversion rate.
This results in an improvement of 226.25%. The alternative version wins against the original one with a confidence of 96.86%.
What does this mean? Roughly speaking, if until now, this customer was able to sell one course for every 15 visitors, in the future, applying the winner version of the page, he might be able to sell a course for every 5 visitors.
Second Tip: Size Matters
I strongly recommend the post of Laura Franz, Size Matters: Balancing Line Length and Font Size in Responsive Web Design were she analyses how people read, and the relation between the line length (measure) and the amount of text visitors read.
Taking into account her recommendations, an interesting type of experiment that you should perform in your website is a Split Testing Experiment of CSS with different font sizes for your texts.
Let’s see what is testing one of our customers, a Health Service provider. In her website there is information about the different type of services offered, the list of doctors and specialists that offer said services, and a blog with the most recent news in this area.
The landing page has a two column layout where the left column has a long description about the services offered and the team. On the right side there is a video, and below visitors can find a summary of the headlines of the most recent posts published in the blog.
The customer has created a CSS Global Experiment. The goal is that the visitors end-up making an online appointment. The sizes of the fonts of the original version were the following:
body { font-size:12px; line-height:20px;}
h4 {font-size:18px; margin-bottom:10px;}
#sidebar.widgettitle {font-size:22px; line-height:20px;}
The alternative version increased the size of the fonts of the text, so the following CSS changes were made:
body{font-size: 15px; line-height: 22px;}
#main h4{font-size:19px; font-weight:normal;}
#intro h4{font-size:19px; font-weight:normal;}
#sidebar.widgettitle{color: #00437f; font-size:19px; font-weight: bold;}
Which were the results in this case?
- The Original Version (with smaller fonts) obtained a conversion rate of 0.28%: 3 out of 1076 visitors made an online appointment.
- The Alternative one got a 1.12% connversion rate: 13 out of 1163 visitors made an online appointment.
This is a 301% improvement of the alternative version versus the original one with a 97.03% of confidence. This kind of improvement shouldn’t be ignored at all!
Nelio A/B Testing
Native Tests for WordPress
Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.
Tip 3: Headlines That Drive Traffic
If you are a publisher or blogger, probably one of your main concerns is to know which headline will better engage your readers. In this case, the split testing experiment of Headlines is the perfect tool to check which headline works better than the rest. This experiment provides a really easy way to compare an original headline (the title, excerpt, and featured image of a post) versus one or more alternative versions in order to determine which one is more effective improving your site.
There are quite a lot of posts in marketing blogs describing which are the best headlines you should choose. Some examples are the post of Jeff Bullas: 10 Awesome Heatdlines that Drive Traffic and Attract Readers or the one from Courtney Seiter: 8 Winning Headline Strategies and the Phsychology Behind Them, among others.
It seems to be an agreement among the different types of headlines that work better:
- The “List” headline. Example: “100 ways to improve your site”
- The “How to” headline: Example: “How to Improve your WordPress site”
- “Best and Worst” headline. Example: “Things you Should/Shouldn’t Do in a Meeting”
- Facts, figures and statistics headlines. Example: “Awesome Facts and Statistics about Asian Cuisine”
One of our customers, who owns an Online Women Magazine, is continuously testing the headlines of their posts. Let’s see some results:
Original version (modified for the sake of privacy):
10 Worst Ways to […] That’ll Never Work
Alternative version:
10 Worst Ways to […] (and Best Ways to […])
According to what is recommended, the alternative version has better ingredients to attract more people since it includes the “best and worst” in the same headline. However, the results show the opposite.
- Original version: 101 out of 2476 readers ended up reading the post. This is a 4.08% conversion rate
- Alternative version: 72 out of 2649 readers were to read the post. This is 2.71% conversion rate.
In this case there is no improvement with the alternative version. The original headline wins against the alternative one with a confidence of 99.12%. This means that even the recommendations made by experts should be tested in your site, because it may be the case that your audience is expecting something different.
As you’ve noticed, the three type of experiments above show how easy is to test several changes on a website, and that such changes may result in big variants in the conversion rate. So, what are you waiting for testing these experiments in your website? Feel free to share what are your preferred changes to A/B test and the results you’ve obtained!
Leave a Reply