P1 — Home / Feed
Účel obrazovky
Hlavní vstupní bod aplikace. Uživatel sem přichází po otevření app — musí okamžitě vidět relevantní akce a mít jasnou cestu k nákupu. Funkčně jde o discovery feed kombinující personalizované sekce, promo obsah a rychlý přístup k vyhledávání.
Content Priority
Seřazeno od nejdůležitějšího — co uživatel vidí první:
- Hero promo banner — carousel (3–5 položek), automatický scroll (5s interval), manuální swipe, každý slide s obrázkem, krátkým textem a CTA deep linkem na detail akce nebo kampaň Hero BannerCarousel / Horizontal Scroll
- City filter tabs — horizontální scroll chips (Praha, Brno, Ostrava, Olomouc…), sticky pod header, filtrují obsah feedu podle lokality Chip / Filter Button
- Sekce „Doporučujeme" — editorský výběr akcí, horizontální scroll event karet (4–8 položek), „Zobrazit vše" odkaz Section HeaderEvent Card (small)Carousel / Horizontal Scroll
- Sekce „Nová představení" — chronologicky řazené nové akce, horizontální scroll Section HeaderEvent Card (small)Carousel / Horizontal Scroll
- Sekce „Bestsellery" — top prodejní akce, horizontální scroll Section HeaderEvent Card (small)Carousel / Horizontal Scroll
- Event karta (opakovaná komponenta): thumbnail, název akce, datum/rozsah dat, místo konání, cena od, status badge (dostupné / málo míst / vyprodáno) Event Card (small)Badge / Tag
- Header bar — logo Colosseum, notifikační zvoneček (badge s počtem nepřečtených), search ikona App Bar / Top NavigationIcon Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap na event kartu | Navigace na detail | P3 — Detail akce |
| Tap na „Zobrazit vše" u sekce | Seznam s příslušným filtrem | P2 — Seznam akcí |
| Tap na search ikonu v header | Fullscreen search overlay | P8 — Vyhledávání |
| Tap na city filter chip | Přefiltrování feedu | Reload sekcí s novou lokalitou |
| Swipe hero banner | Přepnutí slide | Další promo slide |
| Tap na hero banner CTA | Deep link na detail/kampaň | P3 nebo promo landing |
| Pull-to-refresh | Aktualizace feedu | Nová data z API, scroll na top |
| Scroll down | Lazy loading dalších sekcí | Postupné načítání sekcí |
| Tap na notifikační zvoneček | Notifikační centrum | [S19 — Notifikační centrum] (F1) |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Loading | První načtení feedu | Skeleton shimmer: 1 obdélník pro hero, 3–4 obdélníkové placeholder karty v řadě per sekce |
| Loaded | Data z API dostupná | Plný obsah, hero animace běží |
| Error | API nedostupné | Centered ilustrace + „Nepodařilo se načíst" + „Zkusit znovu" CTA button |
| Offline | Žádné připojení | Cached data (poslední úspěšné načtení) + sticky offline banner pod header: „Jste offline — zobrazujeme uložená data" |
| Pull-to-refresh | Uživatel táhne dolů | Spinner s animací, po dokončení zmizí |
| Empty (edge case) | API vrací 0 akcí pro lokaci | „V tomto městě zatím nemáme akce" + CTA přepnout město |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Uživatel nemá vybranou lokaci | Zobrazit akce ze všech měst, city tabs bez aktivního výběru |
| Hero carousel má jen 1 slide | Zobrazit jako statický banner bez indikátorů a auto-scrollu |
| Hero carousel prázdný (0 slides z CMS) | Skrýt hero sekci, posunout první sekci nahoru |
| Sekce má < 2 položky | Skrýt „Zobrazit vše" odkaz, zobrazit karty standardně |
| Event karta nemá obrázek | Zobrazit placeholder s barvou kategorie/žánru a názvem akce |
| Pomalé připojení | Obrázky se načítají lazy s blur placeholderem, text se zobrazí ihned |
| Odpojení během pull-to-refresh | Toast „Nelze aktualizovat — zkontrolujte připojení", zobrazit stará data |
Mobilní patterny a odlišení od webu
Co přebíráme z webu
- Horizontální sekce s event kartami (osvědčený discovery pattern)
- City filter tabs (web má Praha/Brno/Ostrava)
- Promo bannery
Co děláme jinak a proč
- Pull-to-refresh místo manuálního reload — nativní mobilní pattern, snižuje fricton
- Skeleton loading místo spinneru — vnímáme rychlejší načítání (perceived performance)
- Sticky city tabs pod header — na webu jsou inline, na mobilu potřebujeme persistentní filtr kvůli menšímu viewportu
- Bottom tab bar navigace — web používá hamburger + top nav, mobil používá 4 persistentní taby (Program, Hledat, Vstupenky, Profil) dle iOS/Android guidelines
- Event karta — kompaktnější — menší thumbnail, méně textu, ale přidáváme status badge (málo míst/vyprodáno) který web nemá
- Notifikační zvoneček v header — web nemá push notifikace, mobilní app ano
Aplikované patterny
- iOS:
UIRefreshControlpull-to-refresh,UICollectionViews compositional layout pro horizontální sekce,TabViewpro spodní navigaci - Android:
SwipeRefreshLayout,LazyRowv Compose pro horizontální scroll,NavigationBar(Material 3) pro spodní navigaci
Reference — Aktuální web
SCR-WEB-01Hero banner, search, city tabs, promo bannery
SCR-WEB-02'Our selection for you' — horizontální event karty
SCR-WEB-03Nadcházející akce, city filter tabs, subscription
SCR-WEB-04Newsletter, footer kontaktyReference — CineStar benchmark
SCR-CS-01Dark theme homepage — hero banner, promo carousel, sekce Promítáme/Brzy uvedemeInspirace z CineStar
CineStar používá tmavý theme s výraznými promo bannery. Hero prostor je velký (cca 40% viewport). Sekce jsou jasně oddělené. Navigace: location dropdown + search + favorites + notifications v horním baru. Bottom tab bar: Domů, Program, CineStar Club, Moje nákupy, Přihlásit se.