A feedback message segítségével a beviteli mezők kitöltésével kapcsolatban adhatunk visszajelzést a felhasználónak.
Fejlesztői dokumentációA label mindig valamilyen beviteli mezőhöz kapcsolódik, ezért nem önálló komponens. Mivel minden beviteli mező tartalmazza, külön dokumentáltuk a működését.
Message: A visszajelzés szövege.
Icon: A visszajelzés jelentését megerősítő ikon, amely nem változtatható meg.
A feedback message variánsait meghatározott használati esetekre hoztuk létre, és a jelentésüknek megfelelően kell használni őket. A szín és az ikon megerősíti a jelentést.
A negatív variánst hibaüzenetek vagy sikertelen műveletek visszajelzésére használjuk.
A warning variánst figyelemfelhívásra használjuk.
A pozitív variánst sikeres műveletek visszajelzésére használjuk.
A komponens két méretben – small és large – használható. A feedback message mindig egy beviteli mezőhöz kapcsolódik, ezért a méretét a mező mérete határozza meg.
Alapértelmezetten a strong verziót használjuk. A felület többi elemétől és a kontextustól függően a subtle verzió is használható.
A hosszú feedback message-eket több sorba törjük.
A feedback message a hozzá tartozó beviteli mező alatt jelenik meg.
Beviteli mező csoportok – például Radio button – esetén a feedback message az utolsó elem alatt jelenik meg.
Mindig jelenítsük meg a hibaüzeneteket! A sikeres üzeneteket elhagyhatjuk, de vegyük figyelembe, hogy így csak egy zöld keret jelzi az állapotot, ami színvak felhasználók számára elveszítheti a szemantikai jelentését.
Az üzenetek előtt található ikonok megerősítik a színek szemantikai jelentését, így többek között a színvak felhasználók számára is megőrzik azt. Ne hagyjuk el őket!
Ne jelezzük túl korán a hibákat. Nem hiba, ha belekattint, majd kitöltés nélkül elhagyja a mezőt a felhasználó, hiszen előfordulhat, hogy csak ismerkedik az űrlappal. Viszont érdemes valós idejű hibakezelést használni azoknál a mezőknél, amiket nem biztos, hogy elsőre helyesen tölt ki a felhasználó.
Ha több beviteli mezőt is hibásan töltött ki a felhasználó, a feedback message-ek mellett érdemes összefoglalót is adni a hibákról.
-
Ha az űrlap beküldése újratölti az oldalt, az űrlap tetején helyezzük el a hibagyűjteményt.
-
Ha az űrlap beküldése nem tölti újra az oldalt, a gomb felett helyezzük el a hibagyűjteményt.
Segíthetünk a képernyőolvasót használó felhasználóknak, ha a hibagyűjteményre mozgatjuk a fókuszt. A hirtelen, gyors mozgás zavaró és dezorientáló lehet, ezért az automatikus görgetést kerüljük.
Ha a kontextus és a hiba jelentőssége indokolja, a feedback message mellett Modal dialogot is használhatunk a hiba visszajelzésére.
A feedback message mindig legyen pontos és tömör. Legfeljebb 1-2 rövid mondatból álljon.
A hibaüzeneteket mindig a felhasználó szemszögéből kell megfogalmazni. Ne csak azt írjuk le, hogy mi okozta a hibát, hanem azt is, hogy hogyan lehet megoldani.
-
Általános hibaüzenetek – például Kötelező mező vagy Hibás adat – helyett fogalmazzunk minél konkrétabban.
-
Kerüljük a felhasználó hibáztatását. Bánjunk óvatosan a felkiáltójelekkel, fogalmazzunk pozitívan vagy használjunk passzív hangnemet.
A hibaüzenetek jó gyakorlatait részletesen a Hibaüzenetek oldal tartalmazza.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A kontraszt minimumokat a design system legsötétebb – sötét módban a legvilágosabb – hátterén generáljuk, ezért ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A komponens állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. Így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információkat.
A feedback message ikonjai rejtettek az asszisztív technológiák elől, mert azok jelentése más attribútumokon keresztül már rendelkezésre állnak.
A feedback message asszociálva van a hozzá tartozó beviteli mezővel az asszisztív technológiák számára. A beviteli mezőn a hibaállapot kódban is jelezve van.
