Prázdné stavy

Prázdné stavy (angl. empty states nebo zero-data states) jsou nevyhnutelné okamžiky v rozhraní, kdy není k dispozici žádný obsah. Namísto toho, aby působily prázdně nebo jako chyba, jsou to strategickou příležitostí, jak uživatele informovat, vést a budovat důvěru.

Anatomie prázdného stavu

Vizuální prvek (volitelný) Ikona nebo ilustrace, která vizuálně podpoří sdělení.
Titulek Stručná zpráva vysvětlující situaci.
Popis (Volitelný) Širší kontext a návod pro další kroky.
Výzva k akci CTA (Volitelný) Volitelné tlačítko s jasným a akčním slovesem.

TODO: Doplnit o obrázek

Typy a kontext

Správný přístup k prázdnému stavu závisí na jeho kontextu a příčině. Je klíčové rozlišovat dva hlavní typy, které se liší uživatelskou motivací:

Empty State (Prázdný stav) Nastává, když uživatel ještě neprovedl žádnou akci k vytvoření dat (např. nový účet). Cíl je uživatele motivovat k první akci, která prostor zaplní (např. „Přidat nový účet“).
Zero Results State (Stav nulových výsledků) Vzniká, když vyhledávání nebo filtrace nevrátí žádné výsledky. Cíl je pomoci uživateli upravit dotaz a vrátit ho na produktivní cestu (např. „Vyčistit filtry“).

Další typy prázdných stavů:

První použití (Blank Slate) Ideální pro edukaci a představení účelu funkce.
Uživatelem vyčištěná data Používá se k oslavě úspěchu a návrhu dalších úkolů (např. prázdný seznam úkolů).
Chybové stavy Vyžadují maximální transparentnost a jasné instrukce, jak problém vyřešit.

Principy copywritingu

Dodržujte tyto principy:

Odpovězte na 3 otázky: Co se děje? Proč se to děje? Co má uživatel dělat dál?
Tón: Vždy pozitivní, povzbudivý a empatický. Vyhněte se žargonu a humoru, který by mohl působit neprofesionálně.
Stručnost: Titulek do jednoho řádku, popis max. tři řádky.
CTA: Používejte akční slovesa (např. „Vytvořit“, „Přidat“) a vyhněte se vágním výrazům (jako „OK“). Používejte spíše sekundární tlačítka.

Čemu se vyhnout

Obviňování uživatele: Vyvarujte se textací jako "Váš dotaz nebyl nalezen" nebo "Zadali jste špatné filtry". Lepší je neutrální "Pro tento dotaz nebyly nalezeny výsledky".
Slepé uličky: Prázdný stav bez jakékoliv výzvy k akci (CTA) nebo nápovědy. Uživatel neví, co má dělat dál.
Technický žargon: Vyhněte se hláškám jako "Error 404" nebo "Null response". Mluvte lidskou řečí.

Doporučené ikony

Kontext	Ikona	Zdůvodnění
Prázdný stav / Nulová data	empty-set	Vizuálně srozumitelné pro prázdné seznamy, dokumenty nebo zprávy.
Žádné výsledky vyhledávání nebo filtrace	magnifying-glass-minus	Jasně signalizuje, že vyhledávání nebo filtrace nebyly úspěšné.
Chybový stav	circle-exclamation	Standardní a univerzální symbol pro varování a chyby
Chybějící připojení	wifi-slash	Okamžitě sděluje problém s připojením
Uživatelem vyčištěná data	check-circle	Symbolizuje dokončení a úspěch, vhodné pro stavy po dokončení všech úkolů.

Kdy použít pouze text: V malých komponentách (dlaždice, notifikace), kde hrozí vizuální chaos, je často vhodnější omezit se pouze na text.

Doporučené textace UI prvků

Tyto texty vycházejí z textů, které aktuálně používáme u UI komponent.

Komponenta / Klíč	Původní textace	Návrh na vylepšení
AutoComplete emptyResults	Žádné výsledky
AutoComplete prompt	Zadejte text pro vyhledávání	Začněte psát pro vyhledání... (Důvod: Je to aktivnější a modernější výzva k akci.)
ErrorPage page404.title	Stránka nenalezena
ErrorPage page404.subtitle	Stránku se mi bohužel nepodařilo najít.	Zkontrolujte zadanou adresu nebo se vraťte na domovskou stránku. (Důvod: návrhuje řešení situace)
General newItem	Záznam neexistuje.	Záznam neexistuje (Důvod: Vizuální zjednodušení)
HorizontalList noItems	žádná položka	Žádné položky k zobrazení (Důvod: Gramaticky správnější a jasnější.)
MultiSelect / Select noOptions	Žádné možnosti
Table noRowsToShow	Nebyly nalezeny žádné záznamy	Nebyly nalezeny žádné záznamy. Zkuste prosím upravit filtry. (Důvod: Doplňuje informaci o nápovědu, co má uživatel dělat dál.)
Validations tooManyResults	Nalezeno příliš mnoho výsledků, upřesněte vyhledávací kritéria.	Bylo nalezeno příliš mnoho výsledků. Upřesněte prosím kritéria vyhledávání. (Důvod: Rozdělení do dvou vět zlepšuje čitelnost a srozumitelnost.)

Doporučené návrhy textací pro různé komponenty a situace

Komponenta	Typ situace (Příčina)	Doporučený titulek/text	Doporučený popis / CTA	Doporučená ikona
Tabulka	První použití	Zatím zde nemáte žádné záznamy	Jakmile vytvoříte první záznam, uvidíte ho zde	empty-set
	Nulové výsledky	Nebyly nalezeny žádné záznamy	Zkuste upravit nebo zrušit použité filtry	magnifying-glass-minus
	Chybový stav	Záznamy se nepodařilo načíst	Došlo k technické chybě. Zkuste prosím akci zopakovat.	circle-exclamation
Graf	První použití	Pro zobrazení dat vyberte období nebo nastavte potřebné filtry (Text je nutno upravit podle obsahu/filtrů)	Po zvolení filtrů se na tomto místě zobrazí příslušný graf	filter
	Nulové výsledky	Pro zadané filtry neexistují žádná data	Zkuste prosím změnit časové období nebo upravit parametry. Upravit filtry	magnifying-glass-minus
	Nedostatek dat	Nedostatek dat pro vykreslení	Pro vytvoření této vizualizace je potřeba více datových bodů. (tooltip)	chart-line
	Chybový stav	Graf se nepodařilo načíst	Při načítání dat došlo k chybě. Zkusit znovu	circle-exclamation
Seznam (List)	První použití	Zatím zde nemáte žádné položky	Vytvořte první položku a zobrazí se v tomto seznamu. Vytvořit položku (Text je dobré přizpůsobit kontextu)	empty-set
	Nulové výsledky	Nebyly nalezeny žádné položky	Vašemu výběru neodpovídají žádné položky.Zrušit filtry	magnifying-glass-minus
	Úspěšné dokončení	Vše hotovo!	Nemáte žádné další úkoly. Dobrá práce!(Informativní stav)	check-circle
Vyhledávání	Nulové výsledky	Žádné výsledky (prostor pro výsledky)	Pro hledaný výraz nebylo nic nalezeno. Zkuste ho zadat jinak. Nové hledání	magnifying-glass-minus
	Stav před interakcí	Zadejte text pro vyhledávání (placeholder)	Začněte psát a my prohledáme dostupné záznamy.(Implicitní akce - psaní)	search
Select / MultiSelect	Prázdný seznam	Žádné možnosti	Pro tento výběr nejsou k dispozici žádné možnosti. (tooltip)	list-ul
	Nulové výsledky	Nic nenalezeno	Vašemu hledání neodpovídá žádná možnost.(Implicitní akce - úprava hledání)	magnifying-glass-minus
Dashboard / Karta	První použití	Vítejte!	Nastavte si svůj dashboard nebo přidejte první widget. Přidat widget	dashboard
	Chybový stav	Widget se nepodařilo načíst	Došlo k chybě při načítání dat pro tuto kartu.Obnovit widget	circle-exclamation
Notifikace	Úspěšné dokončení (smazání seznamu)	Nemáte žádná nová upozornění	Všechny notifikace máte přečtené. Jste v obraze! Zobrazit historii	bell / check-circle