Formátování

Konzistentní formátování je klíčové pro zlepšení čitelnosti a vizuální jednoty uživatelského rozhraní.

1. Pravidla pro čitelnost a konzistenci

1.1. Počet záznamů

Doporučený formát: Počet záznamů: 2

Vysvětlení: Používání jednotného formátu eliminuje nutnost řešit složité české skloňování (např. 1 záznam, 2 záznamy, 5 záznamů). Tento přístup zvyšuje konzistenci, snižuje chybovost při lokalizaci a vývoji a zajišťuje okamžitou srozumitelnost.

1.2. Datum a Čas

Formát data v aplikaci (pro úsporu místa): DD.MM.YYYY (např. 01.03.2024, 07.12.2024).

V rámci uživatelského rozhraní aplikace používáme tento formát bez mezer z důvodu úspory místa a zjednodušení vizuální prezentace, typicky u tabulek, detailů položek nebo filtrů.
Vždy používejte dvouciferné označení pro den a měsíc a čtyřciferné pro rok.

Typograficky správný formát data (pro dokumenty a oficiální výstupy): DD. MM. YYYY (např. 01. 03. 2024, 07. 12. 2024).

Tento formát s mezerami za tečkami je typograficky korektní dle českých norem a měl by být používán ve všech formálních dokumentech generovaných systémem, jako jsou pojistné smlouvy, dopisy klientům, úřední zprávy, potvrzení o platbách nebo výkazy pro regulátory.

Čas: HH:MM (např. 08:22, 14:05).

Vždy používejte 24 hodinový formát.

Datum + Čas (v aplikaci): DD.MM.YYYY, HH:MM (např. 07.12.2024, 07:12).

Mezi datem a časem vždy použijte čárku a mezeru.

Rozsahy dat a časů: Pro rozsahy by se měla používat krátká pomlčka (en dash „–“) místo normální pomlčky („-“).

Příklad: Platnost: 01.01.2024 – 31.12.2024, Pracovní doba: 08:00 – 16:30

Vysvětlení: Důsledné používání správných typografických znaků zlepšuje čitelnost a profesionální vzhled. En dash je typograficky správný pro rozsahy a je odlišný od běžné pomlčky, což zvyšuje vizuální přehlednost. Rozlišení formátu pro aplikaci a pro dokumenty je praktickým kompromisem mezi uživatelskou přívětivostí UI a formální správností výstupů.

1.3. E-mail

Pravidlo: Používat E-mail s pomlčkou.

Vysvětlení: V češtině je pro oddělení částí slova (jako v "e-mail") nejvhodnější běžná pomlčka/spojovník. Důležité je držet se standardního tvaru "e-mail". Pravidla pro použití en dash a em dash se primárně týkají anglické typografie a v tomto případě nejsou relevantní.

Příklad Pole "E-mail" ve formuláři, text "Odeslali jsme potvrzení na váš e-mail."

1.4. První velké písmeno pro tagy a chipy

Pravidlo: První písmeno musí být vždy velké, zbytek malý (pokud se nejedná o zkratku, pak mohou být všechna velká).

Příklady: "Muž", "Žena", "FO" (Fyzická osoba), "RČ: 9204308787", "Jméno: Matej", "Stav: Čeká na schválení".

Vysvětlení: Tento přístup napomáhá rychlejšímu skenování textu a vizuální konzistenci prvků. Vizualizace tagů jako "Muž" působí uhlazeněji než "muž". Zkratky jako "FO" nebo ID s velkými písmeny (RC) jsou navíc jasně rozpoznatelné.

Doporučení

Zkratky mohou být pro uživatele nejasné. Ideálně použijte značku <abbr> s atributem title, která zobrazí plný význam při najetí myší. Pokud to není možné (např. u UI prvků), doplňte vysvětlení alespoň pomocí tooltipu.

1.5. Měna (Kč vs. CZK)

Pravidlo: Sjednotit používání měny. Doporučujeme používat "CZK" místo "Kč" pro finanční částky.

Vysvětlení: "CZK" je mezinárodní ISO kód měny, který je jednoznačný a srozumitelný i v mezinárodním kontextu. To je obzvláště důležité pro případnou expanzi nebo integraci. Zároveň je konzistentnější s jinými kódy měn (např. EUR, USD).

Příklad: "Pojistné: 1 200 CZK", "Hodnota pojistné události: 50 000 CZK".

1.6. Jednotky a měny

Znaky jako % (procento), °C (stupně Celsia), € (euro), $ (dolar) a další jednotky a měny jsou grafické zkratky pro slova a číselné hodnoty.

Zápis s mezerou

Pravidlo: Použijte mezeru, pokud je jednotka nebo měna podstatným jménem – tedy pokud popisujete množství něčeho.

Vysvětlení: Uživatel jasně vidí, kolik procent, stupňů nebo měny něco obsahuje (například sleva, plnění cíle, teplota, cena).

Příklad:

Sleva 10 % (čte se: „sleva deset procent“)
Teplota 10 °C (čte se: „teplota deset stupňů Celsia“)
Cena 50 € (čte se: „cena padesát euro“)

Zápis bez mezery

Pravidlo: Použijte zápis bez mezery, pokud je jednotka nebo měna přídavným jménem – tedy pokud popisujete vlastnost něčeho.

Vysvětlení: Uživatel vidí, že se jedná o vlastnost (například sleva, která má určitou výši nebo bankovka s určitou hodnotou).

Příklad:

10% sleva (čte se: „desetiprocentní sleva“)
10°C teplota (čte se: „desetistupňová teplota“)
50€ bankovka (čte se: „padesátieurová bankovka“)

1.7. Pravidla pro RČ, IČO a DIČ

Následující tabulka definuje pravidla pro konzistentní použití v různých UI komponentách s ohledem na kontext, prostor a čitelnost.

Identifikátor	Komponenta	Label / Hlavička	Tooltip	Placeholder	Zobrazení hodnoty (Formát)
Rodné číslo	Input	Rodné číslo	-	RRMMDD/XXXX	-
Rodné číslo	Literal	Rodné číslo	-	-	9204308787
Rodné číslo	Tag / Chip	RČ	Rodné číslo	-	RČ: 9204308787
Rodné číslo	Tabulka (Hlavička)	RČ	Rodné číslo	-	-
Rodné číslo	Tabulka (Buňka)	-	-	-	Normalizovaný numerický řetězec, např. 9204308787 (zarovnáno vpravo)
IČO	Text Input	IČO	-	např. 12345678	-
IČO	Literal	IČO	-	-	12345678
IČO	Tag / Chip	IČO	Identifikační číslo osoby	-	IČO: 12345678
IČO	Tabulka (Hlavička)	IČO	Identifikační číslo osoby	-	-
IČO	Tabulka (Buňka)	-	-	-	12345678 (zarovnáno vpravo)
DIČ	Text Input	DIČ	-	např. CZ1234567890	-
DIČ	Literal	DIČ	-	-	CZ9204308787
DIČ	Tag / Chip	DIČ	Daňové identifikační číslo	-	DIČ: CZ9204308787
DIČ	Tabulka (Hlavička)	DIČ	Daňové identifikační číslo	-	-
DIČ	Tabulka (Buňka)	-	-	-	CZ9204308787 (zarovnáno vpravo)
			Případ kombinací
RČ / IČO	Text Input	RČ / IČO	Rodné číslo nebo Identifikační číslo osoby	Zadejte RČ nebo IČO	-
RČ / IČO	Tabulka (Hlavička)	RČ/IČO	Rodné číslo nebo Identifikační číslo osoby	-	-
RČ / IČO	Tabulka (Buňka)	-	-	-	9204308787 nebo 12345678 (zarovnáno vpravo)

Mohou nastat ještě speciální případy kdy potřebujeme doplnit informace o čí rodné číslo, IČO, DIČ se jedná v takovém případě se doporučuje použít zkrácený zápis.

Příklad: RČ získatele

Nápovědný text: Pod polem je vhodné uvést stručný popis formátu. Například: "Ve tvaru RRMMDD/XXXX. Lomítko je volitelné." Pro cizince, kteří RČ nemají, je vhodné poskytnout alternativu, např. "Nemáte české rodné číslo? Zadejte datum narození.".

Textový vstup

Typ formátu u rodného čísla a to jestli použít lomítko je závislé na místě použití. V případě globálních vyhledávání kde se dá vyhledávat i podle čísla smluv, SPZ nebo jiné číselný hodnoty je vstup lomítka zakázán a uživatel může zadat jen číslo.

Tabulka doporučení pro vstupních hodnoty

Identifikátor	Doporučené možnosti vstupu
Rodné číslo (RČ)	Uživatelé by měli mít možnost zadat RČ i ve variantě s lomítkem (např. 781207/4800). Vstup následně musí projít normalizací do číselné hodnoty 7812074800
Identifikační číslo (IČO)	Pouze numerický vstup. Dále by měl systém akceptovat i IČO s méně než osmi číslicemi, přičemž by je měl zleva doplnit nulami, aby vždy vzniklo 8místné číslo
Daňové identifikační číslo (DIČ)	Uživatelé by měli mít možnost ideálně zadat DIČ i bez dvoupísmenkového identifikátoru (automatické doplnění CZ). Vstup by měl akceptovat i malé písmenka prefixu a ideálně ošetřit i častou chybu kdy uživatelé zamění CZ za CZK. Vstup by měl být následně normalizován (příklad: CZ9204308787)

2. Formátování

2. 1. Zarovnání textu

Zarovnání vlevo (Left-aligned):
- Pravidlo: Text by měl být standardně zarovnán vlevo s nepravidelným pravým okrajem.
- Kdy použít: Ideální pro většinu textových prvků, jako jsou odstavce, popisy, texty v tabulkách , položky v menu , drobečková navigace a popisky formulářových polí (labels). Nejpřirozenější pro delší texty.
- Vysvětlení: Usnadňuje čtení díky konzistentnímu levému okraji, který pomáhá uživateli najít začátek každého řádku. Zlepšuje čitelnost a scanovatelnost formuláře.
Zarovnání na střed (Centered):
- Pravidlo: Text je zarovnán na střed s nepravidelnými okraji na obou stranách.
- Kdy použít: Vhodné pro krátké nadpisy, titulky, názvy sekcí nebo krátké texty, kde je kladen důraz na vizuální symetrii nebo výraznost. Například krátké, výrazné nadpisy, záhlaví sekcí dashboardu, text pod ikonou (stepper)

Vysvětlení: Silné vizuální zarovnání, které upoutává pozornost, ale pro delší texty je náročné na čtení.

Zarovnání vpravo (Right-aligned):
- Pravidlo: Text je zarovnán vpravo s nepravidelným levým okrajem.
- Kdy použít v UI: Primárně pro číselná data v tabulkách a seznamech (např. ceny, množství, ID), kde usnadňuje vizuální porovnání hodnot a identifikaci řádů čísel.
- Vysvětlení: Ačkoliv není vhodné pro delší text, pro číselná data v tabulkách je nezbytné pro přehlednost a rychlou orientaci.
Zarovnání do bloku (Justified):
- Pravidlo: Text je zarovnán k oběma okrajům.
- Kdy (ne)použít v UI: Nikdy nepoužívejte pro delší texty v digitálním prostředí (web, aplikace). Mělo by se omezit pouze na tištěné materiály, kde jsou pokročilé typografické systémy.
- Vysvětlení: V online komunikaci často vede k nerovnoměrným mezerám mezi slovy ("řekám") , zhoršuje čitelnost a může být vnímáno jako křik nebo agrese.

2. 2. Zarovnání textu a čísel v tabulce

Obecné pravidlo:

Text: Zarovnání vlevo.
Čísla: Zarovnání vpravo.
Hlavičky sloupců: Zarovnání by mělo odpovídat zarovnání dat v daném sloupci. Pokud sloupec obsahuje text, hlavička by měla být zarovnána vlevo. Pokud obsahuje čísla, hlavička by měla být zarovnána vpravo.

Specifická doporučení:

Hlavička tabulky (záhlaví sloupců):
- Textové hlavičky: Zarovnejte vlevo. Příklad: Jméno klienta, Popis položky.
- Číselné hlavičky: Zarovnejte vpravo, aby odpovídaly číselným datům pod nimi. Příklad: Cena (CZK), Množství.
- Hlavičky s datem/časem: Zarovnejte vlevo pro formát DD.MM.YYYY nebo DD.MM.YYYY, HH:MM.
Buňky tabulky (data):
- Textová data: Vždy zarovnávejte vlevo. To zlepšuje čitelnost, protože levý okraj textu je konzistentní. Příklad: Produkt A, Praha.
- Číselná data: Vždy zarovnávejte vpravo. Toto zarovnání umožňuje snadné porovnání hodnot a vizuální identifikaci řádů čísel. Příklad: 1 250, 50 000.00.
- Identifikátory (číselné i textové): Zarovnávejte vlevo. Ačkoliv mohou obsahovat číslice, neslouží k matematickým výpočtům a je pro ně důležitější přehlednost při skenování. Zarovnání vlevo usnadňuje čtení díky konzistentnímu levému okraji. Příklad: Číslo smlouvy, PSČ, RČ: 9204308787.
- Datum a čas: Vždy zarovnejte vlevo pro formát DD.MM.YYYY (např. 01.03.2024) nebo DD.MM.YYYY, HH:MM (např. 07.12.2024, 07:12).
- Měnové hodnoty: Zarovnejte vpravo s oddělovačem tisíců a desetinných míst, pokud jsou relevantní. Doporučuje se používat "CZK" místo "Kč" pro finanční částky. Příklad: 1 200 CZK, 50 000 CZK.
- Procenta: Zarovnejte vpravo. Použijte mezeru, pokud je procento podstatným jménem (např. "Sleva 10 %"), a bez mezery, pokud je přídavným jménem (např. 10% sleva).
Patička tabulky (souhrnné řádky):
- Zarovnání dat v patičce by mělo kopírovat zarovnání sloupců nad nimi. Pokud souhrnná hodnota patří k číselnému sloupci, měla by být zarovnána vpravo. Pokud k textovému sloupci (např. Celkem), měla by být zarovnána vlevo.