• Stars
    star
    137
  • Rank 266,121 (Top 6 %)
  • Language
  • Created over 9 years ago
  • Updated about 7 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,140
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,734
star
7

learn-elixir

๐Ÿ’ง Learn the Elixir programming language to build functional, fast, scalable and maintainable web applications!
Elixir
1,611
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,193
star
10

aws-sdk-mock

๐ŸŒˆ AWSomocks for Javascript/Node.js aws-sdk tested, documented & maintained. Contributions welcome!
TypeScript
1,113
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
818
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
760
star
16

learn-tachyons

๐Ÿ˜ Learn how to use Tachyons to craft beautiful, responsive and fast UI with functional CSS!
HTML
673
star
17

learn-phoenix-framework

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

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
623
star
19

learn-nightwatch

๐ŸŒœ Learn how to use Nightwatch.js to easily & automatically test your web apps in *real* web browsers.
JavaScript
585
star
20

learn-elm

๐ŸŒˆ discover the beautiful programming language that makes front-end web apps a joy to build and maintain!
HTML
483
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

hits

๐Ÿ“ˆ General purpose hits (page views) counter
Elixir
432
star
23

learn-devops

๐Ÿšง Learn the craft of "DevOps" (Developer Operations) to Deploy your App and Monitor it so it stays "Up"!
Shell
413
star
24

phoenix-liveview-counter-tutorial

๐Ÿคฏ beginners tutorial building a real time counter in Phoenix 1.7.14 + LiveView 1.0 โšก๏ธ Learn the fundamentals from first principals so you can make something amazing! ๐Ÿš€
Elixir
374
star
25

hapi-socketio-redis-chat-example

๐Ÿ’ฌ Real-time Chat using Hapi.js + Socket.io + Redis Pub/Sub (example with tests!!)
Elm
366
star
26

hapi-typescript-example

โšก Hapi.Js + Typescript = Awesomeness
TypeScript
351
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
288
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
274
star
31

learn-elasticsearch

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

elixir-auth-google

๐Ÿ‘คMinimalist Google OAuth Authentication for Elixir Apps. Tested, Documented & Maintained. Setup in 5 mins. ๐Ÿš€
Elixir
263
star
33

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!
246
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
211
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
187
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

quotes

๐Ÿ’ฌ a curated list of quotes that inspire action + code that returns quotes by tag/author/etc. ๐Ÿ’ก
Elixir
163
star
42

learn-heroku

๐Ÿ Learn how to deploy your web application to Heroku from scratch step-by-step in 7 minutes!
Python
153
star
43

decache

:shipit: Delete Cached node_modules useful when you need to "un-require" during testing for a fresh state.
JavaScript
151
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
138
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

auth

๐Ÿšช ๐Ÿ” UX-focussed Turnkey Authentication Solution for Web Apps/APIs (Documented, Tested & Maintained)
Elixir
135
star
48

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
49

app

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

phoenix-liveview-chat-example

๐Ÿ’ฌ Step-by-step tutorial creates a Chat App using Phoenix LiveView including Presence, Authentication and Style with Tailwind CSS
Elixir
130
star
51

learn-circleci

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

learn-regex

โ‰๏ธ A simple REGular EXpression tutorial in JavaScript
120
star
53

learn-react

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

learn-aws-iot

๐Ÿ’ก Learn how to use Amazon Web Services Internet of Things (IoT) service to build connected applications.
JavaScript
101
star
55

env2

๐Ÿ’ป Simple environment variable (from config file) loader for your node.js app
JavaScript
100
star
56

how-to-choose-a-database

How to choose the right dabase
97
star
57

flutter-todo-list-tutorial

โœ… A detailed example/tutorial building a cross-platform Todo List App using Flutter ๐Ÿฆ‹
Dart
91
star
58

imgup

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

mvp

๐Ÿ“ฒ simplest version of the @dwyl app
Elixir
87
star
60

contributing

๐Ÿ“‹ Guidelines & Workflow for people contributing to our project(s) on GitHub. Please โญ to confirm you've read & understood! โœ…
86
star
61

learn-flutter

๐Ÿฆ‹ Learn how to use Flutter to Build Cross-platform Native Mobile Apps
JavaScript
86
star
62

javascript-best-practice

A collection of JavaScript Best Practices
83
star
63

learn-amazon-web-services

โญ Amazing Guide to using Amazon Web Services (AWS)! โ˜๏ธ
83
star
64

range-touch

๐Ÿ“ฑ Use HTML5 range input on touch devices (iPhone, iPad & Android) without bloatware!
JavaScript
83
star
65

learn-pre-commit

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

product-owner-guide

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

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
68

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
77
star
69

goodparts

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

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
71

process-handbook

๐Ÿ“— Contains our processes, questions and journey to creating a team
HTML
76
star
72

terminate

โ™ป๏ธ Terminate a Node.js Process (and all Child Processes) based on the Process ID
JavaScript
76
star
73

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
74
star
74

dev-setup

โœˆ๏ธ A quick-start guide for new engineers on how to set up their Dev environment
73
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

flutter-bloc-tutorial

A step-by-step example/tutorial explaining the benefits of the BLoC architecture and bloc library including tests!
Dart
67
star
77

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
65
star
78

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
79

learn-javascript

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

chat

๐Ÿ’ฌ Probably the fastest, most reliable/scalable chat system on the internet.
Elixir
62
star
81

learn-jsdoc

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

ampl

๐Ÿ“ฑ โšก Ampl transforms Markdown into AMP-compliant html so it loads super-fast!
JavaScript
58
star
83

aguid

โ„๏ธ A Globally Unique IDentifier (GUID) generator in JS. (deterministic or random - you chose!)
JavaScript
57
star
84

tudo

โœ… Want to see where you could help on an open dwyl issue?
Elixir
57
star
85

learn-apple-watch-development

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

learn-qunit

โœ… A quick introduction to JavaScript unit testing with QUnit
JavaScript
51
star
87

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
88

learn-jshint

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

hapi-auth-jwt2-example

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

tachyons-bootstrap

๐Ÿ‘ขBootstrap recreated using tachyons functional css
HTML
48
star
91

learn-tailwind

๐ŸŒฌ๏ธ Learn Tailwind CSS to craft pixel-perfect web apps/sites in less time! ๐Ÿ˜
Elixir
48
star
92

esta

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

learn-node-js-by-example

โ˜๏ธ Practical node.js examples.
HTML
47
star
94

elixir-pre-commit

โœ… Pre-commit hooks for Elixir projects
Elixir
46
star
95

product-roadmap

๐ŸŒ Because why wouldn't you make your company's product roadmap Public on GitHub?
46
star
96

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
97

learn-graphQL

โ“Learn to use GraphQL - A query language that allows client applications to specify their data fetching requirements
JavaScript
45
star
98

aws-lambda-test-utils

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

hapi-login

๐Ÿšช The Simplest Possible (Email + Password) Login for Hapi.js Apps โœ…
JavaScript
43
star
100

learn-riot

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