Popisky a zástupné texty

Popisky (Labels)

Měly by být vždy viditelné, umístěné nad vstupním polem nebo vlevo od něj. Jasně popisují, jaké informace se do pole zadávají. Jsou klíčové pro uživatele, kteří se vracejí k vyplněným formulářům, nebo pro ty, kteří používají čtečky obrazovky, protože po vyplnění pole zůstávají viditelné a poskytují trvalý kontext.

⚠️ VIGo by mělo striktně dodržovat princip "vždy viditelných popisků" pro vstupní pole, aby zajistilo maximální jasnost a minimalizovalo chyby při zadávání a kontrole dat, které jsou v pojišťovnictví klíčové. Zástupné texty by měly sloužit pouze jako doplňkové příklady formátu.

⚠️ Pokud jako popisek slouží jiný textový prvek, například název sekce, je možné tento popisek vizuálně skrýt.

⚠️ Popisky by měly být jasné a jednoznačné.

Povinná pole: Označení a správa

Je klíčové jasně komunikovat, která pole jsou povinná. Standardní praxí je označení hvězdičkou * vedle popisku. Je nezbytné uvést vysvětlení významu hvězdičky na začátku formuláře (např. " Povinná pole"). Pokud je většina polí ve formuláři povinná, je efektivnější označit místo toho volitelná pole slovem "(volitelné)" v závorkách.

Tabulka: Doporučené způsoby označení povinných polí v systému VIGo

⚠️ Výchozí stav formulářových polí je bez hvězdičky. Vychází se z předpokladu, že všechna pole jsou povinná a validace se provádí po odeslání formuláře (viz komponenta Validator).

Zástupné texty (Placeholder text)

Krátké, příkladové texty uvnitř pole, které zmizí, jakmile uživatel začne psát. Jsou vhodné pro jednoduchá pole, kde se uživatel k datům nevrací ("vyplň a zapomeň"). Neměly by nahrazovat popisky, protože po vyplnění pole zmizí a uživatel ztratí kontext.

⚠️ Nesmí docházet k duplikaci labelu v placeholderu.

Přehled typů placeholderů a jejich použití

• Nedoporučuje se kombinovat tvar (např. „Zadejte“) s názvem labelu.
• Na komponentách v defaultním stavu je použití placeholderu volitelné.
• ⚠️ V patternu vyhledávání (domény PAR, SML, REG) je používání placeholderu povinné.

Pomocné texty a chybové zprávy

Pomocné texty (Helper text)

Poskytují dodatečné pokyny nebo kontext k vstupnímu poli, například k formátu nebo omezením. Měly by být stručné, ideálně jednořádkové, a mohou být viditelné trvale nebo jen při fokusu.

Chybové zprávy (Error messages)

Objeví se, když vstup není přijatelný (správný). Nahrazují pomocný text a jasně popisují, co se stalo a jak chybu opravit. Měly by být konstruktivní a používat pozitivní jazyk, vyhýbat se obviňování uživatele. Měly by také být bez žargonu a technických kódů.

Validace a zpětná vazba (okamžité opravy)

Validace polí by měla probíhat dynamicky, ideálně ihned po zadání dat, aby uživatelé mohli chyby opravit okamžitě, aniž by museli vyplňovat celý formulář a čekat na odeslání. Poskytování okamžité zpětné vazby snižuje frustraci a zlepšuje celkovou efektivitu vyplňování formulářů.

Příklady