-
Notifications
You must be signed in to change notification settings - Fork 0
/
ABtesting.html
81 lines (69 loc) · 3.08 KB
/
ABtesting.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
<!doctype html>
<!-- AB TESTING PAGE -->
<html>
<head>
<title>Sarah Bawabe</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="ABtesting.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<div class="topBox">
<div id="nameBox">
<img src="name.png" id="name">
</div>
<div id="optionsBox">
<nav>
<a href="index.html">home</a>
<a href="resume.html">resume/cv</a>
<a href="contact.html">contact</a>
</nav>
</div>
</div>
<div id="bottomBox">
<div class="infoBox">
<h1> AB TESTING </h1>
<p> Through the use of consumer testing, AB Testing has proven to be an effective
mechanism for comparing potential options by eliminating designer bias when
determining which of two designs will be most effective. Given two proposed
interfaces for a Taxi Company, we will use statistical calculations to compare
and contrast these two designs. The interfaces will be compared using click
through rate, time to click, dwell time, and return rate. </p>
<p> Download full writeup here:
<a href="ABtestingHandin.pdf" target="_blank">
ABtestingHandin.pdf <i class="fas fa-file-download"></i> </a>
</p>
<h1> interfaces </h1>
<p> Since the focus of this project was to record differences in user interactions,
there was no focus on the style of the website. Instead we tried to incorporate different
features on each website that might yield different types of user interactions
(visible info vs. pop-up info, how obvious buttons appear, etc.). </p>
<p> View interfaces here:
<a href="https://stark-dawn-54724.herokuapp.com/" style="text-decoration: underline" target="_blank">
https://stark-dawn-54724.herokuapp.com/ </a>
</p>
<div class="picHolder">
<img src="taxiA.png" class="taxiPNG">
<img src="taxiB.png" class="taxiPNG">
</div>
<h1> heatmaps </h1>
<p> Utilizing eye-tracking software, we were able to gather information about
where users would focus their attention on each interface, and how these
differences could be interpreted based on the design of the interface itself. </p>
<div class="picHolder">
<img src="heatmapA.png" class="heatmapPNG">
<img src="heatmapB.png" class="heatmapPNG">
</div>
<h1> eye-tracking maps </h1>
<p> Also utilizing eye-tracking software, we were able to gather information about
generally what users would look at each interface by tracking where their eyes
gazed as they explored the page, rather than how much time they spent looking at
each component (as the heatmap shows). </p>
<div class="picHolder">
<img src="redMapA.png" class="heatmapPNG">
<img src="redMapB.png" class="heatmapPNG">
</div>
</div>
</div>
</html>