287 lines
8.2 KiB
Markdown
287 lines
8.2 KiB
Markdown
# 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
|
|
|
|
```typescript
|
|
// 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
|
|
|
|
```typescript
|
|
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. |