-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
690 lines (671 loc) · 49.9 KB
/
index.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
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
<!doctype html>
<html class="scroll-smooth" lang="en">
<head>
<!-- Title -->
<title>SUS Analysis Toolkit</title>
<!-- Meta Tags -->
<meta charset="UTF-8" />
<meta name="language" content="EN">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="The web-based System Usability Scale Analysis Toolkit for free calculation, analysis, plotting and statistics calculation of your SUS study data. Fully web-based. Free & Open-Source. Secure & GDPR compliant.">
<meta name="keywords"
content="SUS, System, Usability, Scale, Study, Research, Plotting, Figures, Calculator, Statistics, Analysis, Questionnaire, Generator, PDF">
<meta name="robots" content="index, follow">
<meta name="author" content="Jonas Blattgerste">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml"
href="data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' class='h-8'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M952 224h-52c-4.4 0-8 3.6-8 8v248h-92V304c0-4.4-3.6-8-8-8H448v432h344c4.4 0 8-3.6 8-8V548h92v244c0 4.4 3.6 8 8 8h52c4.4 0 8-3.6 8-8V232c0-4.4-3.6-8-8-8zm-728 80v176h-92V232c0-4.4-3.6-8-8-8H72c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8h52c4.4 0 8-3.6 8-8V548h92v172c0 4.4 3.6 8 8 8h152V296H232c-4.4 0-8 3.6-8 8z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E" />
<!-- Tailwindcss-->
<script src="scripts/tailwind.js"></script>
<!-- Animate.css -->
<link rel="stylesheet" href="styles/animate.min.css">
<!-- Wow.js -->
<script src="scripts/wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body>
<div class="flex flex-col h-screen overflow-hidden">
<!-- Header/Navbar -->
<header class="bg-gray-900 shadow-2xl z-50">
<div class="mx-auto px-8 py-4">
<div class="flex flex-col items-start md:flex-row md:items-center md:justify-between">
<div class="flex items-center">
<a class="navbar-brand">
<img
src="data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' class='h-8'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M952 224h-52c-4.4 0-8 3.6-8 8v248h-92V304c0-4.4-3.6-8-8-8H448v432h344c4.4 0 8-3.6 8-8V548h92v244c0 4.4 3.6 8 8 8h52c4.4 0 8-3.6 8-8V232c0-4.4-3.6-8-8-8zm-728 80v176h-92V232c0-4.4-3.6-8-8-8H72c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8h52c4.4 0 8-3.6 8-8V548h92v172c0 4.4 3.6 8 8 8h152V296H232c-4.4 0-8 3.6-8 8z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"
alt="" width="60" height="60">
</a>
<div class="px-8">
<h1 class="text-3xl font-bold text-white">System Usability Scale Analysis Toolkit</h1>
<p class="mt-1.5 text-sm text-white">
Fully web-based. Free & Open-Source. Secure & GDPR compliant.
</p>
</div>
</div>
<div class="flex items-center gap-4">
<a href="https://github.com/jblattgerste/sus-analysis-toolkit" target="_blank">
<button
class="inline-flex items-center justify-center gap-1.5 rounded border border-gray-200 bg-white px-5 py-3 text-gray-900 transition hover:text-gray-700 focus:outline-none focus:ring"
type="button">
<span class="text-sm font-medium"> View on GitHub </span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-4 w-4">
<path
d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z">
</path>
</svg>
</button>
</a>
<a href="https://analysis.sus.tools" target="_blank">
<button
class="inline-block rounded bg-blue-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-blue-700 focus:outline-none focus:ring animate__animated animate__pulse animate__infinite animate__slow"
type="button">
Start using the toolkit for free!
</button>
</a>
</div>
</div>
</div>
</header>
<!-- Hero -->
<div class="flex-grow flex items-center justify-center bg-white">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div
class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div class="lg:pr-8 lg:pt-4">
<div class="lg:max-w-lg">
<h2 class="text-base font-semibold leading-7 text-blue-600">The System Usability Scale Analysis Toolkit
</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">Get insights & plots for your
System Usability Scale study. Instantly!</p>
<p class="mt-6 text-lg leading-8 text-gray-600">The open-source, web-based SUS analysis toolkit is the
most
comprehensive solution for deploying the System Usability Scale to date. It allows you to generate
questionnaires for your study and calculate, analyze, plot, interpret, and contextualize SUS study
results
from any source — all for free.</p>
<dl class="mt-6 max-w-xl space-y-2 text-base leading-7 text-gray-600 lg:max-w-none">
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute left-1 top-1 h-5 w-5 text-blue-600" viewBox="0 0 512 512" fill="currentColor"
aria-hidden="true">
<g>
<path class="st0"
d="M464,0H48C21.492,0,0,21.492,0,48v416c0,26.508,21.492,48,48,48h416c26.508,0,48-21.492,48-48V48 C512,21.492,490.508,0,464,0z M444.664,35c10.492,0,19,8.508,19,19s-8.508,19-19,19c-10.492,0-19-8.508-19-19 S434.172,35,444.664,35z M374.164,35c10.492,0,19,8.508,19,19s-8.508,19-19,19c-10.492,0-19-8.508-19-19S363.672,35,374.164,35z M303.664,35c10.492,0,19,8.508,19,19s-8.508,19-19,19c-10.492,0-19-8.508-19-19S293.172,35,303.664,35z M472,464 c0,4.406-3.586,8-8,8H48c-4.414,0-8-3.594-8-8V104h432V464z" />
<rect x="96" y="192" class="st0" width="152" height="32" />
<rect x="96" y="352" class="st0" width="328" height="32" />
<rect x="304" y="192" class="st0" width="120" height="120" />
<polygon class="st0" points="229.042,304 248,304 248,272 96,272 96,304 213.042,304" />
</g>
</svg>
Fully web-based.
</dt>
<dd class="inline">No installation or registration required. The SUS Analysis toolkit workes
out-of-the-box across platforms.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute left-1 top-1 h-5 w-5 text-blue-600" viewBox="0 0 24 24" fill="currentColor"
aria-hidden="true">
<g>
<path fill="none" d="M0 0H24V24H0z" />
<path
d="M12 2c5.523 0 10 4.477 10 10 0 4.4-2.841 8.136-6.789 9.473l-.226.074-2.904-7.55C13.15 13.95 14 13.054 14 12c0-1.105-.895-2-2-2s-2 .895-2 2c0 1.077.851 1.955 1.917 1.998l-2.903 7.549-.225-.074C4.84 20.136 2 16.4 2 12 2 6.477 6.477 2 12 2zm0 2c-4.418 0-8 3.582-8 8 0 2.92 1.564 5.475 3.901 6.872l1.48-3.849C8.534 14.29 8 13.207 8 12c0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.207-.535 2.29-1.38 3.023.565 1.474 1.059 2.757 1.479 3.85C18.435 17.475 20 14.92 20 12c0-4.418-3.582-8-8-8z" />
</g>
</svg>
Free & Open-Source.
</dt>
<dd class="inline">All parts of the toolkit are licened under the MIT license. Users own all
calculations and figures created.</dd>
</div>
<div class="relative pl-9">
<dt class="inline font-semibold text-gray-900">
<svg class="absolute left-1 top-1 h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
clip-rule="evenodd" />
</svg>
Secure & GDPR compliant.
</dt>
<dd class="inline">No data is stored on our servers. Uploaded SUS data is only used for the
calculations
and figures.</dd>
</div>
</dl>
</div>
</div>
<a href="https://analysis.sus.tools" target="_blank" class="wow animate__animated animate__fadeInRight"
data-wow-delay="0.5s">
<img src="resources/analysis.webp" alt="Screenshot of analysis.sus.tools"
class="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-900/100 sm:w-[57rem] md:-ml-4 lg:-ml-0 transition-transform duration-500 ease-in-out hover:scale-105"
width="2432" height="1442" />
</a>
</div>
</div>
</div>
</div>
<!-- Example Use Cases -->
<div class="bg-gray-900 text-white py-16 shadow-2xl text-center z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class=" text-4xl font-extrabold text-white">
Example uses cases for the SUS Analysis Toolkit
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-400 mx-auto">
The System Usability Scale Analysis Toolkit is a versatile tool that can be used for a variety of use cases.
Here are three common examples of
how it could be applied to aid your SUS study.
</p>
</div>
<div class="mt-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-3 lg:gap-8">
<div class="wow animate__animated animate__fadeIn" data-wow-offset="100">
<div class="flex items-center justify-center h-16 w-16 rounded-md bg-white text-blue-600 mx-auto">
<svg class="h-14 w-14" fill="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"><!-- "Blueprint Action Icon" by Shannon E. Thomas (CC 4.0 BY) -->
<path
d="M14.5,16 C14.2238576,16 14,15.7761424 14,15.5 L14,9.5 C14,9.22385763 14.2238576,9 14.5,9 L16,9 C17.1045695,9 18,9.8954305 18,11 C18,11.4116588 17.8756286,11.7942691 17.6624114,12.1123052 C18.4414283,12.3856578 19,13.1275982 19,14 C19,15.1045695 18.1045695,16 17,16 L14.5,16 Z M15,15 L17,15 C17.5522847,15 18,14.5522847 18,14 C18,13.4477153 17.5522847,13 17,13 L15,13 L15,15 Z M15,12 L16,12 C16.5522847,12 17,11.5522847 17,11 C17,10.4477153 16.5522847,10 16,10 L15,10 L15,12 Z M12.9499909,4 L19.5,4 C20.8807119,4 22,5.11928813 22,6.5 L22,19.5 C22,20.8807119 20.8807119,22 19.5,22 L13.5,22 C12.2700325,22 11.2475211,21.1117749 11.0389093,19.9417682 C10.8653433,19.9799013 10.6850188,20 10.5,20 L4.5,20 C3.11928813,20 2,18.8807119 2,17.5 L2,4.5 C2,3.11928813 3.11928813,2 4.5,2 L10.5,2 C11.709479,2 12.7183558,2.85887984 12.9499909,4 Z M13,5 L13,17.5 C13,18.3179089 12.6072234,19.0440799 12,19.5001831 C12.0000989,20.3285261 12.6716339,21 13.5,21 L19.5,21 C20.3284271,21 21,20.3284271 21,19.5 L21,6.5 C21,5.67157288 20.3284271,5 19.5,5 L13,5 Z M8.56005566,11.4964303 C8.54036595,11.4987873 8.52032459,11.5 8.5,11.5 L6.5,11.5 C6.47967541,11.5 6.45963405,11.4987873 6.43994434,11.4964303 L5.96423835,12.6856953 C5.86168164,12.9420871 5.57069642,13.066795 5.31430466,12.9642383 C5.0579129,12.8616816 4.93320495,12.5706964 5.03576165,12.3143047 L7.03576165,7.31430466 C7.20339081,6.89523178 7.79660919,6.89523178 7.96423835,7.31430466 L9.96423835,12.3143047 C10.066795,12.5706964 9.9420871,12.8616816 9.68569534,12.9642383 C9.42930358,13.066795 9.13831836,12.9420871 9.03576165,12.6856953 L8.56005566,11.4964303 L8.56005566,11.4964303 Z M8.16148352,10.5 L7.5,8.8462912 L6.83851648,10.5 L8.16148352,10.5 Z M10.5,3 L4.5,3 C3.67157288,3 3,3.67157288 3,4.5 L3,17.5 C3,18.3284271 3.67157288,19 4.5,19 L10.5,19 C11.3284271,19 12,18.3284271 12,17.5 L12,4.5 C12,3.67157288 11.3284271,3 10.5,3 Z M6.5,18 C6.22385763,18 6,17.7761424 6,17.5 C6,17.2238576 6.22385763,17 6.5,17 L8.5,17 C8.77614237,17 9,17.2238576 9,17.5 C9,17.7761424 8.77614237,18 8.5,18 L6.5,18 Z M15.5,20 C15.2238576,20 15,19.7761424 15,19.5 C15,19.2238576 15.2238576,19 15.5,19 L17.5,19 C17.7761424,19 18,19.2238576 18,19.5 C18,19.7761424 17.7761424,20 17.5,20 L15.5,20 Z" />
</svg>
</div>
<div>
<p class="mt-5 text-lg leading-6 font-medium text-white">Comparing the
usability of<br>products or user groups</p>
<p class="mt-2 text-base leading-6 text-gray-400">
Imagine you have two products and you want to compare their perceived usability (within-subject
comparison). Alternatively, you might have three different user groups (e.g., different personas) using
the same product and want to evaluate their performance (between-subject comparison). First, you could
export an SUS questionnaire in PDF format from pdf.sus.tools, conduct your study, and collect the raw
results. Then, you upload the data as CSV files to analysis.sus.tools to instantly receive descriptive
statistics, contextualized results, and camera-ready plots you can download. Finally, you can use
statistics.sus.tools to calculate the inferential statistics to gather further insights.
</p>
<div class="mt-3">
<a href="https://pub.uni-bielefeld.de/download/2987473/2987474/Dissertation%20Jonas%20Blattgerste.pdf#page=233"
target="_blank" class="text-base leading-6 font-medium text-blue-600 hover:text-white">
Example Publication →
</a>
</div>
</div>
</div>
<div class="wow animate__animated animate__fadeIn" data-wow-offset="100">
<div class="flex items-center justify-center h-16 w-16 rounded-md bg-white text-blue-600 mx-auto">
<svg class="h-14 w-14 pb-0.5" fill="currentColor" viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"><!-- "Blueprint Action Icon" by Shannon E. Thomas (CC 4.0 BY) -->
<path class="blueprint_een" d="M15.664,16.854l-1.325-1.325l0.707-0.707l1.324,1.324L15.664,16.854z M19.017,16h-2v1h2V16z
M13,14.207l0.354,0.354l0.707-0.707L13,12.793l-1.061,1.061l0.707,0.707L13,14.207z M26.641,17.831l1.358,1.358L28,17.776
l-0.652-0.652L26.641,17.831z M21.678,15.529l-0.707-0.707l-1.324,1.324l0.707,0.707L21.678,15.529z M23,14.207l0.354,0.354
l0.707-0.707L23,12.793l-1.061,1.061l0.707,0.707L23,14.207z M31,6v22c0,0.552-0.448,1-1,1H2c-0.552,0-1-0.448-1-1V6
c0-0.552,0.448-1,1-1h28C30.552,5,31,5.448,31,6z M29,7H3v20h26V7z M11.678,15.529l-0.707-0.707l-1.324,1.324l0.707,0.707
L11.678,15.529z M10,20.207L12.793,23h3.414l3-3h3l3.301-3.301l0.155,0.155l0.707-0.707l-0.155-0.155L28,14.207v-1.414l-2.492,2.492
l-0.462-0.462l-0.707,0.707l0.462,0.462L21.793,19h-3l-3,3h-2.586L10,18.793L6.793,22H4v1h3.207L10,20.207z M6,16H4v1h2V16z M9,16H7
v1h2V16z" />
</svg>
</div>
<div>
<p class="mt-5 text-lg leading-6 font-medium text-white">Analysing
iterative<br>usability developments</p>
<p class="mt-2 text-base leading-6 text-gray-400">Let's say you have a single product and you want to
analyze its usability over multiple iterations (a within-subject comparison). This approach is
particularly useful for formative testing or continuous usability observation. If you already have a
survey tool you are using, you could use pdf.sus.tools to select a variant/language of the SUS and simply
transfer the questions to your survey tool. Conduct your study and collect the raw question scores after
each iteration. Then, upload the dataset as a CSV file to analysis.sus.tools to instantly receive
calculated SUS scores, descriptive statistics, contextualized results, and camera-ready plots you can
download. Finally, you can use statistics.sus.tools to calculate the inferential statistics for further
insights.
</p>
<div class="mt-3">
<a href="https://pub.uni-bielefeld.de/download/2987473/2987474/Dissertation%20Jonas%20Blattgerste.pdf#page=190"
target="_blank" class="text-base leading-6 font-medium text-blue-600 hover:text-white">
Example Publication →
</a>
</div>
</div>
</div>
<div class="wow animate__animated animate__fadeIn" data-wow-offset="100">
<div class="flex items-center justify-center h-16 w-16 rounded-md bg-white text-blue-600 mx-auto">
<svg class="h-14 w-14 pt-1" viewBox="0 0 32 32" fill="currentColor"
xmlns="http://www.w3.org/2000/svg"><!-- "Blueprint Action Icon" by Shannon E. Thomas (CC 4.0 BY) -->
<path class="blueprint_een" d="M31,2H1C0.448,2,0,2.448,0,3v22c0,0.552,0.448,1,1,1h11l3.293,3.293
c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293L20,26h11c0.552,0,1-0.448,1-1V3C32,2.448,31.552,2,31,2z M30,24
H19.172L16,27.172L12.828,24H2V4h28V24z M15,21h3v-3h-3V21z M16,19h1v1h-1V19z M15,11c0-1.103,0.897-2,2-2c1.103,0,2,0.897,2,2
s-0.897,2-2,2h-2v4h3v-1.101c2.282-0.463,4-2.48,4-4.899c0-2.761-2.239-5-5-5s-5,2.239-5,5v1h3V11z M13,11c0-2.206,1.794-4,4-4
c2.206,0,4,1.794,4,4s-1.794,4-4,4v1h-1v-2h1c1.657,0,3-1.343,3-3s-1.343-3-3-3s-3,1.343-3,3H13z" />
</svg>
</div>
<div>
<p class="mt-5 text-lg leading-6 font-medium text-white">Quickly
benchmarking<br>system usability</p>
<p class="mt-2 text-base leading-6 text-gray-400">
You might want to quickly benchmark the usability of a single product without having comparative data
points or multiple iterations. This approach is ideal for obtaining a quick and dirty assessment of your
product's perceived usability. First, you could use pdf.sus.tools to choose a variant/language of the SUS.
Then, after conducting your usability study and collecting the raw SUS scores, you can upload the data as
a CSV file to analysis.sus.tools (this time the "single variable analysis") to instantly receive the
calculated SUS study score, contextualized against industry benchmarks and insights from previous
research. This will provide you with descriptive statistics, a dashboard view of your product's
performance, and camera-ready plots.
</p>
<div class="mt-3">
<a href="https://mixality.de/wp-content/uploads/2022/07/Blattgerste2022SUS.pdf#page=8" target="_blank"
class="text-base leading-6 font-medium text-blue-600 hover:text-white">
Example Publication 1 →
</a>
</div>
<div class="mt-3">
<a href="https://papers.sim2.be/assets/uploads/files/640cc-acs.jchemed.1c00894.pdf#page=4" target="_blank"
class="text-base leading-6 font-medium text-blue-600 hover:text-white">
Example Publication 2 →
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Separate tools/feature links -->
<!-- Analysis -->
<div class="mt-12 wow animate__animated animate__fadeInRight" data-wow-offset="300">
<div class="mx-auto max-w-7xl py-8 sm:px-6 sm:py-12 lg:px-8">
<div
class="relative isolate overflow-hidden bg-gray-900 px-6 pt-8 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-16 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<svg viewBox="0 0 1024 1024"
class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
aria-hidden="true">
<circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#1f76b4" />
</radialGradient>
</defs>
</svg>
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
<h2 class="text-4xl font-bold tracking-tight text-white">Explore, analyze, plot and contextualize SUS data
</h2>
<p class="mt-6 text-lg leading-8 text-gray-400">Allows you to calculate your SUS study scores for your
multi-variable or single-variable usability studies to get instant insights and plots based on years of
research on what specific SUS study scores correlate with.</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="https://analysis.sus.tools"
class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Go
to analysis.sus.tools</a>
<a href="https://github.com/jblattgerste/sus-analysis-toolkit"
class="text-sm font-semibold leading-6 text-white hover:text-blue-600">Check out on GitHub <span
aria-hidden="true">→</span></a>
</div>
</div>
<div class="relative">
<a href="https://analysis.sus.tools">
<img
class="absolute inset-0 h-full w-auto max-w-none object-contain rounded-md bg-white/5 ring-1 ring-white/10 transition-transform duration-500 ease-in-out hover:scale-105"
src="resources/PreviewAnalysis.webp" alt="Screenshot of analysis.sus.tools comparing two scores" />
</a>
</div>
</div>
</div>
</div>
<!-- PDF-->
<div class="wow animate__animated animate__fadeInLeft" data-wow-offset="300">
<div class="mx-auto max-w-7xl py-8 sm:px-6 sm:py-12 lg:px-8">
<div
class="relative isolate overflow-hidden bg-gray-900 px-6 pt-8 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-16 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<svg viewBox="0 0 1024 1024"
class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
aria-hidden="true">
<circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#1f76b4" />
</radialGradient>
</defs>
</svg>
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
<h2 class="font-bold tracking-tight text-white text-4xl">Generate questionnaires before your SUS
study</h2>
<p class="mt-6 text-lg leading-8 text-gray-400">Provides you the utility to quickly generate PDFs based on the
SUS questionnaire in 20 different languages and variants and specifies whether a specific variant is
peer-reviewed, validated and internally reliable.</p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="https://pdf.sus.tools"
class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Go
to pdf.sus.tools</a>
<a href="https://github.com/jblattgerste/sus-pdf-generator"
class="text-sm font-semibold leading-6 text-white hover:text-blue-600">Check out on GitHub <span
aria-hidden="true">→</span></a>
</div>
</div>
<div class="relative">
<a href="https://pdf.sus.tools">
<img
class="absolute inset-0 h-full w-auto max-w-none object-contain rounded-md bg-white/5 ring-1 ring-white/10 transition-transform duration-500 ease-in-out hover:scale-105"
src="resources/PreviewPDF.webp" alt="Screenshot of pdf.sus.tools" />
</a>
</div>
</div>
</div>
</div>
<!-- Statistics-->
<div class="mb-12 wow animate__animated animate__fadeInRight" data-wow-offset="300">
<div class="mx-auto max-w-7xl py-8 sm:px-6 sm:py-12 lg:px-8">
<div
class="relative isolate overflow-hidden bg-gray-900 px-6 pt-8 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-16 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
<svg viewBox="0 0 1024 1024"
class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
aria-hidden="true">
<circle cx="512" cy="512" r="512" fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fill-opacity="0.7" />
<defs>
<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
<stop stop-color="#7775D6" />
<stop offset="1" stop-color="#1f76b4" />
</radialGradient>
</defs>
</svg>
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
<h2 class="font-bold tracking-tight text-white text-4xl">Calculate the inferential statistics for
your study</h2>
<p class="mt-6 text-lg leading-8 text-gray-400">Lets you calculate
the inferential statistics for your studies hypotheses to answer questions like: <i>Did your usability
significantly
improve?</i> or <i>Which product has significantly better perceived usability?</i></p>
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
<a href="https://statistics.sus.tools"
class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Go
to statistics.sus.tools</a>
<a href="https://github.com/jblattgerste/sus-statistics-calculator"
class="text-sm font-semibold leading-6 text-white hover:text-blue-600">Check out on
GitHub <span aria-hidden="true">→</span></a>
</div>
</div>
<div class="relative">
<a href="https://statistics.sus.tools">
<img
class="absolute inset-0 h-full w-auto max-w-none object-contain rounded-md bg-white/5 ring-1 ring-white/10 transition-transform duration-500 ease-in-out hover:scale-105"
src="resources/PreviewStatistics.webp" alt="Screenshot of statistics.sus.tools" />
</a>
</div>
</div>
</div>
</div>
<!-- Team Section -->
<section class="bg-gray-900 shadow-2xl text-white">
<div class="container max-w-7xl mx-auto flex flex-col justify-center px-8 py-16 space-y-16">
<div class="space-y-4 text-center">
<h3 class="font-bold leading-none text-5xl">Meet the team</h3>
<p class="mt-6 text-lg leading-8 text-gray-400">Meet our small but dedicated team of developers behind the SUS
Analysis Toolkit. You want to join and contribute? Cool!<br> Check out our <a
href="https://github.com/jblattgerste/sus-analysis-toolkit#contributing-to-this-project"
class="text-blue-600 hover:text-white" target="_blank">current projects and roadmap</a> to see how you
can help enhance usability analysis. Or just talk to us!</p>
</div>
<div class="grid w-full grid-cols-1 gap-x-12 gap-y-12 grid-cols-3">
<div class="space-y-4 wow animate__animated animate__fadeIn" data-wow-offset="100">
<img alt="Picture of Dr. Jonas Blattgerste"
class="mx-auto mb-4 h-64 rounded-xl bg-center object-cover bg-gray-500 shadow-2xl hover:scale-105 transition-transform duration-500 ease-in-out"
src="resources/Jonas.webp" />
<div class="flex flex-col items-center">
<h4 class="text-xl font-semibold">Dr. Jonas Blattgerste</h4>
<p class="text-sm text-gray-500">Lead Developer & Maintainer</p>
<div class="mt-2 flex space-x-2">
<a rel="noopener noreferrer" href="https://blattgerste.dev/" target="_blank" title="Homepage"
class="text-blue-600 transition-transform duration-500 ease-in-out hover:scale-125 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-6 w-6">
<path d="M16 3l13 11h-3v13h-7v-9h-6v9H6V14H3z" />
</svg>
</a>
<a rel="noopener noreferrer" href="https://www.linkedin.com/in/jonas-blattgerste/" target="_blank"
title="LinkedIn"
class="text-blue-600 transition-transform duration-500 ease-in-out hover:scale-125 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-6 w-6">
<path
d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z">
</path>
</svg>
</a>
<a rel="noopener noreferrer" href="https://github.com/jblattgerste/" target="_blank" title="GitHub"
class="text-blue-600 transition-transform duration-500 ease-in-out hover:scale-125 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-6 w-6">
<path
d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="space-y-4 wow animate__animated animate__fadeIn" data-wow-offset="100">
<img alt="Picture of Prof. Dr. Thies Pfeiffer"
class="mx-auto mb-4 h-64 rounded-xl bg-center object-cover bg-gray-500 shadow-2xl hover:scale-105 transition-transform duration-500 ease-in-out"
src="resources/Thies.webp" />
<div class="flex flex-col items-center">
<h4 class="text-xl font-semibold">Prof. Dr. Thies Pfeiffer</h4>
<div class="mt-2 flex space-x-2">
<a rel="noopener noreferrer" href="https://mixality.de/" target="_blank" title="Homepage"
class="text-blue-600 transition-transform duration-500 ease-in-out hover:scale-125 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-6 w-6">
<path d="M16 3l13 11h-3v13h-7v-9h-6v9H6V14H3z" />
</svg>
</a>
<a rel="noopener noreferrer" href="https://www.linkedin.com/in/thiespfeiffer/" target="_blank"
title="LinkedIn"
class="text-blue-600 transition-transform duration-500 ease-in-out hover:scale-125 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-6 w-6">
<path
d="M8.268 28h-5.805v-18.694h5.805zM5.362 6.756c-1.856 0-3.362-1.538-3.362-3.394s1.505-3.362 3.362-3.362 3.362 1.505 3.362 3.362c0 1.856-1.506 3.394-3.362 3.394zM29.994 28h-5.792v-9.1c0-2.169-0.044-4.95-3.018-4.95-3.018 0-3.481 2.356-3.481 4.794v9.256h-5.799v-18.694h5.567v2.55h0.081c0.775-1.469 2.668-3.019 5.492-3.019 5.875 0 6.955 3.869 6.955 8.894v10.269z">
</path>
</svg>
</a>
<a rel="noopener noreferrer" href="https://github.com/prof-thies-pfeiffer" target="_blank" title="GitHub"
class="text-blue-600 transition-transform duration-500 ease-in-out hover:scale-125 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-6 w-6">
<path
d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="space-y-4 wow animate__animated animate__fadeIn" data-wow-offset="100">
<img alt="Picture of Jan Bahrends"
class="mx-auto mb-4 h-64 rounded-xl bg-center object-cover bg-gray-500 shadow-2xl hover:scale-105 transition-transform duration-500 ease-in-out"
src="resources/Jan.webp" />
<div class="flex flex-col items-center">
<h4 class="text-xl font-semibold">Jan Behrends</h4>
<div class="mt-2 flex space-x-2">
<a rel="noopener noreferrer" href="https://github.com/jan-behrends" target="_blank" title="GitHub"
class="text-blue-600 transition-transform duration-500 ease-in-out hover:scale-125 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32" class="h-6 w-6">
<path
d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z">
</path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="text-gray-800">
<div class="container mx-auto flex flex-col justify-center p-16">
<h2 class="text-center font-semibold leading-7 text-blue-600">Understanding the System Usability Scale Analysis
Toolkit</h2>
<h2 class="mb-12 text-center text-4xl font-bold leading-none sm:text-5xl">Frequently Asked Questions</h2>
<div class="flex flex-col divide-y sm:px-8 lg:px-12 xl:px-32 divide-gray-300">
<details>
<summary
class="mt-6 cursor-pointer py-2 text-lg leading-8 text-gray-600 hover:underline outline-none focus:underline">
What is the System Usability Scale?</summary>
<div class="space-y-2 px-4 pb-4">
<p>The System Usability Scale (SUS), developed by John Brooke, is the most widely-used questionnaire for
measuring
perceived usability. It consists of 10 Likert-scale questions, with responses ranging from Strongly
disagree to Strongly agree. The results are aggregated into a single score ranging from 0
to 100, known as the SUS score. Multiple SUS scores can be used to represent an overall SUS study score.
The SUS is straightforward to administer, has been validated through extensive applications over decades,
is easy for participants to understand, is available in multiple languages and variants, and can be
applied to any
product/system that involves human interaction.
</p>
</div>
</details>
<details>
<summary
class="mt-6 cursor-pointer py-2 text-lg leading-8 text-gray-600 hover:underline outline-none focus:underline">
What is the System Usability Scale Analysis Toolkit?</summary>
<div class="space-y-2 px-4 pb-4">
<p>The SUS Analysis Toolkit is an open-source, web-based toolkit designed for the analysis, plotting,
interpretation, and contextualization of single- and multivariable System Usability Scale (SUS) usability
studies. It offers a comprehensive suite of tools based on insights and contextualization approaches
derived from scientific literature. Therefore, we hope it enables researchers and practitioners to
effortlessly calculate and visualize comparative, iterative, and single-variable SUS usability study
datasets. Additionally, it provides utilities to interpret calculated scores, compare them against scores
from meta-analyses, assess the conclusiveness of SUS scores, and analyze the impact of individual
questions from the 10-item SUS questionnaire on overall study scores. The toolkit is particularly focused
on generating publication-ready scientific figures and calculations for direct use in scientific
publications and presentations. Moreover is provides utility to generate SUS questionnaires and also
provide the full inferential statistics for iterative or comparative SUS studies.</p>
</div>
</details>
<details>
<summary
class="mt-6 cursor-pointer py-2 text-lg leading-8 text-gray-600 hover:underline outline-none focus:underline">
Can the SUS Analysis Toolkit be integrated with other tools or platforms?</summary>
<div class="space-y-2 px-4 pb-4">
<p>There are currently no automated integrations with other tools available for the SUS Analysis Toolkit due
to privacy concerns and the maintenance costs associated with supporting such integrations continuously.
However, since the toolkit is open-source, users are encouraged to explore and create their own
integrations. If there is enough demand we might consider this in future releases.</p>
</div>
</details>
<details>
<summary
class="mt-6 cursor-pointer py-2 text-lg leading-8 text-gray-600 hover:underline outline-none focus:underline">
Are there any case studies or examples of the SUS Analysis Toolkit in action?</summary>
<div class="space-y-2 px-4 pb-4">
<p>Yes, besides the initial usability study of the first iteration of the toolkit itself (see <a
href="https://scholar.google.de/citations?view_op=view_citation&hl=en&user=k2xymcIAAAAJ&citation_for_view=k2xymcIAAAAJ:_FxGoFyzp5QC"
target="_blank" class="text-blue-600 hover:text-blue-800">Blattgerste et al. 2022</a>), there are
several scientific publications that have utilized and cited the SUS Analysis Toolkit already. These
publications provide insights into how the toolkit has been applied in various research contexts. For
those examples, you can explore the citations of the toolkit on <a
href="https://scholar.google.de/scholar?oi=bibs&hl=en&cites=7271982971054294154&as_sdt=5"
target="_blank" class="text-blue-600 hover:text-blue-800">Google Scholar</a>.</p>
</div>
</details>
<details>
<summary
class="mt-6 cursor-pointer py-2 text-lg leading-8 text-gray-600 hover:underline outline-none focus:underline">
How is the uploaded data being used? Is uploaded study data stored?</summary>
<div class="px-4 pb-4">
<p>No data is ever stored on our servers beyond the immediate usage of the toolkit, nor is it used for any
purpose other than providing the necessary calculations and plots. More precisely, the components
pdf.sus.tools (the questionnaire generator) and statistics.sus.tools are purely client-side, meaning they
run entirely in your browser without communicating with any server at all. The analysis.sus.tools (or
sus.mixality.de, the hosted instance of the analysis component by the Mixality group at the University of
Applied Sciences Emden/Leer) operates on a server where data is briefly uploaded to perform the requested
calculations and plots. This data is deleted as soon as the session ends. Notably, if this is still a
problem for your specific use case, the analysis component can also be <a
href="https://github.com/jblattgerste/sus-analysis-toolkit?tab=readme-ov-file#quickstart---running-the-sus-analysis-toolkit-locally"
target="_blank" class="text-blue-600 hover:text-blue-800">run locally on your PC.</a></p>
</div>
</details>
<details>
<summary
class="mt-6 cursor-pointer py-2 text-lg leading-8 text-gray-600 hover:underline outline-none focus:underline">
How is the SUS Analysis Toolkit funded?</summary>
<div class="px-4 pb-4">
<p>The SUS Analysis Toolkit was originally developed during and for <a href="https://mixality.de/hebar/"
target="_blank" class="text-blue-600 hover:text-blue-800">Project Heb@AR</a> and therefore partially
funded by the German Ministry for Education and Research (BMBF) through the grant 16DHB3021. The toolkit
was further supported by the Mixality group at University of Applied Sciences Emden/Leer, which hosts
parts of the toolkit to this day. Since then, the hosting of components is privately funded as a hobby
project and receive no further financial support.</p>
</div>
</details>
<details>
<summary
class="mt-6 cursor-pointer py-2 text-lg leading-8 text-gray-600 hover:underline outline-none focus:underline">
How is the SUS Analyis Toolkit licensed? How should it be acknowledged?</summary>
<div class="space-y-2 px-4 pb-4">
<p>All parts of the SUS Analysis Toolkit are licensed under the MIT license and can be used, extended and
redistributed for commercial and non-commercial use cases without attribtution. The ownership of generated
calculations, interpretations, tables, and plots fully remain with the user of the tool. <b>If you use
this toolkit in the scientific context, we would appreciate an acknowledgement in form of a citation to
our tool and recommend citing the primary sources for the insights utilized.</b></p>
</div>
</details>
</div>
</div>
</section>
<!-- Read the paper section-->
<section class="bg-white">
<div class="gap-8 items-center px-4 mx-auto max-w-7xl xl:gap-16 md:grid md:grid-cols-2 lg:px-6">
<a href="https://mixality.de/wp-content/uploads/2022/07/Blattgerste2022SUS.pdf" target="_blank"
class="wow animate__animated animate__fadeInLeft" data-wow-offset="200">
<img class="w-full transition-transform duration-500 ease-in-out hover:scale-105 hover:rotate-2"
src="resources/Paper.webp" alt="Preview image of the tools publication">
</a>
<div class="mt-4 md:mt-0">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900">More information needed?<br>Read our
Publication!</h2>
<p class="mb-6 text-black">Blattgerste, J., Behrends, J., & Pfeiffer, T. (2022, June). <b>A web-based analysis
toolkit
for the system usability scale</b>. In Proceedings of the 15th International Conference on PErvasive
Technologies Related to Assistive Environments (pp. 237-246).</p>
<a href="https://scholar.google.de/citations?view_op=view_citation&hl=en&user=k2xymcIAAAAJ&citation_for_view=k2xymcIAAAAJ:_FxGoFyzp5QC"
target="_blank"
class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-blue-800">Google
Scholar</a>
<a href="https://dl.acm.org/doi/abs/10.1145/3529190.3529216" target="_blank"
class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-blue-800">ACM
(Publisher)</a>
<a href="https://github.com/jblattgerste/sus-analysis-toolkit/blob/a72b974bc05201bb12b482f763d0574a0ab640bc/assets/Blattgerste%202022%20-%20A%20Web-Based%20Analysis%20Toolkit%20for%20the%20System%20Usability%20Scale.pdf"
target="_blank"
class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-blue-800">Download
PDF</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="shadow-2xl bg-gray-900">
<div class="mx-auto w-full max-w-screen-xl p-8 md:py-8">
<div class="sm:flex sm:items-center sm:justify-between">
<div class="mb-4 flex items-center space-x-3 sm:mb-0 rtl:space-x-reverse">
<svg fill="#ffffff" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="h-8">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M952 224h-52c-4.4 0-8 3.6-8 8v248h-92V304c0-4.4-3.6-8-8-8H448v432h344c4.4 0 8-3.6 8-8V548h92v244c0 4.4 3.6 8 8 8h52c4.4 0 8-3.6 8-8V232c0-4.4-3.6-8-8-8zm-728 80v176h-92V232c0-4.4-3.6-8-8-8H72c-4.4 0-8 3.6-8 8v560c0 4.4 3.6 8 8 8h52c4.4 0 8-3.6 8-8V548h92v172c0 4.4 3.6 8 8 8h152V296H232c-4.4 0-8 3.6-8 8z">
</path>
</g>
</svg>
<span class="self-center whitespace-nowrap text-2xl font-semibold text-white">SUS Analysis Toolkit</span>
</div>
<ul class="mb-6 flex flex-wrap items-center text-sm font-medium text-white sm:mb-0">
<li>
<a href="mailto:[email protected]" class="me-4 hover:underline md:me-6">Problems or questions?
Write an email.</a>
</li>
<li>
<a href="https://github.com/jblattgerste/sus-analysis-toolkit?tab=readme-ov-file#acknowledgement"
class="me-4 hover:underline md:me-6" target="_blank">Cite this tool!</a>
</li>
</ul>
</div>
<hr class="my-6 sm:mx-auto lg:my-8 border-gray-700" />
<span class="block text-sm sm:text-center text-white">© 2024 <a href="http://www.blattgerste.dev"
class="hover:underline" target="_blank">Dr. Jonas Blattgerste</a>. All Rights Reserved. All
SUS tools themselves are licensed under MIT licenses.</span>
<span class="block text-sm sm:text-center text-gray-400">The SUS Analysis Toolkit is a private,
non-commercial project and provided 'as is', without warranty of any kind, express or implied.</span>
</div>
</footer>
</body>
</html>