Greg/books
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
books/docs/prd/user-interface-design-goals.md
Greg fa8acef423 Epic 1, Story 1.1: Project Initialization & Repository Setup 
- 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>
2025-12-01 15:12:30 +01:00

3.5 KiB
Raw Permalink Blame History

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)