# UX/UI posudek: sjednocení úrazu 0.14.1 a travelu 0.21.2

**Role:** nezávislý produktový a UX/UI posudek pro rozhodnutí o další iteraci. **Rozsah:** aktuální místní `site/versions/travel-0.21.2/` a `releases/uraz/ferda-0.14.1/`. Nejde o návrh změny výpočtů, text pojistných podmínek ani posouzení reálného sjednání. Starý stylopis z 28. 10. používám jen jako vzor práce s konkrétním důkazem a rozlišením měřeného stavu od návrhu; jeho tehdejší popis úrazu 0.11.1 a travelu V19 není popisem dnešních verzí.

V tabulce níže jsou cesty `assets/...` relativní k `site/versions/travel-0.21.2/`; úrazové soubory `ferda-flow.js`, `desktop.js`, `experience.js`, `uraz-unified.css`, `wordpress-theme.css` a `shared/...` jsou relativní k `releases/uraz/ferda-0.14.1/`. `index.html` se vždy vztahuje k produktu v příslušném sloupci. Tím zůstávají lokální zdroje dohledatelné i bez jejich publikace v reportu.

## Jak číst důkazy

- **Vizuálně ověřeno** znamená skutečný snímek z `evidence/020–093` pro nynější verze a šířky 375/1440 px. Snímek ukazuje jeden stav, nikoli všechny interakce. Evidence `evidence/measurements.json` uvádí osm průchodů, 124 obrazovek a žádné zaznamenané chyby; její funkční výsledek nepovažuji za uživatelský výzkum.
- **Zdrojově doloženo** znamená přímo HTML/CSS/JS současných verzí, v tabulce uvádím cestu a selektor. Vrstvy CSS jsou kaskáda, nikoli samostatné design systémy; výslednou podobu interpretuji spolu se snímkem.
- **Inference** je úsudek o čitelnosti, orientaci nebo riziku z konkrétního stavu. **Návrh** je pravidlo pro příští verzi. Neodhaduji konverze ani účinnost bez testu s lidmi.

### Čerstvé porovnatelné stavy

Lokální kontrola nově zachytila tytéž dvě verze z portálových cest při 375 px. Následující dvojice jsou konkrétní vizuální důkaz, nikoli popis starých V19/0.11.1:

| Krok | Travel 0.21.2 | Úraz 0.14.1 | Vizuální rozdíl |
|---|---|---|---|
| Vstup | [020-travel-entry](../evidence/020-travel-entry-375-demo-375.png) | [025-uraz-entry](../evidence/025-uraz-entry-375.png) | Travel v prvním kroku ukazuje delší produktové zadání, úraz shromažďuje kontaktní údaje dříve. |
| Výběr a nastavení | [021-travel-results](../evidence/021-travel-results-375-375.png) | [027-uraz-customize](../evidence/027-uraz-customize-375.png) | Travel řadí mnoho nabídek, úraz detailně dolaďuje jednu zvolenou nabídku; nejde o totožný krok. |
| Osobní údaje | [022-travel-people](../evidence/022-travel-people-375.png) | [028-uraz-people](../evidence/028-uraz-people-375.png) | Opakovaní cestující oproti jednomu pojištěnému a volitelnému jinému pojistníkovi. |
| Rekapitulace | [375 px](../evidence/023-travel-review-375.png), [1440 px](../evidence/085-travel-review-1440.png) | [375 px](../evidence/030-uraz-review-375.png), [1440 px](../evidence/092-uraz-review-1440.png) | Travel má jednu bílou kartu s vnitřními šedými skupinami a červenými linkami přes obsah; úraz sérii bílých panelů s krátkou červenou linkou pod nadpisem. Obě řešení ukazují podstatné údaje, ale mají jinou vizuální gramatiku. |
| Dokončení | [024-travel-done](../evidence/024-travel-done-375.png) | [031-uraz-done](../evidence/031-uraz-done-375.png) | Travel tvrdí „Pojištění je sjednáno“ a odeslání potvrzení; úraz říká „Vše je připravené“. Obě stránky potřebují výslovnou pravdivou modelovou značku. |
| Dialog | [375 px: aktivity](../evidence/gpt-6.1-terra/travel-dialog-375.png), [1440 px](../evidence/gpt-6.1-terra/travel-dialog-1440.png) | [375 px: riziko](../evidence/gpt-6.1-terra/uraz-dialog-375.png), [1440 px](../evidence/gpt-6.1-terra/uraz-dialog-1440.png) | Travelový editor aktivit zůstává středovým dialogem i na mobilu; úrazový editor rizika přechází na spodní panel. Produktový obsah je jiný, chování zavření a fokusu má být stejné. |

**Další konkrétní rozpor:** na čerstvé travelové rekapitulaci je hlavní cena **489 Kč červeně**, zatímco README/PROJECT aktuální iterace říká, že velké nadpisy a ceny zůstávají modré, a na úrazové rekapitulaci je cena modrá. V izolovaném Chrome/file průchodu je `.recap-product > strong[data-selected-price]` `rgb(244, 37, 52)`, 28 px/700; předchozí travelové `.offer-tile__price` a `.selected-summary__price` jsou `rgb(0, 46, 95)`. Úrazová rekapitulace `.price-summary > strong` je `rgb(0, 46, 95)`, 30 px/600. [Přesné měření](../evidence/gpt-6-sol/price-probe.json) a [reprodukční skript](../evidence/gpt-6-sol/price-probe.cjs). To není chybějící červený kicker; je to jiná role ceny. Před případnou změnou je třeba rozhodnout, zda modrá cena platí opravdu pro všechny fáze včetně travelové rekapitulace.

**Měřená formulářová odchylka:** společné hero má v obou produktech 48 px desktop/34 px mobil a pracovní `h1` přibližně 32/26 px, tedy velikost titulů už není hlavní rozdíl. V [124 kontextech](../evidence/measurements.json) mají na 375 px travelová data `#trip-date-from`, `#trip-date-to` text 12 px a roh 7 px; pole pojistníka 14 px/7 px. Úrazové `#profile-age`, `#profile-profession`, `#person-first`, `#person-last` mají 16 px/8 px. Společná specifikace pole má určit čitelnost a stav, ale nemusí slepě sjednotit každou šířku nebo délku hodnoty.

**Kontrast rozhodnutého CTA:** kombinace aktuální zelené `#00b53b` a bílé má vypočtený kontrast přibližně **2,74 : 1** (standardní převod sRGB na relativní jas). Uživatelovo pravidlo bílého textu zachovat; odstín zelené a velikost/tloušťku písma je potřeba projednat jako výslovné přístupnostní rozhodnutí, nikoli text potichu ztmavit.

## Rozhodnutí, která už platí

Ponechat červené malé sekční nadpisy `#F42534` v obou produktech, bílé písmo zelených hlavních tlačítek, šedou stránku s bílými formuláři, patičku `#003B71`, travelovou kontaktní hlavičku, čtyři fáze navigace, žádný verzový pruh v travelu a kompletní místní modelové průchody bez AI/API. Původní kořenový `/cmp_uraz/` a starší vydání jsou mimo úpravy. Současná vrstva `section-accents.css` prosazuje červenou pro `.eyebrow`, `.step-kicker` a příbuzné role; nové sjednocení ji musí zachovat. Tato rozhodnutí nejsou znovu otevřenými variantami.

## Současné rozdíly a jejich význam

| Oblast | Travel 0.21.2 | Úraz 0.14.1 | Rozhodnutí / typ |
|---|---|---|---|
| **Úvod a hero** | Dvousloupcový `.hero-grid`, produktový titulek a v kartě dvě cesty: `.entry-tabs` „Klasický formulář / Popíšu cestu“. Na 375 px se pozvánka Alexe ukazuje před dlouhým formulářem; levá důvěryhodnostní odrážka se skrývá. [snímek](../evidence/020-travel-entry-375-demo-375.png), `assets/iteration.css` `.hero-grid`, `.story-invitation`, `assets/travel-refinement.css` `.hero-copy h1`. | Obdobný `.uraz-hero`, ale úvodní karta se soustředí na věk, zaměstnání a kontakt; na mobilu odrážky zůstávají vidět. [snímek](../evidence/025-uraz-entry-375.png), `uraz-unified.css` `.uraz-hero`, `.uraz-trust-list`. | **Sdílet konstrukci hero**: šířky, typografické role, pořadí na mobilu a pravidlo pro skrývání ilustrace/odrážek. Obsah a dvě travelové vstupní cesty zůstanou produktové. **Návrh.** |
| **Hustota prvního kroku** | `#calculator-form` má destinaci, termíny, čtyři věkové kategorie, zvířata a volitelnou dopravu/storno; 375px snímek je dlouhý před hlavním CTA. `index.html` ř. 65–119, `assets/iteration.css` `.destination-grid`, `.people-grid`, `.pets-picker`. | První karta `.uraz-calculator-card` má věk, zaměstnání a kontakt; další krytí následuje ve fázi Konfigurace. `uraz-unified.css` `.uraz-calculator-card`; [snímek](../evidence/087-uraz-entry-1440.png). | **Sjednotit pravidla formuláře**, nikoli počet polí. Pro travel zvážit průběžné shrnutí a přístup k CTA po blokách; případné rozdělení kroku testovat, protože mění orientaci. Pro úraz držet vyhledávání zaměstnání a kontaktní údaje podle jeho výpočtové potřeby. **Inference + návrh.** |
| **Navigace** | `assets/travel-navigation.js` mapuje 16 obrazovek do 4 fází; výsledky, mapa, aktivity, simulátor i porovnání jsou Konfigurace. Mobil ukazuje název fáze a „1 / 4“. | `ferda-flow.js` definuje 4 stejné fáze; více úrazových podkroků (např. pojištěný, pojistník, obmyšlené osoby) se skládá do Údajů. Mobil zobrazuje podkrok typu „Základní údaje“/„Úprava nabídky“, nikoli jen jméno fáze. `index.html` `.step-nav`, `shared/app.js` ř. 42–43. | **Sdílet fázový model a vzor zpět**, ale jasně rozlišit fázi od podkroku na obou mobilech. Současné „1 / 4“ v travelu neříká, kolik interních obrazovek následuje; neslibovat čtyři obrazovky. **Zdrojově doloženo + návrh.** |
| **Nabídky a srovnání** | `#results-grid` / `.offer-tile` ukazuje na desktopu 3 sloupce a na mobilu 22 variant v dlouhém seznamu; každá má cenu za cestu, shodu, jeden důležitý limit, detail, výběr a porovnání. [desktop](../evidence/083-travel-results-1440-1440.png), [mobil](../evidence/021-travel-results-375-375.png), `index.html` ř. 140–154, `assets/app.js` ř. 543. | Úraz používá volbu rizik, porovnávací tabulku nabídek a následnou úpravu vybraného produktu s frekvencí placení. [konfigurace](../evidence/089-uraz-customize-1440.png), `desktop.js` `cards()`, `experience.js` `render...customize`, `shared/comparison.js`. | **Sdílet kostru nabídkové karty/řádku**: logo, název, časová jednotka ceny, klíčové krytí, důkaz/podklady, detail a výběr. Matice rizik, shoda DNA, délka cesty, frekvence placení a dostupnost připojištění jsou produktové. V travelu rozhodnout, zda všech 22 položek ukázat najednou nebo přidat progresivní zveřejnění; žádné položky nesmějí zmizet. **Návrh.** |
| **Osobní údaje** | Jedna `.form-card` pro pojistníka a opakované fieldsety cestujících; `.selected-summary` vpravo drží vybranou nabídku. [snímek](../evidence/084-travel-people-1440.png), `index.html` ř. 177–184, `assets/app.css` `.selected-summary`. | Úraz dělí pojištěného, adresu a pojistníka do samostatných bílých panelů; další údaje mohou být podkroky. [snímek](../evidence/090-uraz-people-1440.png), `ferda-flow.js` `people()`, `desktop.js` `people`, `shared/app.js` data routes. | **Sdílet design polí, validací, shrnutí nabídky a editace**, ponechat počet osob a vztah pojistník/pojištěný podle produktu. Srovnat časování kontaktu: úraz chce e-mail už v kalkulaci, travel až po výběru. To je obsahové rozhodnutí, ne CSS. **Návrh.** |
| **Rekapitulace a konec** | `.recap-card` skládá cestu, krytí, kontakt a osoby. Následuje modelový e-mail, platba a obrazovka „Pojištění je sjednáno / poslali jsme“ se syntetickým číslem smlouvy. `index.html` ř. 186–198; [snímek konce](../evidence/024-travel-done-375.png). | Rekapitulace skládá krytí, pojištěného, pojistníka, cenu a podklady; dokončení ukazuje návrh a výsledné krytí. Modelovost je přímo v textu platebního kroku (`desktop.js` `payment`) a dokončení (`desktop.js` `done`), přesto mobilní konec sám nese „Vše je připravené“. [snímek](../evidence/031-uraz-done-375.png). | **Společná obsahová norma pro mock režim je priorita P1:** na každém kritickém kroku a potvrzení jasně označit simulaci, nikdy netvrdit, že byl skutečně odeslán e-mail, uzavřena smlouva nebo přijata platba. Ponechat produktová fakta v rekapitulaci. **Zdrojově doloženo + návrh; nejde o tvrzení, že se skutečně něco odesílá.** |
| **Dialogy** | Několik `.modal[role=dialog][aria-modal=true]` pro detail, připojištění, důkaz, editaci cesty i asistenci; `assets/app.js` ř. 1235–1250 explicitně řeší fokus a Tab smyčku. Konkrétní `#activity-editor-modal` má podle `assets/innovation.css` `.activity-editor-modal` šířku do 720 px a na [375 px](../evidence/gpt-6.1-terra/travel-dialog-375.png) i [1440 px](../evidence/gpt-6.1-terra/travel-dialog-1440.png) zůstává středový; jiné travelové modaly `.offer-detail-modal` a `.option-modal` přecházejí podle `assets/app.css` v mobilu na spodní panel. | Nativní `<dialog id="detail-dialog">` a `<dialog id="ferda-dialog">`; `shared/base.css` mění mobilní `dialog` na spodní panel. Konkrétní rizikový editor je [na 375 px dole](../evidence/gpt-6.1-terra/uraz-dialog-375.png), [na 1440 px uprostřed](../evidence/gpt-6.1-terra/uraz-dialog-1440.png). | **Sdílet vzor chování**, ne nutně DOM implementaci v první iteraci: název, Escape, fokus, návrat k vyvolávacímu ovladači, scroll, bezpečné zavření a mobilní plocha. Pro mobil určit, které editory mají být spodní panel a proč; nativní dialog může být cílový společný základ až po regresi všech travelových případů. **Zdrojově doloženo + návrh.** |
| **CTA a detaily** | Postupové `.button--primary` a původní `.button--navy` mají po `assets/travel-refinement.css` zelenou s bílou; sekundární obrys navy. Vedle výběru jsou četná AI vysvětlení, důkazy, detail i úprava. | `.button` pro hlavní postup je zelená/bílá, sekundární akce obrysová; na konfiguraci je jedno velké „Pokračovat na osobní údaje“. `uraz-unified.css` / `wordpress-theme.css`. | **Sdílet akční role** primární postup/výběr, sekundární detail/úprava, textový návrat. AI nesmí být jediné vysvětlení; travel má současně text a detail, jejich smysl má být jednoznačný. Focus a disabled důvod kontrolovat odděleně od barvy. **Návrh.** |

**Pozorování mimo tabulku:** obě současné verze už mají záměrně podobnou hlavičku, hlavní barvy, typografický základ, červené kickery a patičku. Největší zbylé rozhodnutí není další přebarvení. Je to sjednocení chování fází a komponent při zachování významu různých produktových dat. Plošné sjednocení velikosti sekcí by travelový mobilní formulář dále prodloužilo a úrazovou porovnávací tabulku mohlo znehodnotit. To je inference ze snímků, nikoli naměřený dopad na uživatele.

## Tři směry dalšího vývoje

| Směr | Obsah | Přínos | Cena / riziko | Můj závěr |
|---|---|---|---|---|
| **A. Cílené opravy** | Společné pojmenování modelového režimu, navigační popisky, CTA role a drobné rozdíly v hero/formulářích v samostatných CSS/JS vrstvách. | Rychlé, malé riziko pro současné průchody. | Duplikace a kaskáda porostou; každou opravu bude nutné dělat dvakrát. | Vhodné jako první bezpečný krok pro P1 obsah a přístupnost, nestačí jako dlouhodobé pravidlo. |
| **B. Sdílené komponenty a tokeny** | Jeden kontrakt pro hlavičku, fázový ukazatel, hero, pole/validace, karty nabídky, CTA, rekapitulační fakta, dialog a patičku; obě aplikace předávají vlastní text, data a výpočet. | Sníží vizuální drift a dovolí společné kontroly bez slučování produktových cest. | Vyžaduje mapu vlastnictví, API komponent a postupné připojení obou rendererů; regresní riziko v interakcích. | **Doporučuji** po cílené opravě P1. Pilot: hlavička, navigace, CTA/pole; teprve potom složitější nabídky a dialogy. |
| **C. Jeden univerzální průchod** | Sloučit router, datový model i obsah kroků do jedné konfigurovatelné aplikace. | Jeden runtime a potenciálně méně duplicit. | Travelové DNA/mapa/22 výsledků a úrazová rizika, placení a osoby mají jiné rozhodovací okamžiky. Konfigurace by mohla zakrýt produktové výjimky, výrazně rozšířit testovací matici a ohrozit historická vydání. | Nyní nedoporučuji; odložit, dokud nebude prokázaná potřeba společné logiky, ne pouze podobný vzhled. |

## Doporučené pravidlo pro další verze

1. **Společný kontrakt, produktová data.** Definovat role pro `canvas`, bílý `surface`, navy titulek/cenu, červený `kicker`, zelený postup s bílým textem, sekundární navy akci, chybu, fokus a vybraný stav. Při refaktoringu zachovat `.eyebrow`/`.step-kicker` `#F42534` v úvodu, kartách, detailech a dynamických krocích. Výchozí společný komponent nesmí přepisovat produktové limity, cenu ani rozhodovací logiku.
2. **Čtyři fáze, pravdivé podkroky.** „Kalkulace / Konfigurace / Údaje / Rekapitulace“ je vnější orientace. Mobil musí ukázat konkrétní aktuální podkrok a srozumitelný návrat; číslo 1/4 označit jako fáze. Přechod zpět zachová vyplněná data a výběr. Vnitřní obrazovky AI, mapa rizik, porovnání a doklady mohou být produktové.
3. **Jeden jazyk hlavních akcí.** Zelená je výběr/postup; modrý obrys je detail, změna a alternativní cesta. Text na zelené zůstane bílý podle rozhodnutí. S dostupností se pracuje také fokusem, velikostí a stavovou informací; automatické přebarvení bílé na tmavou není v rozsahu zadání. Nedostupné porovnání musí sdělit, co chybí.
4. **Formulářové vzory.** Jednotný label, hint, povinné/volitelné, chyba u pole, shrnutí chyb, fokus na první chybu a zachování vstupu. Podmíněné pole „Jiná země“, zaměstnání a opakovaní cestující zůstanou produktové. Na mobilu ověřit dlouhé formuláře při otevřené klávesnici a návrat z dialogu.
5. **Pravdivý modelový průchod.** Před údaji a platbou i na konečné obrazovce musí být viditelné, že jde o simulaci; konkrétní falešné číslo a „odeslaný e-mail“ lze prezentovat jako ukázku, ne jako uskutečněnou událost. Lokální ruční průchod je rovnocenný AI cestě a přístupný z hlavního rozhraní. Žádné API, smlouva, platba či zpráva nesmí být odeslána.
6. **Verzování a ověření.** Implementovat jen nové samostatné verze přes reprodukovatelný build a zveřejnitelný obsah pouze pod `site/`. Starší ZIP a kořenový úraz zachovat byte shodně. Před předáním zkontrolovat demo/prázdný start, mobil/desktop, všechny volby, odkazy, podmíněné formuláře, validace, cestu do nabídky, změnu výběru, rekapitulaci, modelové dokončení, dialogy a kontrolní součty. Změna společné komponenty musí projít oběma produkty.

## Přejímací scénáře pro navržený směr B

| Kontrola | Očekávaný důkaz |
|---|---|
| 375/1440 px, demo i prázdný start u obou produktů | Screenshoty stejných rolí a průchod bez horizontálního přetečení; červené kickery, bílé zelené akce, modré titulky/ceny, bílá pole, šedá stránka, navy patička. |
| Navigace zpět a úprava nabídky | Všech 4 fází lze dosáhnout podle pravidel aplikace; po návratu z porovnání/údajů zůstane výběr a smysluplný fokus. |
| Formulář a validace | Prázdný start skutečně vyvolá chyby na požadovaných místech; podmíněná země, zaměstnání, různé role osob a jejich návrat fungují bez služby. |
| Nabídky | Travel zpřístupní všech 22 modelových variant, úraz všechny své modelové nabídky a volby krytí; jednotka ceny a zahrnuté krytí jsou srozumitelně pojmenované. |
| Dialog a mobilní klávesnice | Otevření, Escape/zavření, návrat fokusu, scroll, spodní panel a tlačítko v bezpečné oblasti na 375 px; žádný dialog nepřekryje jedinou možnost dokončení. |
| Modelové dokončení | Na platebním kroku i potvrzení je simulace čitelná; žádný text netvrdí uskutečněné odeslání/platbu/smlouvu; při síťovém bloku zůstává průchod kompletní. |

## Otevřená rozhodnutí pro vlastníka produktu

1. Má travelový první krok zobrazit všechny sekce před „Porovnat nabídky“, nebo zkrátit výchozí zobrazení s přímým přístupem k volitelným sekcím? Nevynechat zvířata, storno ani mapu rizik.
2. Má travel na mobilu řadit všech 22 nabídek v jedné stránce, nebo je zveřejňovat po dávkách se zachovaným řazením, filtrem a dostupností všech variant? Současná délka je doložená snímkem; dopad alternativy je nutné ověřit na prototypu.
3. Kdy žádat kontakt: úraz už v kalkulaci, travel až v údajích? Je to věcná závislost výpočtu, nebo historický rozdíl? UX sjednocení samo o sobě neospravedlňuje nové povinné pole.
4. Jak přesně nazývat modelový e-mail, číslo smlouvy, platbu a hotový stav v obou produktech? Současný travelový text je největší rozpor s pravidlem testovacího režimu.
5. Je pro „Konfiguraci“ žádoucí jednotná podnavigace, nebo stačí jasně pojmenovaný podkrok v mobilním ukazateli? Travel má více interních větví, úraz více obsahových podkroků.
6. Má modrá cena platit i v travelové rekapitulaci? Výsledky a vybraná nabídka jsou modré, jen tato cena je červená; červený kicker přitom zůstává pevné pravidlo.
7. Má zelená `#00b53b` zůstat přesná ve všech hlavních tlačítkách, nebo lze zvolit tmavší zelený odstín při zachování bílého textu? Aktuální dvojice má výpočtový kontrast 2,74 : 1. Rozhodnutí patří k přístupnosti, ne k obecné změně palety.

**Meze:** posudek vychází z lokálních zdrojů a dostupných Chrome snímků. Není to fyzický telefon, Safari, uživatelský test, odborná kontrola pojistných produktů ani ověření skutečné integrace. Staré měření WordPressu není použité jako dnešní autorita pro hodnoty stylu.