S3 — Filtrování (drawer/overlay)
Účel obrazovky
Bottom sheet nebo full-screen overlay s filtry pro seznam akcí. Uživatel vybere datum, žánr, místo, cenu a další kritéria. Real-time počet výsledků, možnost resetu.
Content Priority
- Header — „Filtrovat" s tlačítkem zavření (×), swipe-to-dismiss hint App Bar / Top NavigationIcon Button
- Datum range picker — od–do (calendar nebo date picker), min = dnes Date Range Picker
- Žánr / kategorie — multi-select chips (Rock, Pop, Klasika, Divadlo…) Chip / Filter Button
- Město / lokalita — multi-select chips Chip / Filter Button
- Místo konání — searchable select (vyhledávací pole + dropdown) Select / DropdownSearch Input
- Pořadatel — searchable select Select / DropdownSearch Input
- Cena — range slider (od X do Y Kč) Range Slider
- Dostupnost toggle — „Jen akce s volnými místy" (zapnuto/vypnuto) Toggle / Switch
- CTA „Zobrazit (N) výsledků" — primary button, dynamický počet N Primary Button
- „Resetovat filtry" — secondary text link Ghost/Text Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Změna libovolného filtru | Real-time API dotaz (debounced) | Aktualizace N v CTA |
| Tap „Zobrazit (N) výsledků" | Zavření overlay, aplikace filtrů | P2 — Seznam akcí s filtrovanými výsledky |
| Tap „Resetovat filtry" | Vymazání všech výběrů | N = celkový počet, CTA „Zobrazit všechny" |
| Swipe dolů | Dismiss overlay bez aplikace | Návrat na P2, původní stav |
| Tap × / Back | Zavření bez aplikace | Návrat na P2 |
| Scroll v overlay | Scrollovatelný obsah (dlouhé seznamy) | Plynulý scroll |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Default (bez filtrů) | Žádný filtr aktivní | Všechny hodnoty prázdné, N = celkový počet |
| Active filters | Některé filtry vybrány | Chips / hodnoty zvýrazněny, N = filtrovaný počet |
| No results preview | N = 0 | CTA disabled nebo „Žádné výsledky — upravte filtry", warning text |
| Loading count | Po změně filtru, čeká na API | Spinner u CTA nebo skeleton N |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Všechny filtry aktivní → 0 výsledků | „Žádné akce nevyhovují filtrům" + CTA „Resetovat filtry" prominentně |
| Datum od v minulosti | Disabled v date pickeru, min = dnešek |
| Město bez míst konání | Prázdný dropdown nebo „V tomto městě zatím nemáme místa" |
| API timeout při count | Fallback „Zobrazit výsledky" bez N, count se načte po otevření P2 |
| Velmi dlouhý seznam žánrů | Searchable nebo grouped chips, max viditelných s „Více" |
| Uživatel mění filtry rychle za sebou | Debounce 300–500 ms před API call pro count |
Mobilní patterny a odlišení od webu
Co přebíráme
- Sada filtrů (datum, žánr, místo, cena)
- Reset filtrů
- Dynamický počet výsledků
Co děláme jinak
- Bottom sheet místo sidebar drawer — na webu jsou filtry v bočním panelu, na mobilu bottom sheet (snadnější reachability)
- Range slider s haptic snaps — při posunu na mezní hodnoty lehký haptic feedback
- Multi-select chips místo checkboxů — lépe ovladatelné na dotykové obrazovce, méně vizuálního clutteru
- Searchable select pro místo/pořadatel — fullscreen search overlay místo dropdown (více místa pro výsledky)
Aplikované patterny
- iOS:
UISheetPresentationControllerpro bottom sheet,UISliders custom track,UICollectionViewpro chips - Android:
ModalBottomSheet,Slider(Material 3) shapticFeedbackEnabled,FilterChipsChoiceFilterpro multi-select
Reference — Aktuální web
SCR-WEB-09Filter drawer — chips, expandable filtry, Show Events CTAReference — CineStar benchmark
CineStar využívá obdobné filtry (datum, lokalita, formát) v programu. Pro srovnání viz P2 — Seznam akcí reference.