87 lines
3.6 KiB
Markdown
87 lines
3.6 KiB
Markdown
# Recipe Manager UI/UX Audit — Baseline Findings (Pre-Redesign)
|
|
|
|
_All findings are based on code and asset inspection of the existing main branch as of 2026-03-27._
|
|
|
|
---
|
|
|
|
## Key Page Coverage
|
|
- **Home / Recipe List**: `/` (RecipeListPage)
|
|
- **Recipe Detail**: `/recipe/:id` (RecipeDetailPage)
|
|
- **Add / Edit form**: `/recipe/new` and `/recipe/:id` (edit mode in RecipeDetailPage)
|
|
- **Import from URL**: `/import/url` (ImportUrlPage)
|
|
- **Cook Mode**: `/recipe/:id/cook` (CookModePage)
|
|
- **Not Found**: fallback route
|
|
|
|
---
|
|
|
|
## Issues & Opportunities — By Page
|
|
|
|
### 1. Home / Recipe List Page
|
|
- **Severity: HIGH**
|
|
- No clear visual separation between recipe library and feature highlights sections (hierarchy muddled)
|
|
- Search and filter tag UI lack sticky/top persistence for long lists (usability friction)
|
|
- **Severity: MEDIUM**
|
|
- Tag color accessibility not enforced; tag backgrounds may contrast poorly with white text
|
|
- "No recipes" empty state lacks illustration/invitation for mobile
|
|
- **Severity: LOW**
|
|
- Visual spacing between cards is adequate, but elevation/shadow separation could be stronger
|
|
- Edge-case: very large recipe titles can overflow
|
|
|
|
### 2. Recipe Detail Page
|
|
- **Severity: HIGH**
|
|
- No image/hero area for recipes — makes page visually flat
|
|
- Action buttons (Edit, Cook Mode, Delete) overwhelm above-the-fold space, all equally visually weighted
|
|
- Tag badges: insufficient color contrast, risk of not being distinguishable
|
|
- **Severity: MEDIUM**
|
|
- Stats grid (prep time/servings/cook time) sometimes missing if fields absent, leading to awkward negative space
|
|
- **Severity: LOW**
|
|
- Additional Information section can be overlooked (visual hierarchy weak)
|
|
|
|
### 3. Add/Edit Recipe Form
|
|
- **Severity: HIGH**
|
|
- Long single form, minimal grouping/hierarchy; no inline field validation or visual feedback on invalid states
|
|
- No photo upload/preview capability
|
|
- **Severity: MEDIUM**
|
|
- Lack of step-by-step clarity for ingredient vs instructions entry
|
|
- **Severity: LOW**
|
|
- No help text/examples for field format (e.g. "1 cup flour")
|
|
|
|
### 4. Import from URL
|
|
- **Severity: MEDIUM**
|
|
- Progress indicators use color only (AA contrast edge-cases possible, e.g. blue-on-white)
|
|
- **Severity: LOW**
|
|
- Errors are shown contextually, but do not visually block/disable further input
|
|
|
|
### 5. Cook Mode
|
|
- **Severity: HIGH**
|
|
- No sticky/fixed controls for moving between ingredients/steps (usability on mobile)
|
|
- Progress bars for steps/ingredients provide good feedback but blending color could limit clarity for colorblind users
|
|
- **Severity: LOW**
|
|
- Success/checkoff state lacks distinct visual reward (just celebratory emoji and card)
|
|
|
|
---
|
|
|
|
## Cross-cutting / General Issues
|
|
- **Accessibility:**
|
|
- Some color choices insufficient for AA contrast in tag buttons/badges
|
|
- Keyboard navigation generally present but focus rings partly overridden (potential risk)
|
|
- **Imagery:**
|
|
- Strong reliance on fallback illustration — only 1 bundled hero image (`hero.png`) for all recipes
|
|
- No per-recipe image or placeholder; flat visual identity
|
|
|
|
---
|
|
|
|
## Acceptance Checklist — Baseline
|
|
- [ ] Screenshots for all primary pages (desktop/mobile)
|
|
- [x] Placeholder README in `docs/visual-audit/before/` (documenting screenshot gap)
|
|
- [x] List of all key pages and views
|
|
- [x] Audit notes: all UX/UI issues prioritized and categorized by page
|
|
- [x] Accessibility/opportunity notes captured
|
|
- [x] General imagery and identity state described
|
|
- [x] This audit document committed for baseline comparison
|
|
|
|
_For later: Repeat all QA for new visual implementation, providing strict before/after comparisons for each line item._
|
|
|
|
---
|
|
|
|
_Last updated: 2026-03-27_ |