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:
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user