Principles of UX / UI (Product Design): Surveys and Questionnaires (Likert, NPS, CSAT)

Surveys and Questionnaires (Likert, NPS, CSAT)

Portfolio-Ready Study Guide: Surveys & Questionnaires (Likert, NPS, CSAT)

What This Is

Surveys and questionnaires are structured research tools used to gather quantitative (numbers) and qualitative (words) feedback from users. They help measure satisfaction, identify pain points, and validate design decisions—like whether a new checkout flow reduces cart abandonment or if a hospital’s patient portal makes booking appointments easier. Unlike interviews, surveys scale to hundreds of users, making them essential for data-driven design.

Key Terms & Principles

• Likert Scale: A rating scale (e.g., 1–5 or 1–7) where users express agreement/disagreement with a statement. Example: “How easy was it to book your appointment?” with options from “Very Difficult” to “Very Easy.”

• UI Tip: Use consistent spacing and clear labels (avoid jargon like “Neutral” if users might misinterpret it).

• Net Promoter Score (NPS): A single-question metric (“How likely are you to recommend us to a friend?” on a 0–10 scale) that categorizes users as Promoters (9–10), Passives (7–8), or Detractors (0–6).

• UI Example: A post-purchase modal with a slider or radio buttons, followed by an open-ended “Why did you give this score?” field.

• Customer Satisfaction Score (CSAT): A simple rating (e.g., 1–5 stars or emojis) measuring satisfaction with a specific interaction. Example: “How satisfied were you with your checkout experience?”

• Heuristic Link: Jakob’s Law—users expect CSAT surveys to look familiar (e.g., star ratings on e-commerce sites).

• Double-Barreled Questions: A question that asks two things at once (e.g., “Was the checkout fast and easy?”). This confuses users and skews data.

• Correction: Split into two questions: “How fast was the checkout?” and “How easy was the checkout?”

• Leading Questions: Questions that nudge users toward a specific answer (e.g., “How amazing was our new feature?”).

• Correction: Use neutral language: “How would you describe your experience with the new feature?”

• Response Bias: When users answer questions inaccurately due to social pressure, fatigue, or unclear options.

• Example: A 10-question survey with no progress bar may cause users to rush or abandon it.

• Fix: Use Hick’s Law (reduce cognitive load) by limiting questions and adding a progress indicator.

• Open-Ended vs. Closed-Ended Questions:

• Closed-ended: Multiple-choice, scales (quantitative data). Example: “How often do you use this feature?” (Daily/Weekly/Monthly).
• Open-ended: Free-text responses (qualitative insights). Example: “What’s one thing we could improve?”

• UI Tip: Place open-ended questions at the end to avoid survey fatigue.

• Survey Fatigue: When users drop off due to length or repetition.

• Fix: Apply Miller’s Law (7±2 items) by keeping surveys under 10 questions. Use skip logic (e.g., “If you answered ‘No’ to Q3, skip to Q6”).

• Anchoring Effect: When users’ answers are influenced by the first option they see.

• Example: A Likert scale with “Strongly Disagree” first may bias responses toward disagreement.

• Fix: Randomize scale order or use a neutral midpoint.

• Micro-Surveys: Short, in-context surveys (e.g., a 1-question pop-up after a task). Example: “Did you find what you were looking for?” on a 404 page.

• UI Example: A small modal with a single question and a “Submit” button (no scrolling).

Step-by-Step / Process Flow

1. Define Goals & Hypotheses

• Action: Write down what you want to learn. Example:
• Goal: Reduce checkout drop-off.
• Hypothesis: Users abandon because shipping costs are unclear.
• Figma Tip: Create a sticky note in a “Research” frame with your goal and 2–3 hypotheses.

2. Choose the Right Survey Type

• Action: Pick a metric (NPS, CSAT, Likert) based on your goal.
• Example: Use CSAT for post-checkout feedback, NPS for overall brand loyalty.
• Figma Tip: Sketch a simple wireframe of the survey (e.g., a modal with a 5-star rating + text field).

3. Write Clear, Unbiased Questions

• Action: Draft questions using plain language. Avoid:
• Leading questions (“How much do you love our app?”).
• Double-barreled questions (“Was the design beautiful and functional?”).
• Figma Tip: Use a table to map questions to hypotheses (e.g., “Q1: How easy was checkout?” → Hypothesis: “Users struggle with form fields.”).

4. Design for Usability

• Action: Apply Fitts’s Law (make buttons large and tappable) and WCAG (ensure 4.5:1 contrast for text).
• Example: A mobile survey with a 48x48px “Submit” button in the thumb zone.
• Figma Tip: Use auto-layout to test different screen sizes.

5. Test & Iterate

• Action: Run a guerrilla test with 5 users. Ask:
• “What do you think this question is asking?” (Clarity)
• “Would you actually fill this out?” (Motivation)
• Figma Tip: Record user reactions in a “Usability Test” frame with screenshots and notes.

6. Analyze & Present Data

• Action: Calculate metrics (e.g., NPS = % Promoters – % Detractors) and highlight trends.
• Example: “30% of users rated checkout as ‘Difficult’ (Likert 1–2).” Pair with quotes like “I didn’t know shipping was extra!”
• Figma Tip: Create a dashboard with charts (e.g., a bar graph of CSAT scores) and user quotes.

Common Mistakes

Design Interview / Portfolio Tips

What Interviewers Look For

1. Problem-Solving: Can you design a survey to answer a specific question?
2. Example: “How would you measure if a new onboarding flow reduces churn?”

3. Answer: Use CSAT post-onboarding + NPS 30 days later to track long-term impact.

4. Data Literacy: Can you interpret survey results and suggest next steps?

5. Example: “Your NPS is 20. What does this mean, and what would you do?”

6. Answer: A score of 20 is “good” but not great. Dig into Detractor feedback to find pain points (e.g., “The app crashes too often”).

7. Portfolio Storytelling: Show surveys as part of a larger research process.

8. Example: Include a case study with:
   • The survey design (Figma screenshots).
   • Key findings (e.g., “60% of users struggled with the payment step”).
   • How you used the data (e.g., “Redesigned the payment form, reducing drop-off by 25%”).

Tricky Distinctions

• NPS vs. CSAT:
• NPS = Long-term loyalty (e.g., “Would you recommend us?”).
• CSAT = Short-term satisfaction (e.g., “How was your checkout experience?”).
• Likert Scale vs. Binary Questions:
• Likert = Nuanced feedback (e.g., 1–5 scale).
• Binary = Yes/No (e.g., “Did you complete your task?”).

Quick Check Questions

1. Scenario: A stakeholder wants to add a 15-question survey to the app’s homepage. How do you push back?

2. Answer: Use Hick’s Law—too many questions increase cognitive load and drop-off. Suggest a micro-survey (1–2 questions) or move it to a less intrusive moment (e.g., post-purchase).

3. Scenario: Users are rating your app 5/5 on CSAT but leaving negative comments like “It’s okay, but I won’t use it again.” What’s happening?

4. Answer: Response bias—users may be giving high ratings out of politeness. Pair CSAT with NPS to measure long-term loyalty.

5. Scenario: You’re designing a Likert scale for a mental health app. How do you label the scale to avoid bias?

6. Answer: Avoid extremes like “Strongly Disagree” (negative connotation). Use neutral labels: “Not at all” / “Somewhat” / “Very much.”

Last-Minute Cram Sheet

1. Likert Scale: 1–5 or 1–7 agreement scale (e.g., “How satisfied are you?”).
2. NPS: “How likely are you to recommend us?” (0–10). Promoters (9–10), Detractors (0–6).
3. CSAT: Simple rating (e.g., stars, emojis) for specific interactions.
4. Double-Barreled Questions: ⚠️ Avoid questions like “Was it fast and easy?”
5. Leading Questions: ⚠️ Avoid “How amazing was our feature?”
6. Survey Fatigue: Keep surveys under 10 questions; use progress bars.
7. Anchoring Effect: Randomize scale order to avoid bias.
8. Miller’s Law: 7±2 items max for easy scanning.
9. Fitts’s Law: Make buttons large and easy to tap (48x48px min).
10. WCAG Contrast: 4.5:1 for text, 3:1 for large text.