Quick Usability Check (SUS)
The System Usability Scale (SUS) is a reliable, low-cost usability testing method used by UX professionals worldwide. This template implements the standard 10-question SUS survey with automatic score calculation. SUS scores range from 0-100, with 68 being the average. Scores above 80 indicate excellent usability, while scores below 50 suggest significant usability issues that need addressing.
Try the Form
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
export function usabilityQuickSurvey(form: FormTs) {
// Quick Usability Check - System Usability Scale (SUS) Survey
// Demonstrates: MatrixQuestion (SUS), EmojiRating, Slider, computedValue (SUS score calculation), dynamic styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Quick Usability Check',
computedValue: () => 'Help us understand how easy our product is to use.',
customStyles: {
backgroundColor: '#8b5cf6',
color: 'white',
padding: '24px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: First Impression
// ============================================
const impressionSection = form.addSubform('impressionSection', {
title: 'Your First Impression'
});
impressionSection.addRow(row => {
row.addEmojiRating('firstImpression', {
label: 'How would you describe your overall experience using our product?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
impressionSection.addRow(row => {
row.addDropdown('experienceLevel', {
label: 'How long have you been using this product?',
options: [
{ id: 'first-time', name: 'First time today' },
{ id: 'few-days', name: 'A few days' },
{ id: 'few-weeks', name: 'A few weeks' },
{ id: 'few-months', name: 'A few months' },
{ id: 'year-plus', name: 'More than a year' }
],
placeholder: 'Select your experience level',
isRequired: true
}, '1fr');
row.addDropdown('taskCompleted', {
label: 'Were you able to complete your task?',
options: [
{ id: 'yes-easy', name: 'Yes, easily' },
{ id: 'yes-some-effort', name: 'Yes, with some effort' },
{ id: 'partially', name: 'Partially' },
{ id: 'no', name: 'No' }
],
placeholder: 'Select',
isRequired: true
}, '1fr');
});
// ============================================
// SECTION 2: System Usability Scale (SUS)
// ============================================
const susSection = form.addSubform('susSection', {
title: 'Usability Assessment (SUS)',
customStyles: { backgroundColor: '#f8fafc', padding: '16px', borderRadius: '8px' }
});
susSection.addRow(row => {
row.addTextPanel('susIntro', {
computedValue: () => 'Please rate how much you agree or disagree with each statement.',
customStyles: {
fontSize: '14px',
color: '#64748b',
marginBottom: '8px'
}
});
});
susSection.addRow(row => {
row.addMatrixQuestion('susQuestions', {
label: 'System Usability Scale',
rows: [
{ id: 'sus1', label: '1. I think that I would like to use this product frequently.', isRequired: true },
{ id: 'sus2', label: '2. I found the product unnecessarily complex.', isRequired: true },
{ id: 'sus3', label: '3. I thought the product was easy to use.', isRequired: true },
{ id: 'sus4', label: '4. I think I would need technical support to use this product.', isRequired: true },
{ id: 'sus5', label: '5. I found the various functions were well integrated.', isRequired: true },
{ id: 'sus6', label: '6. I thought there was too much inconsistency in this product.', isRequired: true },
{ id: 'sus7', label: '7. I imagine most people would learn to use this quickly.', isRequired: true },
{ id: 'sus8', label: '8. I found the product very cumbersome to use.', isRequired: true },
{ id: 'sus9', label: '9. I felt very confident using the product.', isRequired: true },
{ id: 'sus10', label: '10. I needed to learn a lot before I could use this product.', isRequired: true }
],
columns: [
{ id: '1', label: 'Strongly Disagree' },
{ id: '2', label: 'Disagree' },
{ id: '3', label: 'Neutral' },
{ id: '4', label: 'Agree' },
{ id: '5', label: 'Strongly Agree' }
],
striped: true,
fullWidth: true
});
});
// ============================================
// SECTION 3: Additional Feedback
// ============================================
const additionalSection = form.addSubform('additionalSection', {
title: 'Tell Us More',
isVisible: () => {
const matrix = susSection.matrixQuestion('susQuestions');
return matrix?.areAllRequiredRowsAnswered() ?? false;
}
});
additionalSection.addRow(row => {
row.addSlider('effortLevel', {
label: 'How much mental effort did you need to use the product?',
min: 1,
max: 10,
step: 1,
defaultValue: 5,
showValue: true,
unit: '/10'
}, '1fr');
row.addSlider('learningCurve', {
label: 'How steep was the learning curve?',
min: 1,
max: 10,
step: 1,
defaultValue: 5,
showValue: true,
unit: '/10'
}, '1fr');
});
additionalSection.addRow(row => {
row.addSuggestionChips('painPoints', {
label: 'What were the biggest pain points? (Select up to 3)',
suggestions: [
{ id: 'navigation', name: 'Hard to navigate' },
{ id: 'confusing', name: 'Confusing interface' },
{ id: 'slow', name: 'Too slow' },
{ id: 'features', name: 'Missing features' },
{ id: 'errors', name: 'Error messages' },
{ id: 'terminology', name: 'Unclear terminology' },
{ id: 'mobile', name: 'Mobile experience' },
{ id: 'none', name: 'No issues' }
],
max: 3,
alignment: 'center'
});
});
additionalSection.addSpacer();
additionalSection.addRow(row => {
row.addTextarea('improvements', {
label: () => {
const painPoints = additionalSection.suggestionChips('painPoints')?.value() || [];
if (painPoints.includes('none')) {
return 'What did you like most about the experience?';
}
return 'What would most improve your experience?';
},
placeholder: 'Share your thoughts...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SECTION 4: SUS Score & Summary
// ============================================
const scoreSection = form.addSubform('scoreSection', {
title: 'Your SUS Score',
isVisible: () => {
const matrix = susSection.matrixQuestion('susQuestions');
return matrix?.areAllRequiredRowsAnswered() ?? false;
},
customStyles: () => {
const score = calculateSUSScore();
if (score === null) return { padding: '16px', borderRadius: '8px' };
if (score >= 80) return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
if (score >= 68) return { backgroundColor: '#dbeafe', padding: '16px', borderRadius: '8px' };
if (score >= 51) return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
}
});
// Helper function to calculate SUS score
function calculateSUSScore(): number | null {
const matrix = susSection.matrixQuestion('susQuestions');
if (!matrix) return null;
const values = matrix.value();
if (!values) return null;
// Check if all questions are answered
const requiredIds = ['sus1', 'sus2', 'sus3', 'sus4', 'sus5', 'sus6', 'sus7', 'sus8', 'sus9', 'sus10'];
for (const id of requiredIds) {
if (!values[id]) return null;
}
let total = 0;
// Odd questions (1,3,5,7,9) - positive: score - 1
// Even questions (2,4,6,8,10) - negative: 5 - score
for (let i = 1; i <= 10; i++) {
const rawScore = parseInt(values[`sus${i}`] as string, 10);
if (isNaN(rawScore)) return null;
if (i % 2 === 1) {
// Odd questions (positive)
total += (rawScore - 1);
} else {
// Even questions (negative)
total += (5 - rawScore);
}
}
// Multiply by 2.5 to get score out of 100
return total * 2.5;
}
function getSUSGrade(score: number): string {
if (score >= 80.3) return 'A';
if (score >= 68) return 'B';
if (score >= 51) return 'C';
if (score >= 25) return 'D';
return 'F';
}
function getSUSInterpretation(score: number): string {
if (score >= 80.3) return 'Excellent! Users find the product highly usable.';
if (score >= 68) return 'Good usability, above average. Minor improvements possible.';
if (score >= 51) return 'OK, but there\'s room for improvement.';
if (score >= 25) return 'Below average. Consider addressing usability issues.';
return 'Poor usability. Significant improvements needed.';
}
scoreSection.addRow(row => {
row.addTextPanel('scoreDisplay', {
computedValue: () => {
const score = calculateSUSScore();
if (score === null) return 'Complete all questions to see your SUS score.';
const grade = getSUSGrade(score);
const interpretation = getSUSInterpretation(score);
let emoji = '';
if (score >= 80) emoji = '🎉';
else if (score >= 68) emoji = '👍';
else if (score >= 51) emoji = '😐';
else emoji = '⚠️';
let summary = `${emoji} SUS SCORE RESULTS\n`;
summary += `${'═'.repeat(28)}\n\n`;
summary += `📊 Score: ${score.toFixed(1)} / 100\n`;
summary += `📈 Grade: ${grade}\n\n`;
summary += `${interpretation}\n\n`;
summary += `${'─'.repeat(28)}\n`;
summary += `Note: Industry average is 68\n`;
summary += `Scores 80+ are considered excellent`;
return summary;
},
customStyles: () => {
const score = calculateSUSScore();
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (score === null) {
return { ...baseStyles, backgroundColor: '#f1f5f9', color: '#64748b' };
}
if (score >= 80) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
}
if (score >= 68) {
return { ...baseStyles, backgroundColor: '#dbeafe', borderLeft: '4px solid #3b82f6' };
}
if (score >= 51) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
});
});
// ============================================
// SECTION 5: NPS Follow-up
// ============================================
const npsSection = form.addSubform('npsSection', {
title: 'Would You Recommend?',
isVisible: () => {
const matrix = susSection.matrixQuestion('susQuestions');
return matrix?.areAllRequiredRowsAnswered() ?? false;
}
});
npsSection.addRow(row => {
row.addRatingScale('recommendScore', {
preset: 'nps',
label: 'How likely are you to recommend this product to a colleague?',
showSegmentColors: true,
showCategoryLabel: true,
alignment: 'center'
});
});
npsSection.addRow(row => {
row.addTextarea('npsReason', {
label: () => {
const category = npsSection.ratingScale('recommendScore')?.npsCategory();
if (category === 'promoter') return 'What makes this product stand out?';
if (category === 'detractor') return 'What would need to change for you to recommend it?';
return 'What could we do to earn a higher score?';
},
placeholder: 'Your feedback helps us improve...',
rows: 2,
autoExpand: true,
isVisible: () => npsSection.ratingScale('recommendScore')?.value() !== null
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Usability Feedback',
isVisible: () => {
const matrix = susSection.matrixQuestion('susQuestions');
return matrix?.areAllRequiredRowsAnswered() ?? false;
}
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your usability insights help us create a better product experience. We review all feedback to identify and prioritize improvements.'
});
}
Frequently Asked Questions
What is the System Usability Scale (SUS)?
SUS is a 10-question survey developed by John Brooke in 1986 that measures perceived usability. It's widely used because it's technology-agnostic, quick to administer (takes about 2 minutes), and provides reliable results even with small sample sizes. The score ranges from 0-100.
How is the SUS score calculated?
For odd-numbered questions (positive statements): subtract 1 from the score. For even-numbered questions (negative statements): subtract the score from 5. Sum all adjusted scores and multiply by 2.5 to get a score from 0-100.
What is a good SUS score?
The average SUS score is around 68. Scores above 80 are considered excellent (A grade), 68-80 is good (B/C grade), 51-67 is OK (D grade), and below 50 indicates poor usability (F grade) that needs improvement.
How many respondents do I need for reliable SUS results?
SUS is remarkably reliable even with small sample sizes. Research shows that 8-12 users can provide statistically meaningful results. For higher confidence, aim for 20-30 respondents.
When should I use SUS surveys?
Use SUS after users complete a task or session with your product, during usability testing, after launching new features, when comparing different design versions (A/B testing), or as a regular benchmark to track usability improvements over time.
Can I customize the SUS questions?
While you can customize this template, it's recommended to keep the original 10 SUS questions unchanged to maintain validity and allow comparison with industry benchmarks. You can add supplementary questions before or after the SUS section.