Table of Contents
- The secret language of great UX
- Understanding interaction design patterns
- 1. What are interaction design patterns?
- 2. Why use interaction design patterns?
- 7 essential interaction design patterns
- 1. Navigation menus
- Technique #1: Clear hierarchy
- Technique #2: Breadcrumbs
- Technique #3: Sticky navigation
- Mobile navigation patterns
- 2. Forms and Inputs
- Technique #1: Input Masks and Validation
- Technique #2: Progressive disclosure
- Technique #3: Floating labels
- 3. Calls to action (CTAs)
- Technique #1: Visual prominence
- Technique #2: Action-oriented text
- Technique #3: Persuasive microcopy
- 4. Feedback systems
- Technique #1: Micro-interactions
- Technique #2: Loading indicators
- Technique #3: Success and error messages
- 5. Modals and dialogs
- Technique #1: Clear exit
- Technique #2: Focus retention
- Technique #3: Non-intrusive prompts
- 6. Search and filtering
- Technique #1: Autocomplete
- Technique #2: Faceted search
- Technique #3: Instant results
- 7. Progress indicators
- Technique #1: Step-by-step indicators
- Technique #2: Visual feedback
- Technique #3: Contextual help
- 7 techniques to enhance interaction design
- ✅ User-centered design (UCD)
- ✅ Prototyping and testing
- ✅ Accessibility
- ✅ Cognitive load reduction
- ✅ Consistency and standards
- ✅ Performance optimization
- ✅ Emotional design
- Master your craft, one pattern at a time
- TL;DR
The secret language of great UX

Understanding interaction design patterns
1. What are interaction design patterns?
- What goes where
- How users expect things to work
- And when to sprinkle some ✨ delight ✨ in the process
2. Why use interaction design patterns?
- Consistency: Patterns offer a uniform way of handling tasks across your app or site, promoting a cohesive experience.
- Efficiency: Leveraging these established solutions saves time — you don't need to reinvent the wheel.
- Usability: Patterns stem from a deep understanding of user behavior, ensuring that they align well with user expectations.
7 essential interaction design patterns
1. Navigation menus
Technique #1: Clear hierarchy

- Label things clearly—no jargon, no guessing games.
- Use the ‘3-click rule’ as a guideline, not a strict rule.
- Structure navigation around user needs, not your org chart.
- Stick to 5 to 7 top-level navigation items to avoid choice paralysis.
Technique #2: Breadcrumbs

- Your site has 3+ levels of hierarchy
- You’re running an e-commerce site with deep categories
- You're working with document repositories or knowledge bases
- Users are likely to land deep via search
- Place breadcrumbs consistently at the top of the content area
- Use clear separators like
›
or/
between levels
- Make all levels clickable—except the current page
- Keep text concise (truncate if needed)
- Consider adding icons for quicker scanning
Technique #3: Sticky navigation

- Sticky header with essential navigation: Keep your primary navigation visible as users scroll, consider a compact version to save vertical space
- Collapsible sticky header: Show full navigation when scrolling up, hide or minimize when scrolling down—match user intent
- Floating action buttons (FABs): For mobile interfaces, use FABs for key actions that stay visible as users scroll.
- Jump-to-top shortcuts: Help deep scrollers quickly get back to the top or main navigation
- Keep sticky elements under 15% of screen height
- Use reduced opacity or lighter visuals to keep distractions low
- Don’t let sticky UI block key content (especially on smaller screens)
- Test with users sensitive to motion, some find stickiness disorienting
Mobile navigation patterns

- Hamburger menu: The classic three-line icon that reveals more nav when tapped.
- Pro: Saves space and familiar to most younger users
- Con: Still suffers from low discoverability in some demographics
- Best for: Content-heavy sites with lots of navigation options
- Tab bar: A sticky bottom bar with 4–5 core destinations.
- Pro: Primary options are always visible
- Con: Limited to just a few items
- Best for: Apps with a small set of frequently used features
- Bottom sheet: Menus that slide up from the bottom
- Pro: More thumb-friendly for mobile use
- Con: Not as immediately recognizable as other patterns
- Best for: Revealing related options progressively
- Combo approach: Mix a tab bar for key sections with a hamburger menu for deeper content.
- Pro: Combines visibility with depth
- Con: Can get messy if not thoughtfully designed
- Best for: Complex apps with both daily and occasional-use features

Common pitfalls to avoid
- Deep hierarchies. Go wide, not deep. Fewer clicks, less confusion
- Vague labels. “Solutions” and “Products” say nothing. Be specific.
- Inconsistent nav across pages. Keep placement and behavior predictable
- Desktop nav squeezed onto mobile. Design for mobile, don’t just shrink it
- Hidden nav with no visual cues. Always show when more options are available
2. Forms and Inputs
Technique #1: Input Masks and Validation

- Visual formatting: Apply formatting as the user types (like adding hyphens to credit card numbers automatically)
- Character restrictions: Only allow certain types of characters in specific fields
- Visual cues: Show examples of expected formats near input fields
- Contextual keyboards: Display appropriate keyboard types on mobile (numeric for phone numbers, email keyboard for email addresses)

Technique #2: Progressive disclosure

- Multi-step forms: Break long forms into logical steps with clear progress indicators
- Conditional fields: Show or hide fields based on previous answers
- Accordion sections: Collapse secondary information into expandable sections
- Just-in-time information: Reveal explanations and help text only when needed

- Group related fields together in each step
- Show clear progress indicators (progress bars, step numbers, or breadcrumbs)
- Allow users to review all inputs before final submission
- Save progress automatically to prevent data loss
Technique #3: Floating labels

- Keep animations subtle (150-300ms transition)
- Test with autofill functionality and screen readers
- Maintain consistent behavior across all form fields
- Always include proper HTML label elements for accessibility
- Ensure label text remains readable in both states (minimum 12px when floating)
- Checkout processes
- Profile creation forms
- Sign-up and login forms
- Any form where aesthetic cleanliness is important
3. Calls to action (CTAs)
Technique #1: Visual prominence

- Pick colors that stand out from everything else on your page
- Make them big enough to notice, but not so big they look desperate
- Give your buttons some breathing room—cramped CTAs get ignored
- Put them where they make sense—like right after you've explained the benefits
Technique #2: Action-oriented text

- Tell users what they'll get, not what they're giving up
- Start with action verbs that pack a punch ("Get," "Start," "Join")
- Keep it short and sweet—nobody reads a paragraph on a button
- Match your text to what users actually want, not your marketing goals
Technique #3: Persuasive microcopy

- Keep it short—nobody's reading a novel before clicking
- Show off your popularity ("Joining 10,000+ happy designers")
- Create genuine urgency when it exists ("Only 5 spots left" — but only if it's true)
- Knock down objections before they form ("No credit card needed," "Cancel whenever")
Common pitfalls to avoid
- Button overload. When you highlight everything, nothing stands out. Pick one main action per section.
- Lying buttons. If your button says "Free Download" but then asks for a credit card, users will bounce and never come back.
- Tiny tap targets. Your mobile buttons need to be big enough for normal human fingers (at least 44×44px), not just theoretical pixel-perfect taps.
- Boring button text. "Click Here" or "Submit" are about as inspiring as a DMV form. Tell people why they should click.
- Rushing the relationship. Slapping "Buy Now" buttons everywhere before establishing value is like proposing on a first date. Read the room.
4. Feedback systems
Technique #1: Micro-interactions

- Keep them quick and subtle—think 0.2-0.3 seconds, not a full Broadway production
- Make them feel natural and connected to what the user just did
- Don't let them get in the way of completing tasks
- Use them consistently throughout your interface
Technique #2: Loading indicators

- Show loaders immediately—users start getting antsy after just 1 second of nothing
- Be honest about progress when possible (actual progress bars > spinners)
- Distract users with something useful or entertaining during longer waits
- Match the style to your brand—this is prime real estate for personality
Technique #3: Success and error messages

- For errors, explain what went wrong AND how to fix it
- Be crystal clear about what happened in plain language
- Put messages where users will actually see them—not hiding in a corner
- Match the tone to the situation—serious for financial stuff, casual for low-stakes actions
Common pitfalls to avoid
- Feedback overload. Not everything needs a confetti explosion. Save the big celebrations for meaningful accomplishments.
- The silent treatment. Nothing is more frustrating than clicking a button and wondering if anything happened. Every action needs some feedback.
- Cryptic error codes. "Error #5782" might make sense to your engineers but means zilch to users. Speak human.
- Lying indicators. Fake progress bars that jump from 99% to 100% after 5 minutes make users trust you less than politicians.
- Slow micro-interactions. If your button takes a full second to change color after clicking, it feels broken, not responsive.
5. Modals and dialogs
Technique #1: Clear exit

- Don't hide or disguise the exit—that's just rude
- Make sure keyboard users can hit ESC to escape
- Put an "X" in the top right corner where everyone expects it
- Allow clicking/tapping outside the modal to dismiss it (for non-critical modals)
Technique #2: Focus retention

- Preserve any data or selections the user had made
- Return focus to that exact spot when the modal closes
- Save the user's previous focus position before opening the modal
- Make the transition smooth enough that users barely notice the interruption
Technique #3: Non-intrusive prompts

- Try slide-ins or corner popups for optional offers
- Reserve full-screen modals for truly critical or complex tasks
- Match the interruption level to the importance of the message
- Use toast notifications for quick updates that don't need action
Common pitfalls to avoid
- Modal madness. Bombarding users with modals the second they land on your site before they've even had a chance to see what you offer.
- Nested modal hell. Opening a modal from inside another modal creates a "how deep does this go?" moment that confuses everyone.
- Tiny targets. Making close buttons so small that users need surgeon-level precision to hit them, especially on mobile.
- Forced decisions. Making users choose between extreme options like "Yes, I want to be awesome" or "No, I prefer to fail at life" instead of just letting them exit.
- Focus black holes. Opening a modal and then failing to return users to where they were, leaving them disoriented.
6. Search and filtering
Technique #1: Autocomplete

- Keep the list short (5-7 items max) to avoid overwhelming users
- Prioritize popular searches and actual matches in your database
- Handle misspellings gracefully—users shouldn't need perfect spelling to find stuff
- Show autocomplete suggestions after 2-3 characters (not immediately on the first letter)
Technique #2: Faceted search

- Show the most commonly used filters first
- Display how many results each filter option will yield
- Make it easy to remove filters one by one or all at once
- Allow multiple selections within the same category when it makes sense
Technique #3: Instant results

- Add a slight delay (200-300ms) to avoid constant refreshing with each keystroke
- Highlight exactly why each result matches the query (bolding matched terms, etc.)
- Provide a clear way to see full results if the instant preview isn't enough
- Show a limited set of best matches first rather than everything
Common pitfalls to avoid
- Search amnesia. Forgetting the user's search terms or filters when they click back from a result.
- Zero results dead ends. Showing "No results found" with no suggestions, similar items, or help. Never leave users at a dead end.
- Filter overload. Giving users 57 different ways to filter when they really only care about 3-5 key attributes. More is not always better.
- Hidden search. Burying your search bar or making it look like just another design element.
- Slow search. Making users wait more than a second for results.
7. Progress indicators
Technique #1: Step-by-step indicators

- Keep steps few and meaningful (5-7 max before users get overwhelmed)
- Allow users to go back to previous steps without losing their data
- Label each step clearly so users know what they're getting into
- Show which steps are completed, current, and upcoming
Technique #2: Visual feedback

- Use animation sparingly—a subtle checkmark is often better than confetti explosions
- Ensure your visual feedback works for colorblind users (don't rely solely on color)
- Choose colors that clearly communicate status (green for complete, etc.)
- Make transitions smooth so progress feels natural, not jarring
Technique #3: Contextual help

- Show help proactively at known trouble spots
- Make help dismissible for users who don't need it
- Place help text close to the relevant field or action
- Keep help text concise, nobody's reading a novel mid-form
Common pitfalls to avoid
- Fake progress. Making users feel like they're progressing when they're not.
- Vague labels. Using generic step names like "Step 1," "Step 2" instead of descriptive ones like "Shipping," "Payment" that actually prepare users.
- Progress whiplash. Showing users they're 80% done and then hitting them with the longest, most complex part of the form in that last 20%.
- Buried instructions. Hiding crucial help text in tooltips that require hovering—mobile users can't hover, and desktop users often miss hover states.
- Too many baby steps. Breaking a process into tons of tiny steps might make your completion rate look better, but it can make the process feel endless to users.
7 techniques to enhance interaction design

✅ User-centered design (UCD)
✅ Prototyping and testing
✅ Accessibility
✅ Cognitive load reduction
✅ Consistency and standards
✅ Performance optimization
✅ Emotional design
Master your craft, one pattern at a time
TL;DR
- Navigation menus - Help users know where they are and where they can go.
- Forms and inputs - Make data entry painless with real-time validation.
- CTAs - Make buttons visually prominent with action-oriented text
- Feedback systems - Confirm user actions with micro-interactions & clear messaging
- Modals and dialogs - Use sparingly with clear exit paths.
- Search and filtering - Offer robust search with autocomplete & filtering options.
- Progress indicators - Show users where they are in multi-step processes.