Natural Interaction

Progressive Disclosure

Gradually reveal information, options, or AI features to reduce cognitive load and simplify complex tasks.

What is Progressive Disclosure?

Progressive Disclosure is an AI design pattern that reveals complexity gradually. It shows simple features first, then unveils advanced capabilities as needed. Instead of overwhelming users with every AI setting and option upfront, this pattern starts with essentials and expands on demand. It's ideal for powerful AI tools with many features, onboarding new users, or preventing decision paralysis. Think of how Loom shows basic video tools first, then reveals AI transcription when you click 'more options,' or how ChatGPT starts simple but offers advanced settings in a menu.

Example: Loom AI Video Tools

Loom AI progressive disclosure in action

Basic video editing options are shown; advanced AI features (e.g., auto-transcription, highlights) are revealed as needed.

Figma Make 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

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

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 PromptContextual AssistanceView All PromptsNext PromptHuman-in-the-Loop