Bug Tracker Active
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 |