docs: merge UX patterns into design-philosophy, delete ux-patterns.md

- Add Accessibility Baseline section with WCAG 2.1 AA requirements
- Add Quality Checklist for shipping verification
- Delete standalone ux-patterns.md (all useful content merged)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-17 22:52:06 +00:00
parent b5fbfd5882
commit 5050b0bde5
2 changed files with 72 additions and 276 deletions

View File

@@ -142,6 +142,78 @@ Research from Baymard Institute (200,000+ hours of UX testing):
- **F-pattern** (product pages): Horizontal top, shorter line below, vertical down left
- **Z-pattern** (landing pages): Top-left → top-right → diagonal → bottom-right
## Accessibility Baseline
Every theme must meet WCAG 2.1 AA:
### Colour Contrast
- Normal text: 4.5:1 minimum
- Large text (18px+ or 14px bold): 3:1 minimum
- UI components and graphics: 3:1 minimum
### Focus Indicators
- Visible focus ring on all interactive elements
- Never remove outline without replacement
- Ring should have 3:1 contrast with adjacent colours
### Touch Targets
- Minimum 44×44px for touch targets
- 8px minimum spacing between targets
### Screen Reader Support
- Semantic HTML (button for buttons, not div)
- Alt text on all images
- ARIA labels where needed
- Skip links for keyboard navigation
- Logical heading hierarchy (h1 → h2 → h3)
## Quality Checklist
Before shipping, verify:
### Layout
- [ ] Mobile-first responsive design
- [ ] No horizontal scroll on any viewport
- [ ] Content readable at 320px minimum
- [ ] Touch targets 44×44px minimum
### Navigation
- [ ] Logo links to homepage
- [ ] Cart always accessible
- [ ] Current page indicated
- [ ] Mobile menu works smoothly
### Product Cards
- [ ] Consistent aspect ratios
- [ ] Price clearly visible
- [ ] Hover state provides value
- [ ] Links are obvious
### Product Page
- [ ] Images zoomable
- [ ] Price prominent
- [ ] Add to Cart visible on mobile
- [ ] Trust signals visible
### Ethical Design
- [ ] No fake urgency/scarcity
- [ ] No confirmshaming
- [ ] No hidden costs
- [ ] Clear, neutral options
- [ ] Honest product information
### Accessibility
- [ ] Colour contrast passes WCAG AA
- [ ] Focus rings visible
- [ ] Semantic HTML
- [ ] Alt text on images
- [ ] Keyboard navigable
### Performance
- [ ] Images lazy loaded (except hero)
- [ ] Fonts preloaded
- [ ] No layout shift
## Combination Count
With current options, the system offers: