Google UI Flows — Design Patterns & Interactions
Search the world's information, including webpages, images, videos and more
Analytics Snapshot
User navigates an analytics dashboard displaying website traffic and demographic insights for a healthcare property. The flow demonstrates tab-based content switching across Overview, Demographics, Audiences, and Tech tabs—each revealing filtered datasets, demographic breakdowns, and technology stack information. Users interact with metric cards, drill into detailed tables showing age ranges and language preferences, and toggle between chart visualizations and data tables. This pattern exemplifies exploratory analytics workflows where users progressively discover insights through tabbed interf
Quick and fluid — tab navigation responds instantly, data loads smoothly without blocking.
- Click demographics tab to view insights
- Explore audience breakdown and languages
- Switch to tech section view data
- Examine screen resolution metrics
- Return to overview summary
- Dashboard
- Data Visualization
- Search & Discovery
- Card-heavy
- Tab Nav
- Dense
- Light
- Grid Layout
- Tab Switching
- Hover to Reveal
- Data Drill-down
- Inline Chart Interaction
- Active / Selected
- Expanded
- Hover Reveal
- Loading
- Tab Navigation
- Metric Card
- Data Table
- Inline Chart
- Date Range Picker
- Dropdown Select
- Tooltip
- Fullscreen Toggle Button
Inline Rewrite (Google Docs)
Recording demonstrates Google Docs' AI-powered inline text rewriting feature. User selects document content and triggers contextual rewrite suggestions through a floating action menu. System presents alternative phrasings with live preview transitions. This interaction pattern showcases intelligent content editing, real-time AI suggestions, and non-destructive preview workflows—enabling users to refine writing without modal interruptions. Applicable to collaborative editing, copywriting assistance, and content optimization use cases.
Snappy — instant previews with fluid transitions, no confirmation dialogs, changes persist on accept.
- Select text in document
- Open rewrite suggestions menu
- Preview first rewrite variant
- Preview second rewrite variant
- Preview third rewrite variant
- Accept or dismiss suggestion
- Content Creation
- AI Features
- Collaboration
- Minimal
- Light
- Flat Design
- Card-heavy
- Inline Rewrite Suggestion
- Auto-transition Animation
- Hover to Reveal
- Stagger Fade In
- Active / Selected
- Hover Reveal
- Loading
- Focus State
- Inline Text Editor
- Floating Action Menu
- Suggestion Popover
- Content Rewrite Button
- Auto-transition Overlay
- Document Canvas