S3 — Filtrování (drawer/overlay)
Účel obrazovky
Bottom sheet nebo full-screen overlay s filtry pro seznam akcí. Smart defaults: tři hlavní filtry jsou vždy viditelné (datum, žánr, město). Rozšířené filtry jsou ve „Další filtry“ (ve výchozím stavu sbalené), s badgem počtu aktivních skrytých filtrů. Po potvrzení se filtry aplikují na výpis — CTA „Zobrazit výsledky“ bez dynamického počtu v labelu (počet výsledků se aktualizuje až po otevření overlaye a stisku Apply, ne průběžně při každé změně).
Content Priority
- Header — „Filtrovat" s tlačítkem zavření (×), swipe-to-dismiss hint App Bar / Top NavigationIcon Button
- Datum — range picker — od–do (kalendář nebo date picker), min = dnes — vždy viditelné Date Range Picker
- Žánr — multi-select chips (Rock, Pop, Klasika, Divadlo…) — vždy viditelné Chip / Filter Button
- Město — multi-select chips — vždy viditelné Chip / Filter Button
- Sekce „Další filtry“ — sbalená ve výchozím stavu; na hlavičce badge s počtem aktivních filtrů v této sekci (neplatí pro datum / žánr / město nahoře). Po rozbalení:
- Místo konání — vyhledávatelné (searchable select / fullscreen search) Select / DropdownSearch Input
- Pořadatel — vyhledávatelné Select / DropdownSearch Input
- Cenový rozsah — slider (od X do Y Kč) Range Slider
- Dostupnost — toggle „Jen akce s volnými místy" Toggle / Switch
- CTA „Zobrazit výsledky" — primary button, bez dynamického (N) v textu Primary Button
- „Resetovat filtry" — secondary text link Ghost/Text Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Otevření overlaye | Načtení / zobrazení aktuálního stavu filtrů a případně posledního známého počtu výsledků (ne live při úpravách uvnitř sheetu) | Konzistentní výchozí stav |
| Změna filtru uvnitř sheetu | Lokální úprava výběru; žádný real-time přepočet počtu v CTA | Počet v seznamu a případný souhrn se projeví až po Apply |
| Tap „Zobrazit výsledky" | Zavření overlay, aplikace filtrů, případně jednorázový fetch výsledků | P2 — Seznam akcí s filtrovanými výsledky |
| Tap „Resetovat filtry" | Vymazání všech výběrů včetně skrytých | Výchozí stav, CTA zůstává „Zobrazit výsledky" |
| Swipe dolů / × / Back | Zavření bez aplikace změn | Návrat na P2, předchozí filtry zachovány |
| Scroll v overlay | Scrollovatelný obsah (dlouhé seznamy) | Plynulý scroll |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Default (bez filtrů) | Žádný filtr aktivní | Hlavní sekce prázdné/výchozí, „Další filtry" sbalené, badge skrytý nebo 0 |
| Aktivní pouze hlavní filtry | Datum / žánr / město | Chips a datum zvýrazněny, badge na „Další filtry" = 0 pokud nic v sekci |
| Aktivní skryté filtry | Místo konání, pořadatel, cena nebo dostupnost | Badge na „Další filtry" ukazuje počet aktivních položek v této sekci |
| No results po Apply | Aplikované filtry → 0 akcí | Po zavření sheetu prázdný stav na P2 dle P2 — Seznam akcí / empty state |
| Loading při Apply | Čeká na API po stisku CTA | Spinner na CTA nebo na P2 po návratu |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Všechny filtry aktivní → 0 výsledků po Apply | Empty state na P2 + prominentní „Resetovat filtry" nebo odkaz zpět do filtrů |
| Datum od v minulosti | Disabled v date pickeru, min = dnešek |
| Město bez míst konání | Prázdný výběr nebo „V tomto městě zatím nemáme místa" |
| API timeout při aplikaci filtrů | Toast / error na P2, možnost znovu otevřít filtry |
| Velmi dlouhý seznam žánrů | Searchable nebo grouped chips, max viditelných s „Více" |
| Uživatel rychle mění hodnoty před Apply | Bez live count — žádný storm dotazů; stav držet lokálně do potvrzení |
Mobilní patterny a odlišení od webu
Co přebíráme
- Sada filtrů (datum, žánr, místo, cena, dostupnost)
- Reset filtrů
- Potvrzení výběru návratem na výpis
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)
- Tři hlavní filtry vždy nahoře — méně kognitivní zátěž; zbytek pod „Další filtry" se sbaleným stavem
- Badge na skryté filtry — uživatel vidí, že něco dál aktivuje rozšířené kritéria
- CTA bez (N) — žádné průběžné API pro počet; jednodušší implementace a klidnější UI
- Range slider s haptic snaps — při posunu na mezní hodnoty lehký haptic feedback
- Multi-select chips pro žánr a město — lépe ovladatelné na dotyku než dlouhý seznam checkboxů
- Searchable select pro místo konání a pořadatele — fullscreen search overlay místo úzkého dropdownu
Aplikované patterny
- iOS:
UISheetPresentationControllerpro bottom sheet,UISliders custom track,UICollectionViewpro chips - Android:
ModalBottomSheet,Slider(Material 3) shapticFeedbackEnabled,FilterChips 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.