Greg
fa8acef423
- Initialize Git repository with main branch - Create comprehensive .gitignore for Node.js, React, and environment files - Set up directory structure (frontend/, backend/, docs/) - Create detailed README.md with project overview and setup instructions - Add .env.example with all required environment variables - Configure Prettier for consistent code formatting All acceptance criteria met: ✅ Git repository initialized with appropriate .gitignore ✅ Directory structure matches Technical Assumptions ✅ README.md created with project overview and setup docs ✅ .env.example file with all required environment variables ✅ Prettier config files added for code formatting consistency 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
107 lines
3.5 KiB
Markdown
107 lines
3.5 KiB
Markdown
# User Interface Design Goals
|
|
|
|
## Overall UX Vision
|
|
|
|
The Book Reading Tracker emphasizes **simplicity, speed, and clarity** above all else. The interface is designed for daily micro-interactions (<10 seconds) on mobile devices. Visual design is minimal and text-focused, prioritizing information density and fast comprehension over decorative elements.
|
|
|
|
Key principles:
|
|
- **Mobile-first:** Every interaction optimized for thumb-friendly tapping
|
|
- **Information hierarchy:** Most critical data (required pace, status) immediately visible
|
|
- **Minimal chrome:** No unnecessary navigation, buttons, or decorative elements
|
|
- **Fast feedback:** Immediate visual confirmation of actions (page logged, status updated)
|
|
|
|
## Key Interaction Paradigms
|
|
|
|
**3-Tap Logging Workflow:**
|
|
The core interaction is logging progress in 3 taps:
|
|
1. Tap book card from list
|
|
2. Tap/enter page number in modal
|
|
3. Tap save button
|
|
|
|
**Pull-to-Refresh:**
|
|
Standard mobile pattern for refreshing book list and recalculating paces
|
|
|
|
**Color-Coded Status:**
|
|
No need to read text - green/yellow/red instantly communicates on-track status
|
|
|
|
**Calendar as Read-Only Reference:**
|
|
Calendar is informational (show logged days, deadlines), not primary logging interface in MVP
|
|
|
|
## Core Screens and Views
|
|
|
|
**1. Book List Screen (Home/Main)**
|
|
- Primary screen showing all active books
|
|
- Each book card displays: cover thumbnail, title, author, required pace, actual pace, status indicator
|
|
- "Add Book" button prominently placed
|
|
- Bottom navigation (if needed): Home, Calendar
|
|
|
|
**2. Add Book Screen**
|
|
- Search input field
|
|
- Search results list with cover images
|
|
- Book detail preview with deadline date picker
|
|
- "Add to Reading List" button
|
|
|
|
**3. Log Progress Modal**
|
|
- Triggered by tapping book card
|
|
- Shows book title/cover for context
|
|
- Number input for current page
|
|
- "Save" and "Cancel" buttons
|
|
- Displays last logged page and date
|
|
|
|
**4. Book Detail Screen**
|
|
- Full book information (cover, title, author, total pages)
|
|
- Detailed progress metrics (pages read, days elapsed, pace trend)
|
|
- Calendar view for this specific book
|
|
- "Log Progress" button
|
|
- Edit deadline option
|
|
- Remove book option
|
|
|
|
**5. Calendar View Screen**
|
|
- Month view with dots/indicators on logged days
|
|
- Deadline dates marked distinctly
|
|
- Current date highlighted
|
|
- Tap date to see details (read-only in MVP)
|
|
|
|
**6. Settings Screen (Minimal)**
|
|
- App version
|
|
- Data export (future)
|
|
- Link to documentation/help
|
|
|
|
## Accessibility
|
|
|
|
**WCAG AA Compliance (Target):**
|
|
- Minimum color contrast ratios (4.5:1 for normal text)
|
|
- Color-coded status also includes text labels (not relying on color alone)
|
|
- Keyboard navigable (tab order, enter to submit)
|
|
- Semantic HTML for screen readers
|
|
- Touch targets minimum 44x44px
|
|
|
|
## Branding
|
|
|
|
**Minimal, Functional Aesthetic:**
|
|
- No specific brand identity required for MVP
|
|
- Clean, modern design with focus on readability
|
|
- Neutral color palette (grays, blues) with accent colors for status (green/yellow/red)
|
|
- System fonts or simple web-safe font stack
|
|
- Book cover images provide visual variety
|
|
|
|
**Visual Style:**
|
|
- Text-heavy, data-forward design
|
|
- Generous white space for mobile clarity
|
|
- Card-based layout for book list
|
|
- Subtle shadows/borders for depth
|
|
|
|
## Target Device and Platforms
|
|
|
|
**Web Responsive (Mobile-First):**
|
|
- **Primary:** Mobile browsers (iOS Safari, Android Chrome)
|
|
- **Secondary:** Desktop browsers for occasional access
|
|
- **PWA Installation:** Supported on both mobile and desktop
|
|
|
|
**Supported Platforms:**
|
|
- iOS (last 2 versions of Safari)
|
|
- Android (last 2 versions of Chrome)
|
|
- Desktop (Chrome, Firefox, Safari, Edge - last 2 versions)
|
|
|
|
---
|