This repository has been archived by the owner on Jul 17, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
P4_testing_20.html
273 lines (250 loc) · 16.6 KB
/
P4_testing_20.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
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>P4 Project Testing</title>
<link rel="stylesheet" href="style/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav-links">
<li><a href="#ourClient">Our Client</a></li>
<li><a href="#document">Document</a></li>
<li><a href="#audience">Audience</a></li>
<li><a href="#platforms">Platforms</a></li>
<li><a href="#summary">Summary</a></li>
<li><a href="#response">Our Response</a></li>
<li><a href="#reflection">Reflection</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<img src="img/LeftOverlay.png" alt="Left Overlay" id="overlayL">
<img src="img/RightOverlay.png" alt="Right Overlay" id="overlayR">
<div class="wrapper">
<header>
<div id="timetag">
<p>10.11.2019</p>
</div>
<h1>P4 Project Testing</h1>
<h2>Livia Valenti, Vemund Hassel, Andreas Haugli, Mats Finsås, David Lekve og Henrik Viken Lied</h2>
</header>
<main>
<section id="ourClient">
<h2><img src="img/client.png" alt="client icon" id="client-icon">Our Client</h2>
<div class="hrReplacement"></div>
<ul class="clientList">
<li><strong>Client Name:</strong> Hassel Software AS</li>
<li><strong>Contact person:</strong> Vigbjørn Hassel Vaage</li>
<li><strong>Position in company:</strong> CEO</li>
</ul>
<p>
Hassel Software is a Norwegian tech startup created by a company with more than a hundred years of
experience selling and distributing cars. Since 2015 they have developed software to digitize
traditional dealerships and dealership networks.
</p>
<p>
Link to our website: <a href="../www/index.html">click here</a><br>
Link to our GitHub Repository: <a href="https://github.com/Xtrah/webtek20">click here</a>
</p>
</section>
<section id="document">
<h2><img src="img/purpgoals.png" alt="plan icon" id="purpgoals-icon">Testing Document</h2>
<div class="hrReplacement"></div>
<p>
The goal for testing our website properly is to find potential design flaws and otherwise improving
aspects of our site that might be confusing or hard to use. To proceed we created a Google Form
that asked testers to enter our website, browse around to get a feel of it, and in the end answer
some questions. The questions will ask the user about him or herself, the content, the layout and
the general feeling of the website. The form is flexible and can work in any testing scenario as it
includes both instructions on testing, a questionnaire, and automatically submits the data to us
online.
<br><br>
<strong>We chose to focus on two methods to test our site:</strong><br>
- Using the form as a questionnaire in a one-to-one interview while quietly observing
the tester navigating our site, and if needed adding follow up questions to go more in depth.<br>
- Sent as a link to remote testers.<br>
<br>
Link to our Google Form: <a href="https://s.ntnu.no/webtek20test">s.ntnu.no/webtek20test</a><br>
Link to our test results: <a
href="https://docs.google.com/spreadsheets/d/1MvJLjCtC0GXpe2Hz1j_LfFH84vZZC1zuHvHeKdbM3RE/edit?usp=sharing">results</a>
</p>
</section>
<section id="audience">
<h2>Testing Audience</h2>
<div class="hrReplacement"></div>
<p>
As the main audience of the website itself are potential customers of the product, it might be
natural
to reach out to similar users in the testing phase. It is however hard as student web developers to
find and reach out to national car importers and car distributors, so we will instead focus on the
general
usability of the site for the average user browsing the web sorted by age and occupation. We assume
that users within the target industry and the average web user are similar and will be
sufficient for testing usability and feeling of the website. The website is designed to work for
any web user that has an interest in the product or company and testing will provide data on whether
or not the design is working as intended and the user is provided with the information we want.
<br><br>
<strong>The testers are a mix of:</strong><br>
- Students<br>
- Our client<br>
- Other average web users<br>
</p>
<h3>Results</h3>
<p>
The test results show that we are partly successful finding the ideal testing audience. We had hoped
to reach out to a higher percentage of average web users instead of students, as the majority of
student testers are IT students and could be considered a power-user on the web rather than the
average user. The testing audience as a whole however is still sufficient to identify potential
flaws in our design as well as issues that we would resolve in a future version of the page.
Our client was in general very happy with the design and presentation of the company and the product they offer.
They found the presentation and layout to be a real inspiration, and was very intrigued by this way of showcasing
the solutions they offer. They understand that we do not build a solution for cross-browser compatibility,
and was OK with the limitations set upon our previous skills, and expected to only work with chrome as a
criteria in the project description.
<img class="content-img" src="img/p4/age.png" alt="age pie chart">
<img class="content-img" src="img/p4/occupation.png" alt="occupation pie chart">
</p>
</section>
<section id="platforms">
<h2>Testing Platforms</h2>
<div class="hrReplacement"></div>
<p>
The website is designed to be responsive on all screen sizes. In the questionnaire we collected data about
what device was used while testing.
</p>
<h3>Results</h3>
<p>
56% of testers used a desktop or laptop to test our site (full resolution), while the rest
used tablet or mobile resolutions. As per our design all features are compatible on all popular
screen resolutions, so all features are a product for testing on any platform. As the site is designed
to fullful the project requirement of compatibility for Chromium browsers, several testers using other
browsers experienced similar bugs. Unfortunately the testing did not include which browsers were used,
which is a major learning point for potential future tests.
<img class="content-img" src="img/p4/device.png" alt="device pie chart">
</p>
</section>
<section id="summary">
<h2>Feedback Summary</h2>
<div class="hrReplacement"></div>
<h3>Age</h3>
<p>
The age group ranged from 18 to 50+. Ages 18 to 29 was definitely overrepresented. This was mainly due to challenges getting a more widespread group of testers.
</p>
<h3>Colors</h3>
<p>
The scale went from "ugly" to "pretty" with a rating of 1 to 6.
48% of the testers liked the choice of colors (rating: 5-6), 36% were close to neutral (rating: 3-4), whilst 26% didn't like it (rating: 1-2).
On average the group 18-50+ rated the colors 3.6, whilst the younger (18-29) rated it 4.08.
</p>
<h3>Company</h3>
<p>
7 of the 25 that answered did not remember the company name.
5 of the 25 misunderstood completely or did not remember what the company was trying to sell.
Additionally, 7 testers thought that the company was selling cars.
</p>
<h3>Structure</h3>
<p>
The scale went from 1 to 6 where 1 is "confusing" and 6 is "clear" .
The younger groups liked it better with an average rating of 4.28.
The older only rated it 4.
The average rating was 4.22 across all groups.
</p>
<h3>Navigation</h3>
<p>
The scale went from 1 to 6 where 1 is "confusing" and 6 is "easy".
Average rating: 4.4 <br>
Among younger: 4.5 <br>
Among older: 4.1 <br>
</p>
<h3>Amount of text</h3>
<p>
The scale went from 1 to 6 where 1 is "too little" and 6 is "too much" .
The average was 2.88 which is close to a perfect score. Both younger and older felt the same way.
</p>
<h3>Trouble</h3>
<p>
14 people reported problems with the visit.
Some reported long loading times, which we did execpt as the website contains a big video and multiple pictures.
Many of those on tablet and phones experienced trouble. This was also expected because of problems with safari and firefox. This is especially true for safari on mobile.
</p>
<h3>Live testing</h3>
<p>
During live testing we observed that the users generally were confused about what the site was actually
trying to sell. To adress this we added some example content instead placeholder "ipsum"-text. Eventhough our
testers misunderstood the value proposition of our client. This is no problem as the ideal visitor will have
prior knowledge about the car industry and digitalization in this field.
</p>
</section>
<section id="response">
<h2>Our Response</h2>
<div class="hrReplacement"></div>
<p>
Although we only had 25 participants (less than we would like), we did get a lot of useful responses. The responses have given us a general direction for us to follow in future development. The following parts of this section will in sum be our response to the feedback that we got from our google form.
</p>
<h3>What we did right</h3>
<p>
We experienced positive feedback with the colors, the structure and the navigation. Structurally we felt pleased with the result and were happy that the users felt the same way. The choice of colors was more of a gamble as darker themes on websites rarely come as a standard, but more often an additional feature through a toggle or option.
</p>
<p>
When it comes to navigation we were also pleased. As a one-page website the only way for the user to get lost is a near indefinite scroll that makes the user feel lost in a "hole". As we included a navbar we always made sure that the user could navigate wherever, whenever he or she wants to. Moreover, the fact that the pages is quite short, gives the users more sense of control. This was reflected in good scores.
</p>
<p>
</p>
<h3>What we did wrong</h3>
<p>
Although we got a positive feedback on the colors, we have also noted that some testers disliked the darker theme and would have preferred it being lighter.
</p>
<p>
Otherwise there were few esthetic complaints.
</p>
<p>
Problems with usability is still an issue. On other browsers than chrome, we had trouble with scaling, disappearing and functionality, and as mentioned earlier, this was especially true for the mobile version of safari. This is reflected in the statistics from the form.
</p>
<p>
Something to note on the issues we had is that we were very limited in terms of libraries and external resources. This has been a part of the reason why we did not get everything right on the other browsers. <b>It was also not a requirement to test in other browsers than chrome.</b>
</p>
<h3>The future of the site</h3>
<p>
If the client wishes to use the website there is much to do. Implementation of databases, updating outdated practices (that we were forced to use due to limitations with libraries) and preening of mobile/tablet versions are some of the most pressing when it comes to usability, functionality and modularity.
</p>
</section>
<section id="reflection">
<h2>Self-reflection</h2>
<div class="hrReplacement"></div>
<p>
When we started this project, we had different backgrounds and experiences. Nobody had worked with
other people in git. Some of us had produced websites at high school. Firstly, we experienced a true
challenge to get the whole team on the same page, generating a common understanding of what we were
to deliver to our client. Questions like what we are building, what’s our client’s goal, what’s the
purpose of the website, were central. The first few group meetings were all about finding a common
ground and understanding of our assignment, our goal, and how to achieve it, while maintaining the
potential for all members to learn and develop themselves as web developers.
<br><br>
Once we started working on P2, we had managed to create a good common ground, and we were
experimenting with git, git branches and we had our first pull requests and merge conflicts. We were
starting to feel the power of Git and how we could collaborate on a bigger project efficiently with
git bash together with GitHub.
<br><br>
Entering P3, our efforts of building a good git understanding proved worthy. We started to have
great respect for the power in git and suddenly couldn’t imagine producing code without it. The
project has been a great learning experience and journey for us all. Working together as a group is
not easy, there have been different levels of ownership and some have neglected their
responsibility, leaving others to do additional work.
<br><br>
All in all, this has been a learning experience building a solid foundation for the rest of our
degree here at NTNU and not just web development. We can see how this can scale in the future and
how we later may one day be members of professional coding teams. We much appreciated this
opportunity and the course have been a pleasure to attend.
</p>
</section>
</main>
</div>
<script src="app.js"></script>
</body>
</html>