Saturday, 23 January 2010

Google multivariate test - Link button text and CSS demo

Recently been looking at google multivariate testing and I've been really impressed with how simple it is to set up and how in depth the web dashboard is. Quick start users might want to go straight to the demo for those interested here's a bit more about it...

Woah hang on a bit what do you mean by google multivariate test? It's a cool new approach that anyone can use to really optimise a website in terms of layout or content. Maybe you think your sales pitch isn't quite right but you're not sure what's wrong with it. Setting up a google multivariate test allows you to write 4 or 5 different pieces of text and then tells you how each piece of text performs.

Sounds clever but how does a multivariate test work out how well a piece of content is performing? Well it's pretty straight forward, if we take the example above it will randomly display each piece of text and then record how many users saw that text and visited your pre-defined conversion page. In this case the conversion page would be the next page or even better the payment checkout page. Straight away you'll have clear percentages of uplift - maybe 5% more users who were shown 'Text 3' bought a product, maybe it was 5% less but at least it'll give you accurate feedback to make a decision on your sales pitch.

Ok so enough with the intro what I really wanted to blog about is how you can get into the HTML elements of a webpage and combine that with some funky CSS changes to create a really varied multivariate test.

If you go to this page you'll see a basic HTML page with a few links that are styled as buttons. If you click a link button it will go through to a thank you page which is also my conversion page. If you delete your cookies and refresh/revisit the page you'll notice the link buttons will change, by deleting your cookies and refreshing you'll get loads of different variations. Each time you click through it will record a visit to the conversion page from that test and will update the results on my google dashboard.

If you check the HTML source of the test page you'll see some google javascript at the beginning and end of the page. This tells google that it's being used as a test page... the conversion page has similar javascript to identify it as a conversion page.

Now here's the clever bit just before the source of each button is a script tag:

<script>utmx_section("Indiv button css")</script></noscript>

This is what's known as a section name, once a webpage has been uploaded and verified the google dashboard identifies these section names and allows you to add HTML which will replace the existing HTML at this point on the webpage. In this case the section will be inserting some CSS that changes the button image for a different version:

<style>.ca-google-ind-button { background:transparent url(images/google/x-large-button-flat-blue.jpg); color:#ffffff; }</style>

Pretty cool huh! Including the original (which doesn't insert any CSS) I've got 4 different button link colours. All we need to do is attach another google section around the link text, include some text variations on the google dashboard and the link button is completely changed:

<a class="ca-google-ind-button" href="multivariate-conversion.html">
<script>utmx_section("Text for indiv button")</script>
Click me!

Although the demo isn't doing anything too exciting I hope you can see the possibilites that this technique can give you. Not only does it give you responsive feedback but it also adds value as soon as a test goes live.

One final thing to say, I think it's a good idea to launch a small multivariate test initially just so you get a feel of things and how it works. After that my opinion is that you should be using this to really test radical differences not just paragraphs of text, there's no reason why the column layout can't be changed or even have the page re skinned.

I should add that you can switch off under performing combinations via the dashboard but make sure your traffic is at a high level and the failure was conclusive. We've seen some huge test swings where a combination has performed badly one week and completely turned around the next. Again I really do think you get the most of of this by being daring and trying things that aren't obvious.

Google multivariate test - Link button text and CSS demo

Wednesday, 20 January 2010

Cool freebie site for web UI lovers

Who doesn't like instant, relevant UI feedback and... for free?!? is a really cool site that lets real users carry out UI tests on your website, great for feedback on potential designs or UI tweaks (and a bloody good spot from our creative team).