/
hypothesis.html
242 lines (234 loc) · 13.8 KB
/
hypothesis.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width, Content-DPR, Downlink, Save-Data">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Experiment Hypothesis Builder for A/B Tests</title>
<style>
:root {
--black: rgba(0, 0, 0, .8);
--blue-dark: rgb(0, 112, 201);
--blue-light: rgb(102, 187, 255);
--gray: rgb(204, 204, 204);
--white: rgba(255, 255, 255, 1);
}
html {
overflow-y: scroll;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 1% auto;
padding: 0 3%;
max-width: 30em;
background-color: rgba(0, 0, 0, 0);
color: var(--black);
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1.125rem;
line-height: 1.618;
}
footer, small {
font-size: 80%;
}
b, dt, strong {
font-weight: 700;
}
h1, h2, h3 {
line-height: 1.2;
letter-spacing: .02em;
}
a {
background-color: transparent;
color: var(--blue-dark);
text-decoration: none;
text-decoration-skip: ink;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
a:hover, a:active, a:focus {
color: var(--blue-light);
}
abbr[title] {
text-decoration: none;
}
code, samp {
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Monaco, "Courier New", monospace;
font-size: 1em;
}
input, textarea {
width: 95%;
display: block;
padding: .5em 1%;
font-size: 1em;
}
input, textarea, fieldset {
margin-bottom: 1.5em;
}
textarea {
resize: vertical;
}
input[type=radio]{
display: inline-block;
width: 1em;
}
hr {
border: 0;
border-top: 1px solid var(--gray);
}
.hidden {
display: none;
}
@media (prefers-color-scheme: dark) {
body {
background-color: var(--black);
color: var(--white);
word-spacing: .05em;
}
a {
color: var(--blue-light);
}
a:hover, a:active, a:focus {
color: var(--blue-dark);
}
input, select, textarea {
background-color: var(--black);
color: var(--white);
}
}
</style>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://gtm.vreeman.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-WKSDWK');</script>
<link rel="canonical" href="https://vreeman.com/hypothesis">
<link rel="alternate" href="https://vreeman.com/hypothesis" hreflang="x-default">
<link rel="alternate" href="https://vreeman.com/hypothesis" hreflang="en">
<meta name="description" content="This Experiment Hypothesis Builder can help you create solid hypothesis for your A/B tests. It is based on the Hypothesis Kit of CRO expert Craig Sullivan.">
<meta property="og:title" content="Experiment Hypothesis Builder">
<meta property="og:url" content="https://vreeman.com/hypothesis">
<meta property="og:description" content="This Experiment Hypothesis Builder can help you create solid hypothesis for your A/B tests.">
<meta property="og:image" content="https://vreeman.com/img/tile-wide.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@vreeman">
<meta name="twitter:creator" content="@vreeman">
<meta name="twitter:title" content="Experiment Hypothesis Builder">
<meta name="twitter:description" content="This Experiment Hypothesis Builder can help you create solid hypothesis for your A/B tests.">
<meta name="twitter:image" content="https://vreeman.com/img/tile-wide.png">
<meta name="twitter:creator" content="@vreeman">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Hypothesis Builder">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="theme-color" content="#000">
</head>
<body>
<noscript><iframe src="https://gtm.vreeman.com/ns.html?id=GTM-WKSDWK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<header>
<h1>Experiment Hypothesis Builder</h1>
<p><a href="https://vreeman.com/" title="Simon Vreeman">Home</a> | <a href="https://vreeman.com/cro" title="CRO Tools"><abbr title="Conversion Rate Optimization">CRO</abbr> Tools</a></p>
</header>
<p>With this little <a href="https://vreeman.com/cro"><abbr title="Conversion Rate Optimization">CRO</abbr> tool</a> it is even easier to create a good and solid hypothesis for your next experiment. Which can help in creating better experiments, easier analysis and having better learnings. Based on the <abbr title="Conversion Rate Optimization">CRO</abbr> <a href="https://medium.com/@optimiseordie/hypothesis-kit-2-eff0446e09fc" target="_blank" rel="noopener">Hypothesis Kit v3</a> by Craig Sullivan. With the help of Colin Mcfarland (Netflix), Lukas Vermeer (Booking.com), Rik Higham (Skyscanner), Doug Hall (Conversion Works) and Michael Aagard (Unbounce).</p>
<form id="settingsForm">
<input type="radio" name="setting" id="simple" value="simple" checked>
<label for="simple">Simple</label>
<input type="radio" name="setting" id="advanced" value="advanced">
<label for="advanced">Advanced</label>
</form>
<form onkeyup="getSimpleHypothesis()" id="simpleForm">
<fieldset>
<legend>Build your own simple hypothesis</legend>
<label for="s1">Because we saw (<code>data/feedback</code>)</label>
<textarea name="because" id="s1" placeholder="data/feedback" rows="3"></textarea>
<label for="s2">We expect that (<code>change</code>)</label>
<textarea name="change" id="s2" placeholder="change" rows="3"></textarea>
<label for="s3">Will cause (<code>impact</code>)</label>
<textarea name="impact" id="s3" placeholder="impact" rows="3"></textarea>
<label for="s4">We’ll measure this using (<code>data metric</code>)</label>
<textarea name="metric" id="s4" placeholder="data metric" rows="3"></textarea>
</fieldset>
</form>
<form onkeyup="getAdvancedHypothesis()" id="advancedForm" class="hidden">
<fieldset>
<legend>Build your own advanced hypothesis</legend>
<label for="a1">Based on (<code>quantitative & qualitative data and research</code>)</label>
<textarea name="because" id="a1" placeholder="The observation, insight, data or research that was the catalyst for this hypothesis."></textarea>
<label for="a2">We believe that (<code>change</code>)</label>
<textarea name="change" id="a2" placeholder="This is the specific change you are making"></textarea>
<label for="a3">For (<code>population</code>)</label>
<textarea name="population" id="a3" placeholder="The cohort, audience, group that are exposed to the experiment."></textarea>
<label for="a4">Will cause (<code>impact(s)</code>)</label>
<textarea name="impact" id="a4" placeholder="The outcome you believe that (change) will cause."></textarea>
<label for="a5">We will know this when we see (<code>metric(s) & feedback change</code>)</label>
<textarea name="metric" id="a5" placeholder="primary or secondary metric(s) change"></textarea>
<label for="a6">Over a period of (<code>x business cycles</code>)</label>
<textarea name="cycles" id="a6" placeholder="x business cycles"></textarea>
</fieldset>
</form>
<p><samp id="result">Because we saw (data/feedback).<br>We expect that (change) will cause (impact).<br>We’ll measure this using (data metric).</samp></p>
<p><strong>Ethics</strong>: Before the experiment goes live. You should check if this experiment is ethical, by asking yourself the following question. Are you okay if The New York Times writes a front-page article about this experiment and mentions your company and yourself? If the answer is no, then it is presumably not an ethical correct experiment and you should not run it.</p>
<p>Besides this Experiment Hypothesis Builder I made a list of handy <a href="https://vreeman.com/cro" title="CRO Tools"><abbr title="Conversion Rate Optimization">CRO</abbr> tools</a>, <a href="https://vreeman.com/utm" title="Google Analytics 4 UTM Campaign URL Builder">Google Analytics 4 UTM Campaign URL Builder</a> and <a href="https://vreeman.com/mp" title="Google Analytics Measurement Protocol Hit Builder">Google Analytics Measurement Protocol Hit Builder</a>.</p>
<hr>
<footer>
<p>Vreeman.com is the personal website of <a class="h-card" rel="me" href="https://vreeman.com" title="Simon Vreeman">Simon Vreeman</a>.</p>
<dl>
<dt>Privacy & Cookie Policy</dt>
<dd>Vreeman.com uses Google Analytics (<code>_ga</code>, <code>FPID</code>, & <code>FPLC</code>), and Google Tag Manager Server-side to measure and analyze anonymous user behavior data to improve the website in an ethical manner.</dd>
<dt>Colophon</dt>
<dd>Vreeman.com uses Cloudflare Pages to ensure it loads fast and the source code is hosted on Github.</dd>
<dt>Licenses</dt>
<dd>Text is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" rel="license" title="Creative Commons Attribution 4.0 International License" data-vars-outbound-text="Creative Commons License" data-vars-outbound-link="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>. <code></></code> is licensed under <a href="https://opensource.org/licenses/MIT" rel="license" title="MIT License" data-vars-outbound-text="MIT License" data-vars-outbound-link="https://opensource.org/licenses/MIT">MIT License</a>.</dd>
<dt>Other</dt>
<dd>
<ul>
<li><a href="https://vreeman.com/cro" title="CRO (Conversion Rate Optimization) Tools" data-vars-outbound-text="CRO Tools" data-vars-outbound-link="https://vreeman.com/cro"><abbr title="Conversion Rate Optimization">CRO</abbr> Tools</a></li>
<li><a href="https://vreeman.com/f1" title="FIA Formula One (F1) 2023 Calendar / Agenda, Teams and Drivers" data-vars-outbound-text="F1 Calendar" data-vars-outbound-link="https://vreeman.com/f1">F1 2023 Calendar, Teams & Drivers</a></li>
<li><a href="https://vreeman.com/gear" title="What is in my backpack?" data-vars-outbound-text="Travel Gear" data-vars-outbound-link="https://vreeman.com/gear">Travel Gear</a></li>
<li><a href="https://vreeman.com/meditations/" title="Meditations by Marcus Aurelius. Translations by Gregory Hays." data-vars-outbound-text="Meditations" data-vars-outbound-link="https://vreeman.com/meditations/">Meditations by Marcus Aurelius. Translations by Gregory Hays.</a></li>
<li><a href="https://vreeman.com/discourses/" title="Discourses of Epictetus. Translations by George Long" data-vars-outbound-text="Discourses" data-vars-outbound-link="https://vreeman.com/discourses/">Discourses of Epictetus. Translations by George Long.</a></li>
</ul>
</dd>
</dl>
</footer>
<script>
var sz = document.forms['settingsForm'].elements['setting'];
var simplefrom = document.getElementById("simpleForm");
var advancedfrom = document.getElementById("advancedForm");
for (var i=0, len=sz.length; i<len; i++) {
sz[i].onclick = function() {
if (this.value == "simple") {
advancedfrom.classList.add("hidden");
simplefrom.classList.remove("hidden");
result.innerHTML = "Because we saw (data/feedback).<br>We expect that (change) will cause (impact).<br>We’ll measure this using (data metric)."
}
else if (this.value == "advanced") {
simplefrom.classList.add("hidden");
advancedfrom.classList.remove("hidden");
result.innerHTML = "Because we saw (quantitative & qualitative data).<br>We expect that (change) for (population) will cause (impact(s)).<br>We expect to see (data metric(s) change) over a period of (x business cycles)."
}
};
}
</script>
<script>
function getSimpleHypothesis() {
var s1 = document.getElementById("s1").value;
var s2 = document.getElementById("s2").value;
var s3 = document.getElementById("s3").value;
var s4 = document.getElementById("s4").value;
var html = 'Because we saw ' + s1 + '.<br>We expect that ' + s2 + ' will cause ' + s3 + '.<br>We’ll measure this using ' + s4 + '.';
result.innerHTML = html;
}
</script>
<script>
function getAdvancedHypothesis() {
var a1 = document.getElementById("a1").value;
var a2 = document.getElementById("a2").value;
var a3 = document.getElementById("a3").value;
var a4 = document.getElementById("a4").value;
var a5 = document.getElementById("a5").value;
var a6 = document.getElementById("a6").value;
var html = 'Because we saw '+a1+'.<br>We expect that '+a2+' for '+a3+' will cause '+a4+'.<br>We expect to see '+a5+' over a period of '+a6+'.';
result.innerHTML = html;
}
</script>
</body>
</html>