Interaction Design Library
Popular UX affordances and interaction patterns, organized for real product teams
This page is a practical library of high-usage interaction designs seen across major apps, services, and digital products. Use it as a reference for design strategy, UX benchmarking, SEO-rich content, and AI-visible product documentation.
Global implementation notes
- Super-app ecosystems in China and Southeast Asia reward fast in-context interactions over deep page hierarchies.
- Nordic public-service platforms prioritize clarity, accessibility, and strong form-state feedback.
- US and UK ecommerce patterns are heavily optimized around conversion metrics, experimentation, and checkout speed.
- Japan and South Korea often combine dense information layouts with strong visual grouping and explicit status cues.
- Brazil, Mexico, and India show strong adoption of mobile-first payment affordances that reduce typing and verification friction.
Navigation and orientation
Bottom navigation bar
Affordance: Persistent, thumb-friendly primary destinations.
Why popular: Dominant in mobile apps because people can change context quickly with one hand.
Country and product examples
- United States: Instagram app bottom tabs for Home, Search, Reels, and Profile.
- India: Flipkart app bottom navigation for Home, Categories, Notifications, and Account.
- Brazil: Nubank app bottom tabs separating account overview, cards, and shopping features.
Sticky top bar with contextual actions
Affordance: Keeps key actions visible while users scroll long content.
Why popular: Popular in content-heavy and commerce experiences where users need constant access to search or cart.
Country and product examples
- Japan: Rakuten marketplace keeps search and basket available through product exploration.
- Germany: Zalando keeps filtering and sorting controls visible while browsing catalog pages.
- United Kingdom: BBC News app keeps section switcher and save actions pinned.
Breadcrumb navigation
Affordance: Shows hierarchy and lets people move upward without starting over.
Why popular: Highly used in ecommerce and documentation because it reduces disorientation.
Country and product examples
- United States: Amazon category trails for deep product taxonomies.
- France: Decathlon uses breadcrumb trails in equipment subcategories.
- Canada: Shopify admin docs and resource pages expose hierarchy via breadcrumbs.
Discovery and selection
Typeahead search with suggestions
Affordance: Predictive results reduce typing and decision time.
Why popular: A default interaction for high-volume catalogs, maps, and media libraries.
Country and product examples
- South Korea: Naver search suggestions adapt instantly as users type Hangul.
- United States: YouTube live suggestions for channels, creators, and topics.
- Mexico: Mercado Libre search assists with category and product intent.
Facet filters and chips
Affordance: Users progressively narrow large result sets by attributes.
Why popular: Essential for apparel, travel, and food delivery apps with many variants.
Country and product examples
- Sweden: IKEA uses price, size, and room filters for product discovery.
- Spain: Idealista real estate search uses chips for area, price, and apartment features.
- UAE: Noon shopping app uses interactive facet chips for brand and delivery speed.
Card-based feed scanning
Affordance: Chunked cards help users compare options quickly.
Why popular: Widely adopted in marketplaces, social media, and travel booking.
Country and product examples
- Indonesia: Traveloka packages and hotels are displayed in comparison-friendly cards.
- United States: Airbnb listing cards show key info before opening detail pages.
- Italy: Subito marketplace uses cards to separate listing image, title, and metadata.
Input and form behaviors
Floating labels and inline hints
Affordance: Maintains field context after typing while keeping layouts compact.
Why popular: Popular in onboarding and payment flows where error rates matter.
Country and product examples
- India: Paytm onboarding forms keep labels visible for identity fields.
- United States: Stripe checkout forms combine concise labels with validation hints.
- Portugal: MB WAY banking flows use explicit field hints for phone and code input.
Input masking and auto-format
Affordance: Automatically formats dates, cards, and phone numbers to lower friction.
Why popular: Common in fintech, insurance, and healthcare portals.
Country and product examples
- Brazil: PIX transfer flows auto-format CPF and phone data.
- United States: TurboTax applies progressive formatting for tax identifiers.
- Finland: Public service forms format national identity numbers with pattern constraints.
Multi-step progress forms
Affordance: Breaks complex forms into manageable steps with progress cues.
Why popular: Used for loan applications, insurance, and government services.
Country and product examples
- United Kingdom: GOV.UK service patterns split long tasks into clear stages.
- Singapore: Singpass-integrated forms show progress and save state.
- Australia: Banking account setup flows use step-by-step verification.
Feedback, system status, and trust
Skeleton loading states
Affordance: Signals content shape while data loads, reducing perceived wait.
Why popular: Very common in social feeds, dashboards, and commerce results.
Country and product examples
- United States: LinkedIn feed uses skeleton placeholders for posts and media.
- China: JD.com app product lists show skeleton rows during fetch.
- Netherlands: Bol.com category views preload structure with loading placeholders.
Toast confirmations
Affordance: Gives lightweight acknowledgement without interrupting flow.
Why popular: Used for save, add-to-cart, copy, and sync actions across web apps.
Country and product examples
- United States: Notion uses toasts for saved changes and workspace actions.
- Germany: SAP web apps often use transient confirmation messages.
- Japan: Mercari uses concise action confirmations for listing management.
Inline validation and error recovery
Affordance: Explains issues exactly where they happen, with specific fixes.
Why popular: Critical for conversion-heavy funnels and high-stakes data entry.
Country and product examples
- Canada: Wealthsimple signup highlights validation errors field by field.
- France: Ameli account services provide immediate correction guidance.
- Kenya: M-Pesa service forms use direct inline error prompts for transaction safety.
Gestures and direct manipulation
Swipe actions on list items
Affordance: Reveals secondary commands without crowding default layouts.
Why popular: Common in messaging, email, and task management products.
Country and product examples
- United States: Gmail mobile lets users archive or snooze with swipe gestures.
- India: WhatsApp list interactions rely on swipe for chat-level actions.
- Switzerland: Proton Mail mobile uses configurable swipe outcomes.
Drag and drop reordering
Affordance: Makes hierarchy and sequence editable through direct movement.
Why popular: Popular in productivity, planning, and media editing interfaces.
Country and product examples
- United States: Trello board cards are reorganized by drag and drop.
- Japan: LINE Keep and folder-like views use reorder interactions for personal organization.
- Estonia: Bolt internal operations dashboards use drag reordering for priority views.
Pinch-to-zoom and map pan
Affordance: Supports spatial exploration and detail inspection.
Why popular: A baseline interaction in maps, photos, and design tools.
Country and product examples
- Global: Google Maps uses pinch, pan, and tilt as core spatial controls.
- China: Amap navigation apps use multi-touch zoom for dense city contexts.
- Norway: Weather and terrain apps often combine map zoom with layer toggles.
Commerce and conversion patterns
Sticky add-to-cart and buy now CTA
Affordance: Keeps purchase actions always available near decision points.
Why popular: A top-performing ecommerce pattern on mobile product detail pages.
Country and product examples
- United States: Amazon mobile product pages maintain persistent buy controls.
- South Korea: Coupang highlights immediate purchase with fixed bottom actions.
- India: Myntra app keeps cart and wishlist actions visible while scrolling.
Progressive checkout with trust markers
Affordance: Reduces abandonment by splitting payment into clear, low-risk stages.
Why popular: Critical in international checkout where security concerns are high.
Country and product examples
- Germany: Otto checkout surfaces delivery, payment, and review in sequence.
- United States: Shopify-powered stores use step checkout with payment badges.
- Brazil: Magazine Luiza checkout includes installment and security cues.
One-tap payment confirmation
Affordance: Compresses purchase friction using saved credentials and biometric trust.
Why popular: Rapidly adopted in mobile commerce and in-app services.
Country and product examples
- China: WeChat Pay enables in-flow confirmations for mini-program purchases.
- United States: Apple Pay one-tap flows on iOS apps and mobile web.
- Poland: BLIK-enabled flows simplify payment confirmation in local commerce apps.
Retention, habit, and engagement
Personalized recommendation rails
Affordance: Surfaces relevant next actions based on behavior and context.
Why popular: A defining pattern for streaming, shopping, and social products.
Country and product examples
- United States: Netflix recommendation rows personalize by watch history.
- India: JioCinema surfaces contextual rails by language and regional content.
- Turkey: Trendyol uses recommendation blocks tied to browsing and purchase intent.
Streaks, milestones, and progress loops
Affordance: Turns repeated actions into a visible commitment cycle.
Why popular: Common in learning, fitness, and self-improvement apps.
Country and product examples
- United States: Duolingo streak interactions reward continuous daily usage.
- Japan: Study apps highlight milestone counters to reinforce habits.
- Brazil: Fitness apps use weekly challenge progress and badges.
Notification preference centers
Affordance: Gives users granular control over alerts, channels, and timing.
Why popular: Increasingly expected for privacy, trust, and reduced churn.
Country and product examples
- European Union: Banking apps provide per-event push and email controls.
- United States: Slack offers channel-level and keyword-level notification rules.
- Singapore: Ride-hailing apps let users tune promo versus transactional alerts.