-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlow-fidelity-prototype.html
623 lines (555 loc) · 40.9 KB
/
low-fidelity-prototype.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
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Hugo 0.58.2" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#000000">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/prism.css" media="none" onload="this.media='all';">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<style id="inverter" media="none">
html { filter: invert(100%) }
* { background-color: inherit }
img:not([src*=".svg"]), .colors, iframe, .demo-container { filter: invert(100%) }
</style>
<title>Low-fidelity Prototype | Conscious.ly</title>
</head>
<body>
<a href="#main">skip to content</a>
<svg style="display: none">
<symbol id="bookmark" viewBox="0 0 40 50">
<g transform="translate(2266 3206.2)">
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
</g>
</symbol>
<symbol id="w3c" viewBox="0 0 127.09899 67.763">
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
<path style="fill:currentColor;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
</symbol>
<symbol id="tag" viewBox="0 0 177.16535 177.16535">
<g transform="translate(0 -875.2)">
<path style="fill-rule:evenodd;stroke-width:0;fill:currentColor" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
</g>
</symbol>
<symbol id="balloon" viewBox="0 0 141.73228 177.16535">
<g transform="translate(0 -875.2)">
<g>
<path style="fill:currentColor" d="m68.156 882.83-.88753 1.4269c-4.9564 7.9666-6.3764 17.321-5.6731 37.378.36584 10.437 1.1246 23.51 1.6874 29.062.38895 3.8372 3.8278 32.454 4.6105 38.459 4.6694-.24176 9.2946.2879 14.377 1.481 1.2359-3.2937 5.2496-13.088 8.886-21.623 6.249-14.668 8.4128-21.264 10.253-31.252 1.2464-6.7626 1.6341-12.156 1.4204-19.764-.36325-12.93-2.1234-19.487-6.9377-25.843-2.0833-2.7507-6.9865-7.6112-7.9127-7.8436-.79716-.20019-6.6946-1.0922-6.7755-1.0248-.02213.0182-5.0006-.41858-7.5248-.22808l-2.149-.22808h-3.3738z"/>
<path style="fill:currentColor" d="m61.915 883.28-3.2484.4497c-1.7863.24724-3.5182.53481-3.8494.63994-2.4751.33811-4.7267.86957-6.7777 1.5696-.28598 0-1.0254.20146-2.3695.58589-5.0418 1.4418-6.6374 2.2604-8.2567 4.2364-6.281 7.6657-11.457 18.43-12.932 26.891-1.4667 8.4111.71353 22.583 5.0764 32.996 3.8064 9.0852 13.569 25.149 22.801 37.517 1.3741 1.841 2.1708 2.9286 2.4712 3.5792 3.5437-1.1699 6.8496-1.9336 10.082-2.3263-1.3569-5.7831-4.6968-21.86-6.8361-33.002-.92884-4.8368-2.4692-14.322-3.2452-19.991-.68557-5.0083-.77707-6.9534-.74159-15.791.04316-10.803.41822-16.162 1.5026-21.503 1.4593-5.9026 3.3494-11.077 6.3247-15.852z"/>
<path style="fill:currentColor" d="m94.499 885.78c-.10214-.0109-.13691 0-.0907.0409.16033.13489 1.329 1.0675 2.5976 2.0723 6.7003 5.307 11.273 14.568 12.658 25.638.52519 4.1949.24765 14.361-.5059 18.523-2.4775 13.684-9.7807 32.345-20.944 53.519l-3.0559 5.7971c2.8082.76579 5.7915 1.727 8.9926 2.8441 11.562-11.691 18.349-19.678 24.129-28.394 7.8992-11.913 11.132-20.234 12.24-31.518.98442-10.02-1.5579-20.876-6.7799-28.959-.2758-.4269-.57803-.86856-.89617-1.3166-3.247-6.13-9.752-12.053-21.264-16.131-2.3687-.86369-6.3657-2.0433-7.0802-2.1166z"/>
<path style="fill:currentColor" d="m32.52 892.22c-.20090-.13016-1.4606.81389-3.9132 2.7457-11.486 9.0476-17.632 24.186-16.078 39.61.79699 7.9138 2.4066 13.505 5.9184 20.562 5.8577 11.77 14.749 23.219 30.087 38.74.05838.059.12188.1244.18052.1838 1.3166-.5556 2.5965-1.0618 3.8429-1.5199-.66408-.32448-1.4608-1.3297-3.8116-4.4602-5.0951-6.785-8.7512-11.962-13.051-18.486-5.1379-7.7948-5.0097-7.5894-8.0586-13.054-6.2097-11.13-8.2674-17.725-8.6014-27.563-.21552-6.3494.13041-9.2733 1.775-14.987 2.1832-7.5849 3.9273-10.986 9.2693-18.07 1.7839-2.3656 2.6418-3.57 2.4409-3.7003z"/>
<path style="fill:currentColor" d="m69.133 992.37c-6.2405.0309-12.635.76718-19.554 2.5706 4.6956 4.7759 9.935 10.258 12.05 12.625l4.1272 4.6202h11.493l3.964-4.4516c2.0962-2.3541 7.4804-7.9845 12.201-12.768-8.378-1.4975-16.207-2.6353-24.281-2.5955z"/>
<rect style="stroke-width:0;fill:currentColor" ry="2.0328" height="27.746" width="22.766" y="1017.7" x="60.201"/>
</g>
</g>
</symbol>
<symbol id="info" viewBox="0 0 41.667 41.667">
<g transform="translate(-37.035 -1004.6)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m76.25 1030.2a18.968 18.968 0 0 1 -23.037 13.709 18.968 18.968 0 0 1 -13.738 -23.019 18.968 18.968 0 0 1 23.001 -13.768 18.968 18.968 0 0 1 13.798 22.984"/>
<g transform="matrix(1.1146 0 0 1.1146 -26.276 -124.92)">
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:3.728;fill:none" d="m75.491 1039.5v-8.7472"/>
<path style="stroke-width:0;fill:currentColor" transform="scale(-1)" d="m-73.193-1024.5a2.3719 2.3719 0 0 1 -2.8807 1.7142 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</g>
</symbol>
<symbol id="warning" viewBox="0 0 48.430474 41.646302">
<g transform="translate(-1.1273 -1010.2)">
<path style="stroke-linejoin:round;stroke:currentColor;stroke-linecap:round;stroke-width:4.151;fill:none" d="m25.343 1012.3-22.14 37.496h44.28z"/>
<path style="stroke:currentColor;stroke-linecap:round;stroke-width:4.1512;fill:none" d="m25.54 1027.7v8.7472"/>
<path style="stroke-width:0;fill:currentColor" d="m27.839 1042.8a2.3719 2.3719 0 0 1 -2.8807 1.7143 2.3719 2.3719 0 0 1 -1.718 -2.8785 2.3719 2.3719 0 0 1 2.8763 -1.7217 2.3719 2.3719 0 0 1 1.7254 2.8741"/>
</g>
</symbol>
<symbol id="menu" viewBox="0 0 50 50">
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="0" x="0"/>
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="20" x="0"/>
<rect style="stroke-width:0;fill:currentColor" height="10" width="50" y="40" x="0"/>
</symbol>
<symbol id="link" viewBox="0 0 50 50">
<g transform="translate(0 -1002.4)">
<g transform="matrix(.095670 0 0 .095670 2.3233 1004.9)">
<g>
<path style="stroke-width:0;fill:currentColor" d="m452.84 192.9-128.65 128.65c-35.535 35.54-93.108 35.54-128.65 0l-42.881-42.886 42.881-42.876 42.884 42.876c11.845 11.822 31.064 11.846 42.886 0l128.64-128.64c11.816-11.831 11.816-31.066 0-42.9l-42.881-42.881c-11.822-11.814-31.064-11.814-42.887 0l-45.928 45.936c-21.292-12.531-45.491-17.905-69.449-16.291l72.501-72.526c35.535-35.521 93.136-35.521 128.64 0l42.886 42.881c35.535 35.523 35.535 93.141-.001 128.66zm-254.28 168.51-45.903 45.9c-11.845 11.846-31.064 11.817-42.881 0l-42.884-42.881c-11.845-11.821-11.845-31.041 0-42.886l128.65-128.65c11.819-11.814 31.069-11.814 42.884 0l42.886 42.886 42.876-42.886-42.876-42.881c-35.54-35.521-93.113-35.521-128.65 0l-128.65 128.64c-35.538 35.545-35.538 93.146 0 128.65l42.883 42.882c35.51 35.54 93.11 35.54 128.65 0l72.496-72.499c-23.956 1.597-48.092-3.784-69.474-16.283z"/>
</g>
</g>
</g>
</symbol>
<symbol id="doc" viewBox="0 0 35 45">
<g transform="translate(-147.53 -539.83)">
<path style="stroke:currentColor;stroke-width:2.4501;fill:none" d="m149.38 542.67v39.194h31.354v-39.194z"/>
<g style="stroke-width:25" transform="matrix(.098003 0 0 .098003 133.69 525.96)">
<path d="m220 252.36h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
<path style="stroke:currentColor;stroke-width:25;fill:none" d="m220 409.95h200"/>
<path d="m220 488.74h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
<path d="m220 331.15h200" style="stroke:currentColor;stroke-width:25;fill:none"/>
</g>
</g>
</symbol>
<symbol id="tick" viewBox="0 0 177.16535 177.16535">
<g transform="translate(0 -875.2)">
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="155" width="40" y="702.99" x="556.82"/>
<rect style="stroke-width:0;fill:currentColor" transform="rotate(30)" height="40" width="90.404" y="817.99" x="506.42"/>
</g>
</symbol>
</svg>
<div class="wrapper">
<header class="intro-and-nav" role="banner">
<div>
<div class="intro">
<a class="logo" href="index.html" aria-label="Conscious.ly home page">
<img src="images/logo.svg" alt="">
</a>
<p class="library-desc">
</p>
</div>
<nav id="patterns-nav" class="patterns" role="navigation">
<h2 class="vh">Main navigation</h2>
<button id="menu-button" aria-expanded="false">
<svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
<use xlink:href="#menu"></use>
</svg>
Menu
</button>
<div>
<label for="themer">
dark theme: <input type="checkbox" id="themer" class="vh">
<span aria-hidden="true"></span>
</label>
</div>
<ul id="patterns-list">
<li class="pattern">
<a href="index.html" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Home</span>
</a>
</li>
<li class="pattern">
<a href="proposal.html" >
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Proposal</span>
</a>
</li>
<li class="pattern">
<a href="low-fidelity-prototype.html">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Low-fidelity Prototype</span>
</a>
</li>
<li class="pattern">
<a href="high-fidelity-prototype.html">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">High-fidelity Prototype</span>
</a>
</li>
<li class="pattern">
<a href="formative-feedback.html">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Formative Feedback</span>
</a>
</li>
<li class="pattern">
<a href="alpha-prototype.html">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Alpha Prototype</span>
</a>
</li>
<li class="pattern">
<a href="beta-prototype.html">
<svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
<use xlink:href="#bookmark"></use>
</svg>
<span class="text">Beta Prototype</span>
</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="main-and-footer">
<div>
<main id="main">
<h1>Low-fidelity Prototype</h1>
<h3>Design concepts</h3>
<p>In the first phase of the project, we observed potential users, created personas and use case scenarios, and developed a
high-level design of our application. This phase of the project involves us converting user needs into application
requirements. To achieve this, we started by sketching sample user interfaces that contain the high-level concepts of
the requirements.</p>
<p>Our main idea is to notify users (without blocking access) whenever they use distractive applications (like Facebook,
Instagram, etc.), with the aim of teaching them restraint so that they can stick to focusing on their real goal. We
implemented the 10-plus-10 method of sketching to generate 20 different sketches. During the first part of the process
(the first ten sketches), all members of the group independently created sketches of the main application screens and
then shared them. We collectively reviewed the different ideas, and went on to merge some sketches and discard redundant
sketches. Once we were down to one sketch, we drew ten more sketches; this time with only slight feature variations of
the selected design. This method allowed us to generate a wider variety of concepts and develop a deep understanding of
the design challenge, what works, and what doesn’t. For example, Figure 1 (voice-to-text technology) would not be
feasible as a standalone design, as we wanted this application to be able to be used in quiet working spaces.</p>
<p>
Note that because we are attempting to develop a cross-platform system - a need that was identified during user
observation - we had to draw sketches for both the desktop and mobile versions of the system.
</p>
<p><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 234.50px; height: 136.05px;"><img
alt="" src="images/low-fidelity-prototype/sketch-1.png"
style="width: 234.50px; height: 136.05px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span><span class="c2"> </span></p>
<p class="c15"><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 233.24px; height: 138.50px;"><img
alt="" src="images/low-fidelity-prototype/sketch-2.png"
style="width: 233.24px; height: 138.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span><span> </span><span
style="overflow: hidden; display: inline-block; margin: -70.63px 70.63px; border: 0.00px solid #000000; transform: rotate(1.57rad) translateZ(0px); -webkit-transform: rotate(1.57rad) translateZ(0px); width: 139.16px; height: 280.42px;"><img
alt="" src="images/low-fidelity-prototype/sketch-3.png"
style="width: 139.16px; height: 280.42px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span><span> </span><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 308.50px; height: 145.60px;"><img
alt="" src="images/low-fidelity-prototype/sketch-4.png"
style="width: 308.50px; height: 145.60px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span><span> </span><span
style="overflow: hidden; display: inline-block; margin: -75.33px 75.33px; border: 0.00px solid #000000; transform: rotate(1.57rad) translateZ(0px); -webkit-transform: rotate(1.57rad) translateZ(0px); width: 145.76px; height: 296.42px;"><img
alt="" src="images/low-fidelity-prototype/sketch-5.png"
style="width: 145.76px; height: 296.42px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span><span> </span><span
style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 232.33px; height: 131.50px;"><img
alt="" src="images/low-fidelity-prototype/sketch-6.png"
style="width: 232.33px; height: 131.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span><span> </span><span
style="overflow: hidden; display: inline-block; margin: -114.22px 114.22px; border: 0.00px solid #000000; transform: rotate(1.57rad) translateZ(0px); -webkit-transform: rotate(1.57rad) translateZ(0px); width: 131.97px; height: 360.42px;"><img
alt="" src="images/low-fidelity-prototype/sketch-7.png"
style="width: 131.97px; height: 360.42px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);"
title=""></span><span> </span><span
style="overflow: hidden; display: inline-block; margin: -65.94px 65.94px; border: 0.00px solid #000000; transform: rotate(1.57rad) translateZ(0px); -webkit-transform: rotate(1.57rad) translateZ(0px); width: 128.63px; height: 260.50px;"><img
alt="" src="images/low-fidelity-prototype/sketch-8.png"
style="width: 128.63px; height: 260.50px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span><span> </span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 245.42px; height: 130.52px;"><img alt="" src="images/low-fidelity-prototype/sketch-9.png" style="width: 245.42px; height: 130.52px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span><span> </span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px); width: 275.54px; height: 146.88px;"><img alt="" src="images/low-fidelity-prototype/sketch-10.png" style="width: 275.54px; height: 146.88px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span><span> </span>
<span style="overflow: hidden; display: inline-block; margin: 0.00px 0.00px; border: 0.00px solid #000000; transform: rotate(3.14rad) translateZ(0px); -webkit-transform: rotate(3.14rad) translateZ(0px); width: 255.50px; height: 146.45px;"><img alt="" src="images/low-fidelity-prototype/sketch-11.png" style="width: 255.50px; height: 146.45px; margin-left: 0.00px; margin-top: 0.00px; transform: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span>
</p>
<h3>Prototypes</h3>
<ol>
<li><b><i>Widget: </i></b>This design will have a small widget over-laying the user’s screen. The motivation for this prototype is to have
a visual reminder of the user’s task presented to them at all times. By gradually changing the color of the visual
reminder, we can also instantaneously convey the amount of time remaining and create a sense of urgency should the user
become distracted. For our widgets, we have chosen to use the traffic light colour scheme that is often used in
smartphones to convey battery percentage: green for “full” (i.e. the user still has a large percentage of their time
left to complete their task), yellow after the halfway mark, and red after the 3/4 mark. At the halfway and 3/4 marks, a
banner notification will also appear, reminding the user of the time they have left.</li>
<p align="center">
<img src="images/low-fidelity-prototype/widget-prototype.jpg" width="450">
</p>
<li><b><i>Fullscreen Blocking: </b></i>This design has no visible elements on the screen beyond the initial prompt to set the task. The
motivation for this prototype is to see whether sporadic, strong (i.e blocking) notifications are more effective at
curbing unwanted behaviour, than the constantly present visual reminder employed by the widget prototype. In this
prototype, instead of banner time notifications, a full-page popup appears on the screen with the logo in the respective
time-based colour as described in the prototype above. The user would have to click on a button to make the notification
disappear; i.e. it cannot be ignored.
</li>
<p align="center">
<img src="images/low-fidelity-prototype/prototype-2.jpg" width="450">
</p>
</ol>
<p></p>
<h3>Usability Goals and Benchmark Tasks</h3>
<ul>
<li><b>The system should be effective at curbing disruptive user behaviour</b></li> As previously stated, our goal is not to completely block out all sources of distractions, but to provide an effective
mechanism for aiding the user in minimizing their disruptive behaviour.This implies that from the onset, our prototype
should be able to at least slightly curb disruptive tech usage.
<li><b>The system should be non-intrusive</b></li> There is a certain sweet-spot between the system providing enough friction to curb unwanted user behaviour, and
providing too much friction to the point it becomes a hindrance. The multi-tasker and utilitarian personas are
particularly prone to uninstalling the system if they feel it slows them down. The prototype should aim to hit, or at
the very least help identify, that ideal level of intrusiveness.
<li><b>The user should feel empowered after using the system</b></li> In order to ensure continued long-term use, it is preferable to evoke positive feelings rather than negative ones - i.e
feelings of satisfaction and self-control should dominate feelings of guilt and regret. The relaxer persona is prone to
uninstall the system if using it disrupts their leisure time.
<li><b>The user should be able to form a conceptual model of how the system works from the first use</b></li> Being unable to grasp the “rules” by which the system operates - i.e when the distraction prompt appears, why the widget
changes color, and so on will hinder the overall effectiveness of the system as the majority of functionality is user
driven. Moreover, it may lead to a frustrating experience when the user’s conceptual model does not match what the
system is actually doing.
</ul>
<table class="c18 c16">
<tbody>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c8">Task</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c8">Association to goal(s)</span></p>
</td>
</tr>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Select a task representative of their intended goals</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Related to goals 1, 3, 4: A dropdown list of predefined tasks are shown to the
user. The functionality of this dropdown should be apparent to the user, however it is possible that they
question where the tasks come from (at which point the observer may clarify)</span></p>
</td>
</tr>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Set a time representative of the actual time they will take to complete the
task</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Related to all goals: A simple slider for setting the time. The functionality of
this slider should be apparent to the user. It also serves to test the key assumption that a user will
select a time representative of the actual time they spent on the task, as subsequent functions (i.e the
half-way notification) rely on having a good reasonable time estimate</span></p>
</td>
</tr>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Select an option when navigating away from their main task</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Related to goals 2, 3: A pop-up will appear on the user’s screen when they
navigate to an app or browser they shouldn’t be on. The pop-up will simply ask the user whether they wish to
go to a potential source of distraction. Selecting “Yes” allows the user to continue what they were doing,
and pressing “No” takes them back to the app they were on before navigating away </span></p>
</td>
</tr>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Stop using the app during a session</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Related to goals 2, 4: The user will click on the widget or the task-tray icon to
access the applications’ menu and exit the application. Despite the lack of visual prompts the location of
the exit button should be something that the user readily infers</span></p>
</td>
</tr>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Stop using the app after time is up</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Related to goals 3, 4: When the time limit set by the user ends, they will be
prompted to start a new task from a menu, and one of the options presented is “Nothing; exit”. The user
should be able to select this option easily.</span></p>
</td>
</tr>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Start a new task after completing previous task</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Related to goals 1, 3, 4: Upon completing their task, the user will click on the
widget or task-tray icon and launch a new task</span></p>
</td>
</tr>
<tr class="c6">
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Start a new task via the automatic prompt</span></p>
</td>
<td class="c7" colspan="1" rowspan="1">
<p class="c5"><span class="c2">Related to goals 2, 3, 4: When the time limit set by the user ends, they will be
prompted to start their next task. The user should be able to identify this menu from the initial
interaction with the system and continue setting tasks</span></p>
</td>
</tr>
</tbody>
</table>
<h3>Test Materials</h3>
<ol>
<li><a href="images/low-fidelity-prototype/ethics-consent-form.pdf">User Consent Form</a></li>
<li><a href="images/low-fidelity-prototype/observer-briefing.pdf">Observer Briefing Document</a></li>
<li><a href="images/low-fidelity-prototype/user-introduction.pdf">User Introduction Document</a></li>
<li><a href="images/low-fidelity-prototype/pre-test-questionnaire.pdf">Pre-Test Questionnaire</a></li>
<li><a href="images/low-fidelity-prototype/training-user.pdf">Training Document</a></li>
<li><a href="images/low-fidelity-prototype/test-manual.pdf">Test Manual (Script + Test Tasks)</a></li>
<li><a href="images/low-fidelity-prototype/data-collection-sheet.pdf">Data Collection Sheet</a></li>
<li><a href="images/low-fidelity-prototype/post-test-questionnaire.pdf">Post-Test Questionnaire</a></li>
</ol>
<h3>Testing Procedure</h3>
<p>We carried out tests with 9 users, each user testing both of the prototypes we had created. In testing our lo-fi paper
prototypes, we implemented the “Wizard of Oz” technique where one of us acted as the app itself; responding to the
user’s actions (e.g. tapping the screen, swiping, etc.) by presenting a paper notification, popup, or new screen. Our
pre- and post-test procedures consisted of pre- and post-test questionnaires that the user filled out, as well as a
brief introduction and consent form. Though our post-test questionnaire contained short-answer questions wherein the
user could give us feedback and suggest additional features, we also discussed this with the users in person as they
filled it out, as we felt that it was easier for them to convey their real thoughts that way.</p>
<p>Prior to carrying out the tests, we created a test script in the form of a flowchart, with different paths depicting
different scenarios the user may run through. In the flowchart (pictured below), the rounded green rectangles contain
actions for the Wizard of Oz to take, the grey rectangles contain actions the user might take, and the blue diamonds
contain conditions that determine which action of multiple that the Wizard of Oz should perform when there is a split in
the path. There are also splits in the flow that appear without the use of blue diamonds, signifying the different paths
that a user may take of their own choice. Note that in the flowchart, the next steps seem instantaneous - this is
specifically for testing purposes, to help assess different aspects of the application; in real life the next steps may
take more time to happen, or may never happen at all in that session (e.g. a user receiving a Facebook notification
while trying to work). Also note that the steps for Prototype 2 are a subset of those for Prototype 1; we used the same
script for both tests and skipped steps where necessary (i.e. skipped the widget steps for Prototype 2).</p>
<p align="center">
<img src="images/low-fidelity-prototype/test-flowchart.png">
</p>
<p>As well as making observations during and after the tests, we also recorded a <a href="https://drive.google.com/file/d/1VPjWcVUyyE9zTHpOpqF7LIiXUGmA74B1/view?usp=sharing">video of one of the users running through
Prototype 1</a>(too large to include in the notebook)</p>
<h3>Quantitative Test Results</h3>
<p>During the test, we measured how many users succeeded in completing each of our benchmark tasks mentioned in the
previous section. In particular we noticed that users were able to perform all the tasks which were prompted of them,
however failed to acknowledge the capabilities of the widget (in Prototype 1). Nonetheless, after the users discovered
tapping on the widget for the first time, they easily understood that they could do it again to perform the same tasks.</p>
<table class="c14">
<tbody>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c2">Task</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c2">Definition of Success (within 5 seconds)</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c2">Results</span></p>
</td>
</tr>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">Select a task representative of their intended goals</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">User chooses a task from the dropdown menu on the app’s main page</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">9 people</span></p>
</td>
</tr>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">Set a time representative of the actual time they will take to complete the
task</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">User correctly interprets the slider feature and sets a time reflective of the
task they have chosen</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">8 people</span></p>
</td>
</tr>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">Select an option when navigating away from their main task</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">User selects one of the two options when the distraction pop-up appears</span>
</p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">9 people</span></p>
</td>
</tr>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">Stop using the app during a session</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">User taps on the widget then on the exit button to exit the app</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">3 people</span></p>
</td>
</tr>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">Stop using the app after time is up</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">User selects “Nothing; exit” from the task menu</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">5 people</span></p>
</td>
</tr>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">Start a new task after completing previous task</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">User taps on the widget to start a new task when they are done with the previous
one</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">3 people</span></p>
</td>
</tr>
<tr class="c4">
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">Start a new task via the automatic prompt</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">User selects a new task after being notified that their time is up</span></p>
</td>
<td class="c5" colspan="1" rowspan="1">
<p class="c8"><span class="c0">9 people</span></p>
</td>
</tr>
</tbody>
</table>
<h3>Qualitative Test Results (General Reactions & Suggested Changes)</h3>
<p align="center">
<img src="images/low-fidelity-prototype/positive-attributes-diagram.png">
</p>
<p>In general, users seemed to feel that the app’s time-based notifications were helpful for staying on track, and that
they felt in control of the app. This was pleasing to find out, as our intention was to develop good habits and
restraint in the user.</p>
<p align="center">
<img src="images/low-fidelity-prototype/usability-and-usefulness-diagram.png">
</p>
<p>We received mixed feedback (though leaning on the positive side) regarding ease of use of the app, as well as its
usefulness, with one of the features in particular receiving a significant amount of attention: the distraction popup.</p>
<p align="center">
<img src="images/low-fidelity-prototype/distraction-notification.jpg">
</p>
<p>The distraction popup is a message reading “Are you sure you want to be distracted?” that appears overlaid on the user’s
screen whenever an app that they had marked as distracting (during the app setup) was opened during an active session of
the app - i.e. a session in which a user has chosen a task they would like to get done in a certain amount of time.
Users seemed to like this popup, however, we received a large amount of qualitative feedback stating that it was “too
guilt free” and “too easy to get rid of”. One user suggested that the frequency of the pop up notifications should be
increased; i.e. that if the user answers “yes” and continues on to the distraction, if they remain on that app for a
certain period of time, the popup should reappear. In contrast, another user brought up a very interesting point about
how when something is repetitive, it becomes susceptible to fading into the background/eventually being akin to white
noise: “[it was] too easy to just click yes especially after the message has come up a few times”. This is something we
will have to think about going forward; how to find a balance between a popup that doesn’t show up enough, and one that
shows up too often that it becomes ignorable, as both ends of the spectrum result in the feature being ineffective.</p>
<h3>Suggested Additional Features</h3>
<p>Some interesting features that users suggested we add to the prototype are as follows:</p>
<ul>
<li>Add a score feature for gamification (e.g. daily stats/scores that show if the user is getting better at
avoiding distractions)</li>
<li>Add a fun daily “zodiac” feature; a short description of a creature that the user acted like based on their interactions
with the app that day (e.g. a person who kept opening social media apps that day would be a “social butterfly, and would
get to read a short description about their traits as a “social butterfly)</li>
<li>Add TODO list so users don’t have to enter tasks one at a time</li>
<li>Add a congratulatory message when the user avoids a distraction</li>
</ul>
</main>
<footer role="contentinfo">
</footer>
</div>
</div>
</div>
<script src="js/prism.js"></script>
<script src="js/dom-scripts.js"></script>
</body>
</html>