Natural Interaction

Conversational UI

Design intuitive, engaging, human-like interactions via chat and voice interfaces.

What is Conversational UI?

Conversational UI is a design pattern where users interact with AI through natural language (text or voice) instead of traditional menus, forms, and buttons. Rather than learning a product's interface, users simply describe what they need and the AI interprets their intent. Conversational interfaces come in many forms: text-based chatbots like ChatGPT and Claude, voice assistants like Siri and Alexa, embedded AI assistants like Slack AI and Microsoft Copilot, and hybrid interfaces that combine chat with traditional UI elements.

Example: ChatGPT

ChatGPT conversational interface with multi-turn dialogue

OpenAI's ChatGPT popularized the conversational AI interface. Users type questions or instructions and receive detailed responses in a multi-turn conversation. **Why it works:** Maintains full conversation context, supports follow-up questions, and offers suggested prompts to guide users. The interface blends rich content (code blocks, tables, images) within the chat flow rather than forcing users to leave the conversation.

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

Multimodal Interaction

Natural Interaction

Design a multimodal interface that seamlessly combines voice, touch, and visual interactions: Create an interaction screen showing: 1. **Voice Input**: Microphone button with visual feedback (sound waves, listening state) 2. **Touch Controls**: Interactive elements that respond to taps, swipes, and gestures 3. **Text Input**: Keyboard option as an alternative to voice 4. **Visual Output**: Results displayed in scannable format (cards, lists, images) 5. **Mode Indicators**: Clear visual cues showing which input mode is active Show how users can combine modes (e.g., "Show me [touch image] similar to this"). Include accessibility alternatives for each interaction mode.

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 PromptHuman-in-the-LoopView All PromptsNext PromptAdaptive Interfaces