# SneakerPicks UX Plan

## Huidige Status
- **Filters**: Sidebar met merken (checkboxes), geslacht (pills), max prijs (slider), filters wissen
- **Probleem**: Merkenlijst wordt te lang als er meer feeds komen (nu al 50+ merken in DB)
- **Navigatie**: Home, Sneakers, Merken, Deals

## 1. Filter UX Verbeteringen

### Merken Filter
**Probleem**: Met 50+ merken wordt de checkbox lijst onbruikbaar
**Oplossing**:
- Toon top 8 merken direct (op basis van product count)
- "Meer merken" button → toggle om rest te tonen
- Zoekbalk bovenaan de merkenlijst ("Zoek merk...")
- Selectie bovenaan pinnen (geselecteerde merken altijd zichtbaar)

### Sorteer opties
**Toevoegen aan filters of boven de grid**:
- Prijs: laag → hoog
- Prijs: hoog → laag  
- Populair (meeste shops)
- Nieuwste
- Grootste korting

### Prijsfilter
- Huidige slider is goed, maar voeg preset knoppen toe:
  - < €100 | < €150 | < €200 | < €300 | Alles

### Categorie/Type filter (toekomst)
- Sneaker types: Running, Lifestyle, Basketball, Skate
- Vereist categorisatie in de DB (er is al een `categories` tabel + API)

## 2. Mobile UX

### Huidige staat
- Filter toggle button → opent inline drawer
- Werkt maar niet optimaal

### Verbeteringen
- Sticky filter bar bovenaan met horizontale scroll chips
- Active filters als dismissible chips
- Full-screen filter modal in plaats van inline drawer
- "X resultaten" counter boven grid

## 3. Sneakers Overzichtspagina (/sneakers)

### Layout
- Links: Filter sidebar (desktop)
- Rechts: Product grid (2 col mobile, 3 col tablet, 4 col desktop)
- Boven grid: Sorteer dropdown + resultaat counter
- Infinite scroll of "Meer laden" button (nu pagination?)

### Quick Filters (boven grid)
Horizontale chip bar:
`Alle | Nike | Adidas | New Balance | Puma | ASICS | < €100 | Sale`

## 4. Product Detail Pagina (/sneakers/[slug])

### Huidige staat
- Product image + info
- Prijsvergelijking tabel
- Prijsverloop chart
- Beschikbare maten (leeg — geen size data)
- Meer van [merk]

### Verbeteringen
- **Size selector**: Klik op maat → toon prijs per shop per maat (zodra size data beschikbaar is)
- **Breadcrumbs**: Home > Sneakers > Nike > Air Max 1 (al aanwezig)
- **Meta tags**: OG/Twitter cards voor social sharing
- **Related products**: "Vergelijkbare sneakers" op basis van merk + prijsrange

## 5. Merkpagina's (/merken/[slug])

### SEO Landingspagina's
- Unieke beschrijvende tekst per merk (300-500 woorden)
- H1: "{Merk} Sneakers — Vergelijk Prijzen"
- Populaire modellen sectie
- Filter sidebar
- Gestructureerde data (Schema.org)

## 6. Implementatie Prioriteit

### Nu (deze nacht)
1. ✅ Top 8 merken + "Meer merken" in filter
2. ✅ SEO teksten voor merkpagina's
3. ✅ Sorteer dropdown boven grid
4. ✅ Resultaat counter

### Binnenkort
- Quick filter chips
- Mobile filter modal
- Size selector (na size data)
- Infinite scroll
- Schema.org structured data