Principles of UX / UI (Product Design): Usability Testing (Moderated, Unmoderated, Think‑Aloud, RITE)

Usability Testing (Moderated, Unmoderated, Think‑Aloud, RITE)

Usability Testing: A Portfolio-Ready Study Guide

(For aspiring product designers, graphic designers transitioning to UX, and bootcamp students)

What This Is

Usability testing is the process of observing real users as they interact with your product to identify pain points, confusion, or friction. It’s not about asking users what they think they want (that’s user research)—it’s about watching what they actually do when trying to complete a task. For example: - E-commerce checkout: A usability test might reveal that users abandon their cart because the "Apply Coupon" button is hidden behind a tiny icon.
- Hospital patient portal: Testing could show that elderly users struggle to find the "Book Appointment" button because it’s buried in a dropdown menu.

Usability testing ensures your designs are intuitive, efficient, and delightful—not just pretty. It’s the difference between a product that looks usable and one that actually is.

Key Terms & Principles

1. Usability Testing (Moderated vs. Unmoderated)

• Moderated: A researcher guides the user through tasks in real time (in-person or via Zoom). Best for deep insights, probing "why" behind actions.
• Example: Watching a user struggle to upload a profile picture on a dating app and asking, "What were you expecting to happen when you tapped that button?"
• Unmoderated: Users complete tasks independently (via tools like UserTesting, Maze, or Lookback). Faster and scalable, but lacks follow-up questions.
• Example: Sending 50 users a link to test a new mobile banking app’s transfer flow and analyzing where they drop off.

2. Think-Aloud Protocol

• Users verbalize their thoughts while completing tasks. Reveals confusion, expectations, and emotional reactions.
• Example: A user says, "I’m looking for the ‘Save’ button… oh, it’s under ‘More Options’? That’s weird." → Signals a labeling or placement issue.

3. RITE (Rapid Iterative Testing and Evaluation)

• A fast, iterative approach where you test, fix, and retest in quick cycles (e.g., daily). Prioritizes speed over perfection.
• Example: Testing a prototype on Monday, fixing a confusing icon on Tuesday, and retesting on Wednesday with the same users.

4. Hick’s Law

• The time it takes to make a decision increases with the number of choices. Simplify options to reduce cognitive load.
• Example: A form with 10 fields vs. 3 steps with 3–4 fields each. Users complete the latter faster.

5. Jakob’s Law

• Users expect your product to work like others they’ve used. Break conventions only if it’s significantly better.
• Example: Placing a shopping cart icon in the top-right corner (like Amazon) instead of inventing a new location.

6. Miller’s Law (7 ± 2 Rule)

• The average person can hold 5–9 items in working memory. Group related items (e.g., navigation menus, form fields).
• Example: A settings menu with 20 options → Split into 3 categories (Account, Notifications, Privacy) with 5–7 items each.

7. Fitts’s Law

• The time to reach a target depends on its size and distance. Make important buttons large and close to the user’s cursor/thumb.
• Example: A mobile "Submit" button is 48x48px (minimum touch target) and placed at the bottom of the screen (thumb zone).

8. Gestalt Principles (Proximity, Similarity, Closure)

• How humans perceive visual elements as groups.
• Proximity: Items close together are seen as related (e.g., a "Price" label next to a "$9.99" text).
• Similarity: Items with the same color/shape are grouped (e.g., all primary buttons are blue).
• Closure: The brain fills in gaps (e.g., a dashed circle is perceived as a full circle).

9. WCAG Contrast Ratio

• Text and interactive elements must have a minimum contrast ratio for accessibility:
• 4.5:1 for normal text (e.g., black text on white).
• 3:1 for large text (18.66px+ bold or 24px+ regular).
• Example: Light gray (#999) text on white fails WCAG; use #555 or darker.

10. Affordance

• A design’s visual cues suggest how it should be used (e.g., a button looks clickable).
• Example: A 3D-style button with a shadow and hover state vs. a flat text link that users might miss.

11. Error Prevention (Nielsen’s Heuristic #5)

• Design to prevent mistakes before they happen (e.g., confirmation dialogs, input validation).
• Example: A "Delete Account" button requires users to type "DELETE" to confirm, reducing accidental clicks.

12. Progressive Disclosure

• Show only the most important information upfront; hide advanced options to avoid overwhelming users.
• Example: A "Show More" button expands additional filters in a search tool instead of displaying all 20 options at once.

Step-by-Step Process Flow

1. Define Goals & Tasks

• Action: Write 3–5 specific tasks users should complete (e.g., "Book a doctor’s appointment for next Tuesday").
• Figma Tip: Use a sticky note in Figma to list tasks (e.g., "Task 1: Find the ‘Book Appointment’ button").
• Example Tasks:
• "Purchase a pair of running shoes in size 10."
• "Update your payment method to a new credit card."

2. Recruit Participants

• Moderated: 5–8 users (Nielsen’s rule: 5 users find 85% of issues). Use tools like User Interviews or ask friends/family.
• Unmoderated: 20–50 users for quantitative data (e.g., success rates, time on task). Use Maze or UserTesting.
• Pro Tip: Screen participants to match your target audience (e.g., "Frequent online shoppers aged 25–40").

3. Prepare Your Prototype

• Low-Fidelity: Paper sketches or Figma wireframes (test early to avoid costly changes).
• High-Fidelity: Interactive Figma prototype with clickable hotspots.
• Tools:
• Figma: Use prototyping mode to link screens.
• Maze: Import Figma prototypes for unmoderated tests.
• Lookback: For moderated remote tests with screen recording.

4. Conduct the Test

Moderated (Live Session)

• Script Template:
• "Thanks for joining! We’re testing a new app. There are no wrong answers—we just want to see how you use it."
• "Your first task is to [X]. Please think aloud as you go."
• Pro Tips:
• Silence is golden: Let users struggle for a few seconds before jumping in.
• Neutral prompts: "What are you thinking right now?" (Not: "Do you like this button?")

Unmoderated (Self-Guided)

• Tools: Maze, UserTesting, or Hotjar.
• Setup:
• Upload your Figma prototype.
• Add tasks (e.g., "Where would you click to reset your password?").
• Include a post-test survey (e.g., "How easy was this task? 1–5").

5. Analyze Findings

• Quantitative Data: Success rate, time on task, clicks to completion.
• Example: Only 30% of users found the "Checkout" button → Needs redesign.
• Qualitative Data: Quotes, frustrations, "aha!" moments.
• Example: "I expected the ‘Save’ button to be at the bottom, not the top."
• Figma Tip: Create a findings board with:
• Screenshots of problem areas.
• User quotes (as sticky notes).
• Severity ratings (Low/Medium/High).

6. Iterate & Retest (RITE Method)

• Action: Fix the highest-severity issues first (e.g., a broken checkout flow).
• Figma Workflow:
• Duplicate your prototype file (e.g., "Checkout Flow v2").
• Make changes (e.g., move the "Apply Coupon" button above the cart).
• Retest with the same users (if possible) or new ones.

Common Mistakes

1. Mistake: Testing Too Late

• Problem: Waiting until the design is "finished" to test (e.g., after high-fidelity mockups).
• Correction: Test early and often. Start with paper prototypes or wireframes to catch major issues before investing time in visuals.
• Rationale: Fixing a problem in wireframes costs $1; fixing it in development costs $100.

2. Mistake: Leading the User

• Problem: Asking biased questions like "Do you like this blue button?" or guiding them ("Click the menu in the top-left").
• Correction: Use neutral language ("How would you find the menu?"). Let them explore naturally.
• Rationale: Leading questions skew results and hide real usability issues.

3. Mistake: Ignoring "Silent" Data

• Problem: Focusing only on what users say (e.g., "This is great!") and ignoring what they do (e.g., rage-clicking a button).
• Correction: Watch for behavioral cues:
• Frustration: Repeated clicks, sighs, or saying "I don’t get it."
• Confusion: Hesitation, scrolling up/down, or clicking the wrong element.
• Rationale: Users often don’t realize they’re struggling—observe their actions.

4. Mistake: Testing with the Wrong Users

• Problem: Recruiting friends, coworkers, or people who don’t match your target audience.
• Correction: Use a screener survey to filter participants (e.g., "Do you shop online at least once a week?").
• Rationale: A 20-year-old gamer will use a banking app differently than a 60-year-old retiree.

5. Mistake: Not Prioritizing Findings

• Problem: Treating all feedback equally (e.g., fixing a typo while ignoring a broken checkout flow).
• Correction: Use a severity scale to prioritize:
• High: Blocks users from completing a task (e.g., "Submit" button doesn’t work).
• Medium: Causes frustration but doesn’t block completion (e.g., confusing error message).
• Low: Minor polish (e.g., slightly misaligned text).
• Rationale: Focus on fixes that impact business goals (e.g., conversion, retention).

Design Interview / Portfolio Tips

1. How to Talk About Usability Testing in Interviews

• Interviewers want to hear:
• Process: "I start with 3–5 key tasks, recruit 5–8 users, and analyze both quantitative and qualitative data."
• Impact: "After testing, we increased checkout completion by 20% by simplifying the payment form."
• Collaboration: "I worked with developers to implement fixes and retested within a week."
• Avoid:
• Vague statements like "I tested it and it was good."
• Overpromising (e.g., "Usability testing solves all problems").

2. Portfolio Case Study Tips

• Structure your case study like this:
• Problem: "Users were dropping off at checkout because the ‘Apply Coupon’ button was hidden."
• Process:
  • "I conducted moderated tests with 6 users using a Figma prototype."
  • "I observed that 4/6 users missed the coupon field."
• Solution: "I moved the coupon field above the cart and added a ‘Save $X’ badge to draw attention."
• Results: "Coupon usage increased by 35%, and checkout completion rose by 15%."
• Visuals to include:
• Before/after screenshots (highlight changes).
• User quotes (e.g., "I didn’t see the coupon field at first.").
• Data (e.g., success rates, time on task).

3. Tricky Distinctions to Know

Quick Check Questions

1. Scenario:

A stakeholder insists on adding a "Live Chat" button to the homepage, but your usability tests show users already struggle to find the "Contact Us" link. How do you push back? Answer:
- Principle: Hick’s Law (more choices = slower decisions) + Progressive Disclosure (hide less critical options).
- Response: "Our tests show users are already overwhelmed by the current navigation. Adding another button could increase cognitive load and reduce conversions. Instead, let’s test: - Moving ‘Contact Us’ to a more visible location (e.g., sticky header).
- Adding a ‘Help’ icon in the bottom-right corner (like Intercom) that expands to show chat/email options."

2. Scenario:

During a usability test, a user says, "This app is great!" but struggles to complete the task. How do you interpret this? Answer:
- Principle: Think-Aloud Protocol (users often say what they think you want to hear).
- Action:
- Ignore the praise and focus on behavioral data (e.g., clicks, hesitation).
- Probe deeper: "You mentioned it’s great—what specifically do you like? What was confusing?" - Look for discrepancies (e.g., "It’s easy!" but took 2 minutes to find the button).

3. Scenario:

You’re testing a mobile app prototype, and users keep tapping a non-interactive image, expecting it to do something. What’s the issue, and how do you fix it? Answer:
- Principle: Affordance (the image looks clickable but isn’t).
- Fixes:
- Make it visually distinct (e.g., add a border, shadow, or "Tap to learn more" label).
- If it’s not meant to be interactive, reduce its visual weight (e.g., lower contrast, smaller size).

Last-Minute Cram Sheet

1. Moderated vs. Unmoderated: Live guidance vs. self-guided (tools: UserTesting, Maze).
2. Think-Aloud Protocol: Users verbalize thoughts while completing tasks.
3. RITE Method: Test → Fix → Retest in rapid cycles.
4. Hick’s Law: More choices = slower decisions. Simplify!
5. Fitts’s Law: Big, close buttons = faster clicks.
6. WCAG Contrast: 4.5:1 for text, 3:1 for large text.
7. Affordance: Design should look interactive (e.g., buttons with shadows).
8. Error Prevention: Confirm destructive actions (e.g., "Are you sure?").
9. ⚠️ User Interviews ≠ Usability Tests: Interviews ask opinions; tests observe actions.
10. ⚠️ 5 Users Find 85% of Issues: Don’t over-recruit for qualitative tests.

Bonus Figma Shortcuts for Usability Testing:
- Shift + E → Toggle prototyping mode.
- Ctrl/Cmd + [ or ] → Navigate between frames.
- R → Add a rectangle (for quick annotations).