Performance Perception Survey
Performance perception surveys capture how users experience your website or app speed and reliability in real-world conditions. While synthetic monitoring measures technical metrics, user perception often differs. This form helps identify specific pages, features, or devices where users experience slowdowns, crashes, or frustrations. Use insights to prioritize performance optimization efforts where they matter most to actual users. Perfect for product teams, developers, and UX researchers.
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
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
export function performanceFeedbackForm(form: FormTs) {
// Performance Perception Survey - Speed and reliability feedback
// Demonstrates: EmojiRating, StarRating, MatrixQuestion, Slider, ThumbRating, SuggestionChips, Pages, conditional styling
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Performance Feedback',
computedValue: () => 'Help us improve speed and reliability by sharing your experience.',
customStyles: {
backgroundColor: '#0369a1',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// PAGES STRUCTURE
// ============================================
const pages = form.addPages('performancePages');
// ============================================
// PAGE 1: Overall Performance
// ============================================
const page1 = pages.addPage('overall');
const overallSection = page1.addSubform('overall', {
title: 'Overall Performance'
});
overallSection.addRow(row => {
row.addEmojiRating('overallSpeed', {
label: 'How would you rate the overall speed?',
preset: 'satisfaction',
size: 'lg',
alignment: 'center',
showLabels: true
});
});
overallSection.addRow(row => {
row.addSlider('speedScore', {
label: 'Rate the speed on a scale of 1-10',
min: 1,
max: 10,
step: 1,
showValue: true,
defaultValue: 5
});
});
overallSection.addRow(row => {
row.addTextPanel('speedScale', {
computedValue: () => '1 = Very Slow • 5 = Average • 10 = Lightning Fast',
customStyles: { color: '#64748b', fontSize: '12px', textAlign: 'center', marginBottom: '16px' }
});
});
const reliabilitySection = page1.addSubform('reliability', {
title: 'Reliability'
});
reliabilitySection.addRow(row => {
row.addStarRating('reliabilityRating', {
label: 'How reliable is the app/website?',
maxStars: 5,
size: 'lg',
alignment: 'center',
showCounter: true
});
});
reliabilitySection.addRow(row => {
row.addThumbRating('experiencedIssues', {
label: 'Have you experienced crashes or errors recently?',
showLabels: true,
upLabel: 'No issues',
downLabel: 'Yes, had issues',
alignment: 'center'
});
});
reliabilitySection.addRow(row => {
row.addTextarea('issueDescription', {
label: 'Please describe the issues you encountered',
placeholder: 'What happened? When did it occur?',
rows: 3,
autoExpand: true,
isVisible: () => reliabilitySection.thumbRating('experiencedIssues')?.value() === 'down'
});
});
page1.addRow(row => {
row.addButton('nextToPage2', {
label: 'Next: Specific Areas',
onClick: () => pages.goToPage('specific')
});
});
// ============================================
// PAGE 2: Specific Performance Areas
// ============================================
const page2 = pages.addPage('specific');
const specificSection = page2.addSubform('specificAreas', {
title: 'Specific Performance Areas'
});
specificSection.addRow(row => {
row.addTextPanel('matrixIntro', {
computedValue: () => 'Rate the speed of each area (1=Very Slow, 5=Very Fast):',
customStyles: { color: '#64748b', fontSize: '14px', marginBottom: '12px' }
});
});
specificSection.addRow(row => {
row.addMatrixQuestion('areaPerformance', {
label: 'Speed by Area',
rows: [
{ id: 'page-load', label: 'Initial page load', description: 'First load time', isRequired: true },
{ id: 'navigation', label: 'Page navigation', description: 'Moving between pages', isRequired: true },
{ id: 'search', label: 'Search functionality', description: 'Search speed and results', isRequired: false },
{ id: 'forms', label: 'Form submissions', description: 'Saving and submitting data', isRequired: false },
{ id: 'media', label: 'Images/videos', description: 'Media loading', isRequired: false },
{ id: 'interactive', label: 'Interactive features', description: 'Buttons, dropdowns, etc.', isRequired: false }
],
columns: [
{ id: '1', label: '1' },
{ id: '2', label: '2' },
{ id: '3', label: '3' },
{ id: '4', label: '4' },
{ id: '5', label: '5' }
],
fullWidth: true,
striped: true
});
});
const slowAreasSection = page2.addSubform('slowAreas', {
title: 'Slowest Areas'
});
slowAreasSection.addRow(row => {
row.addSuggestionChips('slowFeatures', {
label: 'Which areas feel slowest? (Select up to 3)',
suggestions: [
{ id: 'home', name: 'Homepage' },
{ id: 'login', name: 'Login/Auth' },
{ id: 'dashboard', name: 'Dashboard' },
{ id: 'search', name: 'Search' },
{ id: 'checkout', name: 'Checkout' },
{ id: 'reports', name: 'Reports' },
{ id: 'settings', name: 'Settings' },
{ id: 'uploads', name: 'File Uploads' },
{ id: 'api', name: 'Data Loading' }
],
max: 3,
alignment: 'center'
});
});
slowAreasSection.addSpacer({ height: '15px' });
slowAreasSection.addRow(row => {
row.addTextarea('slowAreaDetails', {
label: 'Tell us more about the slow areas',
placeholder: 'What specifically is slow? When does it happen?',
rows: 3,
autoExpand: true,
isVisible: () => {
const features = slowAreasSection.suggestionChips('slowFeatures')?.value() || [];
return features.length > 0;
}
});
});
page2.addRow(row => {
row.addButton('backToPage1', {
label: 'Back',
onClick: () => pages.goToPage('overall')
});
row.addEmpty('1fr');
row.addButton('nextToPage3', {
label: 'Next: Device & Context',
onClick: () => pages.goToPage('context')
});
});
// ============================================
// PAGE 3: Device & Context
// ============================================
const page3 = pages.addPage('context');
const deviceSection = page3.addSubform('device', {
title: 'Device & Connection'
});
deviceSection.addRow(row => {
row.addRadioButton('deviceType', {
label: 'What device are you primarily using?',
options: [
{ id: 'desktop', name: 'Desktop Computer' },
{ id: 'laptop', name: 'Laptop' },
{ id: 'tablet', name: 'Tablet' },
{ id: 'phone', name: 'Smartphone' }
],
orientation: 'horizontal'
}, '1fr');
});
deviceSection.addRow(row => {
row.addDropdown('browser', {
label: 'Browser',
options: [
{ id: 'chrome', name: 'Chrome' },
{ id: 'firefox', name: 'Firefox' },
{ id: 'safari', name: 'Safari' },
{ id: 'edge', name: 'Edge' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select browser...'
}, '1fr');
row.addDropdown('connection', {
label: 'Connection Type',
options: [
{ id: 'fiber', name: 'Fiber/High-speed' },
{ id: 'cable', name: 'Cable/DSL' },
{ id: 'mobile-5g', name: 'Mobile 5G' },
{ id: 'mobile-4g', name: 'Mobile 4G/LTE' },
{ id: 'mobile-3g', name: 'Mobile 3G' },
{ id: 'wifi-public', name: 'Public WiFi' },
{ id: 'other', name: 'Other' }
],
placeholder: 'Select connection...'
}, '1fr');
});
const contextSection = page3.addSubform('context', {
title: 'Usage Context'
});
contextSection.addRow(row => {
row.addRadioButton('usageFrequency', {
label: 'How often do you use our app/website?',
options: [
{ id: 'daily', name: 'Daily' },
{ id: 'weekly', name: 'Several times a week' },
{ id: 'monthly', name: 'A few times a month' },
{ id: 'rarely', name: 'Rarely' }
],
orientation: 'horizontal'
});
});
contextSection.addRow(row => {
row.addRadioButton('performanceTrend', {
label: 'Has performance changed over time?',
options: [
{ id: 'improved', name: 'Getting better' },
{ id: 'same', name: 'About the same' },
{ id: 'worse', name: 'Getting worse' },
{ id: 'unsure', name: 'Not sure' }
],
orientation: 'horizontal'
});
});
page3.addRow(row => {
row.addButton('backToPage2', {
label: 'Back',
onClick: () => pages.goToPage('specific')
});
row.addEmpty('1fr');
row.addButton('nextToPage4', {
label: 'Next: Expectations',
onClick: () => pages.goToPage('expectations')
});
});
// ============================================
// PAGE 4: Expectations & Final Feedback
// ============================================
const page4 = pages.addPage('expectations');
const expectationsSection = page4.addSubform('expectations', {
title: 'Your Expectations'
});
expectationsSection.addRow(row => {
row.addRatingScale('expectationMet', {
label: 'Does our performance meet your expectations?',
preset: 'likert-5',
lowLabel: 'Far Below',
highLabel: 'Exceeds',
alignment: 'center'
});
});
expectationsSection.addRow(row => {
row.addRadioButton('comparedToOthers', {
label: 'Compared to similar apps/websites, how do we rank?',
options: [
{ id: 'best', name: 'Among the fastest' },
{ id: 'above', name: 'Above average' },
{ id: 'average', name: 'About average' },
{ id: 'below', name: 'Below average' },
{ id: 'worst', name: 'Among the slowest' }
],
orientation: 'vertical'
});
});
const impactSection = page4.addSubform('impact', {
title: 'Impact on Your Experience'
});
impactSection.addRow(row => {
row.addRadioButton('performanceImpact', {
label: 'How much does performance affect your usage?',
options: [
{ id: 'none', name: 'Not at all - I use it regardless' },
{ id: 'minor', name: 'Minor - occasional frustration' },
{ id: 'moderate', name: 'Moderate - affects productivity' },
{ id: 'major', name: 'Major - considering alternatives' },
{ id: 'critical', name: 'Critical - actively looking to switch' }
],
orientation: 'vertical'
});
});
impactSection.addRow(row => {
row.addTextPanel('impactWarning', {
computedValue: () => "We're sorry performance is impacting your experience. Your feedback helps us prioritize improvements.",
customStyles: {
backgroundColor: '#fef3c7',
color: '#92400e',
padding: '12px',
borderRadius: '6px',
fontSize: '14px',
marginTop: '8px'
},
isVisible: () => {
const impact = impactSection.radioButton('performanceImpact')?.value();
return impact === 'major' || impact === 'critical';
}
});
});
const feedbackSection = page4.addSubform('finalFeedback', {
title: 'Additional Feedback'
});
feedbackSection.addSpacer({ height: '10px' });
feedbackSection.addRow(row => {
row.addTextarea('priorityFix', {
label: 'What one thing should we fix first to improve performance?',
placeholder: 'Share your top priority...',
rows: 3,
autoExpand: true
});
});
feedbackSection.addRow(row => {
row.addTextarea('additionalComments', {
label: 'Any other performance feedback?',
placeholder: 'Share any other thoughts or observations...',
rows: 3,
autoExpand: true
});
});
// ============================================
// SUMMARY SECTION
// ============================================
const summarySection = page4.addSubform('summary', {
title: 'Performance Feedback Summary'
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const overallSpeed = overallSection.emojiRating('overallSpeed')?.value();
const speedScore = overallSection.slider('speedScore')?.value();
const reliability = reliabilitySection.starRating('reliabilityRating')?.value();
const hadIssues = reliabilitySection.thumbRating('experiencedIssues')?.value();
const slowFeatures = slowAreasSection.suggestionChips('slowFeatures')?.value() || [];
const trend = contextSection.radioButton('performanceTrend')?.value();
const speedLabels: Record<string, string> = {
'very-bad': 'Very Slow',
'bad': 'Slow',
'neutral': 'Average',
'good': 'Fast',
'excellent': 'Very Fast'
};
const trendLabels: Record<string, string> = {
'improved': 'Improving',
'same': 'Stable',
'worse': 'Declining',
'unsure': 'Unknown'
};
let speedIcon = '🟡';
if (speedScore && speedScore >= 7) speedIcon = '🟢';
if (speedScore && speedScore <= 4) speedIcon = '🔴';
let summary = `${speedIcon} Performance Feedback Summary\n`;
summary += `${'═'.repeat(32)}\n\n`;
if (overallSpeed) {
summary += `📊 Perceived Speed: ${speedLabels[overallSpeed] || overallSpeed}\n`;
}
if (speedScore) {
summary += `⚡ Speed Score: ${speedScore}/10\n`;
}
if (reliability) {
summary += `🔒 Reliability: ${reliability}/5 stars\n`;
}
if (hadIssues) {
summary += `${hadIssues === 'up' ? '✅' : '⚠️'} Issues: ${hadIssues === 'up' ? 'None reported' : 'Issues reported'}\n`;
}
if (trend) {
summary += `📈 Trend: ${trendLabels[trend] || trend}\n`;
}
if (slowFeatures.length > 0) {
summary += `\n🐌 Slow Areas: ${slowFeatures.length} identified`;
}
return summary;
},
customStyles: () => {
const speedScore = overallSection.slider('speedScore')?.value();
const baseStyles = {
padding: '20px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (speedScore && speedScore >= 7) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (speedScore && speedScore >= 5) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
} else if (speedScore) {
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
return { ...baseStyles, backgroundColor: '#f1f5f9', borderLeft: '4px solid #94a3b8' };
}
});
});
page4.addRow(row => {
row.addButton('backToPage3', {
label: 'Back',
onClick: () => pages.goToPage('context')
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Performance Feedback'
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Performance Feedback!',
message: 'Your insights help us identify and fix performance bottlenecks. We are committed to delivering a fast and reliable experience.'
});
}
Frequently Asked Questions
How is perceived performance different from measured performance?
Perceived performance is subjective - a page loading in 2 seconds may feel fast to some users but slow to others based on expectations, device, and context. User perception often matters more than raw metrics for satisfaction.
When should I send this survey?
Deploy after users complete key tasks, during known slow periods, or regularly to a sample of active users. Avoid surveying during outages when frustration may skew results negatively.
How can I correlate perception data with technical metrics?
Match survey timestamps and reported pages/features with your APM and RUM data. This reveals where technical metrics don't align with user experience, indicating perception vs reality gaps.
What's a good performance satisfaction score?
Aim for 80%+ users rating speed as 'Good' or better. If more than 20% report issues, prioritize investigation. Compare against industry benchmarks and track trends over time.
Should I ask about specific features or overall experience?
Both. Overall ratings capture general sentiment, while feature-specific questions pinpoint problems. Use this form's flexible structure to cover both dimensions.