mirror of https://github.com/OFFIS-ESC/constellation-analyzer synced 2026-01-27 07:43:41 +00:00

Jan-Henrik Bruhn f0862650f4 doc: move some plans around

2025-10-11 22:08:53 +02:00

41 KiB

Raw Blame History

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:

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
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
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:

User clicks [+ New State] button in timeline panel or current state indicator

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]         │
└─────────────────────────────────────────┘

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
New state is created and becomes the active state
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

Click [Compare] button in toolbar

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]     │
│                          │                             │
└──────────────────────────┴─────────────────────────────┘

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

From comparison mode, toggle to overlay
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

Click [Generate Report] in comparison mode
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):

Click [Present] button

Presentation interface appears:

┌──────────────────────────────────────────────────────────┐
│                    ╔═════════════╗                       │
│                    ║  ◄  ▐▐  ►  ║ [Exit Presentation]   │
│                    ╚═════════════╝                       │
├──────────────────────────────────────────────────────────┤
│                                                           │
│                Full-screen Graph View                    │
│                                                           │
│                State: January 2024                       │
│                "Initial Team Structure"                  │
│                                                           │
│           [Actors and relations displayed]               │
│                                                           │
└──────────────────────────────────────────────────────────┘

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
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:

Right-click actor → "Track Across States"

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       │
└─────────────────────────────────────────┘

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:

Timeline Report (PDF/HTML):
- All states with graphs
- Annotations and descriptions
- Change summaries
- Metrics evolution charts
- Professional formatting
Presentation Deck:
- PowerPoint/Google Slides
- One slide per state
- Transition animations
- Speaker notes from state notes
Video/Animation:
- MP4 export of presentation mode
- Configurable duration and transitions
- Voiceover from notes (text-to-speech)
- Watermark and branding options
Data Export:
- CSV with state metadata
- JSON with full state data
- Graph metrics per state
- Change log

6. Data Model

6.1 State Structure

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

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

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:

Create document: "Sales Team Transformation"
Set to Temporal Mode
Create state "January 2024 - Before Restructure"
- Add all team members
- Map current reporting relationships
Create state "March 2024 - Mid-transition"
- Update structure, add new manager
- Show matrix relationships forming
Create state "June 2024 - New Structure"
- Final organizational structure
- New collaboration patterns
Use Compare mode to show before/after
Generate presentation showing evolution
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:

Create document: "APAC Market Entry 2025"
Set to Scenario Mode
Create base state "Current Partnerships - Q4 2024"
- Map existing partner ecosystem
Branch into three scenarios:
- "Scenario A: Direct Entry" (build own team)
- "Scenario B: Strategic Acquisition" (acquire local player)
- "Scenario C: JV Partnership" (joint venture)
Model each scenario:
- Different actor sets (internal vs. external)
- Different relationship patterns
- Add cost/risk tags
Use Comparison Matrix to evaluate:
- Team size, relationship density
- Risk factors, dependencies
Present all three to executive team
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:

Create document: "Johnson Family System"
Set to Temporal Mode
Create state "Session 1 - Initial Intake"
- Map family members
- Show conflict patterns (red edges)
- Identify isolated members
Create state "Session 5 - After First Intervention"
- Update relationship types
- Show new communication patterns
Create state "Session 10 - Current State"
- Document improvements
- Identify remaining work areas
Show animated progression to family
Highlight positive changes
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:

Create document: "European Alliances 1900-1914"
Set to Temporal Mode
Create states for key years:
- "1900 - Post-Victorian Era"
- "1904 - Entente Cordiale"
- "1907 - Triple Entente Formed"
- "1912 - Balkan Wars Impact"
- "1914 - Pre-War System"
For each state:
- Add nations as actors
- Map alliances as relations
- Annotate with historical context
Create "What-If" branches:
- "If Britain remained neutral"
- "If Russia-Japan alliance continued"
Use presentation mode for lectures
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:

Create document: "Product X Launch Stakeholders"
Set to Temporal Mode
Create states:
- "Current - Pre-announcement"
- "Beta Program - Month 1"
- "Beta Program - Month 3"
- "GA Launch"
- "3 Months Post-GA"
For each state:
- Add/remove stakeholders
- Update engagement levels (edge strength)
- Mark key influencers
Track specific stakeholders across timeline
Identify where to focus engagement efforts
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:

Dual-mode design: Temporal and Scenario modes for different use cases
Comparison-first: Multiple ways to compare and analyze states
Presentation-ready: Built for storytelling and stakeholder communication
Evolution tracking: Follow actors and relationships over time
Strategic planning: Model and evaluate alternative futures

Next Steps:

Validate terminology with target users (consultants, strategists, researchers)
Create interactive prototype of timeline panel
User test comparison and presentation modes
Prioritize Phase 1 features for development
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.

41 KiB Raw Blame History

Temporal & Scenario Analysis - UX Concept (Revised)

Executive Summary

1. Terminology & Mental Model

1.1 Recommended Terms

Primary Terms:

Context-Specific Labels:

1.2 Mental Model

2. UI Architecture

2.1 Layout Overview

2.2 Current State Indicator (New Component)

2.3 Timeline Panel (Bottom Panel - Redesigned)

Collapsed View (40px height):

Expanded View (200-400px height, resizable):

3. Core Workflows

3.1 Creating a New State

3.2 Navigating Between States

3.3 Comparing States

Side-by-Side Comparison

Overlay/Diff Mode

Difference Report

3.4 Animation Between States

3.5 Editing State Metadata

4. Visual Design Recommendations

4.1 Timeline Visualization

4.2 Color Coding System

4.3 Comparison View Design

4.4 Animation Design

5. Advanced Features

5.1 Diff Analysis Tools

5.2 Actor Tracking Across Time

5.3 Scenario Comparison Matrix

5.4 Smart Suggestions

5.5 Export & Reporting

6. Data Model

6.1 State Structure

6.2 Timeline Structure

6.3 Document Structure Update

7. User Stories & Use Cases

7.1 Organizational Consultant

7.2 Strategic Planner

7.3 Family Therapist

7.4 Researcher - Historical Analysis

7.5 Product Manager - Stakeholder Mapping

8. Implementation Priorities

Phase 1: Core Functionality (MVP)

Phase 2: Temporal & Scenario Modes

Phase 3: Analysis & Comparison

Phase 4: Presentation & Export

Phase 5: Advanced Features

9. Design Patterns & Best Practices

9.1 State Management

9.2 Performance Considerations

9.3 User Guidance

9.4 Accessibility

10. Measuring Success

10.1 User Metrics

10.2 User Feedback

10.3 Success Indicators

11. Future Enhancements

11.1 Collaborative Scenarios

11.2 Dynamic States

11.3 AI-Powered Insights

11.4 Advanced Visualizations

Conclusion

Appendix: Alternative Terminology Considered

Timeline Terms:

State Terms:

Branch Terms:

41 KiB

Raw Blame History