Přeskočit na hlavní obsah

P8 — Vyhledávání

Screen IDP8
Typ Primární
FázeMVP
Účel obrazovky

Fullscreen search overlay s okamžitými výsledky. Uživatel hledá akce, pořadatele i místa konání. Důraz na rychlost (debounced search) a discovery (populární dotazy, historie). Ve spodní tab bar je aktivní položka PROZKOUMAT (vyhledávání je overlay nad touto kontextovou záložkou, ne samostatná „Hledat" tab).


Content Priority

Empty state (před hledáním)

  1. Search input s auto-focus a klávesnicí, placeholder „Hledejte akce, pořadatele, místa…"; pod inputem hint, dokud není splněn práh: „Zadejte alespoň 3 znaky" Search Input
  2. Nedávno hledané — poslední položky jako řádky/seznam; u každé položky „×" pro odstranění jen této položky z historie; tap na text → spustit hledání Chip / Filter Button
  3. Populární — až 8 tagů/chipů: primárně top dotazy za posledních 7 dní (analytics); pokud data chybí nebo nestačí, fallback na tagy z CMS Chip / Filter Button
  4. Často hledané — textový seznam 5 položek s emoji 🔥 (žádné mini karty akcí) List Item

Výsledky (po zadání 3+ znaků, stále ve stejném overlayi)

  1. Search input s query textem a „×" clear button; po potvrzení hledání (Enter) se klávesnice schová a výsledky zůstanou v tom samém fullscreen overlayi (bez navigace pryč z kontextu) Search Input
  2. Sekce „Akce" (N) — event karty (kompaktní) s highlighted matchem v názvu; u sekce odkaz „Zobrazit vše (N)"P2 — Seznam akcí s plným výpisem dané kategorie výsledků Section HeaderEvent Card (small)
  3. Sekce „Pořadatelé" (N) — mini karty s logem a názvem, highlighted match; „Zobrazit vše (N)"P2 / relevantní výpis Section HeaderOrganizer Card
  4. Sekce „Místa" (N) — venue karty s názvem a městem; „Zobrazit vše (N)"P2 kde dává smysl Section HeaderVenue Card
  5. Quick preview — zkrácená event karta s hlavní info (thumbnail, název, datum, cena) Event Card (small)

Vyhledávací logika (MVP): vyhledávání je bez rozlišení diakritiky a bez rozlišení velikosti pismen. Fuzzy shoda: pro slova delší než 5 znaků tolerovat Levenshteinovo vzdálenost ≤ 1 (překlepy).


Interakce

TriggerAkceCíl
Typing (3+ znaků)Debounced search (300ms)Real-time výsledky pod inputem ve stejném overlayi
Typing (< 3 znaků)Bez API dotazuEmpty state + hint „Zadejte alespoň 3 znaky"
Tap na event výsledekNavigace na detailP3 — Detail akce
Tap na pořadateleNavigace na profilS13 — Profil pořadatele
Tap na místoNavigace na venueS12 — Detail místa
Tap na položku nedávného hledáníVyplnit query, spustit hledáníVýsledky v overlayi
Tap „×" u položky nedávného hledáníOdebrat jen tuto položku z historieAktualizace seznamu
Tap na populární tagVyplnit query + hledáníVýsledky pro tag
Tap „Zobrazit vše (N)" u sekcePřechod na plný seznamP2 — Seznam akcí
Tap „×" u search inputClear queryNávrat na empty state
Tap „×" (zavřít) nebo backZavřít search overlayNávrat na P1 (tab PROZKOUMAT zůstává logicky aktivní)
Klávesa Enter / „Search" na klávesniciSchovat klávesnici, potvrdit dotazRozšířené výsledky v tom samém overlayi; plný výpis přes „Zobrazit vše" → P2

Stavy

StavPopisVizuální chování
EmptyPřed hledánímNedávno hledané, populární (8), často hledané (🔥)
TypingUživatel píše, < 3 znakyEmpty state + hint „Zadejte alespoň 3 znaky", bez výsledků
SearchingDebounce period / API callSubtle spinner vedle search inputu
ResultsNalezeny výsledkySekce Akce / Pořadatelé / Místa ve stejném overlayi + „Zobrazit vše" → P2
Results (keyboard dismissed)Po EnterStejný overlay, více místa pro seznamy
No results0 výsledkůX6 — Empty state hledání
ErrorAPI selhala„Vyhledávání je dočasně nedostupné" + retry
OfflineBez připojení„Pro vyhledávání potřebujete připojení" + cached recent searches

Edge Cases a Error States

ScénářŘešení
Query 1–2 znakyNespouštět search, zobrazit hint „Zadejte alespoň 3 znaky"
Diakritika / velikost pismenNormalizace dotazu i indexu — shoda bez ohledu na háčky/velikost
Překlep (dlouhé slovo)Fuzzy: Levenshtein ≤ 1 pro slova > 5 znaků
Velmi rychlé psaníDebounce 300ms — odeslat jen poslední stav
Žádná historie hledání (nový uživatel)Skrýt „Nedávno hledané", zobrazit populární + často hledané
Výsledky obsahují speciální znaky v názvechSprávný rendering diakritiků a HTML entities
Extrémně mnoho výsledků (500+)Zobrazit omezený náhled per kategorie + vždy „Zobrazit vše (N)"P2
Pomalé APIZobrazit skeleton výsledky po 500ms, timeout po 10s → error

Mobilní patterny a odlišení od webu

Co děláme jinak

  • Fullscreen overlay místo inline search — web má search bar v header, na mobilu potřebujeme víc prostoru pro klávesnici a výsledky; výsledky zůstávají v overlayi i po Enter (klávesnice se zavře)
  • Auto-focus + klávesnice — okamžitý focus na input, uživatel může začít psát ihned
  • Text highlighting — matchované části v názvech výsledků tučně
  • Dual výsledky — web hledá jen akce, MA hledá akce + pořadatele + místa najednou
  • Tab bar — pod overlayem je aktivní PROZKOUMAT, ne samostatná záložka „Hledat"

Aplikované patterny

  • iOS: UISearchController pattern, searchable() modifier v SwiftUI, debounced Publisher
  • Android: SearchBar (Material 3), Debounce v Kotlin Flow, SearchView s suggestions

Reference — Aktuální web

SCR-WEB-41: Empty state — 'Our tips' karty, recent searches, popular tagy
Web ColosseumSCR-WEB-41Empty state — 'Our tips' karty, recent searches, popular tagy
SCR-WEB-42: Výsledky — 'Show 258 events' + 'Show 27 organizers', highlighted matche
Web ColosseumSCR-WEB-42Výsledky — 'Show 258 events' + 'Show 27 organizers', highlighted matche