• Stars
    star
    135
  • Rank 259,520 (Top 6 %)
  • Language
  • Created almost 9 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ†Ž Tutorial on A/B and multivariate testing βœ”οΈ

A/B & Multivariate testing tutorial contributions welcome

This is a short introduction to the concepts of A/B and multivariate testing and how to get started.

For a practical tutorial on how to do these in Google Content Experiments, please take a look at our overview: https://github.com/iteles/learn-google-content-experiments.

"Insanity is doing the same thing over and over again and expecting different results" - Albert Einstein

You've decided to start or improve a website or app, so presumably you've read up on user experience and crafting amazing calls to action and have a ton of ideas.

But which design will work best for your audience?
Which piece of micro-copy will get people to share things with their friends?
If you make your form shorter will more people sign up to your service?

Outline

What are A/B testing and multivariate testing?

People decide whether to leave or engage with a site in the first 8 seconds - that's not much time to capture people's attention so you've got to get it right for your audience.

The purpose of both A/B and multivariate tests is to allow you to understand which changes to your web site will best help you achieve your aims (for example increasing sign ups, sales or people clicking on articles). They do so by sending some of the people who visit your site to an alternative version of a given page where you have made some changes. This allows you to collect data on how your visitors react to changes and therefore determine which ones work best.

A few of the more obvious things to test include:

  • A call to action (including wording and placing)
  • Titles and copy
  • Placement & colour of elements
  • Form fields a layout

The key to optimisation testing is having good, measurable data to base decisions on.

NB. A/B and multivariate tests can also be used to test anything from email layouts to sales ads. For simplicity, in this introduction we'll stick with websites.

Why learn this?

By changing different things in a controlled environment and measuring the outcome of these changes, you know *exactly* which changes achieve your site's goals (increase your conversion rate) and by how much.

Now you know where to focus your efforts! Testing leads you to get your message across to the visitors to your site or app in the best way possible.

If you're still not convinced, read Basecamp's article: How we lost (and found) millions by not A/B testing.

is-the-information-youre-sharing-what-your-audience-is-looking-for?

Multivariate vs A/B Testing

In A/B testing you test 2 (or more) different versions of your website by splitting the traffic between them and seeing which one performs better. You can either test 2 completely different designs of your site or you can pick just one element you want to change and keep all other things equal.

ab-testing-two-versions

In multivariate testing (MVT) you pick a certain number of elements on a page and simultaneously test multiple combinations of them to understand which combination provides the best results. You could see it as running many A/B tests at once.

In the illustration below, I've used testing 2 different headlines, 2 different colour buttons and having a video on the homepage as an example.
Just these 3 elements mean testing 8 different versions of your site at once with multivariate testing.

mvt-graphic-it

Due to A/B testing having far less variables (generally only 2 to 4 options) you can get meaningful data with far less users, thus meaning you can run the test for less time, and implement and reap the rewards of the test sooner.

In MVT testing you are going to be testing a few different things, and the options can stack up quite quickly. As illustrated above, with just 2 options for 3 variables you already have 8 different versions of the site! It's going to take a lot longer to get a meaningful pool of data in this case just because you have so many more versions of the site to test.

There is also the question of whether you are looking to make a radical redesign, or to make small tweaks. A radical redesign will usually contain so many variables that it only makes sense to A/B test it, though conducting an experiment is still important, as you want to confirm your hypothesis that your new design solves the problem you identified!

If you want to make small tweaks to a design you already have then multivariate testing can be a good choice, just remember that you need to make sure that you have enough users that these tests can produce valuable results for you in an amount of time which fits into your testing cycle.

To summarise, the main differences are:

A/B testing MVT
What can you test? Different layouts & designs or changes to single elements Effects of changes to combinations of elements
Number of visitors required for meaningful results Relatively low High
Time required for meaningful results Short Considerably longer
Best used for Significantly different layouts & designs or low traffic sites Tweaking and optimising combinations of elements

Getting started

Before you can start your tests, you have to do a little analysis to determine what you're testing. But here's the key: get your experiment done and out of the door quickly so you can start learning from it (in general, aim for no more than two weeks).

"Don't aim for the perfect experiment, aim for enough to get the experiment shipped."
Colin McFarland

0. Get your analytics on

If you don't already have a web analytics package on your site, I'm surprised you even found this article. Sign up to Google Analytics and start collecting some data that you can base decisions and tests on.
You cannot do this kind of testing without data.

1. What are your problem areas?

Dig out your site metrics (see step 0) and figure out where your problem areas are. Understanding web analytics is a whole other set of tutorials (Web Analytics 2.0 by Avinash Kaushik is an excellent book on the subject) but here are a few examples to start you off:

  • Is there a page that's not doing what you expect it to?
  • Are 50% of people leaving your sign up page without signing up?
  • Do you get a ton of email asking about your pricing when it's right there on the website already?
  • Is your homepage bounce rate through the roof?
  • Are you just not sure whether you should use one image or another or your homepage?

Decide what your problem areas are, prioritise them and start with the first one. Go for the areas of most impact, the ones that affect most people.

2. What is your goal?

What is it that you want this problem area to achieve?
Is it an increase in the number of people who sign up to your newsletter? A drop in the number of people who leave your website without looking at more than your homepage?

You have to know what you want to achieve in order to determine what you can improve to get there.

Note: these are simple goals; in reality you will have many concurrent goals so your goal may encompass more than just one metric, e.g. increase the value of the average purchase by 20% with less than a 10% drop in total order numbers OR increase both average purchase value and order numbers.

3. Consider why it's not working as you expect (hypothesis)

You've decided that your problem area is your eBook download page and your goal is to get more people to download a free chapter (for example). So why do you think not 'enough' people downloading it now?

  • Is it that they don't see your download link?
  • They don't realise that they're a free chapter without having to buy the book?
  • That they input their email address but never submit it to you?

This shouldn't be pure guesswork. Use your metrics to understand what's going on as best you can and if possible watch real users use your website or app and ask them questions at the end.

You have to have some educated deductions as to why things aren't working as expected in order to know what you should try to change in step 4.

4. Design your variations

This is the fun part. Based on what you think isn't working (step 3), decide what you're going to change and create your variations.

  • Don't go crazy and try to test everything straight away. Remember that the more variations you have, the more visitors you'll need to your website to get meaningful results, so just test what you truly think will have an impact.
  • Remember that you will be using your existing website as a control so some visitors will still be split off to that variation.

Now you're ready to run your test!

Setting up your first A/B or multivariate test

These days there are lots of testing tools available such as Optimizely, VWO or even Adobe's Test & Target. In fact, you can find a comparison chart of them here.
We're using Google Content Experiments which if 'free' to use (provided you're happy for google to have your data) and part of the Google Analytics platform.

We've written a step-by-step on how to set up your own Google Content Experiment!

How long should you run your tests for?

This is different for each site but here's a place to start: https://vwo.com/ab-split-test-duration/

We always run ours for a minimum of 2 weeks (including weekends).

Things to consider:

  • Weekday/weekend/holiday variations: Include a few weekends and weekdays in your tests as your weekend visitors might be very different to your weekday ones
  • Seasonality of your traffic: If you're a Christmas shop and you run your tests in February, even if you run them for 6 months this likely won't be representative of the visitors that you want to optimise for (the ones in October - December)
  • Sample size: If you've only had 50 visitors to your site during your test, your results won't be very reliable as a representation of your usual audience. Optimizely has a sample size calculator you might want to play around with.

Terminology

A quick list of terms you may see when reading up about this around the web.

  • Confidence is the statistical confidence levels of your tests' results; the higher the confidence level, the more reliable your results are. You can calculate this using the metrics from your test after it has finished using any one of the split test calculators available
  • Control - your control is the existing webpage you're looking to test, that also gives you your base metrics. You want to have a control so that you know whether your variations are performing better or worse than what you already have over the same period of time.
  • Conversion rate is the percentage of people who come to your site who do what you want them to do such as sign up to your service, buy your product or share your content. If 20% of your visitors buy your product, you have a 20% conversion rate.
  • Conversion (rate) optimization is the structured approach you take to increasing your conversion rate - A/B and multivariate testing form a part of this.
  • Conversions are the number of people that do what you wanted them to do on your site (rather than the percentage)
  • Element contribution allows you to determine the percentage that each element contributes to your site's goal.
  • Full Factorial testing is a MVT that includes variations of every element on a given page (remember you need a LOT of traffic to pull this off!).
  • Fractional (partial) Factorial testing is a MVT which tests variations on 2 or more elements on a page (not all of them) - more common.
  • Minimum detectable effect is the percentage change in conversions you want to get from your test (based on the metrics you have for your control). You'll need more visitors to test for smaller changes than for larger ones.
  • MVT is the accepted abbreviation for multivariate testing
  • MVT test array is the name given to the group of elements you are going to be testing, usually provided in table form so you can clearly see how many variations of a page you will need to produce.
  • Split testing is the same as A/B testing, sometimes it's used to refer to A/B tests with more than 2 version (i.e. if you're testing your control headline against 3 different headlines rather than just 1 variation)

Resources

What to test:

Videos:

Books: (affiliate links)

More Repositories

1

english-words

πŸ“ A text file containing 479k English words for all your dictionary/word-based projects e.g: auto-completion / autosuggestion
Python
9,337
star
2

learn-json-web-tokens

πŸ” Learn how to use JSON Web Token (JWT) to secure your next Web App! (Tutorial/Example with Tests!!)
JavaScript
4,178
star
3

learn-to-send-email-via-google-script-html-no-server

πŸ“§ An Example of using an HTML form (e.g: "Contact Us" on a website) to send Email without a Backend Server (using a Google Script) perfect for static websites that need to collect data.
HTML
3,047
star
4

repo-badges

⭐ Use repo badges (build passing, coverage, etc) in your readme/markdown file to signal code quality in a project.
HTML
2,831
star
5

learn-tdd

βœ… A brief introduction to Test Driven Development (TDD) in JavaScript (Complete Beginner's Step-by-Step Tutorial)
JavaScript
2,698
star
6

start-here

πŸ’‘ A Quick-start Guide for People who want to dwyl ❀️ βœ…
1,725
star
7

learn-elixir

πŸ’§ Learn the Elixir programming language to build functional, fast, scalable and maintainable web applications!
Elixir
1,586
star
8

learn-travis

😎 A quick Travis CI (Continuous Integration) Tutorial for Node.js developers
JavaScript
1,251
star
9

Javascript-the-Good-Parts-notes

πŸ“– Notes on the seminal "JavaScript the Good Parts: by Douglas Crockford
1,173
star
10

aws-sdk-mock

🌈 AWSomocks for Javascript/Node.js aws-sdk tested, documented & maintained. Contributions welcome!
JavaScript
1,079
star
11

learn-aws-lambda

✨ Learn how to use AWS Lambda to easily create infinitely scalable web services
JavaScript
1,035
star
12

book

πŸ“— Our Book on Full-Stack Web Application Development covering User Experience (UX) Design, Mobile/Offline/Security First, Progressive Enhancement, Continuous Integration/Deployment, Testing (UX/TDD/BDD), Performance-Driven-Development and much more!
Rust
816
star
13

hapi-auth-jwt2

πŸ”’ Secure Hapi.js authentication plugin using JSON Web Tokens (JWT) in Headers, URL or Cookies
JavaScript
795
star
14

learn-hapi

β˜€οΈ Learn to use Hapi.js (Node.js) web framework to build scalable apps in less time
HTML
794
star
15

phoenix-chat-example

πŸ’¬ The Step-by-Step Beginners Tutorial for Building, Testing & Deploying a Chat app in Phoenix 1.7 [Latest] πŸš€
Elixir
721
star
16

learn-tachyons

😍 Learn how to use Tachyons to craft beautiful, responsive and fast UI with functional CSS!
HTML
670
star
17

learn-phoenix-framework

πŸ”₯ Phoenix is the web framework without compromise on speed, reliability or maintainability! Don't settle for less. πŸš€
Elixir
639
star
18

learn-nightwatch

🌜 Learn how to use Nightwatch.js to easily & automatically test your web apps in *real* web browsers.
JavaScript
585
star
19

javascript-todo-list-tutorial

βœ… A step-by-step complete beginner example/tutorial for building a Todo List App (TodoMVC) from scratch in JavaScript following Test Driven Development (TDD) best practice. 🌱
JavaScript
565
star
20

learn-elm

🌈 discover the beautiful programming language that makes front-end web apps a joy to build and maintain!
HTML
472
star
21

learn-redux

πŸ’₯ Comprehensive Notes for Learning (how to use) Redux to manage state in your Web/Mobile (React.js) Apps.
HTML
446
star
22

learn-devops

🚧 Learn the craft of "DevOps" (Developer Operations) to Deploy your App and Monitor it so it stays "Up"!
Shell
411
star
23

hits

πŸ“ˆ General purpose hits (page views) counter
Elixir
397
star
24

hapi-socketio-redis-chat-example

πŸ’¬ Real-time Chat using Hapi.js + Socket.io + Redis Pub/Sub (example with tests!!)
Elm
363
star
25

hapi-typescript-example

⚑ Hapi.Js + Typescript = Awesomeness
TypeScript
351
star
26

phoenix-liveview-counter-tutorial

🀯 beginners tutorial building a real time counter in Phoenix 1.7.7 + LiveView 0.19 ⚑️ Learn the fundamentals from first principals so you can make something amazing! πŸš€
Elixir
345
star
27

learn-istanbul

🏁 Learn how to use the Istanbul JavaScript Code Coverage Tool
JavaScript
339
star
28

learn-redis

πŸ“• Need to store/access your data as fast as possible? Learn Redis! Beginners Tutorial using Node.js πŸš€
JavaScript
291
star
29

technology-stack

πŸš€ Detailed description + diagram of the Open Source Technology Stack we use for dwyl projects.
JavaScript
281
star
30

phoenix-ecto-encryption-example

πŸ” A detailed example for how to encrypt data in an Elixir (Phoenix v1.7) App before inserting into a database using Ecto Types
Elixir
269
star
31

learn-elasticsearch

πŸ” Learn how to use ElasticSearch to power a great search experience for your project/product/website.
Elixir
265
star
32

home

🏑 πŸ‘©β€πŸ’» πŸ’‘ home is where you can [learn to] build the future surrounded by like-minded creative, friendly and [intrinsically] motivated people focussed on health, fitness and making things people and the world need!
245
star
33

elixir-auth-google

πŸ‘€Minimalist Google OAuth Authentication for Elixir Apps. Tested, Documented & Maintained. Setup in 5 mins. πŸš€
Elixir
228
star
34

learn-docker

🚒 Learn how to use docker.io containers to consistently deploy your apps on any infrastructure.
Dockerfile
220
star
35

learn-elm-architecture-in-javascript

πŸ¦„ Learn how to build web apps using the Elm Architecture in "vanilla" JavaScript (step-by-step TDD tutorial)!
JavaScript
207
star
36

learn-environment-variables

πŸ“Learn how to use Environment Variables to keep your passwords and API keys secret. πŸ”
JavaScript
201
star
37

learn-postgresql

🐘 Learn how to use PostgreSQL and Structured Query Language (SQL) to store and query your relational data. πŸ”
JavaScript
195
star
38

learn-tape

βœ… Learn how to use Tape for JavaScript/Node.js Test Driven Development (TDD) - Ten-Minute Testing Tutorial
JavaScript
185
star
39

sendemail

πŸ’Œ Simplifies reliably sending emails from your node.js apps using AWS Simple Email Service (SES)
JavaScript
181
star
40

phoenix-todo-list-tutorial

βœ… Complete beginners tutorial building a todo list from scratch in Phoenix 1.7 (latest)
Elixir
171
star
41

decache

:shipit: Delete Cached node_modules useful when you need to "un-require" during testing for a fresh state.
JavaScript
151
star
42

quotes

πŸ’¬ a curated list of quotes that inspire action + code that returns quotes by tag/author/etc. πŸ’‘
Elixir
150
star
43

learn-heroku

🏁 Learn how to deploy your web application to Heroku from scratch step-by-step in 7 minutes!
Python
149
star
44

learn-chrome-extensions

🌐 Discover how to build and deploy a Google Chrome Extension for your Project!
139
star
45

labels

🏷 Sync GitHub Labels from any Source to Target Repositories for Consistency across all your projects!
Elixir
136
star
46

ISO-27001-2013-information-technology-security

πŸ” Probably the most boring-but-necessary repo on GitHub. If you care about the security/privacy of your data...! βœ…
136
star
47

web-form-to-google-sheet

A simple example of sending data from an ordinary web form straight to a Google Spreadsheet without a server.
HTML
133
star
48

app

Clear your mind. Organise your life. Ignore distractions. Focus on what matters.
Dart
133
star
49

auth

πŸšͺ πŸ” UX-focussed Turnkey Authentication Solution for Web Apps/APIs (Documented, Tested & Maintained)
Elixir
124
star
50

learn-circleci

βœ… A quick intro to Circle CI (Continuous Integration) for JavaScript developers.
121
star
51

learn-regex

⁉️ A simple REGular EXpression tutorial in JavaScript
120
star
52

learn-react

"The possibilities are numerous once we decide to act and not react." ~ George Bernard Shaw
HTML
108
star
53

learn-aws-iot

πŸ’‘ Learn how to use Amazon Web Services Internet of Things (IoT) service to build connected applications.
JavaScript
101
star
54

env2

πŸ’» Simple environment variable (from config file) loader for your node.js app
JavaScript
100
star
55

phoenix-liveview-chat-example

πŸ’¬ Step-by-step tutorial creates a Chat App using Phoenix LiveView including Presence, Authentication and Style with Tailwind CSS
Elixir
98
star
56

how-to-choose-a-database

How to choose the right dabase
93
star
57

imgup

πŸŒ… Effortless image uploads to AWS S3 with automatic resizing including REST API.
Elixir
88
star
58

contributing

πŸ“‹ Guidelines & Workflow for people contributing to our project(s) on GitHub. Please ⭐ to confirm you've read & understood! βœ…
85
star
59

javascript-best-practice

A collection of JavaScript Best Practices
83
star
60

learn-amazon-web-services

⭐ Amazing Guide to using Amazon Web Services (AWS)! ☁️
83
star
61

range-touch

πŸ“± Use HTML5 range input on touch devices (iPhone, iPad & Android) without bloatware!
JavaScript
83
star
62

learn-pre-commit

βœ… Pre-commit hooks let you run checks before allowing a commit (e.g. JSLint or check Test Coverage).
JavaScript
80
star
63

product-owner-guide

πŸš€ A rough guide for people working with dwyl as Product Owners
78
star
64

phoenix-ecto-append-only-log-example

πŸ“ A step-by-step example/tutorial showing how to build a Phoenix (Elixir) App where all data is immutable (append only). Precursor to Blockchain, IPFS or Solid!
Elixir
78
star
65

mvp

πŸ“² simplest version of the @dwyl app
Elixir
78
star
66

goodparts

πŸ™ˆ An ESLint Style that only allows JavaScript the Good Parts (and "Better Parts") in your code.
JavaScript
77
star
67

hapi-error

β˜” Intercept errors in your Hapi Web App/API and send a *useful* message to the client OR redirect to the desired endpoint.
JavaScript
76
star
68

flutter-todo-list-tutorial

βœ… A detailed example/tutorial building a cross-platform Todo List App using Flutter πŸ¦‹
Dart
75
star
69

process-handbook

πŸ“— Contains our processes, questions and journey to creating a team
HTML
75
star
70

dev-setup

✈️ A quick-start guide for new engineers on how to set up their Dev environment
73
star
71

aws-lambda-deploy

☁️ πŸš€ Effortlessly deploy Amazon Web Services Lambda function(s) with a single command. Less to configure. Latest AWS SDK and Node.js v20!
JavaScript
72
star
72

terminate

♻️ Terminate a Node.js Process (and all Child Processes) based on the Process ID
JavaScript
71
star
73

fields

🌻 fields is a collection of useful field definitions (Custom Ecto Types) that helps you easily define an Ecto Schema with validation, encryption and hashing functions so that you can ship your Elixir/Phoenix App much faster!
Elixir
69
star
74

learn-flutter

πŸ¦‹ Learn how to use Flutter to Build Cross-platform Native Mobile Apps
JavaScript
69
star
75

hapi-login-example-postgres

🐰 A simple registration + login form example using hapi-register, hapi-login & hapi-auth-jwt2 with a PostgreSQL DB
JavaScript
69
star
76

phoenix-liveview-todo-list-tutorial

βœ… Beginners tutorial building a Realtime Todo List in Phoenix 1.6.10 + LiveView 0.17.10 ⚑️ Feedback very welcome!
Elixir
64
star
77

learn-security

πŸ” For most technology projects Security is an "after thought", it does not have to be that way; let's be proactive!
64
star
78

learn-javascript

A Series of Simple Steps in JavaScript :-)
HTML
63
star
79

chat

πŸ’¬ Probably the fastest, most reliable/scalable chat system on the internet.
Elixir
62
star
80

learn-jsdoc

πŸ“˜ Use JSDoc and a few carefully crafted comments to document your JavaScript code!
CSS
60
star
81

ampl

πŸ“± ⚑ Ampl transforms Markdown into AMP-compliant html so it loads super-fast!
JavaScript
57
star
82

aguid

❄️ A Globally Unique IDentifier (GUID) generator in JS. (deterministic or random - you chose!)
JavaScript
56
star
83

tudo

βœ… Want to see where you could help on an open dwyl issue?
Elixir
56
star
84

learn-apple-watch-development

πŸ“— Learn how to build Native Apple Watch (+iPhone) apps from scratch!
Swift
55
star
85

learn-qunit

βœ… A quick introduction to JavaScript unit testing with QUnit
JavaScript
51
star
86

learn-ngrok

☁️ Learn how to use ngrok to share access to a Web App/Site running on your "localhost" with the world!
HTML
50
star
87

hapi-auth-jwt2-example

πŸ”’ A functional example Hapi.js app using hapi-auth-jwt2 & Redis (hosted on Heroku) with tests!
JavaScript
49
star
88

learn-jshint

πŸ’© Learn how to use the ~~jshint~~ code quality/consistency tool.
JavaScript
49
star
89

tachyons-bootstrap

πŸ‘’Bootstrap recreated using tachyons functional css
HTML
49
star
90

esta

πŸ” Simple + Fast ElasticSearch Node.js client. Beginner-friendly defaults & Heroku support βœ… πŸš€
JavaScript
48
star
91

learn-node-js-by-example

☁️ Practical node.js examples.
HTML
47
star
92

product-roadmap

🌐 Because why wouldn't you make your company's product roadmap Public on GitHub?
46
star
93

redis-connection

⚑ Single Redis Connection that can be used anywhere in your node.js app and closed once (e.g in tests)
JavaScript
45
star
94

aws-lambda-test-utils

Mock event and context objects without fluff.
JavaScript
44
star
95

learn-graphQL

❓Learn to use GraphQL - A query language that allows client applications to specify their data fetching requirements
JavaScript
44
star
96

elixir-pre-commit

βœ… Pre-commit hooks for Elixir projects
Elixir
43
star
97

hapi-login

πŸšͺ The Simplest Possible (Email + Password) Login for Hapi.js Apps βœ…
JavaScript
43
star
98

learn-riot

🐎 Riot.js lets you build apps that are simpler and load/run faster than any other JS framework/library.
HTML
43
star
99

github-reference

⭐ GitHub reference for *non-technical* people following a project's progress
42
star
100

learn-codeclimate

🌈 Learn how to use CodeClimate to track the quality of your JavaScript/Node.js code.
41
star