S2 — Checkout — Osobní údaje
Účel obrazovky
Formulář pro údaje k objednávce — krok 3/5 v checkout stepperu. Slouží guestům (neadresné vyplnění) i přihlášeným (předvyplněné údaje). Validace před přechodem k platbě.
Content Priority
- Stepper progress — vizuální indikátor kroků: Místa → Objednávka → Osobní údaje → Platba → Potvrzení (aktuální krok zvýrazněn) Stepper / Progress Indicator
- Guest formulář — jméno, příjmení, email, telefon (povinné pole) Text Input
- ISIC pole — volitelné pro studentskou slevu (pokud akce podporuje) Text Input
- Fakturační adresa — collapsible sekce (volitelná pro B2C) Accordion / ExpandableText Input
- GDPR souhlas — checkbox „Souhlasím se zpracováním osobních údajů" (povinný) Checkbox
- Late login CTA — „Máte účet? Přihlaste se" (pro guesty) Ghost/Text Button
- CTA „Pokračovat k platbě" — primary button, sticky v bottom bar Primary Button
- Countdown timer — pokračuje z P5 — Košík Countdown Timer
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Vyplnění pole + blur | Inline validace pole | Zobrazení error / success stavu |
| Tap „Pokračovat k platbě" | Validace všech povinných polí | Přechod na P6 — Checkout při úspěchu |
| Tap „Máte účet? Přihlaste se" | Otevření přihlášení v modalu/overlay | S4 — Přihlášení — po úspěchu prefilled formulář |
| Rozbalení fakturační adresy | Zobrazení polí (ulice, město, PSČ…) | Collapsible expand |
| Zapnutí ISIC | Zobrazení pole pro číslo průkazu | Volitelné pole pro slevu |
| Back / Swipe zpět | Návrat bez uložení | P5 — Košík |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Guest — prázdný formulář | Nepřihlášený uživatel | Všechna pole prázdná, late login CTA viditelný |
| Logged-in — předvyplněno | Přihlášený uživatel | Formulář předvyplněn z profilu, late login CTA skryt |
| Validation errors | Nevalidní nebo prázdná pole | Červené underline/outline pod problémy, error message per pole |
| Loading | Odesílání (po late login) | Spinner na CTA, disabled formulář |
| GDPR unchecked | Souhlas nezaškrtnut | CTA disabled, tooltip nebo inline hint |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Neplatný formát emailu | Inline error „Zadejte platnou e-mailovou adresu" při blur nebo submit |
| Neplatný formát telefonu | Inline error „Zadejte platné telefonní číslo" (mezinárodní formát) |
| GDPR checkbox nezaškrtnut | CTA disabled, nelze pokračovat — nebo při submit error „Souhlas je povinný" |
| Email již registrovaný (při late login) | Po kliknutí na přihlášení: S4 s možností „Zapomenuté heslo" nebo „Registrovat se" |
| Přerušení session (timeout) | Návrat na P5 s toastem „Relace vypršela, zkontrolujte košík" |
| Offline během vyplňování | Banner „Jste offline — formulář lze vyplnit, platba vyžaduje připojení" |
Mobilní patterny a odlišení od webu
Co přebíráme
- Struktura formuláře (jméno, příjmení, email, telefon)
- Stepper checkout flow
- Collapsible fakturační adresa
Co děláme jinak
- Auto-fill podpora — iOS/Android autocomplete pro jméno, adresu, email (Autofill Hints)
- Keyboard type per pole — email klávesnice pro email, číselná pro telefon, default pro text
- Sticky CTA v bottom bar — vždy viditelný při scrollu formuláře, web má CTA níže
- Validace on blur — kontrola při opuštění pole, ne až při submit (rychlejší feedback)
Aplikované patterny
- iOS:
UITextFieldstextContentType(.emailAddress, .telephoneNumber, .name),KeyboardType(.emailAddress, .phonePad) - Android:
TextInputLayoutsautofillHints(EMAIL_ADDRESS, PERSON_NAME, PHONE),inputType(textEmailAddress, phone)
Reference — Aktuální web
SCR-WEB-33Guest checkout formulář — doručení, platba, osobní údaje
SCR-WEB-34Login v checkoutu — OAuth, email formReference — CineStar benchmark
CineStar checkout flow obsahuje obdobný krok s osobními údaji. Pro srovnání viz screenshoty v P6 — Checkout.