Az avatár személyek vagy felhasználói profilok vizuális megjelenítésére szolgáló komponens.
Az avatárt akkor használjuk, ha fontos, hogy a felhasználók gyorsan azonosítani tudják a különböző személyeket. Segítségével könnyebben felismerhetők a tartalmak, feladatok vagy folyamatok tulajdonosai, felelősei vagy közreműködői.
Gyakori felhasználási területek:
- Felhasználói profilok
- Szervezeti egységek és csapatok
- Kommunikációs felületek (pl. levelező, chat, stb.)
- Események és tevékenységek
- Együttműködési és megosztási felületek
- Feladat- és ügykezelő rendszerek
Gyakori felhasználási célok:
- Személyek azonosítása
- Ügyintézők és szervezeti szereplők megjelenítése
- Tulajdonosok, felelősök és közreműködők jelölése
- Címzettek és küldők megjelenítése
Az avatár önmagában általában nem elegendő az azonosításhoz, ezért érdemes névvel vagy más, egyértelmű azonosító adattal együtt megjeleníteni.
Az avatár alapértelmezett megjelenítése a profilkép. Ha nem elérhető a felhasználó profilképe, akkor a következő helyettesítési sorrendet követjük:
-
Monogram: Vezetéknév és keresztnév kezdőbetűi (legfeljebb 2 karakter)
-
Ikon: Általános felhasználó ikon
A státuszjelző az avatárhoz kapcsolódó aktuális állapotot jelenít meg (pl. online jelenlét, új aktivitás, rendszerállapot).
Az opcionális keret segít elkülöníteni az avatárt a háttértől. A választható kerek vagy lekerekített négyzet forma az entitás típusához igazítható.
Az avatár 7 méretben érhető el:
- 2xSmall
- xSmall
- Small
- Medium
- Large
- xLarge
- 2xLarge
A méret kiválasztásánál figyelembe kell venni a környező tartalmakat és az információk hierarchiáját.
A kisebb méreteket olyan felületeken használjuk, ahol jellemzően sok elem vagy információ jelenik meg (pl. listák, táblázatok). A nagyobb méreteket olyan helyeken használjuk, ahol hangsúlyosabb a felhasználó személye (pl. profiloldalak, részletes adatlapok).
Ha az avatár interaktív – pl. kattintásra a profilra navigál –, akkor a kattintási célméretnek legalább 44×44 px-nek kell lennie.
A kerek avatár a leggyakrabban használt variáció. Alapértelmezetten ezt használjuk profiloknál és felhasználói fiókoknál.
A lekerekített négyzet alakú avatárt akkor használjuk, ha a termék vagy szolgáltatás arculata indokolja, vagy ha különböző típusú profilokat – pl. személyek és intézmények profiljait – vizuálisan meg szeretnénk különböztetni egymástól.
A keret segít elkülöníteni az avatárt a háttértől vagy az avatár körül lévő vizuális elemektől.
A keret nélküli avatár letisztultabb és visszafogottabb. Alapértelmezetten ezt használjuk semleges vagy kontrasztos háttér esetén.
Az avatár opcionálisan státuszjelzőt is tartalmazhat.
A státuszjelzőt csak akkor használjuk, ha olyan információt közvetít, amely releváns a felhasználó számára. Kerüljük a dekoratív, információt nem hordozó használatot.
A státuszjelző mérete és pozíciója automatikusan igazodik az avatár méretéhez.
Az avatár nem helyettesíti a felhasználó nevét vagy más azonosító adatát. Ezeket minden esetben meg kell jeleníteni, ha a feladat végrehajtásához szükség van erre az információra.
Ha az avatár képet tartalmaz, akkor az alternatív szöveg a felhasználó neve vagy a kontextusnak megfelelő egyértelmű azonosító adata.
Ha az avatár kattintható, legyen értelmezhető a cél vagy művelet leírása (pl. Kovács Anna profilja), és jól látható fókuszjelölés.
A státuszjelző által közvetített információt ne kizárólag színnel jelenítsük meg. A jelentésnek szöveges vagy egyéb módon is elérhetőnek kell lennie az asszisztív technológiákat használó felhasználók számára.
- Használjunk következetes méretet azonos kontextuson belül.
- Az avatárt lehetőleg névvel vagy más egyértelmű azonosító adattal együtt jelenítsük meg.
- Csak releváns státuszokat mutassunk.
- Törekedjünk jó minőségű és jól kivágott profilképek használatára.
- Azonosítás kizárólag avatár alapján.
- Túl sok státusz vagy jelentés egyidejű megjelenítése.
- Túl kicsi avatár használata olyan helyen, ahol fontos az azonosítás.
- Dekoratív, információt nem hordozó státuszjelzők használata.
