Principles of UX / UI (Product Design): Interaction Design Principles (Affordances, Signifiers, Mapping, Feedback)

Interaction Design Principles (Affordances, Signifiers, Mapping, Feedback)

Interaction Design Principles: A Portfolio-Ready Study Guide

(Affordances, Signifiers, Mapping, Feedback)

What This Is

Interaction design principles are the "rules of engagement" for how users physically and cognitively interact with digital products. They bridge the gap between static screens and intuitive, satisfying experiences. For example: - Affordances make it obvious what a user can do (e.g., a 3D button that looks clickable).
- Signifiers communicate how to interact (e.g., a "Drag to reorder" tooltip).
- Mapping ensures controls match real-world expectations (e.g., a volume slider moving left-to-right).
- Feedback confirms actions (e.g., a loading spinner after submitting a form).

Why it matters: Poor interaction design frustrates users (e.g., a "Submit" button that doesn’t visually depress when clicked) and increases drop-off (e.g., a checkout flow with unclear steps). Mastering these principles helps you design products that feel effortless—like a well-oiled machine.

Key Terms & Principles

Core Interaction Design Concepts

• Affordance: What an object suggests it can do.
• Example: A raised button on a screen affords clicking (like a physical button). A flat, text-only link doesn’t (unless styled with an underline or hover effect).

• Design trap: ⚠️ "Skeuomorphic" affordances (e.g., fake leather textures on a wallet app) can feel dated. Modern UIs use perceived affordances (e.g., shadows, motion).

• Signifier: A visual or auditory cue that communicates how to use an affordance.

• Example: A microphone icon in a voice-search bar signifies "tap to speak." A red underline on a password field signifies an error.

• Pro tip: Combine signifiers (e.g., color + icon + microcopy: "⚠️ Password must be 8+ characters").

• Mapping: The relationship between controls and their effects.

• Example: A car’s steering wheel turns left to go left (natural mapping). A stove with knobs arranged in a line but burners in a square fails mapping (users guess wrong).

• UI example: A "Next" button on the right of a form (matches left-to-right reading flow). A "Back" button on the left of a mobile app (matches iOS/Android conventions).

• Feedback: A system’s response to user actions.

• Example: A "Like" button animates when tapped (visual feedback). A form shows a success toast after submission (confirmation feedback).
• Types of feedback:
  • Visual (e.g., hover states, loading spinners).
  • Auditory (e.g., a "ding" when a message sends).
  • Haptic (e.g., a phone vibration when a payment succeeds).

Supporting Heuristics & Laws

• Jakob’s Law: Users expect your site/app to work like others they’ve used.
• Example: A shopping cart icon in the top-right corner (matches Amazon, eBay). Breaking this (e.g., putting it in the bottom-left) confuses users.

• Design trap: ⚠️ "Innovating" on basic patterns (e.g., a hamburger menu on desktop) can backfire.

• Fitts’s Law: The time to acquire a target is a function of its size and distance.

• Example: A mobile "Buy Now" button is large and placed in the thumb’s "comfort zone" (bottom-right for right-handed users).

• Figma tip: Use the Auto Layout feature to ensure buttons scale with text (e.g., "Add to Cart" vs. "Proceed to Checkout").

• Hick’s Law: The more choices a user has, the longer it takes to decide.

• Example: A dropdown with 20 countries is slower to use than a searchable combobox. A landing page with 10 CTAs (calls-to-action) overwhelms users.

• Fix: Reduce options (e.g., "Most popular" filters) or chunk choices (e.g., progressive disclosure in forms).

• Gestalt Principles (Proximity, Similarity, Closure): How humans perceive groups of objects.

• Example: Cards on a dashboard are grouped by proximity (spacing). Buttons with the same color are perceived as similar (e.g., all "Primary" actions are blue).

• UI example: A settings menu uses closure to imply a group (e.g., a rounded rectangle around related toggles).

• Progressive Disclosure: Show only what’s needed at each step.

• Example: A multi-step form reveals fields as the user progresses (e.g., "Billing Info" appears after "Shipping Info" is complete).

• Figma tip: Use variants to toggle visibility of hidden content (e.g., an "Advanced Options" accordion).

• WCAG Contrast Ratio: Text and interactive elements must be readable.

• Example: Black text (#000000) on a white background (#FFFFFF) has a 21:1 contrast ratio (passes WCAG AA). Gray (#757575) on white fails (4.5:1 minimum for normal text).
• Tool: Use WebAIM Contrast Checker or Figma’s A11y plugin.

Step-by-Step / Process Flow

How to apply interaction design principles in your workflow:

1. Audit the Current Experience (Heuristic Evaluation)
2. Action: Open the product (or a competitor’s) and list every interactive element (buttons, inputs, menus).
3. Check for:
   • Affordances: Do buttons look clickable? (Use shadows, borders, or 3D effects.)
   • Signifiers: Are icons/tooltips clear? (e.g., a "?" icon for help text.)
   • Mapping: Do controls match user expectations? (e.g., a "Delete" button is red, not green.)
   • Feedback: What happens when a user clicks/taps? (e.g., a loading state, success message.)

4. Figma tip: Use the Inspect panel to check hover/active states.

5. Sketch Low-Fidelity Wireframes (Pen & Paper or Figma)

6. Action: Draw 3 variations of a key screen (e.g., a checkout flow).
7. Focus on:
   • Hierarchy: Place primary actions (e.g., "Pay Now") in the thumb zone.
   • Mapping: Align form fields with labels (e.g., "Email" above the input, not to the left).
   • Feedback: Add placeholders for loading states (e.g., a skeleton screen).

8. Example:
   [Header: "Checkout"]
[Cart Summary Card]
[Shipping Address Form]
[Primary Button: "Continue to Payment" (large, high-contrast)]

9. Prototype Key Interactions (Figma/ProtoPie)

10. Action: Create a clickable prototype with:
    • Micro-interactions: Button presses, hover states, transitions.
    • Feedback: Add a 500ms delay for "loading" states (realistic timing).
    • Error states: Show what happens if a user enters invalid data (e.g., red border + error message).

11. Figma tip: Use Smart Animate for smooth transitions (e.g., a card expanding on tap).

12. Test with Users (Guerrilla or Moderated Usability Testing)

13. Action: Recruit 5 users (friends, coworkers, or via UserTesting.com).
14. Tasks to test:
    • "How would you change your shipping address?"
    • "Where would you click to apply a discount code?"

15. Observe:

    
    
    • Do users hesitate? (Lack of signifiers.)
    • Do they click the wrong element? (Poor mapping.)
    • Do they miss feedback? (e.g., a toast disappearing too quickly.)

16. Iterate Based on Findings

17. Action: Update your prototype based on:

    
    
    • Affordance fixes: Make buttons more "clickable" (e.g., add a shadow).
    • Signifier fixes: Add tooltips or microcopy (e.g., "Drag to reorder").
    • Mapping fixes: Rearrange controls to match user expectations (e.g., "Next" on the right).
    • Feedback fixes: Increase visibility (e.g., a louder "success" sound, longer toast duration).

18. Document in Your Portfolio

19. Action: Create a case study with:
    • Before/after screenshots (highlighting the principle you fixed).
    • User quotes (e.g., "I didn’t realize I could drag this!").
    • Metrics (e.g., "Reduced checkout drop-off by 15%").
20. Example portfolio snippet:
    > "Problem: Users struggled to find the ‘Save’ button in the settings menu. Solution: Applied Fitts’s Law by increasing the button size and moving it to the thumb zone. Result: 20% faster task completion in usability tests."

Common Mistakes

Design Interview / Portfolio Tips

What Interviewers Look For

1. Problem-Solving with Principles
2. Question: "How would you improve the onboarding flow for a meditation app?"

3. Strong answer: "I’d apply progressive disclosure to avoid overwhelming users. For example, ask for their goal (e.g., ‘Sleep’ or ‘Focus’) first, then reveal relevant features. I’d also use mapping to place the ‘Start’ button in the thumb zone for one-handed use."

4. Distinguishing Between Similar Concepts

5. Affordance vs. Signifier:
   • Affordance: The possibility of an action (e.g., a button can be clicked).
   • Signifier: The cue that communicates it (e.g., a button’s shadow + "Click me" text).

6. Wireframe vs. Prototype:

   
   
   • Wireframe: Static, low-fidelity layout (e.g., gray boxes for a dashboard).
   • Prototype: Interactive, clickable model (e.g., a Figma file with hotspots).

7. Portfolio Storytelling

8. Weak: "I designed a checkout flow."

9. Strong: "I redesigned a checkout flow by applying Hick’s Law to reduce options (from 5 payment methods to 2) and added feedback (a loading spinner) to reduce cart abandonment by 12%."

10. Handling Stakeholder Pushback

11. Scenario: A PM wants to add 3 more features to the homepage.
12. Response: "I’d push back using Hick’s Law—more options increase decision time. Instead, I’d suggest progressive disclosure (e.g., a ‘See More’ button) or A/B testing to measure impact on engagement."

Quick Check Questions

1. Scenario: A user clicks a "Submit" button, but nothing happens. What’s missing, and how would you fix it?

2. Answer: Feedback is missing. Fix by adding a loading spinner, success toast, or button state change (e.g., "Submitting...").

3. Scenario: A stakeholder wants to add a "Help" button in the top-left corner of a mobile app. What’s the risk, and what principle would you cite?

4. Answer: The risk is poor mapping (users expect help in the top-right or bottom tab bar). Cite Jakob’s Law (users expect familiar patterns) and Fitts’s Law (top-left is hard to reach).

5. Scenario: Users keep clicking a non-interactive image, thinking it’s a button. What’s the issue, and how would you redesign it?

6. Answer: The image lacks affordances (it doesn’t look clickable). Fix by adding a button overlay, shadow, or "Tap to expand" microcopy.

Last-Minute Cram Sheet

1. Affordance = What an object can do (e.g., a button can be clicked).
2. Signifier = How it communicates that (e.g., a button’s shadow + "Click me").
3. Mapping = Controls match real-world expectations (e.g., volume slider left-to-right).
4. Feedback = System response to user actions (e.g., loading spinner, success toast).
5. Fitts’s Law = Bigger + closer = faster to click (e.g., mobile "Buy" button in thumb zone).
6. Hick’s Law = More choices = slower decisions (e.g., reduce dropdown options).
7. Jakob’s Law = Follow conventions (e.g., cart icon in top-right).
8. WCAG AA Contrast Ratio = 4.5:1 for normal text, 3:1 for large text.
9. Progressive Disclosure = Show info as needed (e.g., accordion menus).
10. ⚠️ Design trap: "Innovating" on basic patterns (e.g., hamburger menu on desktop) confuses users.

Bonus Figma Shortcuts:
- Shift + A = Add Auto Layout - Ctrl/Cmd + / = Toggle prototyping mode - R = Rectangle tool (for quick wireframing)