8.2 KiB

Raw Blame History

UX Plan: Desktop-Only Transcription Listing & Details Interface

Overview

This document outlines the UX design for a desktop-only web application that allows users to view and manage their video transcriptions and multiple AI-generated summaries.

Proposed Solution: Integrated Single-Screen Layout

1. Three-Column Master Layout

[Sidebar List 25%] | [Main Content 50%] | [Details Panel 25%]

Left Sidebar - Transcription List

Vertical scrolling list of all transcriptions
Each list item displays:
- Video thumbnail & title
- Channel name
- Duration
- Summary count badge (e.g., "3 summaries")
- Processing status icons
- Last activity timestamp
Top controls:
- Search bar
- Filter dropdown (by date, status, summary count)
- Sort options

Center - Selected Video Details

Video Header Section:
- Title, channel, date, duration
- Video thumbnail or mini player
Summary Selector Tabs:
- Horizontal tabs for each summary
- Tab information:
  - Generation timestamp
  - AI model used (DeepSeek, GPT, Claude)
  - Summary type (Standard/Educational/Executive)
- "+ New Summary" tab for generating additional summaries
Active Summary Content:
- Full summary text with sections
- Key points highlighted
- Confidence scores displayed
- Word count and reading time
Actions Bar:
- Export (PDF, Markdown, Word)
- Share
- Regenerate
- Delete

Right Panel - Interactive Transcript

Synchronized Transcript Viewer:
- Timestamped segments
- Click any timestamp to copy shareable link
- Search within transcript
- Auto-highlight if video is playing
Video Preview (optional mini player at top)
Metadata Section:
- Processing times
- Token counts
- Model parameters used
- Cost estimation

2. Key Interactions

Summary Management

Tab Navigation:
- Click tab to switch between summaries instantly
- Hover tab for tooltip with full metadata
- Right-click tab for context menu (delete, rename, set as default)
- Drag tabs to reorder preference

Comparison Mode

Activation: Shift+Click two summary tabs
Display: Center panel splits vertically
Features:
- Side-by-side summary display
- Synchronized scrolling
- Difference highlighting
- Merge capabilities
Exit: ESC key or click single tab

Keyboard Shortcuts

↑/↓ - Navigate transcription list
1-9 - Quick switch between first 9 summaries
N - Generate new summary
E - Export current summary
C - Toggle comparison mode
/ - Focus search
Space - Play/pause video (if player active)
T - Toggle transcript panel

3. Visual Design Decisions

No Modals Approach

All interactions happen in-place within the three columns
Settings/options appear as slide-down panels within their column
Confirmations use inline alerts, not modal dialogs
Forms expand inline rather than opening new windows

Information Density

Compact list items: 60px height to show more transcriptions
Thin summary tabs: 32px height to accommodate many summaries
Collapsible sections: In right panel for space efficiency
Adjustable column widths: Drag to resize panels

Visual Hierarchy

Active states:
- Active transcription: Left border accent color
- Active summary tab: Colored background
Status indicators:
- Processing: Animated spinner
- Complete: Green checkmark
- Error: Red exclamation
Typography:
- High contrast for important actions
- Muted colors for inactive elements

4. Enhanced Features

Smart Summary Display

Auto-detection: Identify summary type from content
Color coding:
- Blue = Standard summary
- Green = Educational summary
- Purple = Executive summary
- Orange = Custom summary
Quality indicators:
- Star rating (1-5)
- Confidence percentage
- "Best" badge for highest-rated
Version tracking: Show edit history

Bulk Operations

Multi-select mode:
- Checkbox appears on hover
- Select all/none controls
- Selection count display
Bulk actions:
- Delete multiple
- Export as batch
- Re-process selected
- Archive old transcriptions

Advanced Filtering

Filter options:
- Has transcript
- Has summary
- Multiple summaries (2+, 3+, etc.)
- Date range picker
- Specific AI model
- Summary type
Saved filters:
- Save current filter as preset
- Quick filter buttons: "Today", "This Week", "Needs Summary"

5. Component Structure

// Main layout component structure
<div className="flex h-screen">
  {/* Sidebar List */}
  <TranscriptionSidebar 
    transcriptions={transcriptions}
    selectedId={selectedId}
    onSelect={setSelectedId}
    filters={filters}
    onFilterChange={setFilters}
    className="w-1/4 border-r"
  />
  
  {/* Main Content */}
  <SummaryViewer
    transcription={selectedTranscription}
    summaries={summaries}
    activeSummary={activeSummary}
    onSummaryChange={setActiveSummary}
    comparisonMode={comparisonMode}
    onComparisonToggle={toggleComparison}
    className="w-1/2"
  />
  
  {/* Details Panel */}
  <TranscriptPanel
    transcript={transcript}
    metadata={metadata}
    videoUrl={videoUrl}
    showVideoPlayer={showVideoPlayer}
    className="w-1/4 border-l"
  />
</div>

6. State Management

interface TranscriptionState {
  // List state
  transcriptions: Transcription[]
  selectedId: string | null
  filters: FilterOptions
  sortBy: SortOption
  
  // Summary state
  summaries: Summary[]
  activeSummaryId: string | null
  comparisonIds: string[]
  
  // UI state
  sidebarWidth: number
  detailsPanelWidth: number
  showVideoPlayer: boolean
  transcriptSearchQuery: string
}

7. Implementation Phases

Phase 1: Core Layout (Week 1)

Three-column layout structure
Basic transcription list with summary counts
Simple summary display (single summary)
Transcript viewer (readonly)

Phase 2: Multiple Summaries (Week 2)

Summary tabs implementation
Tab switching and state management
Summary type detection and color coding
Generate new summary functionality

Phase 3: Advanced Features (Week 3)

Comparison mode
Keyboard shortcuts
Advanced filtering and search
Export functionality
Bulk operations

Phase 4: Polish & Optimization (Week 4)

Performance optimization (virtualized lists for 100+ items)
Smooth animations and transitions
Error states and empty states
User preferences persistence
Accessibility audit (WCAG 2.1 AA)

8. Technical Considerations

Performance

Virtual scrolling for transcription list (react-window)
Lazy loading for summary content
Debounced search (300ms delay)
Memoization for expensive renders

Data Management

Local caching of frequently accessed summaries
Optimistic updates for better UX
Background sync for new transcriptions
Pagination for initial load (20 items, then infinite scroll)

Integration Points

Existing Auth System: User-based filtering
Current API: Extend to support multiple summaries
Chat System: Link to chat view from transcription
WebSocket: Real-time updates for processing status

9. Success Metrics

Load time: < 2 seconds for initial view
Interaction delay: < 100ms for tab switches
Summary generation: Clear progress indication
User efficiency: < 3 clicks to any summary
Discoverability: All features accessible via UI or keyboard

10. Future Enhancements

AI-powered search: Natural language queries across all content
Summary templates: User-defined summary formats
Collaboration: Share and comment on summaries
Analytics dashboard: Usage patterns and insights
API access: Programmatic access to summaries

Conclusion

This desktop-focused design maximizes screen real estate while eliminating modal interactions. The three-column layout provides efficient access to all transcriptions and summaries while maintaining context. The no-modal approach ensures all interactions happen in-place, creating a smooth and uninterrupted workflow for power users.

8.2 KiB Raw Blame History