aiux
PatternsPatternsNewsNewsAuditAuditResourcesResources
Back to All PromptsNext: Guided Learning
Natural Interaction

Multimodal Interaction

Combine voice, touch, gesture, text, and visual input for natural interaction.

What is Multimodal Interaction?

Multimodal Interaction lets users communicate through voice, touch, gestures, text, and visual input, switching seamlessly by context. Instead of one input method, the system adapts to how users naturally interact. It's essential for accessibility, mobile devices, or environments where certain inputs aren't practical. Examples include Google Assistant combining voice and touch, iPad Pro blending Pencil and voice, or Tesla mixing voice, touch, and automatic responses.

Example: Google Assistant Multimodal Queries

Google Assistant responding to multimodal query with voice and visual elements

Combines voice commands with visual elements (e.g., 'show me photos of my trip to Paris') displaying relevant images and allowing touch to refine results.

AI Design Prompt

Want to learn more about this pattern?

Explore the full pattern with real-world examples, implementation guidelines, and code samples.

View Full Pattern

Related Prompts from Natural Interaction

Progressive Disclosure

Natural Interaction

Design an interface with progressive disclosure that reveals AI features gradually: Create 3 states: 1. **Initial view**: Show essential content only (summary, key action) 2. **Expanded view**: Reveal more details (AI insights, key points) 3. **Full view**: Show all options (actions, settings, advanced features) Include clear expand/collapse triggers (chevrons, "Show more" buttons) and smooth transitions between states.

View Full

Conversational UI

Natural Interaction

Design a conversational AI interface that feels natural and engaging: Create a chat interface showing: 1. **Message Area**: Clear distinction between user and AI messages with appropriate spacing 2. **AI Personality**: Subtle visual elements that reflect brand personality (avatar, colors, tone) 3. **Context Indicators**: Show when AI is typing, thinking, or has understood the request 4. **Input Options**: Text input with suggested prompts or quick actions 5. **Conversation History**: Easy access to previous messages with smooth scrolling Include visual cues for conversation state (listening, processing, responding). Add example starter prompts to guide users.

View Full

Context Switching

Natural Interaction

Design a context-switching interface similar to Slack's workspace switcher or browser tab management with session restore. Show seamless transitions between different AI contexts or tasks. Include: context carousel or sidebar showing active contexts with thumbnails, quick-switch panel with keyboard shortcuts (Cmd+K style), each context card showing task name, last activity timestamp, and preview thumbnail, auto-save indicator showing context is preserved, visual transition animation when switching (slide/fade), and 'Resume where you left off' messaging. Style: Organized, efficient, minimal cognitive load. Use clear visual separation between contexts, smooth animations (200-300ms), consistent iconography. Platform: Web application, keyboard-friendly.

View Full
Previous PromptAdaptive InterfacesView All PromptsNext PromptGuided Learning

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • AI Interaction Toolkit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • Submit Feedback
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.