Two Types of Website Design Tools that Tell You What Users Click

Optimize your site with A/B testing and heat tracking software

The website design process hasn’t really changed in the last ten years. You come up with a wireframe, a designer mocks it up, a developer makes a test site and after weeks of going through each agonizing detail you deploy your new design. It’s a fairly static process; however, there’s an endless supply of questions about colors, calls to action, fonts, copy, images and everything under the sun.

The first thing to know is that your initial iteration is unlikely to ever be the best one. As publishers, you’re probably on version five, 10 or even 20, depending how long you’ve been around. We spend a lot of time hiring beta testers to sit in front of computers with eye-tracking devices to test our clients’ websites. It tells us more about how easy the site is to navigate, find what they’re looking for, and how effective our calls to actions are. At this point, we’ve discovered a pretty standard set of elements that do work, and ones that just don’t.

If you want to build your own little in-house website lab, there are two types of website design tools that should be in your toolbelt: A/B testing software and heat tracking software.

There are plenty of good paid A/B testing tools like Unbounce and Optimizely but today we’re talking about Google Content Experiments because it’s free and it lets you test SEO on your own site.

On the same note, there are lots of cool heat-tracking tools you can use like ClickHeat and Click Density, but we’re going to use Crazy Egg because it’s extremely user-friendly and cheap ($9/mo+)

Starting Today

I want you to think about web design as a dynamic process. A process in which the website design tools used aren’t just Photoshop, Illustrator and Dreamweaver. They involve tools like Google Content Experiments and CrazyEgg. These tools allow companies to narrow down and find the designs and layouts that will convert more users. We should have always been letting the users dictate aspects of our designs and now we can.

Google Content Experiments and CrazyEgg both fall into the category as tools for preforming A/B split tests in one way or another. You should be thinking about these tests as soon as your basic design iterations are complete. How do you use these tools? What kinds of things should you test? All of your questions will be answered below.

During the development process you should create iterations of the pages you’d like to test. These pages you test should all have a definable goal to them, like a call to action button or a “buy it now” link. These variations in design could be as broad as a complete layout change or as fine a granularity as a color change on a call to action button.

You should think about creating iterations of:

  • Your homepage
  • Sales pages
  • Product pages
  • Blog page

Find out the CMS features that publishers require to manage an online publishing business. Download a FREE copy of 7 Ways Haven Wordpress Goes Beyond Wordpress, and discover the features all publishers should have access to for a bigger audience, greater revenue, and higher profits.

Next, feed these iterations to Google Content Experiments, which is a tool built into Google Analytics (GA). You’ll need to load entire pages into Content Experiments, you can’t just swap out headlines or buttons (not yet, anyways). So create as many versions of your landing pages that you want to test. And perhaps think about testing one element per version so that you know why the winner was the winner.

To find Content Experiments within GA:

  1. Click on Standard Reporting in the top navigation bar
  2. Click on the Content Tab on the left vertical navigation bar
  3. Finally, click on the Experiments link within the Content section (just below the AdSense link)

To say that Google Content Experiments (GCA) is basic would be an understatement. But it’s simplicity is what makes it so great. You assign which page from your live website you’d like to test within the GCA dashboard. Then you can add up to six different variations to be tested.

To start the experiment you need to drop a piece of code into the page you’d like to test. GCA will serve up the original version of the page or one of the variations of that page to a certain percentage of visitors you specify. GCA will then track to see which page receives the most interaction. After enough traffic has visited your site you can see which pages had the most conversions and highest conversion rate.

Once you find the variation that converts the best, you can then stop the experiment and make the highest converting page the one that stays live. The users choose which page provides the clearest action for them. You’re merely providing them with a few different style frameworks. Depending on how much traffic you have to the your site; you could have a winning page in as little as a week.

A Good Egg

Now that you have a winning layout, don’t you want to know why it won? You can dig deeper into user interactions on the page by using a website design tool called CrazyEgg.

Web Design Tools - CrazyEgg Confetti-tool

CrazyEgg creates a heatmap of where users click on a particular page. The more they click the more red the area will be in heatmap. It’s an excellent tool to see where people are clicking on your site. You can test order form positions, advertisements, new content, and any kind of clickable area. You can see which navigation buttons they use, too. After enough visitors come to your site, you’ll know what’s hot and what’s not.

They also have a number of other tracking tools so you can really dive into the interactions on you site. Their other tracking tools are:

  • ScrollMap – this shows where people scrolled and stopped on a page, perfect for sales pages with lots of copy.
  • Overlay Tool – this shows you the interactions with specific elements on your page.
  • Confetti Tool – this tool shows you where clicks are coming from that can be segmented by referral source or search term. You’ll know if visitors from Spain click on your call to actions more than visitors from England.

These website design tools help you create pages that convert better and offer the user a more enjoyable experience. How has A/B testing influenced your designs? Have you had large increases in conversions from a design change made from A/B testing? Please share your experience in the comments.

And if you’d like to discuss the redesign of your website, contact Ann-Marie Sullivan, our member services manager, and she’ll schedule an opportunity for you to chat with Don Nicholas, our CEO and lead consultant.


Leave a Reply