Perplexity UI Flows — Design Patterns & Interactions
Free AI-powered answer engine
Sources/Citations
User interaction with Perplexity's sources and citations panel during an AI-powered answer retrieval workflow. The flow demonstrates opening a collapsible sources modal, examining citation metadata, navigating between sources and citations tabs, and viewing enriched source attribution data including URLs and titles. This pattern is essential for transparency in AI-generated responses, trust signals, and citation management—core features in conversational search engines and answer engines.
Responsive modal interactions with instant tab switching and lazy-loaded content.
- Open sources panel for current response
- Inspect citation details in modal
- Browse additional source metadata
- Switch between sources and citations tabs
- Search & Discovery
- AI Features
- Data Visualization
- Minimal
- Dark Mode
- Card-heavy
- Tab Nav
- Hover to Reveal
- Modal Expansion
- Tab Switching
- Expanded
- Active / Selected
- Loading
- Citation Popover
- Source Attribution Link
- Radix Tabs Container
- Collapsible Sources Panel
- Citation Badge
- Source URL Link
- Modal Overlay
- Tab Navigation
Follow up
User views a detailed AI-generated research answer about gold market trends with embedded source citations, metrics, and structured insights. The interface surfaces contextual follow-up questions as interactive chips, allowing users to drill deeper into related topics without re-querying. A dismissible pro-feature banner appears inline, offering advanced search capabilities. This demonstrates conversational refinement patterns in AI chat interfaces, where follow-up suggestions reduce friction in multi-turn dialogue and discovery flows.
Instant — seamless follow-up suggestions, dismissible prompts, no loading delays.
- View AI-generated answer with sources
- Dismiss pro feature upsell banner
- Select follow-up question from chips
- AI Features
- Search & Discovery
- Dark Mode
- Card-heavy
- Sidebar Nav
- List Layout
- Minimal
- Inline Dismissible Toast
- Stagger Fade In
- AI chat follow-up suggestions UI pattern
- Contextual question chips in conversational search
- Dismissible upsell banner in answer interface
- Multi-turn dialogue refinement in AI chat
- Source attribution in AI-generated content
- Progressive disclosure in research interfaces
- Progressive disclosure
- Contextual suggestions
- Conversational refinement
- Inline upsell patterns
- Source credibility signals
- Active / Selected
- Expanded
- Success Toast
- Conversation Thread Panel
- Answer Card with Source Links
- Suggested Follow-up Chips
- Pro Feature Upsell Banner
- Inline Dismissible Toast
- CTA Link Button
- Source Attribution Link
First Prompt
User initiates an open-ended query through a search input field, triggering a real-time AI-powered answer generation flow. The interface streams response content with mode tabs (Answer view), displays inline source citations, and surfaces related follow-up questions. This demonstrates conversational search, information retrieval, and guided exploration patterns common in chat-based answer engines and AI copilots.
Responsive streaming — instant query processing with progressive answer reveal and contextual suggestions.
- Focus search input field
- Submit query about gold stock
- View streamed AI answer response
- Explore related questions carousel
- Search & Discovery
- AI Features
- Content Creation
- Dark Mode
- Card-heavy
- Minimal
- Rounded
- Typeahead Search
- Stream Response Loading
- Tab Navigation
- Hover to Reveal
- Focus State
- Loading
- Active / Selected
- Hover Reveal
- Search Input with Focus State
- AI Answer Card
- Answer Mode Tabs
- Source Citation Link
- Thread Actions Menu
- Related Questions Carousel
- Response Stream Container
- Inline Toggle Button
Signup + Onboarding
Complete signup and account onboarding flow for Perplexity AI answer engine. User verifies email via sign-in link, selects account type (personal, team, or education), then encounters plan selection with free and pro tier options featuring trial promotions. Flow demonstrates tiered account setup, plan discovery with feature highlights, and trial offer presentation. Typical for SaaS AI products optimizing for conversion through guided account creation and plan selection.
Guided step-by-step flow with clear progression and plan upgrade prompts
- Land on Perplexity homepage
- Enter email and verify sign-in link
- Advance to account type selection screen
- Choose personal account type
- Review free vs pro plan options
- Confirm account setup completion
- Onboarding
- Sign-up
- Billing & Upgrade
- AI Features
- Minimal
- Card-heavy
- Light
- Rounded
- Progressive Disclosure
- Multi-step Modal Flow
- Plan Comparison
- Trial Upsell
- Active / Selected
- Expanded
- Success Toast
- Auth Modal
- Email Input Field
- Primary CTA Button
- Plan Selection Card
- Feature Highlight Panel
- Pricing Toggle
- Trial Offer Banner
- Account Type Selector
- Segmented Control