Top UI Design Patterns You Should Know to Elevate User Experience
📘 Chapter 4: Action & Interaction Patterns for Better UX
🔹 Introduction
Design is more than how something looks—it's how it works.
After users navigate and consume content, they interact. Whether clicking a
button, expanding a panel, swiping, uploading, or selecting an option, actions
and interactions form the core of user engagement. These are the moments
when users get things done, and that makes action-based UI patterns
critically important.
This chapter explores the most essential interaction
patterns that drive usability, responsiveness, and clarity. From
microinteractions like toggles to complex interactions like drag-and-drop,
we’ll break down each pattern with practical use cases, pros/cons, and UX
guidelines.
🔹 What Are Action &
Interaction UI Patterns?
Action and interaction patterns define how users engage
with a digital product to complete tasks or trigger system responses. They
focus on controls, feedback loops, and behavioral outcomes.
These patterns are designed to:
- Enable
functionality
- Enhance
clarity
- Provide
feedback
- Encourage
engagement
- Minimize
friction
Unlike layout or navigation patterns, which are mostly
structural, interaction patterns are event-driven—they respond to user
input or trigger system changes.
🔹 Importance of Good
Interaction Design
- Boosts
task completion rate
- Reduces
confusion and user errors
- Improves
satisfaction and trust
- Encourages
exploration and engagement
- Guides
behavior without instructions
Great interactions are often invisible. Bad ones, however,
frustrate users and break trust.
🔹 Core Principles of
Interaction Patterns
|
Principle |
Explanation |
|
Affordance |
Visual cues should
indicate possible actions |
|
Feedback |
Users should
get a response after every action |
|
Consistency |
Similar actions should
behave the same across contexts |
|
Accessibility |
All
interactions should work for all users |
|
Minimalism |
Interactions should be
simple, discoverable, and non-intrusive |
🔹 Types of Action &
Interaction Patterns
|
Pattern Type |
Purpose |
|
Input-Based Actions |
Users submit or change
data (forms, toggles, steppers) |
|
Display Toggles |
Change
visibility or state (expand/collapse, accordions) |
|
Progress-Based |
Show task advancement
(steppers, loaders, sliders) |
|
System Feedback |
Confirm or
guide user actions (tooltips, snackbars) |
|
Gesture-Based |
Mobile-focused actions
(swipe, drag-and-drop, long press) |
🔸 1. Button (Primary,
Secondary, Icon)
Buttons are the most common form of interaction.
Use Cases:
- Submit
forms
- Trigger
modals
- Navigate
or confirm actions
|
Best Practices |
|
Use one clear
primary button per screen |
|
Label actions clearly (“Submit” not “OK”) |
|
Maintain visual
hierarchy (primary vs. ghost) |
🔸 2. Floating Action
Button (FAB)
A floating button often positioned at the bottom right on
mobile interfaces, used for a high-priority action.
Use Cases:
- Add
a new item
- Compose
a message
- Scan
a QR code
|
Pros |
Cons |
|
Easy thumb access |
Can obscure content if
misused |
|
Prominent and eye-catching |
Limited space
for complex actions |
🔸 3. Modal Dialogs &
Popups
Overlays that interrupt flow for user attention or input.
Use Cases:
- Confirmations
(e.g., delete warning)
- Short
forms
- Tool
selection
|
Pros |
Cons |
|
Focused user
attention |
Can be intrusive if
overused |
|
Useful for brief tasks |
Accessibility
challenges |
|
Blocks background
distractions |
Interrupts task flow |
🔸 4. Accordions &
Expand/Collapse Sections
Hide or show content dynamically, ideal for progressive
disclosure.
Use Cases:
- FAQs
- Content-heavy
dashboards
- Settings
sections
|
Pros |
Cons |
|
Saves space on
smaller screens |
Can hide important
info |
|
Great for mobile content structuring |
Scanning
becomes harder |
|
Supports minimal UI |
Nested accordions
confuse users |
🔸 5. Toggles and Switches
Binary on/off interactions, typically for preferences or
settings.
|
Best Practices |
|
Use clear labeling
(“Enable notifications”) |
|
Avoid ambiguous states or delays |
|
Indicate state
change immediately |
🔸 6. Stepper/Wizard
Navigation
Guide users through a multi-step process like form
submission or onboarding.
Use Cases:
- Checkout
processes
- Surveys
- Account
setup
|
Pros |
Cons |
|
Makes long tasks
digestible |
Can feel slow if too
many steps |
|
Tracks user progress |
Back/forward
UX must be smooth |
|
Prevents
information overload |
Navigation can be
restrictive |
🔸 7. Swipeable
Cards/Actions
Gesture-based UI patterns primarily for mobile. Often used
with horizontal swipe.
Use Cases:
- Task
list management (e.g., swipe to delete)
- Email
apps
- Tinder-style
card interactions
|
Pros |
Cons |
|
Efficient mobile
gesture interaction |
Not discoverable
without indicators |
|
Saves screen space |
Risk of
accidental interaction |
🔸 8. Drag-and-Drop
Allows users to reorder, move, or assign
items through dragging.
Use Cases:
- Task
boards (Trello, Jira)
- Reordering
list items
- File
management systems
|
Best Practices |
|
Provide drop-zone
feedback |
|
Show item preview while dragging |
|
Avoid hidden drop targets |
🔸 9. Tooltips and Hover
Interactions
Contextual overlays that appear on hover or focus, offering
additional information.
Use Cases:
- Form
field explanations
- Icon-only
buttons
- Feature
previews
|
Pros |
Cons |
|
Keeps interface
clean |
Not usable on touch
screens |
|
Helps onboarding and new features |
Can delay
user actions if overused |
🔸 10. Snackbars, Toasts
& Alerts
Temporary UI elements that provide feedback without
disrupting flow.
Use Cases:
- Success
messages
- Undo
options
- Warnings/errors
|
Pros |
Cons |
|
Non-blocking
feedback |
Can be missed if too
fast |
|
Useful for transient notifications |
Needs careful
timing and contrast |
🔹 Accessibility
Considerations in Interactions
|
Interaction |
Accessibility Tip |
|
Button |
Ensure keyboard focus
and ARIA labeling |
|
Modal |
Trap focus
inside the dialog, close on Esc |
|
Tooltip |
Show on keyboard
focus, not just hover |
|
Toggle/Switch |
Clear visual
and screen reader states |
|
Drag & Drop |
Provide alternative
interaction (e.g., up/down arrows) |
🔹 Patterns That Support
Microinteractions
Microinteractions are small animations or transitions
that make actions more engaging.
Examples:
- Button
ripple effect on click
- Heart
animation on like
- Shake
input on error
Microinteractions:
- Provide
subtle feedback
- Reinforce
behavior
- Delight
users
Use tools like Lottie or Figma Smart Animate for
implementing.
🔹 When to Avoid Certain
Interaction Patterns
|
Pattern |
Avoid When... |
|
Modals |
User is mid-task or
shouldn’t be interrupted |
|
FABs |
There's
already a primary CTA on screen |
|
Swipes |
Users may not discover
the option (no visual hint) |
|
Accordions |
Full content
visibility is critical |
🔹 Summary
Interaction is where design meets behavior. When
users tap, swipe, click, or drag, they're communicating with your product. By
applying the right interaction patterns, you streamline that
communication—making interfaces feel intuitive, fast, and satisfying.
Whether you’re designing for mobile gestures, form
submissions, or system responses, remember: feedback, clarity, and
accessibility are key. These patterns aren’t just technical solutions; they
are user relationships in motion.
In the next chapter, we’ll focus on input, form, and
validation patterns—the foundation of data collection in modern apps.
FAQs
1. What are UI design patterns?
UI design patterns are reusable solutions to common interface design problems. They help create consistent, user-friendly layouts that align with user expectations.
2. Why are design patterns important in UI/UX?
Design patterns improve usability, speed up the design process, and ensure consistency across products. They also reduce the cognitive load on users by using familiar structures.
3. Are UI design patterns the same as design components?
No, UI patterns are conceptual frameworks (like progressive disclosure), while components are actual interface elements (like accordions) used to implement those patterns.
4. How do I choose the right UI pattern for a project?
You should consider the user’s goals, device context, platform conventions, and the complexity of the task. The right pattern simplifies the user's journey.
5. Can I modify existing design patterns to suit my needs?
Yes, design patterns are flexible. While their core purpose should remain intact, they can be adapted for specific use cases, branding, or accessibility needs.
6. What is the most commonly used UI design pattern?
Navigation bars (top or bottom), card layouts, modals, and search fields are among the most frequently used UI design patterns across web and mobile platforms.
7. Do UI design patterns change over time?
Yes. With advancements in technology and user expectations, new patterns emerge (e.g., voice interaction patterns, gesture-based inputs), and older ones are redefined.
8. Where can I study or find UI design pattern libraries?
You can explore Figma Community, UI-patterns.com, Mobbin, UXArchive, and Material Design documentation for real-world examples and usage references.
9. Are there UI patterns specific to mobile or desktop?
Yes, some patterns are platform-dependent. For example, floating action buttons (FABs) are common in Android apps, while mega menus are typical in desktop interfaces.
10. How do UI patterns affect accessibility?
Well-designed patterns improve accessibility by maintaining logical navigation, predictable interactions, and compatibility with screen readers and keyboard input.
Comments(0)