Stavové indikátory — signalizace přítomnosti uživatele
Naučte se navrhovat jasné a intuitivní stavové tečky, které okamžitě informují o dostupnosti uživatele. Praktický průvodce techniky, barvami a umístěním, které fungují ve skutečných aplikacích.
Co jsou stavové indikátory?
Stavové tečky jsou malé vizuální prvky, které se objevují na avatarech uživatelů. Jejich úkolem je rychle signalizovat, zda je osoba online, offline nebo někde mezi tím. Nejčastěji je vidíte v aplikacích pro chat, v seznamech kontaktů nebo v týmových nástrojích.
Tato zdánlivě jednoduchá komponenta hraje důležitou roli v komunikaci. Když víte, že je váš kolega online, můžete ho okamžitě kontaktovat. Když je šedá, víte, že odpověď přijde později. Takto jednoduché, ale neuvěřitelně účinné.
Tři základní stavy
Ačkoli můžete vytvořit libovolný počet stavů, nejčastěji se v praxi setkáte s třemi: online, offline a away. Není potřeba si myslet, že je to komplikované — základní logika je velmi přímočará.
Online (zelená)
Uživatel je právě aktivní. Zelená barva signalizuje dostupnost a okamžitou komunikaci. Často se používá pro lidi, kteří jsou aktuálně v aplikaci.
Away (oranžová)
Uživatel je přihlášen, ale není aktivní. Možná se na chvíli odebral od počítače nebo telefonu. Oranžová barva znamená, že odpověď přijde, ale ne ihned.
Offline (šedá)
Uživatel je odhlášen nebo dlouho neaktivní. Šedá barva jednoznačně signalizuje, že osoba není dostupná. Komunikace musí počkat.
Poznámka o barvách
Barvy, které zde vidíte, jsou pouze příklady. V praxi se barvy liší podle platformy a jejích brand guidelines. Důležité je, aby byly dostatečně odlišitelné a aby měly dobrý kontrast. Všechny barvy by měly splňovat standard WCAG AA pro barevný kontrast — minimálně 4.5:1 pro text a 3:1 pro grafické prvky.
Umístění a velikost — zásady, které fungují
Poloha stavového indikátoru není náhoda. Nejčastěji se používá právý dolní roh avataru, a to z dobrého důvodu — tam ho vidíte snadno, ale neznepříjemňuje to foto.
Velikost tečky by měla být úměrná avataru. Pro avatary velikosti 40px je tečka obvykle 10-12px. Pro větší avatary (64px, 96px) můžete jít až na 14-16px. Hlavní pravidlo: tečka musí být vidět, ale nesmí dominovat.
Avatar 32px
Tečka: 8px
Avatar 48px
Tečka: 10px
Avatar 64px
Tečka: 12px
Avatar 96px
Tečka: 16px
Praktické techniky implementace
Stavové indikátory se dají implementovat několika způsoby. Nejčastěji se setkáte s metodou absolutního pozicování — tečka se umístí přesně na roh avataru pomocí CSS position: absolute. To je jednoduchý a spolehlivý přístup.
Jiný přístup používá CSS pseudo-elementy (::before nebo ::after). Výhoda: méně HTML elementů. Nevýhoda: obtížnější animace a dynamická změna barev. Oba přístupy fungují, záleží na vašich potřebách.
Nezapomeňte na přístupnost. Barva samotná nestačí. Pokud máte time, přidejte do SVG aria-label s popisem stavu — “Uživatel je online” nebo “Uživatel je offline”. Lidé se zrakovými problémy to budou vděční.
Výsledek — jednoduchá, ale efektivní komunikace
Stavové indikátory jsou skvělý příklad toho, jak malý detail vytváří velký rozdíl. Jedna malá tečka vám řekne vše, co potřebujete vědět o dostupnosti uživatele. Není to složité, není to fancy, ale je to extrémně užitečné.
Když navrhujete stavové indikátory pro vaší aplikaci, pamatujte: barvy musí být jasné, umístění konzistentní a velikost úměrná. A nezapomeňte na přístupnost — ne všichni vidí barvy stejně. Kombinujte barvu s dalšími signály. Když to uděláte správně, vaši uživatelé si ani neuvědomí, jak chytře to funguje.
