# Temporal & Scenario Analysis - UX Concept (Revised) ## Executive Summary This document outlines the UX concept for multi-graph capabilities in Constellation Analyzer, focusing on **temporal evolution** and **scenario exploration**. This is NOT a version control system - it's a tool for understanding how constellations change over time and exploring alternative futures. **Core Use Cases:** - Track relationship evolution across time periods (historical analysis) - Explore alternative scenarios and strategic options (what-if analysis) - Compare different states side-by-side (comparative analysis) - Present evolution to stakeholders (storytelling and presentation) --- ## 1. Terminology & Mental Model ### 1.1 Recommended Terms After careful consideration, we recommend a **dual-mode terminology** that adapts to user context: #### Primary Terms: - **State** - A single snapshot of the constellation at a point in time or scenario - **Timeline** - The collection of states with temporal/branching relationships - **Evolution** - The progression of states over time - **Branch** - A divergence point where scenarios split from a common state #### Context-Specific Labels: The system should allow users to set their analysis mode: **Temporal Mode** (for time-based analysis): - States are called "Timepoints" - Labels show dates/periods: "January 2024", "Q2 2024", "6 months post-merger" - Navigation emphasizes chronological progression - Visual: Timeline with chronological markers **Scenario Mode** (for strategic exploration): - States are called "Scenarios" - Labels show scenario names: "Aggressive Growth", "Conservative Approach", "Status Quo" - Navigation emphasizes comparison and alternatives - Visual: Decision tree or parallel tracks **Hybrid Mode** (combines both): - Temporal progression WITH scenario branches at key points - Example: "Pre-merger" → "Option A: Quick Integration" vs "Option B: Gradual Transition" - Visual: Timeline with branching points ### 1.2 Mental Model Users should think of this feature as: > "A timeline of my constellation's evolution, with the ability to explore 'what-if' branches at any point" **Metaphor:** Think of a photo album with multiple timelines - you can flip through one person's life chronologically, or compare different life paths they could have taken at decision points. **Not like:** Git branches, version control, or undo/redo history --- ## 2. UI Architecture ### 2.1 Layout Overview ``` ┌─────────────────────────────────────────────────────────────┐ │ Header: Constellation Analyzer │ ├─────────────────────────────────────────────────────────────┤ │ Menu Bar │ ├─────────────────────────────────────────────────────────────┤ │ Document Tabs │ ├─────────────────────────────────────────────────────────────┤ │ ┌──────┐ Current State Indicator │ │ │ ICON │ "Jan 2024" or "Scenario A: Aggressive Growth" │ │ └──────┘ [Timeline Controls] [Compare] [Present] │ ├──────────┬──────────────────────────────────┬──────────────┤ │ Left │ │ Right │ │ Panel │ Graph Canvas │ Panel │ │ (Tools) │ │ (Properties) │ │ │ │ │ ├──────────┴──────────────────────────────────┴──────────────┤ │ Timeline Panel │ │ [═══●═══●═══●═══●═══] Timeline scrubber │ │ [Visual timeline with states and branches] │ └─────────────────────────────────────────────────────────────┘ ``` ### 2.2 Current State Indicator (New Component) **Location:** Between toolbar and main canvas, full width **Purpose:** Always show which state user is viewing/editing **Design:** ``` ┌────────────────────────────────────────────────────────────────┐ │ 📍 Current State: January 2024 │ │ ← Q4 2023 | [Edit State Info] | Feb 2024 → │ │ Branch: Main Timeline │ └────────────────────────────────────────────────────────────────┘ ``` **Features:** - Large, clear state name/label - Navigation arrows to previous/next state in sequence - Branch indicator if applicable - Quick edit button for state metadata - Visual connection to timeline panel below ### 2.3 Timeline Panel (Bottom Panel - Redesigned) **Default State:** Collapsed (shows only scrubber bar) **Expanded State:** Shows full timeline visualization #### Collapsed View (40px height): ``` ┌────────────────────────────────────────────────────────────────┐ │ ▲ Timeline [═══●═══●═══●═══●═══] [+] [⚙] [Expand] │ └────────────────────────────────────────────────────────────────┘ ``` - Mini timeline scrubber with state markers - Current state highlighted - Click markers to jump to state - Quick add state button - Settings for timeline display - Expand/collapse toggle #### Expanded View (200-400px height, resizable): ``` ┌────────────────────────────────────────────────────────────────┐ │ Timeline View: [Linear] [Tree] [Matrix] [+] [⚙] [▼] │ ├────────────────────────────────────────────────────────────────┤ │ │ │ Temporal Mode (Linear): │ │ ─────●─────────●──────────●──────────●─────────●──── │ │ Jan 24 Mar 24 Jun 24 Sep 24 Dec 24 │ │ "Setup" "Growth" "Stable" "Expansion" "Future" │ │ │ │ Scenario Mode (Tree): │ │ ┌──●── "Aggressive" ───●── "Year 2" │ │ │ "High Risk" "Scale Up" │ │ ──●───────●──────● │ │ "Now" "Setup" │ "Decision Point" │ │ │ │ │ └──●── "Conservative" ───●── "Stable" │ │ "Low Risk" "Maintain" │ │ │ │ Hybrid Mode (Matrix): │ │ Shows both temporal and scenario dimensions │ │ │ └────────────────────────────────────────────────────────────────┘ ``` **Visualization Modes:** 1. **Linear Timeline** (Temporal): - Horizontal timeline with evenly spaced or date-proportional spacing - State cards with labels, dates, descriptions - Visual continuity indicators (lines/arrows) - Current state highlighted with distinct styling - Hover shows preview thumbnail 2. **Tree View** (Scenarios): - Branch visualization showing decision points - Parent-child relationships clear - Color coding by branch/scenario family - Collapsible branches - Labels emphasize scenario names over dates 3. **Matrix View** (Hybrid): - Horizontal axis: Time progression - Vertical tracks: Different scenario branches - Grid layout showing all parallel scenarios at each timepoint - Quick comparison across scenarios **Interactions:** - Click state to navigate to it - Drag to reorder (with confirmation) - Right-click for context menu - Double-click to edit metadata - Drag timeline area to scroll - Pinch/zoom to adjust spacing --- ## 3. Core Workflows ### 3.1 Creating a New State **From Current State:** 1. User clicks [+ New State] button in timeline panel or current state indicator 2. Dialog appears: ``` ┌─────────────────────────────────────────┐ │ Create New State │ ├─────────────────────────────────────────┤ │ ○ Continue Timeline │ │ Next step in temporal progression │ │ │ │ ○ Branch into Scenario │ │ Alternative possibility from here │ ├─────────────────────────────────────────┤ │ Label: [_____________________] │ │ │ │ ○ Temporal Mode │ │ Date/Period: [Jan 2024 ▼] │ │ │ │ ○ Scenario Mode │ │ Description: [____________] │ │ │ │ Starting Point: │ │ ⦿ Clone current state │ │ ○ Clean slate │ │ │ │ [Cancel] [Create State] │ └─────────────────────────────────────────┘ ``` 3. User fills in: - **Label:** Required name for the state - **Type:** Continue timeline (sequential) or branch (alternative) - **Mode:** Temporal (with date) or Scenario (with description) - **Starting point:** Clone current actors/relations or start empty 4. New state is created and becomes the active state 5. Timeline panel updates to show new state in context **Quick Actions:** - "Next Month" button (temporal): Creates next sequential timepoint - "What If?" button (scenario): Creates branch from current state - Keyboard shortcut: Ctrl+Shift+N ### 3.2 Navigating Between States **Timeline Panel:** - Click any state marker to jump to it - Use scrubber to drag through states (with animation) - Arrow keys when timeline focused: ← → navigate chronologically **Current State Indicator:** - Previous/Next arrows for sequential navigation - Dropdown showing all states with search/filter **Keyboard Shortcuts:** - Alt + Left/Right Arrow: Previous/Next state - Alt + Number: Jump to state (1-9) - Alt + B: Show branch menu **Animation:** - When navigating between states, show smooth transition - Actors that exist in both: morph positions/properties - Actors only in old state: fade out - Actors only in new state: fade in - Configurable animation speed or instant toggle ### 3.3 Comparing States Users need powerful comparison tools for analysis. #### Side-by-Side Comparison 1. Click [Compare] button in toolbar 2. Comparison mode activates: ``` ┌────────────────────────────────────────────────────────┐ │ Compare Mode: [State A ▼] vs [State B ▼] [Exit] │ ├──────────────────────────┬─────────────────────────────┤ │ │ │ │ State A: Jan 2024 │ State B: Jun 2024 │ │ "Initial Setup" │ "After Growth" │ │ │ │ │ [Graph visualization] │ [Graph visualization] │ │ │ │ └──────────────────────────┴─────────────────────────────┘ ``` 3. Features: - Synchronized zoom/pan (toggle) - Highlight differences - Shared actors connected with visual lines - Color coding: Added (green), Removed (red), Changed (yellow) - Comparison metrics panel (optional) #### Overlay/Diff Mode 1. From comparison mode, toggle to overlay 2. Single canvas shows both states: - State A actors: Semi-transparent - State B actors: Full opacity - Movement arrows showing position changes - New/removed actors clearly marked - Toggle layers on/off #### Difference Report 1. Click [Generate Report] in comparison mode 2. Automatic analysis shows: - Actors added/removed - Relations added/removed - Property changes - Network metrics comparison (density, centrality, etc.) - Export as PDF/HTML ### 3.4 Animation Between States **Presentation Mode** (for stakeholder demos): 1. Click [Present] button 2. Presentation interface appears: ``` ┌──────────────────────────────────────────────────────────┐ │ ╔═════════════╗ │ │ ║ ◄ ▐▐ ► ║ [Exit Presentation] │ │ ╚═════════════╝ │ ├──────────────────────────────────────────────────────────┤ │ │ │ Full-screen Graph View │ │ │ │ State: January 2024 │ │ "Initial Team Structure" │ │ │ │ [Actors and relations displayed] │ │ │ └──────────────────────────────────────────────────────────┘ ``` 3. Features: - Full-screen mode (ESC to exit) - Play/pause automated progression through states - Adjustable animation speed - State titles and descriptions display as subtitles - Voice-over text field (optional annotations read aloud) - Export as video/animated GIF 4. Presentation Controls: - Left/Right arrows: Previous/Next state - Space: Play/Pause animation - Number keys: Jump to state - Escape: Exit presentation mode **Auto-play Settings:** - Duration per state: 3s / 5s / 10s / Custom - Animation speed: Slow / Medium / Fast / Instant - Pause on branches (show decision point) ### 3.5 Editing State Metadata **State Information Dialog:** Right-click state in timeline → "Edit State Info" ``` ┌─────────────────────────────────────────┐ │ State Information │ ├─────────────────────────────────────────┤ │ Label: [January 2024____________] │ │ │ │ Mode: ⦿ Temporal ○ Scenario │ │ │ │ [Temporal] │ │ Date: [2024-01-15___] │ │ Period: [Q1 2024_________] │ │ │ │ Description: │ │ [Initial team structure │ │ after reorganization...] │ │ │ │ Tags: [planning] [actual] [+] │ │ │ │ Parent State: ← Q4 2023 │ │ Next State: → February 2024 │ │ │ │ Color: [🎨 Blue] │ │ │ │ Notes: │ │ [Additional context for │ │ presenters and analysts...] │ │ │ │ [Delete State] [Save] │ └─────────────────────────────────────────┘ ``` **Fields:** - **Label:** Display name (required) - **Mode:** Temporal or Scenario - **Date/Period:** For temporal states - **Description:** Rich text description - **Tags:** Categorization and filtering - **Color:** Custom color for timeline visualization - **Notes:** Presenter notes (shown in presentation mode) --- ## 4. Visual Design Recommendations ### 4.1 Timeline Visualization **State Cards in Timeline:** ``` ┌────────────────────┐ │ January 2024 │ ← Large, readable label │ ┌──────────────┐ │ │ │ [preview] │ │ ← Small graph thumbnail (optional) │ └──────────────┘ │ │ Initial Setup │ ← Short description │ 📅 2024-01-15 │ ← Date/metadata │ 👥 12 actors │ ← Quick stats └────────────────────┘ ● ← Connection point │ ``` **Current State Highlighting:** - Distinct color (blue/accent color) - Subtle glow or border - Larger card size - Animated pulse (subtle) **Branch Visualization:** ``` Main Timeline ─────●─────●─────●───── │ ├──●──● "Scenario A" │ └──●──● "Scenario B" ``` - Branch lines with different colors - Clear labels at divergence points - Hierarchy preserved visually ### 4.2 Color Coding System **By Branch/Timeline:** - Main timeline: Blue - Scenario branches: Purple, Orange, Green, etc. - Auto-assign colors, user can override **By State Type:** - Temporal (historical): Darker shades - Temporal (projected): Lighter shades, dashed borders - Scenarios: Solid colors, distinct from temporal **By Status:** - Current state: Highlighted accent color - Past states: Full color - Future states: Semi-transparent - Draft/incomplete: Gray with icon ### 4.3 Comparison View Design **Side-by-Side:** - Vertical divider with drag handle - Synchronized indicators (when zoom/pan synced) - Difference highlights: - Added actors: Green outline with + badge - Removed actors: Red outline with - badge (ghost in removed state) - Changed actors: Yellow outline - Unchanged actors: Normal appearance **Overlay/Diff:** - Layer opacity controls - Toggle visibility per layer - Color shifts to indicate temporal position - Movement arrows with directional animation ### 4.4 Animation Design **Smooth Transitions:** - Actor movement: Bezier curve paths (not straight lines) - Fade timing: Staggered (not all at once) - Duration: 300-800ms (configurable) - Easing: Ease-in-out for natural feel **Attention Direction:** - Highlight changes sequentially - Narration overlay option - Pause points at key changes --- ## 5. Advanced Features ### 5.1 Diff Analysis Tools **Change Detection:** - Automatic identification of: - New actors (not in previous state) - Removed actors - Moved actors (position change >threshold) - Re-typed actors (type change) - New relations - Removed relations - Changed relation properties **Visualization:** - Diff panel (bottom or right) - List of changes with categories - Click to highlight in graph - Filter by change type **Example:** ``` ┌─────────────────────────────────────────┐ │ Changes: Jan 2024 → Jun 2024 │ ├─────────────────────────────────────────┤ │ ✅ Actors Added (3) │ │ + Alice Johnson (Team Lead) │ │ + Bob Chen (Designer) │ │ + Carol Smith (Engineer) │ │ │ │ ❌ Actors Removed (1) │ │ - David Lee (Former Manager) │ │ │ │ 🔄 Relations Changed (5) │ │ ≈ Alice → Bob: "supervises" │ │ ≈ Carol → Bob: "collaborates" │ │ ... │ │ │ │ 📊 Network Metrics │ │ Density: 0.45 → 0.52 (+15%) │ │ Avg Connections: 3.2 → 4.1 │ └─────────────────────────────────────────┘ ``` ### 5.2 Actor Tracking Across Time **Follow Actor Feature:** 1. Right-click actor → "Track Across States" 2. Actor timeline appears: ``` ┌─────────────────────────────────────────┐ │ Tracking: Alice Johnson │ ├─────────────────────────────────────────┤ │ │ │ Jan 24 Mar 24 Jun 24 Sep 24 │ │ ●─────────●─────────●─────────● │ │ │ │ │ │ │ │ Junior Team Senior Manager │ │ Dev Lead Dev │ │ │ │ Connections: 2 → 5 → 8 → 12 │ │ Centrality: 0.1 → 0.3 → 0.5 → 0.7 │ └─────────────────────────────────────────┘ ``` 3. Shows: - Actor presence in each state - Property changes over time - Relationship changes - Metrics evolution - Graph of metrics over time **Use Cases:** - Track individual's career progression - Monitor key stakeholder involvement - Analyze relationship building patterns - Identify critical transition points ### 5.3 Scenario Comparison Matrix **For Strategic Planning:** ``` ┌───────────────────────────────────────────────────────────┐ │ Scenario Comparison Matrix │ ├───────────┬─────────────┬─────────────┬─────────────┬────┤ │ │ Aggressive │ Conservative│ Status Quo │...│ ├───────────┼─────────────┼─────────────┼─────────────┼────┤ │ Team Size │ 25 actors │ 15 actors │ 12 actors │ │ │ Density │ 0.65 │ 0.42 │ 0.38 │ │ │ Leaders │ 4 │ 2 │ 1 │ │ │ Risk │ High │ Medium │ Low │ │ │ Cost │ $$$ │ $$ │ $ │ │ ├───────────┴─────────────┴─────────────┴─────────────┴────┤ │ [View] [View] [View] [View] │ └───────────────────────────────────────────────────────────┘ ``` - Compare metrics across scenarios - Custom metric definitions - Export to spreadsheet - Visual heatmap of differences ### 5.4 Smart Suggestions **AI-Assisted Analysis:** - "Key changes between states" summary - "Critical actors in this period" identification - "Potential issues" detection (isolated actors, broken connections) - "Similar patterns" from other states - "Recommended next state" based on patterns (Note: Requires AI integration, future feature) ### 5.5 Export & Reporting **Export Options:** 1. **Timeline Report (PDF/HTML):** - All states with graphs - Annotations and descriptions - Change summaries - Metrics evolution charts - Professional formatting 2. **Presentation Deck:** - PowerPoint/Google Slides - One slide per state - Transition animations - Speaker notes from state notes 3. **Video/Animation:** - MP4 export of presentation mode - Configurable duration and transitions - Voiceover from notes (text-to-speech) - Watermark and branding options 4. **Data Export:** - CSV with state metadata - JSON with full state data - Graph metrics per state - Change log --- ## 6. Data Model ### 6.1 State Structure ```typescript interface ConstellationState { id: string; label: string; description?: string; // Mode and temporal information mode: 'temporal' | 'scenario'; date?: string; // ISO date for temporal states period?: string; // e.g., "Q1 2024", "6 months post-merger" // Graph data nodes: Actor[]; edges: Relation[]; nodeTypes: NodeTypeConfig[]; edgeTypes: EdgeTypeConfig[]; // Relationships to other states parentStateId?: string; // State this was created from childStateIds: string[]; // States created from this one branchName?: string; // For organizing branches // Metadata tags: string[]; color?: string; // Custom color for timeline notes?: string; // Presenter notes thumbnail?: string; // Base64 or URL to preview image // Timestamps createdAt: string; updatedAt: string; } ``` ### 6.2 Timeline Structure ```typescript interface Timeline { id: string; documentId: string; // Link to parent document states: ConstellationState[]; // Timeline metadata name: string; description?: string; defaultMode: 'temporal' | 'scenario' | 'hybrid'; // View preferences viewMode: 'linear' | 'tree' | 'matrix'; sortBy: 'date' | 'created' | 'custom'; // Presentation settings presentationSettings: { autoPlayDuration: number; // seconds per state animationSpeed: 'slow' | 'medium' | 'fast' | 'instant'; showDescriptions: boolean; pauseOnBranches: boolean; }; } ``` ### 6.3 Document Structure Update ```typescript interface Document { // Existing fields... id: string; name: string; // Add timeline reference timelineId?: string; currentStateId?: string; // Active state being edited // Legacy support: documents without timeline // use existing nodes/edges directly nodes?: Actor[]; edges?: Relation[]; nodeTypes?: NodeTypeConfig[]; edgeTypes?: EdgeTypeConfig[]; } ``` **Migration Strategy:** - Existing documents: Continue to work without timeline - User can "Enable Timeline" to convert to multi-state - First state created automatically from current graph - Backwards compatible --- ## 7. User Stories & Use Cases ### 7.1 Organizational Consultant **Scenario:** Track team dynamics over 6-month transformation **Story:** > "As an organizational consultant, I want to document how team relationships evolved during a restructuring so that I can present the transformation to leadership and identify success factors." **Workflow:** 1. Create document: "Sales Team Transformation" 2. Set to Temporal Mode 3. Create state "January 2024 - Before Restructure" - Add all team members - Map current reporting relationships 4. Create state "March 2024 - Mid-transition" - Update structure, add new manager - Show matrix relationships forming 5. Create state "June 2024 - New Structure" - Final organizational structure - New collaboration patterns 6. Use Compare mode to show before/after 7. Generate presentation showing evolution 8. Present to leadership with animated transitions **Key Features Used:** - Temporal mode with dates - State-to-state animation - Comparison view - Presentation mode - Change detection ### 7.2 Strategic Planner **Scenario:** Evaluate three alternative market entry strategies **Story:** > "As a strategic planner, I want to model different partnership scenarios so that our executive team can compare approaches and make an informed decision." **Workflow:** 1. Create document: "APAC Market Entry 2025" 2. Set to Scenario Mode 3. Create base state "Current Partnerships - Q4 2024" - Map existing partner ecosystem 4. Branch into three scenarios: - "Scenario A: Direct Entry" (build own team) - "Scenario B: Strategic Acquisition" (acquire local player) - "Scenario C: JV Partnership" (joint venture) 5. Model each scenario: - Different actor sets (internal vs. external) - Different relationship patterns - Add cost/risk tags 6. Use Comparison Matrix to evaluate: - Team size, relationship density - Risk factors, dependencies 7. Present all three to executive team 8. Decision made, continue developing chosen scenario **Key Features Used:** - Scenario mode with branches - State cloning with modifications - Comparison matrix - Scenario-specific metadata - Multi-scenario presentation ### 7.3 Family Therapist **Scenario:** Track family system changes through therapy **Story:** > "As a family therapist, I want to visualize how family relationships evolve over our sessions so that family members can see their progress and understand the changes they've made." **Workflow:** 1. Create document: "Johnson Family System" 2. Set to Temporal Mode 3. Create state "Session 1 - Initial Intake" - Map family members - Show conflict patterns (red edges) - Identify isolated members 4. Create state "Session 5 - After First Intervention" - Update relationship types - Show new communication patterns 5. Create state "Session 10 - Current State" - Document improvements - Identify remaining work areas 6. Show animated progression to family 7. Highlight positive changes 8. Discuss next goals based on visual **Key Features Used:** - Temporal progression - Relationship type tracking - Visual storytelling - Change highlighting - Actor tracking (family member journeys) ### 7.4 Researcher - Historical Analysis **Scenario:** Study political alliance formation pre-WWI **Story:** > "As a historian, I want to map how European alliances shifted from 1900-1914 so that I can analyze the path to war and teach students about alliance dynamics." **Workflow:** 1. Create document: "European Alliances 1900-1914" 2. Set to Temporal Mode 3. Create states for key years: - "1900 - Post-Victorian Era" - "1904 - Entente Cordiale" - "1907 - Triple Entente Formed" - "1912 - Balkan Wars Impact" - "1914 - Pre-War System" 4. For each state: - Add nations as actors - Map alliances as relations - Annotate with historical context 5. Create "What-If" branches: - "If Britain remained neutral" - "If Russia-Japan alliance continued" 6. Use presentation mode for lectures 7. Generate report with analysis **Key Features Used:** - Historical timeline - Dense annotations - Counterfactual scenarios (branches) - Educational presentation - Export for publication ### 7.5 Product Manager - Stakeholder Mapping **Scenario:** Plan stakeholder engagement for product launch **Story:** > "As a product manager, I want to model how our stakeholder ecosystem will evolve from beta to GA launch so that we can plan our engagement strategy and identify key influencers at each stage." **Workflow:** 1. Create document: "Product X Launch Stakeholders" 2. Set to Temporal Mode 3. Create states: - "Current - Pre-announcement" - "Beta Program - Month 1" - "Beta Program - Month 3" - "GA Launch" - "3 Months Post-GA" 4. For each state: - Add/remove stakeholders - Update engagement levels (edge strength) - Mark key influencers 5. Track specific stakeholders across timeline 6. Identify where to focus engagement efforts 7. Share with marketing team **Key Features Used:** - Temporal planning - Actor tracking - Relationship strength evolution - Strategic planning view - Team collaboration --- ## 8. Implementation Priorities ### Phase 1: Core Functionality (MVP) **Goal:** Basic multi-state support - [ ] State data model and storage - [ ] Create/switch between states - [ ] Simple timeline panel (linear view) - [ ] Current state indicator - [ ] Basic state metadata editing - [ ] Timeline navigation **Success Criteria:** - User can create multiple states - User can switch between states - Changes are saved per-state - UI clearly shows current state ### Phase 2: Temporal & Scenario Modes **Goal:** Differentiate use cases - [ ] Temporal vs. Scenario mode selection - [ ] Date/period fields for temporal states - [ ] Branch creation from states - [ ] Tree view in timeline panel - [ ] State cloning options - [ ] Basic comparison (side-by-side) **Success Criteria:** - User can track temporal progression - User can branch into scenarios - User can compare two states side-by-side - Timeline visualizes branches clearly ### Phase 3: Analysis & Comparison **Goal:** Power user features - [ ] Advanced comparison (overlay/diff) - [ ] Change detection and highlighting - [ ] Actor tracking across states - [ ] Comparison matrix for scenarios - [ ] Metrics evolution charts - [ ] Difference reports **Success Criteria:** - User can analyze changes between states - User can track individual actors over time - User can generate comparison reports ### Phase 4: Presentation & Export **Goal:** Storytelling and sharing - [ ] Presentation mode - [ ] State-to-state animation - [ ] Auto-play with timing controls - [ ] Export timeline as PDF - [ ] Export as PowerPoint - [ ] Video/GIF export - [ ] Presenter notes support **Success Criteria:** - User can present evolution to stakeholders - User can export for external sharing - Animations are smooth and professional ### Phase 5: Advanced Features **Goal:** Enterprise and research use - [ ] Smart suggestions/AI analysis - [ ] Custom metrics tracking - [ ] Advanced filtering and search - [ ] Collaborative editing per state - [ ] Template scenarios - [ ] Import/export timeline formats --- ## 9. Design Patterns & Best Practices ### 9.1 State Management **Immutability:** - Each state is independent snapshot - Editing state A doesn't affect state B - Changes are isolated to active state **Auto-save:** - Changes save immediately to current state - No "save state" button needed - Visual indicator when saving **Conflicts:** - Not applicable (no concurrent editing of same state) - But consider: collaborative scenarios in future ### 9.2 Performance Considerations **Large Timelines:** - Lazy load state data - Only active state + neighbors in memory - Thumbnails for preview - Virtualized timeline rendering **Complex Graphs:** - Same optimization as single-state graphs - Cache state thumbnails - Progressive loading in comparison mode ### 9.3 User Guidance **First-time Use:** - Onboarding tour explaining temporal/scenario concepts - Template timelines for common use cases - Example documents with states **Inline Help:** - Tooltips explaining state operations - Context-sensitive help in timeline panel - Visual cues for branch points ### 9.4 Accessibility **Keyboard Navigation:** - All timeline operations keyboard-accessible - State switcher with keyboard - Presentation mode keyboard controls **Screen Readers:** - Announce state changes - Describe timeline structure - Alternative text for visualizations **Visual Design:** - High contrast for current state - Clear focus indicators - Colorblind-safe highlighting --- ## 10. Measuring Success ### 10.1 User Metrics **Engagement:** - Percentage of users who create 2+ states - Average states per document - Time spent in comparison mode - Presentation mode usage **Feature Adoption:** - Temporal mode vs. Scenario mode usage - Branch creation frequency - Actor tracking usage - Export/presentation frequency ### 10.2 User Feedback **Qualitative:** - User interviews with consultants, strategists - Usability testing of timeline panel - Feedback on comparison features - Presentation mode effectiveness **Quantitative:** - NPS score for timeline feature - Feature satisfaction ratings - Bug reports and friction points ### 10.3 Success Indicators **Good Signs:** - Users naturally create states without prompting - Users share presentations with stakeholders - Users request advanced comparison features - Users migrate existing documents to timelines **Warning Signs:** - Users confused about state vs. document - Timeline panel rarely used - Users try to use as version control - High abandonment of multi-state documents --- ## 11. Future Enhancements ### 11.1 Collaborative Scenarios **Multi-user Planning:** - Different team members model different scenarios - Merge scenarios for discussion - Voting/commenting on scenario states ### 11.2 Dynamic States **Live Data Integration:** - States update from external data sources - Real-time stakeholder maps - Automated state creation from events ### 11.3 AI-Powered Insights **Predictive Modeling:** - "Likely evolution" suggestions - Pattern matching from similar timelines - Risk assessment across scenarios - Anomaly detection ### 11.4 Advanced Visualizations **3D Timeline:** - Time as Z-axis - Spatial evolution visualization - VR presentation mode **Network Metrics Over Time:** - Animated metric dashboards - Trend analysis - Correlation detection --- ## Conclusion This revised UX concept positions Constellation Analyzer's multi-graph feature as a powerful tool for **temporal analysis** and **scenario exploration**, not version control. **Key Differentiators:** 1. **Dual-mode design**: Temporal and Scenario modes for different use cases 2. **Comparison-first**: Multiple ways to compare and analyze states 3. **Presentation-ready**: Built for storytelling and stakeholder communication 4. **Evolution tracking**: Follow actors and relationships over time 5. **Strategic planning**: Model and evaluate alternative futures **Next Steps:** 1. Validate terminology with target users (consultants, strategists, researchers) 2. Create interactive prototype of timeline panel 3. User test comparison and presentation modes 4. Prioritize Phase 1 features for development 5. Build example use cases for each user persona --- ## Appendix: Alternative Terminology Considered ### Timeline Terms: - ✅ Timeline - Clear, intuitive - ❌ History - Implies past only - ❌ Evolution - Too biological - ❌ Journey - Too narrative-focused - ❌ Progression - Good but less common ### State Terms: - ✅ State - Neutral, technical but clear - ✅ Snapshot - Intuitive but implies static - ❌ Version - Too version-control-like - ❌ Instance - Too technical - ❌ Frame - Too video-like - ❌ Point - Too minimal ### Branch Terms: - ✅ Branch - Familiar from trees/git - ✅ Scenario - Clear for alternatives - ❌ Fork - Too git-specific - ❌ Alternative - Too wordy - ❌ Path - Could work but less clear **Final Decision:** Adaptive terminology based on user-selected mode (Temporal vs. Scenario) provides the best user experience.