UI/UX Interaction Design Principles
Interaction design is the practice of defining how users interact with a product and how the product responds. It goes beyond visual design — it governs every tap, click, drag, hover, scroll, and swipe. When interaction design is done well, users do not have to think about how to use the interface. It feels intuitive, like it reads their mind. This page breaks down the foundational principles that make interfaces feel natural, predictable, and satisfying to use.
What Interaction Design Covers
Interaction design (IxD) sits at the intersection of how a product looks, how it behaves, and how it communicates with users. It includes five dimensions of design.
THE FIVE DIMENSIONS OF INTERACTION DESIGN: 1D — WORDS The text that appears in the interface: labels, instructions, error messages. (Connects to UX writing and microcopy.) 2D — VISUAL REPRESENTATIONS Icons, images, typography, diagrams — anything visual that communicates meaning beyond words. 3D — PHYSICAL OBJECTS OR SPACE The physical device the user interacts with — mouse, keyboard, touchscreen, smartwatch. Design must account for these. 4D — TIME The duration of interactions: animations, transitions, loading states. The sequence in which things happen. 5D — BEHAVIOR How the product responds to all of the above — what happens when user clicks, scrolls, swipes, or hovers. The rules that govern every interaction.
Core Interaction Design Principles
Principle 1: Affordances
An affordance is a visual or physical cue that tells users how an element can be interacted with. A button that looks raised and pressable signals "you can click me." A door handle shaped for gripping signals "pull me." Affordances reduce the learning curve because users understand interactions before they try them.
AFFORDANCES IN UI DESIGN: PERCEIVED AFFORDANCE → The user BELIEVES they can interact with it. Button (Clickable affordance): [ Save Changes ] ← Rounded rectangle, shadow, hover color change → User perceives: "I can click this" Text link (Clickable affordance): Visit our documentation ← Blue color, underline on hover → User perceives: "I can click this to go somewhere" Scrollbar (Drag affordance): │▓░░░░│ ← Visible thumb in a track → User perceives: "I can drag this to scroll" Input field (Type affordance): ┌─────────────────────┐ │ _ │ ← Rectangular, inset, blinking cursor └─────────────────────┘ → User perceives: "I can type here" Drag handle (Drag affordance): ⠿ ← Dotted grid of dots next to a list item → User perceives: "I can grab and drag this" ANTI-AFFORDANCE: Elements that look clickable but are not clickable. Flat, blue, underlined text that does not link anywhere. → This is interaction design broken — it lies to users.
Principle 2: Feedback
Every user action must receive a system response. Feedback tells users that the product received their input and is doing something about it. Without feedback, users repeat actions, wonder if something worked, or assume the product is broken.
FEEDBACK TYPES AND TIMING: IMMEDIATE FEEDBACK (0–100ms): Action: User clicks a button Feedback: Button changes color/depresses visually Purpose: Confirms click was registered before processing begins SHORT FEEDBACK (100ms–1 second): Action: User submits a form Feedback: Loading spinner inside the button Purpose: Shows system is actively working COMPLETION FEEDBACK (After action completes): Action: File upload finishes Feedback: ✓ "Upload complete! Your file is ready." Purpose: Confirms outcome so user can move on ERROR FEEDBACK (When action fails): Action: Network disconnects during upload Feedback: ✕ "Upload failed. Check your connection and try again." Purpose: Explains what went wrong and what to do next VISUAL FEEDBACK EXAMPLES BY INPUT TYPE: Click → Button press animation, color change Hover → Cursor change, element highlight, tooltip Toggle → Switch slides, color changes, label updates Drag → Element lifts, shadow appears, cursor changes Form → Inline validation (green ✓ or red ✕ on each field) Delete → Element animates out, confirmation message
Principle 3: Constraints
Constraints limit what users can do in ways that prevent errors. A well-designed constraint guides users toward correct actions without having to explain rules explicitly.
CONSTRAINT TYPES: PHYSICAL CONSTRAINTS: A date picker that grays out past dates for a future booking. User cannot select an invalid date — the interface prevents it. Calendar booking — physical constraint: ┌────────────────────────┐ │ JUNE 2024 │ │ Mo Tu We Th Fr Sa Su │ │ 1 2 3 4 5 6 7 │ ← Past dates grayed out │ 8 9 10 11 12 13 14 │ ← Cannot click these │ 15 16 [17] 18 19 20 21 │ ← Today and future are selectable └────────────────────────┘ LOGICAL CONSTRAINTS: A "Next" button in a wizard that is disabled until all required fields in the current step are completed. Logical reason: You cannot go to step 2 without completing step 1. CULTURAL CONSTRAINTS: A stop sign in red — users understand red means stop without being told, because of cultural convention. UI examples: Red for error, green for success, asterisk (*) for required. SEMANTIC CONSTRAINTS: An icon of a trash can next to a delete button. Even without the word "delete," users understand trash cans represent deletion from real-world experience.
Principle 4: Consistency
Consistency means the same actions always produce the same results, and the same visual patterns always mean the same thing. Consistency reduces learning — once a user learns how one button works, they know how all buttons work.
TYPES OF CONSISTENCY: VISUAL CONSISTENCY: All primary buttons look the same across the product. All error states use the same color, icon, and text style. All cards follow the same layout and spacing rules. BEHAVIORAL CONSISTENCY: Pressing Escape always closes the current modal. Double-clicking always opens an item. Swipe right always goes back on mobile. Pull down always refreshes on mobile. EXTERNAL CONSISTENCY (Platform conventions): Users arrive with expectations from other apps they use. iOS users expect Back in the top left corner. Android users expect the hardware Back button to work. Mac users expect Cmd+Z to undo. Breaking platform conventions creates confusion even when your custom pattern is "better." CONSISTENCY VIOLATIONS TO AVOID: ✗ Same icon means different things on different screens ✗ Cancel button is on the left on one dialog, right on another ✗ Some links open in a new tab, others navigate in the same tab ✗ Drag works in one list but not in another identical-looking list
Principle 5: Mappings
A mapping is the relationship between a control and the effect it produces. Natural mappings feel obvious — the control is located near or visually connected to what it controls, and it moves in the direction that makes intuitive sense.
NATURAL vs POOR MAPPINGS:
NATURAL MAPPING (Obvious):
Volume slider:
───────●──────
│ Low High │
← Move right to increase volume (matches physical expectation)
Zoom slider:
─────●──────
│ - + │
← Move right to zoom in (matches "more = right" expectation)
Brightness:
🌙 ──────●── ☀️
← Moon on left (dim), sun on right (bright). Intuitive.
POOR MAPPING (Confusing):
Slider that moves LEFT to increase a value.
Controls placed far from the elements they affect.
Volume knob that turns clockwise to DECREASE sound.
Real UI example of poor mapping:
← The back button of a multi-step form is on the RIGHT.
Users always reach for the left to go back because
that is the direction of "back" in left-to-right reading.
Principle 6: Error Prevention and Recovery
The best way to handle errors is to prevent them from happening in the first place. The second best way is to make recovery fast and painless when errors do occur.
ERROR PREVENTION STRATEGIES: CONFIRM BEFORE DESTRUCTIVE ACTIONS: "Delete this file? This cannot be undone." [ Cancel ] [ Delete Permanently ] DISABLE UNAVAILABLE OPTIONS: Greyed out "Download" button when no file is selected. Better to show why it is disabled: "Select a file first to enable download." VALIDATE IN REAL TIME: Show red border + message WHILE user types wrong value, not only after they hit Submit. SUGGEST CORRECTIONS: Search: "No results for 'Invoce'" "Did you mean 'Invoice'?" → Prevents user from thinking the data does not exist. RECOVERY STRATEGIES: UNDO: Gmail "Undo Send" — gives 5-30 seconds to cancel sending. Google Docs — Cmd+Z undoes any action without time limit. Figma — Unlimited undo history. TRASH/ARCHIVE BEFORE PERMANENT DELETE: Move to Trash (recoverable for 30 days) → Empty Trash (permanent) Gives users a safety net without complicating the primary delete action. AUTO-SAVE: Google Docs: "All changes saved in Drive" shown in header. Forms: Saving progress so a refresh does not lose data.
Principle 7: Mental Models
A mental model is the user's internal picture of how a system works. Users build mental models based on past experience with similar products. When your design matches the user's mental model, it feels intuitive. When it clashes, users feel confused and frustrated.
MENTAL MODEL EXAMPLES: EMAIL APP MENTAL MODEL: Users expect email to work like physical mail: ✓ Inbox = Letters arrived ✓ Sent = Letters sent ✓ Drafts = Letters I started but didn't send ✓ Trash = The waste bin (recoverable) ✓ Archive = Filing cabinet (stored, not deleted) An email app that calls these something entirely different (e.g., "Received Stream" instead of "Inbox") fights the user's established mental model and causes confusion. FILE SYSTEM MENTAL MODEL: Computer folders mimic physical folders in filing cabinets. Files sit inside folders. Folders sit inside other folders. This metaphor works because users already understand it from real-world experience. WHEN MENTAL MODELS CONFLICT: New user opens Twitter/X for the first time. They want to "like" a post. But they see a heart icon ♡. Mental model: "I know heart = like from Instagram/Facebook." → Design aligns with existing mental model. Works immediately. VS: An app uses a star ☆ for liking, a heart for bookmarking. Instagram uses heart for like, ribbon for save. New user taps the star thinking it saves/bookmarks. → Mental model mismatch. Causes errors and confusion.
Principle 8: Fitts' Law
Fitts' Law is a scientific formula from human movement research that predicts how long it takes to point at a target. The key insight for designers: larger targets that are closer are faster to click or tap.
FITTS' LAW IN PRACTICE:
TIME TO CLICK = log₂(Distance/Size + 1) × constant
(Simplified: Farther + Smaller = Slower)
DESIGN APPLICATIONS:
1. Primary buttons should be large:
[ BIG PRIMARY BUTTON ] ← Fast to click
[tiny secondary] ← Slower to click
2. Destructive actions should be small and far:
Keep dangerous buttons small and away from frequent actions.
[ Save ] ... ← 20px gap → ... [ Delete ]
3. Corners and edges are effectively infinite:
The corner of a screen is the easiest to hit because
the cursor cannot overshoot it.
→ Why Mac OS puts Apple menu in the top-left corner.
→ Why Windows puts Start menu in the bottom-left corner.
4. Mobile: Top-left = hardest for right-handed thumb,
Bottom center = easiest for right-handed thumb.
→ Primary action buttons belong in the thumb zone.
THUMB ZONE DIAGRAM (Mobile):
┌──────────────────┐
│ 😰 Hard zone │
│ │
│ 😐 Okay zone │
│ │
│ ✓ Easy zone ✓ │← This is where thumbs rest
└──────────────────┘
Principle 9: Hick's Law
Hick's Law states that the more choices a user has, the longer it takes them to make a decision. Doubling the number of options adds a fixed amount of time to the decision. This principle warns against overwhelming users with too many options.
HICK'S LAW APPLICATIONS:
NAVIGATION:
5-item menu → Scanned in 1 second
15-item menu → Takes much longer to process
Solution: Group items hierarchically. Surface the top 5-7.
Hide the rest in logical sub-menus.
PRODUCT PRICING:
2 plans (Free / Pro) → Quick decision
5 plans → Analysis paralysis. Many users leave.
Solution: Highlight the recommended plan visually.
Make one option stand out as the obvious choice:
[ Starter ] [ ★ Most Popular: Pro ] [ Enterprise ]
↑ Visual emphasis removes decision difficulty
ONBOARDING:
Show one action at a time during onboarding.
Do not show 6 setup options at once.
BAD: "Set up your profile, invite team, create project,
connect integrations, explore templates..."
GOOD: "First, let's give your workspace a name."
→ One step. One decision. One action.
Interaction Patterns and Their Mental Models
COMMON INTERACTION PATTERNS: PATTERN: Pull-to-Refresh Action: User swipes down on a list Response: Spinner appears at top, content refreshes Mental model: "Like pulling a slot machine arm to get new content" Best for: News feeds, social feeds, email lists PATTERN: Swipe-to-Delete Action: User swipes left on a list item Response: Delete button reveals on the right Mental model: "Like sliding a panel to reveal what is behind it" Best for: Mobile email apps, messaging, task lists PATTERN: Long Press Action: User holds finger on element for 0.5–1 second Response: Context menu appears with additional options Mental model: "Like right-clicking on a desktop" Best for: Secondary actions, multi-select modes PATTERN: Infinite Scroll Action: User scrolls to bottom of content list Response: More content loads automatically Mental model: "The content goes on forever, like a scroll" Best for: Social media feeds Avoid for: Content users need to return to (use pagination instead) PATTERN: Drag and Drop Action: User holds and moves an item Response: Item follows cursor/finger, lands in new position Mental model: "Like physically picking up and moving an object" Best for: Reordering lists, kanban boards, file management
Microinteractions: The Small Moments That Matter
A microinteraction is a single-purpose interaction that accomplishes one small task or communicates one piece of information. They make the interface feel alive and responsive. The like button animation on social media, the progress ring on an Apple Watch, the typing indicator in a chat — all of these are microinteractions.
MICROINTERACTION STRUCTURE (Dan Saffer's model): TRIGGER → RULES → FEEDBACK → LOOPS & MODES TRIGGER: What starts the interaction? (User clicks the like button) RULES: What happens next? (The heart icon fills with red, count increases by one) FEEDBACK: How does the system communicate the result? (Heart bounces gently, number animates from 0 to 1) LOOPS & MODES: Does it repeat? Does it change over time? (Click again → heart unfills, count decreases. Toggle behavior.) REAL MICROINTERACTION EXAMPLES: Like button: Trigger: Tap heart icon Rules: Toggle liked/unliked state Feedback: Heart fills red + bounce animation + count update Loop: Tap again to unlike Password strength meter: Trigger: User types in password field Rules: Calculate strength based on length, variety, patterns Feedback: Color bar expands (red → orange → green) in real time Loop: Updates with every keystroke Checkbox: Trigger: User taps checkbox Rules: Toggle checked/unchecked Feedback: Checkmark draws itself in with animation Loop: Tap again to uncheck
Key Points
- Interaction design covers five dimensions: words, visual representations, physical objects, time, and behavior.
- Affordances are visual cues that tell users how to interact — buttons look pressable, handles look grippable, input fields look typeable.
- Every user action must receive feedback — immediate visual change, loading state, and completion message.
- Constraints prevent errors by making wrong actions impossible — grayed out dates, disabled buttons, inline validation.
- Consistency means the same visual patterns always mean the same thing and produce the same behavior.
- Natural mappings place controls near what they affect and move in the direction that matches the expected effect.
- Designing to match users' existing mental models reduces learning and confusion — fight the mental model only when you must.
- Fitts' Law: make primary targets large and nearby; keep destructive actions small and away from frequent actions.
- Hick's Law: fewer choices lead to faster decisions — surface the recommended option and reduce visible options.
- Microinteractions — the small animations and responses to single actions — make interfaces feel alive and responsive.