P2 — Seznam akcí / Kategorie
Účel obrazovky
Zobrazuje výsledky browsingu — buď obsah kategorie, výsledky vyhledávání, nebo filtrovaný seznam akcí. Hlavní úkol: umožnit uživateli efektivně procházet větší množství akcí a najít tu pravou. Při vstupu z hlavní navigace je na spodní liště aktivní záložka Prozkoumat (ne záložka vyhledávání).
Content Priority
- Header — název kontextu a počet výsledků v jednom řádku (např. „Hudba (374)", „Výsledky hledání (42)"), back navigace; bez samostatného řádku „Nalezeno N akcí" App Bar / Top NavigationBack Button
- Date ribbon (sticky) — horizontální pás rychlých dat: Dnes | Zítra | Víkend | Tento týden | Tento měsíc | Vlastní. Při Vlastní se otevře date picker (výběr rozsahu / konkrétního dne dle domluvy se S3).
- Vizuální mřížka kategorií — ikonová mřížka pro rychlý přechod do podkategorií: Hudba, Divadlo, Opera, Balet, Musical, Festival, Výstavy, Pro děti (tap → přefiltrovaný seznam / P2 v dané kategorii).
- Active filter chips — dismissible chips aktivních filtrů (žánr, datum, město…), tap na chip → otevření S3 Chip / Filter Button
- Sort chips — přepínač řazení jako chipy (ne dropdown): Datum | Cena | Oblíbenost. Aktivní chip = vyplněný (filled), ostatní outlined. Chip / Filter Button
- Event list — vertikální seznam rozšířených event karet Event Card (large)
- Event karta (rozšířená): thumbnail (větší než na P1), název, pořadatel, datum/rozsah dat, místo konání, cena od, status badge (dostupné / málo míst / vyprodáno), žánr tag chips (max 2); v pravém horním rohu karty ikona srdce ♡ (oblíbené / toggle podle stavu přihlášení) Event Card (large)Badge / TagChip / Filter Button
- Loading indicator — spinner na konci seznamu při infinite scroll Loading / Skeleton
- Filtrovat CTA — floating button nebo chip pro otevření filtrů (pokud žádné aktivní) Primary Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap na položku date ribbonu | Filtr data / rozsahu podle výběru; Vlastní → date picker | Aktualizace dotazu, refresh seznamu |
| Tap na kategorii v mřížce | Přechod do vybrané kategorie / filtru | P2 s novým kontextem v hlavičce |
| Tap na ♡ na kartě | Přidání / odebrání z oblíbených (nebo login prompt) | Aktualizace stavu srdce |
| Tap na event kartu | Navigace na detail akce | P3 — Detail akce |
| Tap na filter chip / „Filtrovat" | Otevření filter overlay | S3 — Filtrování |
| Tap na „×" u aktivního filter chip | Odebrání filtru, refresh seznamu | Reload s méně filtry |
| Tap na sort chip | Přepnutí řazení (Datum / Cena / Oblíbenost) | Scroll na top, nové řazení |
| Scroll na konec seznamu | Infinite scroll — načtení další stránky | Loading spinner + append dalších karet |
| Pull-to-refresh | Refresh seznamu | Nová data z API |
| Back button | Návrat | Předchozí obrazovka (P1 nebo P8) |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loading / skeleton | První načtení | Skeleton: záhlaví, ribbon, mřížka kategorií (volitelně), 3+ placeholder karet v řadě |
| Loaded | Data dostupná | Seznam event karet, ribbon a sort chips v defaultním stavu |
| Date selected | Uživatel vybral preset nebo vlastní datum v ribbonu | Zvýrazněná položka v ribbonu; v hlavičce nebo chips odráží aktivní časové okno |
| Sort active | Zvolené řazení není výchozí Datum | Aktivní sort chip filled, ostatní outlined; seznam přeřazen |
| Loading more | Infinite scroll pagination | Spinner pod posledním itemem |
| Empty / no results | 0 výsledků (filtry, kategorie, ribbon) | Proaktivní chování: automaticky rozšířit / zvýraznit filtry (navigace nebo inline odkaz na S3), copy „Žádné výsledky" + sekce „Podobné akce" (doporučení mimo přesný dotaz, pokud data existují) + „Resetovat filtry" kde dává smysl |
| Empty — kategorie | Kategorie nemá žádné akce | Stejná logika kde relevantní: podobné akce + úprava filtrů |
| Error | API selhala | Retry CTA |
| Offline | Bez připojení | „Jste offline" banner, cached data pokud existují |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Velmi dlouhý seznam (1000+ akcí) | Infinite scroll po 20 položkách, lazy loading obrázků |
| Uživatel mění řazení (sort chip) po scrollu | Scroll na top, plný re-fetch |
| Filtr / ribbon vrací 0 výsledků | Empty state + auto-expand / odkaz na filtry + sekce „Podobné akce" |
| Pagination API timeout | Toast „Nepodařilo se načíst další akce", retry button |
| Event karta bez obrázku | Placeholder s barvou žánru |
| Extrémně dlouhý název akce | Truncate na 2 řádky s „…" |
Mobilní patterny a odlišení od webu
Co děláme jinak
- Infinite scroll místo „Load More" button + pagination — plynulejší mobilní experience
- Date ribbon + sort chips — rychlé časové presety a řazení bez dropdownu; Vlastní otevře date picker
- Floating filter CTA — na webu jsou filtry odkaz nahoře, na mobilu je potřeba víc prominence
- Dismissible filter chips — na webu je „Reset filters" v draweru, na mobilu viditelné inline chips s „×" pro quick reset
- Větší touch targety — event karty mají min. 48dp touch area (Android Material 3 / iOS HIG)
Aplikované patterny
- iOS:
UICollectionViewsDiffableDataSourcepro smooth updates, prefetch pro infinite scroll - Android:
LazyColumnspaging3knihovnou,FilterChip(Material 3) pro aktivní filtry
Reference — Aktuální web
SCR-WEB-05Kategorie Music — search, filter CTA, tag cloud, event karty
SCR-WEB-09Filter drawer — chips, expandable sekce, 'Show Events' CTA
SCR-WEB-10Full-width event karty v listu
SCR-WEB-11Load More + numerická paginationReference — CineStar benchmark
SCR-CS-02Program — location dropdown, horizontal day picker, movie karty s formát badges a showtime buttonyInspirace z CineStar
CineStar má horizontální day picker (pondělí–neděle) jako primární filtr — velmi rychlý přístup k „co dnes hrají". Date ribbon na P2 tuto roli přebírá s presety (Dnes, Víkend…) a Vlastní pro date picker.