Empty states: Proč jsou důležitější, než si myslíte

Prázdná obrazovka, tabulka bez jediného řádku nebo vyhledávání, které nenašlo žádný výsledek. Takzvané empty states (prázdný stav) mohou na první pohled působit jako okrajová část uživatelského rozhraní. Ve skutečnosti však často rozhodují o tom, zda uživatel pochopí, co se právě stalo, objeví hlavní funkce produktu a dokáže udělat další krok. Dobře navržený prázdný stav proto není jen výplní volného místa, ale důležitou součástí uživatelské zkušenosti.

Co jsou empty states

Pojmem empty states se označuje stav stránky, aplikace nebo určité části uživatelského rozhraní, ve které momentálně není žádný obsah k zobrazení. Může jít například o prázdnou tabulku, seznam bez položek, složku bez souborů nebo vyhledávání, které nevrátilo žádný výsledek.

S empty states se uživatelé nejčastěji setkávají v těchto situacích:

• Při prvním použití – uživatel se s funkcí setkává poprvé a zatím nevytvořil žádný obsah. Rozhraní by mělo stručně vysvětlit přínos funkce a ukázat, jak začít.
• Po odstranění dat – obsah dříve existoval, ale uživatel jej smazal nebo přesunul. Empty state může nabídnout vytvoření nové položky, případně obnovení odstraněného obsahu, pokud je tato možnost dostupná.
• Při hledání bez výsledků – vyhledávání nebo zvolené filtry nevrátily žádnou položku. Vhodnou reakcí může být doporučení upravit dotaz, zrušit některý filtr nebo zkontrolovat překlep.
• Po dokončení práce – prázdný seznam může znamenat úspěch. Uživatel například vyřídil všechny úkoly nebo přečetl všechna upozornění. V tomto případě není nutné nutit ho k další akci. Důležitější je potvrdit, že má hotovo.
• Při chybě nebo chybějícím oprávnění – data existují, ale nelze je zobrazit. Rozhraní má jasně popsat příčinu a nabídnout realistický způsob nápravy, například požádání o přístup nebo dokončení nastavení.

Podle Carbon Design Systemu od IBM by měl prázdný stav uživateli vysvětlit, proč se žádný obsah nezobrazuje, co se na daném místě běžně nachází a jak může pokračovat. Součástí proto může být krátký nadpis, vysvětlení a konkrétní výzva k akci, například „Vytvořit první projekt“, „Nahrát soubor“ nebo „Zrušit filtry“.

Pokud rozhraní zůstane úplně prázdné, uživatel nemusí poznat, zda aplikace stále načítá data, nic nenašla, nebo narazila na chybu. Takové situace vyvolávají nejistotu a snižují důvěru v systém.

Empty state zároveň není totéž co stav načítání. Dokud aplikace na data čeká, měla by zobrazit indikátor průběhu nebo skeleton obrazovku. Hlášení o chybějícím obsahu má přijít až ve chvíli, kdy systém skutečně ověří, že nemá co zobrazit.

Proč jsou empty states důležitější, než vypadají

V návrzích se obvykle nejvíce pozornosti věnuje obrazovkám zaplněným ideálním obsahem. Skutečný uživatel se ale s produktem často poprvé setká právě ve chvíli, kdy ještě žádná data nemá. Prázdný stav se tak může stát jedním z prvních míst, na kterých si vytváří představu o fungování celé služby.

Dobře navržený empty state plní několik úloh současně:

• vysvětluje aktuální stav systému a omezuje nejistotu,
• představuje funkci v kontextu, tedy ve chvíli, kdy ji uživatel skutečně řeší,
• vede k dalšímu kroku a zkracuje cestu k prvnímu výsledku,
• pomáhá předcházet slepým uličkám, ze kterých by uživatel nevěděl, jak pokračovat,
• udržuje konzistentní tón produktu i mimo jeho hlavní scénáře.

Prázdný stav může fungovat také jako nenápadná forma onboardingu. Místo dlouhé úvodní prohlídky vysvětlí jednu konkrétní funkci přímo na místě. Microsoft ve Fluent 2 Design Systemu doporučuje předávat informace v kontextu úkolu a ve chvíli, kdy je uživatel připraven je využít. Empty states jsou podle tohoto přístupu vhodným prostorem pro krátké vysvětlení a jasnou výzvu k akci.

Z čeho se skládá dobrý prázdný stav

Empty state nemusí být složitý ani obsahovat velké množství textu. Měl by však uživateli rychle vysvětlit, proč se žádný obsah nezobrazuje, a pokud je to možné, nabídnout konkrétní cestu k dalšímu kroku. Při jeho návrhu se vyplatí zaměřit na několik základních pravidel: 

• Použijte výstižný nadpis – měl by uživateli okamžitě sdělit, co se děje. Obecné formulace jako „Nic tu není“ neposkytují potřebný kontext. Vhodnější je například „Zatím nemáte žádné projekty“, „Pro zvolené období nejsou dostupné žádné záznamy“ nebo „Vyhledávání nevrátilo žádné výsledky“.
• Přidejte krátké vysvětlení – doplňující text může objasnit, proč je prostor prázdný, co se zde později zobrazí a jaký přínos daná funkce nabízí. Uživatel nepotřebuje dlouhý návod, ale informace nutné k pochopení situace. Text by proto měl zůstat stručný a vztahovat se pouze ke konkrétnímu místu.
• Nabídněte jednu hlavní akci – pokud může uživatel stav změnit, měl by dostat přímou cestu k nejdůležitějšímu kroku. Tlačítko může nést například text „Vytvořit projekt“, „Nahrát soubor“, „Požádat o přístup“ nebo „Zrušit filtry“. Obecné formulace jako „Pokračovat“ neříkají, co se po kliknutí stane. Pokud existuje více možností, jednu označte jako hlavní a ostatní nabídněte méně výrazně.
• Používejte jednotné názvy – označení v empty state by měla odpovídat názvům tlačítek a funkcí ve zbytku rozhraní. Pokud se ovládací prvek jmenuje „Přidat člena“, neměl by text uživatele vyzývat k „Pozvání spolupracovníka“. Konzistentní pojmy pomáhají rychleji najít správnou funkci.
• Přizpůsobte text příčině prázdného stavu – stejné hlášení nelze použít při prvním spuštění, vyhledávání bez výsledků i technické chybě. Uživatel musí poznat, zda zatím žádná data nevytvořil, nemá potřebné oprávnění, nebo se obsah nepodařilo načíst. Každá situace vyžaduje jiné vysvětlení i jinou následující akci.
• Pomozte při vyhledávání bez výsledků – pouhé sdělení „Nebyly nalezeny žádné výsledky“ pouze potvrzuje stav, ale nepomáhá ho vyřešit. Užitečnější je zobrazit hledaný výraz, doporučit kontrolu překlepu, úpravu dotazu nebo odstranění některých filtrů. Podle typu webu lze nabídnout také související kategorie nebo podobný obsah.
• Zvolte přiměřený tón – odlehčená formulace může fungovat u prázdné schránky nebo dokončeného seznamu úkolů. U technické chyby, ztracených dat nebo nedostatečného oprávnění však může působit necitlivě. V těchto případech je vhodnější přímý, klidný a respektující jazyk, který situaci nezlehčuje ani nepřisuzuje chybu uživateli.
• Ilustraci používejte pouze tehdy, když pomáhá – obrázek nebo ikona mohou přitáhnout pozornost, podpořit charakter značky a zpříjemnit úspěšné dokončení úkolu. Nejsou však povinné. V malém panelu nebo při závažné chybě může být přesný text užitečnější než výrazná grafika. Ilustrace navíc nesmí nahrazovat důležitou informaci ani výzvu k akci.
• Myslete na přístupnost – důležité sdělení nesmí být ukryté pouze v obrázku. Tlačítka a odkazy musí mít jednoznačné názvy, být ovladatelné klávesnicí a mít viditelný stav zaměření. Pokud je ilustrace pouze dekorativní, měla by používat prázdný atribut alt, aby ji odečítač obrazovky zbytečně nepopisoval.
• Odlište empty state od načítání a chyby – hlášení „Žádná data“ by se nemělo zobrazovat ve chvíli, kdy aplikace obsah teprve načítá. Pro tento stav se hodí indikátor průběhu nebo skeleton obrazovka. Pokud načítání selže, je potřeba uživatele informovat o problému a nabídnout například možnost opakovat požadavek.

Na prázdné stavy je vhodné myslet už při tvorbě webových stránek, ať už používáte vlastní řešení, nebo redakční systém bez nutnosti programování. Měly by vznikat společně s ostatními variantami obrazovky, nikoli až na konci vývoje.

U hotového řešení se potom vyplatí ověřit, zda uživatelé sdělení správně chápou, snadno najdou nabízenou akci a dokážou bez zbytečného hledání dokončit svůj úkol.

Empty states jako příležitost

Empty states se zobrazují právě ve chvílích, kdy uživatel nemá obsah, výsledek ani jistotu, co bude následovat. Proto mohou ovlivnit zkušenost s produktem více než mnohé výraznější části rozhraní. Dokážou potvrdit stav systému, představit funkci, nabídnout řešení problému a dovést člověka k prvnímu úspěchu. 

Dobře navržený prázdný stav přitom nemusí obsahovat dlouhý návod ani propracovanou ilustraci. Často stačí přesný nadpis, krátké vysvětlení a jedno tlačítko, které skutečně vede dál. Prázdné místo tak přestává být opomenutým okrajem návrhu a stává se plnohodnotnou součástí produktu.

Pokud připravujete nový web, nezaměřujte se pouze na jeho podobu v ideálním stavu. Také při tvorbě webu v redakčním systému inPage se vyplatí promyslet, co návštěvník uvidí ve chvíli, kdy stránka, vyhledávání nebo některá část webu neobsahují žádná data.