How to Create and Use Heatmaps Efficiently

create-heatmap

You are getting traffic to your website but the conversion rate isn’t what it could be. You’ve set up testing but you want to know where on your site visitors are clicking. Visual Website optimizer’s heatmaps tool allows you to do just that.

What are Heatmaps?

Heatmaps are a tool that let you see and measure how your visitors interact on your site during different test variations. The heatmaps show different colored images of where your visitor clicks, whether it is a link or just the headline, images or any other element. When you use a heat map, you can actually see where your visitors are clicking on what they think is a link. The tool lets you see the clicks from different areas of your page. This is shows you that if you had, for example, two sign-up buttons on your page in different locations, you can see which ones gets more clicks.

How Do Heatmaps Work

Heatmaps show up as different colors within your website. You are probably familiar with the heatmaps used in weather maps, where color is used to translate the value of the temperature or rainfall.

In the Visual Website Optimizer heatmap, areas that receive the most clicks or mouse movements will appear in red. The areas that are pretty much ignored appear in blue.

 2-heatmap

 

Advantages of Heatmaps

There are many advantages for using a heat map on your site.

Heatmaps show what areas of your website your visitors don’t care about. Your visitors might be ignoring certain lines of text or certain links. Heat maps help you clear out unnecessary elements.

Heatmaps let you see the areas where visitors are drawn to. You can put your products or sign-up buttons in those areas so they get noticed from your visitors.

Heatmaps track where your visitor is clicking or hovering.  It shows which pages your visitors want to explore.

Heatmaps help you arrange your navigation by revealing your most clicked on pages and the best place for those pages is.

Tip: The top position in your navigation is the second link, the one directly after your home page link.

Heat maps let you study your headlines so you can see where and if you need to shorten it.

How to set up Heatmaps

Setting up a heat map test begins by clicking on the “heatmaps and clickmap” button under create a test tab in your Visual Website Optimizer dashboard.

Next you need to enter in your URL and then click on the Create test button.

Enter the details about the test in the About test section.

In the “Test Pages and Audience”, section choose which visitors you want to track and on what pages to track. For multiple pages, click on the “change” button and use the URLpattern button to add more pages.

 3-test_pages

Click on the Change button on the side of the “Target test to Segment” area to pinpoint your visitors. Then you need to select your conditions for the test. In the “Other Settings” area, you can choose more than one domain to be used in the test and integrate your Google Analytics account as well.

Once you’re finished click on the “Create Your Test” to begin testing.

You can find you heatmap in the tab.

Tips for Sucesss

Use the information from your heatmap report to make your design and content the best it can be for visitor interaction.

You can get your reports several ways. Export as a PDF, send it to your email or export as and Excel spreadsheet.

Your heatmap will overlay on the test variation previews. The actual heatmap might be different from the preview. Click on the snapshot to see the actual one.

Common features available in the heatmap include the GoTo URL to get to a specific URL on your website. The Intensity feature lets you slide to increase or decrease the intensity of clicks that are visible. It also increases the opacity of the overlay.

 4-intensity

Use heatmaps with A/B testing for more effective analysis of the information you get from your tests.

Use heatmaps to determine if links need to be moved or text needs to be shortened.

Pay attention to how people read your page according to the heatmap information.

Test for banner, or the elements that look like advertisement banners, blindness among your readers.

Use heatmaps to see exactly where visitors are clicking and hovering on your website. With Visual Website Optimizer’s easy to use heatmap tool, you can see what areas need to change, what links are getting clicked on and even which pages get more mouse movement.

Setting Up A/B Testing in Visual Website Optimizer

testing

Every business website owner wants visitors that convert. This conversion rate is the rate at which your website converts or changes its visitors into buyers or whatever you want the visitor to do. But how do you know what elements are converting?

Visual Website Optimizer is a testing tool for marketers. It allows them to create different versions of their website or landing page with a simple point-and-click editor. They can then see which version gets the best conversion rates.

 

What is A / B testing?                                                       

If Your Website Was a Piano…A/B testing is often called split testing. It is the process of comparing two different versions of a web page to find out which one is performing the best.  What happens in an A/B test is you take two web pages showing the different variations to the same types of visitors at the same time. The one that you find giving you the best conversion rates is the one that you go with.

For example you create two different headlines to sell a product. One is headline A while the other is headline B. One half of your visitors see headline A, the other half sees headline B. Your results come from the number of orders you get from each headline. This can easily be done with Visual Website Optimizer software.

By measuring the performance of the two separate variations you are determining the rate of the site converts visitors to your goal.

 

What should you test?

Just about any element on a website can be A/B tested. For instance, headlines and sub headlines can be easily tested to see which ones work better. Testing the paragraph text, the content near the fold or the images through A/B testing can change your conversion results. Where the testimonials, social proof, any media mentions or awards are placed on your site can be tested. Links, call to action button or text should be tested as well.

With more advanced tests in the Visual Website Optimizer program you can test such things as sales promotions, your pricing structures, the ease of a user’s navigation and the free trial lengths.

 

Make the most of it

Test big changes first. The advantage here is that you will get quicker results. Test any changes in two stages. First fix all the things that your usability testing show are broken. Then test any new ideas you have. Do the background research needed to understand your visitor’s behavior. This is done with Google Analytics and other analytic tools on your website.

Schedule tests for a later date and time. This option is available in the “Other Settings” section. Always calculate the number of visitors you need for your test before you begin the test.  This can be done with the A/B Test Duration Calculator.

2-calculator

Use a 302 (temporary redirect) when running an A/B test that requires a redirect from the original URL to a new variation of the URL. That way the search engines know it’s only a temporary redirect so they keep the original URL in their index.

Run the experiment only as long as necessary. The amount of time required depends on different factors like the amount of traffic you get to your website.  The Visual Website Optimizer program tells you when you have gathered enough data. Once the test is concluded, update your site with the variations you want and remove the alternate URL and the testing scripts you placed on your site.

 

How to set up your first A/B test

Setting up your first A/B test takes less than 10 minutes. If it’s your first time using Visual Website Optimizer, login and enter your main website’s URL.

Then click on the Testing tab and then the A/B link.

3-create-a-b

Enter your URL. Click to enter test.

4-enter-url

Your website is then loaded into the visual editor. This is where you can click on the website to begin making changes by moving elements or editing text.

The easy point-and-click system means you don’t need to know HTML coding to edit any element or area of your page. If you are an advanced user you can make changes to CSS and JS code as well.

5-wysiwyg

If you need ideas on what to change, click on the ideas tab. This section gives tips for changing headlines, links call to action buttons, and many other elements as well as ecommerce elements.

Click next when you are finished changing elements. Your changes will be saved as a variation.

Next you need to choose the goals you have for the visitor actions you want to track in this test. If you edited certain elements in the WYSIWYG, you may already have your goals listed here. Click nest to move to the next step.

Every A/B test should have goals on what conversion rates you want to increase. It can be as simple as the clicks on a link or the number of visits to a page or more advanced using custom conversion code.

6-goals

In the next step you should enter your test parameters. If you are using a separate URL for testing it needs to go here. Also enter your test variables and other notes. Give your test a name.

Click “Create Your Test”.

7-create-test

If you haven’t already installed the tracking code you will get an error here saying the test cannot be created. The code will be on this page. You can copy it and paste it into your website where Visual Website Optimizer suggests, have a developer install it or have the Javascript self-hosted. Another option is to install the Visual Website plugins for WordPress, Drupal and Joomla. The plugin makes the installation process easy. Start your test again and begin tracking your test. You can see your test under the reports page.

That’s all there is to creating an A/B test in Visual Website Optimizer. The test helps website owners create two variations of their website and track the conversions from each one. The software works in real time so you know the information gathered is current. Once you make changes and analyze which elements are converting better, you can make the changes on your website.