Stavové zprávy (seznam)

Výběr komponenty pro zobrazení

Typy hlášek a kdy který použít

Pojďme si podrobněji rozebrat jednotlivé typy hlášek a ukázat si, kdy je ideální je nasadit. Díky tomu si zajistíme, že uživatelům dáváme vždycky tu nejrelevantnější informaci.

Info stav (Informační hlášky)

Kdy použít Pro neutrální, informativní sdělení, která dávají uživateli kontext nebo dodatečné informace, ale nevyžadují po něm žádnou okamžitou akci. Berte to jako "pro vaši informaci".

• Příklady použití:
  • Potvrzení méně významné akce: "Vaše nastavení bylo uloženo." (Pokud to není nic kritického, kde by bylo potřeba větší zdůraznění.)
  • Vysvětlení funkcionality: "Tato sekce zobrazuje vaši historii objednávek."
  • Návod nebo tip: "Pro rychlejší vyhledávání použijte zkratku Ctrl+F."
  • Stav, který není problém ani úspěch: "Připojení k internetu je stabilní."
  • Informace o probíhající akci, která nevyžaduje zásah: "Probíhá aktualizace dat."
• Jak psát: Buďte struční a jasní. Cílem je informovat, ne rušit.
  • Dobře: "Váš požadavek byl přijat a zpracovává se."
  • Dobře: "Můžete si prohlédnout náhled souboru před stažením."

Warning stav (Varovné hlášky)

Kdy použít: Když chcete signalizovat potenciální problém nebo situaci, která by mohla mít negativní důsledky, ale uživatel má stále možnost pokračovat nebo problém řešit. Je to spíš takové "pozor na tohle", ale ne "stop".

• Příklady použití:
  • Upozornění před možnou ztrátou dat: "Máte neuložené změny. Opravdu chcete odejít?"
  • Blížící se vypršení platnosti: "Vaše licence vyprší za 7 dní."
  • Nízká kapacita nebo nedostatek něčeho: "Dochází místo na disku." nebo "Máte jen 2 položky skladem."
  • Doporučení nebo upozornění na neoptimální stav: "Používáte zastaralý prohlížeč, některé funkce nemusí fungovat správně."
  • Upozornění na nečekané chování: "Tato akce může trvat déle než obvykle."
• Jak psát: Upozorněte uživatele na riziko, ale snažte se vyhnout panice. Ideálně navrhněte, co může uživatel udělat.
  • Dobře: "Vaše heslo je slabé. Doporučujeme ho změnit."
  • Dobře: "Neúplně vyplněný formulář. Ujistěte se, že jsou všechna povinná pole vyplněna."

Danger/Error stav (Chybové hlášky)

Kdy použít: Pro kritické problémy, které vyžadují okamžitou akci nebo brání uživateli v dokončení úkolu. Znamená to, že se něco zásadního pokazilo a uživatel nemůže pokračovat, dokud se problém nevyřeší. Tady je to "stop, něco je špatně".

• Příklady použití:
  • Nepodařilo se dokončit akci: "Uložení dokumentu selhalo."
  • Neplatné nebo chybějící vstupní údaje: "Zadané uživatelské jméno nebo heslo je nesprávné."
  • Systémová chyba: "Došlo k interní chybě serveru."
  • Nedostatečná oprávnění: "Nemáte oprávnění k provedení této akce."
  • Nemožnost pokračovat: "Soubor nelze otevřít, je poškozený."
• Jak psát: Buďte přímí a jasní. Vysvětlete, co se stalo, a hlavně, jak to uživatel může opravit nebo co se od něj očekává. Vyhněte se technickému žargonu a obviňování uživatele.
  • Dobře: "Zadaný e-mail již existuje. Zkuste prosím jiný, nebo se přihlaste."
  • Dobře: "Nemáte přístup k této sekci. Kontaktujte prosím administrátora pro získání oprávnění."

Chyby ve formulářových prvcích (Invalid Input State)

Kdy použít: Když uživatel nesprávně vyplní formulářový prvek a data neodpovídají očekávanému formátu, rozsahu, nebo jsou povinná a chybí. a tyto chyby brání odeslání formuláře nebo dokončení akce, dokud není chyba opravena.

• Jak zobrazit:
  • "Invalid" stav prvku: Samotný formulářový prvek (např. input) vizuálně signalizuje chybu. Toho se typicky dosáhne změnou ohraničení prvku na červenou barvu, tak jak je popsáno v našem design systému ve Figmě.
  • Červený popis pod prvkem: Pod chybně vyplněným prvkem by se měl zobrazit krátký, výstižný a červeně zbarvený popis chyby. Tento text by měl uživateli jasně říci, co je špatně a v ideálním případě i to jak to opravit.
• Příklady použití:
  • Chybějící povinné pole: "Toto pole je povinné." nebo "Prosím, vyplňte toto pole."
  • Neplatný formát e-mailu: "Zadejte platnou e-mailovou adresu (např. jmeno@domena.cz)."
  • Heslo nesplňuje požadavky: "Heslo musí mít alespoň 8 znaků, obsahovat velké a malé písmeno a číslici."
  • Hodnota mimo rozsah: "Zadejte číslo mezi 1 a 100."
  • Nezaškrtnutý souhlas: "Pro pokračování je nutné souhlasit s obchodními podmínkami."
• Jak psát:
  • Buďte přímí a konkrétní ohledně chyby.
  • Vyhněte se technickému žargonu a obviňování uživatele.
  • Navrhněte řešení nebo co je třeba udělat pro opravu.
  • Buďte struční, ale dostatečně informativní.
  • Použijte jazyk, který je konzistentní s ostatními chybovými hláškami v systému.

Success stav (Úspěšné hlášky)

Kdy použít: Pro potvrzení, že akce uživatele byla úspěšně dokončena a systém je ve správném stavu. Je to pro uživatele důležitá pozitivní zpětná vazba.

• Příklady použití:
  • Úspěšné dokončení transakce: "Vaše objednávka byla úspěšně odeslána."
  • Uložení změn: "Změny byly uloženy." (Zvláště u důležitých nastavení.)
  • Vytvoření nového prvku: "Nový uživatel byl úspěšně přidán."
  • Úspěšné odeslání: "Vaše zpráva byla odeslána."
• Jak psát: Buďte struční, pozitivní a jednoznační. Uživatel chce rychlé a jasné potvrzení.
  • Dobře: "Váš profil byl aktualizován."
  • Dobře: "Soubor byl úspěšně nahrán."