Principles of Product Management: Interaction Design (Affordances, Signifiers, Feedback, Constraints, Hick’s Law, Fitts’s Law)

Interaction Design (Affordances, Signifiers, Feedback, Constraints, Hick’s Law, Fitts’s Law)

Interaction Design: A Practical Study Guide for PMs

What This Is

Interaction Design (IxD) is the craft of shaping how users do things in your product—clicking, swiping, typing, or even just understanding what’s possible. It’s not just “making things look pretty”; it’s about reducing friction, preventing errors, and making actions feel intuitive. Poor IxD leads to confusion, rage clicks, and churn (e.g., a fintech app where users can’t find the “Transfer” button). Great IxD turns frustration into delight (e.g., Duolingo’s gamified onboarding, where progress bars and confetti signify achievement and afford continued use).

Key Terms & Frameworks

• Affordances: What an object suggests it can do. A button affords clicking; a slider affords dragging. Example: A 3D button on a webpage affords being pressed (vs. a flat, text-only link).
• Signifiers: Clues that communicate affordances. A shadow under a button signifies it’s clickable; a “Play ?” icon signifies a video will start. Example: Amazon’s “Add to Cart” button is orange (high contrast) and says “1-Click” to signify speed.
• Feedback: Immediate response to user action. A loading spinner, a “Success!” toast, or a vibration on mobile. Example: Slack’s “Message sent” checkmark confirms the user’s action.
• Constraints: Limits on user actions to prevent errors. Graying out a “Submit” button until all fields are filled; forcing a password to include a number. Example: Uber’s ride request button is disabled until pickup/drop-off locations are set.
• Hick’s Law: Decision time increases with more choices. Formula: T = a + b log?(n), where:
• T = time to make a decision
• a = constant (baseline time)
• b = user’s cognitive load factor
• n = number of choices Example: Netflix’s “Top Picks for You” row reduces n to 5–7 items (vs. 50+ in “All Movies”).
• Fitts’s Law: Time to reach a target depends on size and distance. Formula: T = a + b log?(2D/W), where:
• T = time to move to target
• D = distance to target
• W = width of target Example: Mobile apps place primary actions (e.g., “Send” in WhatsApp) at the bottom of the screen (short D) and make them large (big W).
• Gestalt Principles: How humans perceive visual groups. Key ones for IxD:
• Proximity: Items close together are seen as related (e.g., a form’s labels next to inputs).
• Similarity: Items that look alike are grouped (e.g., all primary buttons are blue).
• Closure: Users “fill in gaps” (e.g., a progress bar with missing segments is still seen as a whole).
• Progressive Disclosure: Show only what’s needed now, hide the rest. Example: Airbnb’s search filters start with 3 options; “More filters” expands the list.
• Error Prevention (Nielsen’s #5 Usability Heuristic): Design to avoid mistakes. Example: Gmail’s “Undo Send” feature (a 30-second grace period after hitting “Send”).
• Consistency & Standards (Nielsen’s #4): Follow platform conventions. Example: iOS apps use a bottom tab bar; Android apps use a top-left hamburger menu (until Material Design 3).
• Jakob’s Law: Users expect your product to work like others they’ve used. Example: Most e-commerce sites have a cart icon in the top-right corner.

Step-by-Step: Applying IxD in a Product Scenario

Scenario: You’re the PM for a food-delivery app. Users abandon carts at checkout because they can’t find the “Apply Promo Code” button.

1. Diagnose the Problem
2. Action: Watch session recordings (e.g., Hotjar) to see where users hesitate or rage-click.

3. Key Question: Are they missing the affordance (button isn’t visible) or the signifier (button looks like static text)?

4. Map the Current Flow

5. Action: Sketch the checkout flow (e.g., Cart-Payment-Confirmation). Note where the promo code field is placed.

6. Framework: Use Fitts’s Law to check if the button is too small (W) or too far (D) from the user’s thumb.

7. Redesign with IxD Principles

8. Action: Apply fixes:

   • Affordance: Make the promo code field look like an input box (not a link).
   • Signifier: Add a “? Promo Code” label + a subtle animation (e.g., pulsing border) on page load.
   • Constraints: Disable the “Apply” button until a valid code is entered.
   • Feedback: Show a green checkmark + “$2 off applied!” after submission.
   • Hick’s Law: Reduce choices—show only 1–2 promo codes (vs. a dropdown with 10).

9. Prototype & Test

10. Action: Build a Figma prototype and run usability tests (e.g., ask 5 users to apply a promo code).

11. Metric to Track: % of users who successfully apply a code (target: +20% from baseline).

12. Measure Impact

13. Action: A/B test the redesign. Track:
    • Primary Metric: Checkout completion rate.
    • Secondary Metrics: Time spent on checkout page, promo code usage rate.
14. Framework: Use ICE Score (Impact × Confidence / Effort) to prioritize further iterations.

Common Mistakes

• Mistake: Assuming users will “figure it out.”

• Correction: Jakob’s Law—users expect your product to work like others. If Uber’s “Request Ride” button is at the bottom, don’t put yours at the top.

• Mistake: Overloading users with choices (violating Hick’s Law).

• Correction: Use progressive disclosure. Example: Show 3 payment options first; hide “Pay with Crypto” under “More.”

• Mistake: Ignoring feedback (e.g., no confirmation after an action).

• Correction: Always show immediate feedback. Example: After submitting a form, show a toast or redirect to a success page.

• Mistake: Making interactive elements too small (violating Fitts’s Law).

• Correction: On mobile, make buttons at least 48x48px (Apple’s HIG). On desktop, ensure click targets are 24x24px minimum.

• Mistake: Inconsistent design (violating Nielsen’s #4).

• Correction: Create a design system. Example: All primary buttons are blue with rounded corners; all secondary buttons are gray with sharp edges.

PM Interview / Practical Insights

1. Tricky Distinction: Affordance vs. Signifier
2. Interviewer Trap: “Is a blue button an affordance or a signifier?”

3. Answer: The button itself is the affordance (it suggests it can be clicked). The blue color is a signifier (it communicates “this is important”).

4. Stakeholder Pushback: “We need more features!”

5. How to Respond: Use Hick’s Law—“Adding more options will slow users down. Let’s test progressive disclosure first.”

6. Design vs. PM Responsibility

7. Interviewer Question: “Who owns interaction design—the PM or the designer?”

8. Answer: The designer owns the visual execution, but the PM owns the intent (e.g., “We need a constraint here to reduce errors”). PMs should collaborate early (e.g., “Let’s use Fitts’s Law to place this CTA”).

9. Real-World Example: Amazon’s “Buy Now” Button

10. Why It Works: It’s large (Fitts’s Law), orange (signifier for urgency), and placed near the product image (proximity). The “1-Click” label affords speed.

Quick Check Questions

1. Scenario: Your team wants to add a “Quick Checkout” button to an e-commerce app, but usability tests show users ignore it. What’s likely wrong, and how would you fix it?

2. Answer: The button may lack a signifier (e.g., it looks like static text) or violate Fitts’s Law (too small/far). Fix: Make it larger, add a contrasting color, and place it near the cart icon.

3. Scenario: A stakeholder insists on adding 10 new filters to a search page. How do you push back?

4. Answer: Cite Hick’s Law—more choices increase decision time. Propose progressive disclosure (e.g., show 3 filters first, hide the rest under “Advanced”).

5. Scenario: Users keep clicking a non-interactive element (e.g., a product image) expecting it to zoom. What’s the issue, and how do you solve it?

6. Answer: The image affords interactivity (it looks clickable) but lacks a signifier (e.g., a magnifying glass icon). Fix: Add a subtle overlay or cursor change on hover.

Last-Minute Cram Sheet

1. Affordance = What an object can do (e.g., a button can be clicked).
2. Signifier = Clues that show the affordance (e.g., a button’s shadow or color).
3. Feedback = Immediate response to user action (e.g., a loading spinner).
4. Constraints = Limits to prevent errors (e.g., disabling a button until fields are filled).
5. Hick’s Law: More choices = slower decisions. Formula: T = a + b log?(n).
6. Fitts’s Law: Bigger/closer targets = faster clicks. Formula: T = a + b log?(2D/W).
7. Progressive Disclosure = Show only what’s needed now (e.g., “Show more” buttons).
8. Jakob’s Law: Users expect your product to work like others they’ve used.
9. Gestalt Proximity: Items close together are seen as related—use this to group UI elements.
10. Nielsen’s #5: “Prevent errors” > “Help users recover from errors.” Design constraints first!