A bannerrel rendszerszintű információkat, üzeneteket jeleníthetünk meg a felület tetején.
Fejlesztői dokumentáció
Icon: A banner jelentését megerősítő ikon. (opcionális)
Content: A banner szöveges tartalma.
Dismiss button: A bannert bezáró gomb. (opcionális)
Actions: A bannerhez kapcsolódó akciók, Link vagy Button komponensként (opcionális)
Container: A komponens befoglaló eleme, amely különböző színvariációkban érhető el.
A banner brand színben és négy szemantikus színben használható. Az ikonok előre definiáltak, és a színek szemantikai jelentését erősítik meg.
A banner opcionálisan bezárható a dismiss butonnal.
Az ikon opcionálisan elhagyható.
A bannerekre általában reagálnia kell a felhasználónak, ezt akciókkal biztosíthatjuk. Az akciók Link vagy Button komponensek.
Az akciókat a szöveges tartalom alatt helyezzük el őket.
A komponensben található gombok és linkek interaktívak, és a design system sztenderd interakciós állapotainak logikáját követik.
A banner minimális szélessége 20rem.
A banner a felület vagy view tetején jelenik meg. Nem tapad a felület tetejéhez, együtt scrollozik a tartalommal.
Ha a szöveg hosszabb, mint a rendelkezésre álló hely, akkor több sorba törik. Az ikon ilyenkor is a szöveg tetejéhez igazodik.
A bezárható banner addig látható, amíg a felhasználó a dismiss buttonnal be nem zárja, vagy amíg egy egyéb művelet vagy változás miatt tárgytalanná nem válik.
A badge színe szemantikai jelentést hordoz, ezért az üzenetet és a színvariánst mindig össze kell hangolni. Ne használjuk pusztán dekoratív céllal a színeket, mert összezavarhatjuk a felhasználókat.
-
A brand, a neutral és az info színvariánst a közleményeknél és más, a felhasználói élmény szempontjából nem kritikus üzeneteknél használjuk.
-
A negative színvariánst csak azoknál a kritikus hibáknál használjuk, amelyek akadályozzák a szolgáltatás működését.
-
A warning színvariánst általában akkor használjuk, ha a szolgáltatás még használható, de hamarosan a felhasználó beavatkozására lesz szükség.
A címsor legyen rövid és leíró, emelje ki a legfontosabb információt.
A szöveg ne ismételje meg a címsort, és ne legyen több 1-2 rövid mondatnál.
-
A lényegre szorítkozunk, töröljük az üdvözlést és az elköszönést, és mindent, aminek a user journey adott pontján nincs jelentősége.
-
Ha bővebb magyarázatra van szükség, linkeljük a részletesebb tartalmat.
Címsoroknál csak akkor használunk mondatvégi írásjelet, ha kérdésként vagy felszólításként fogalmaztunk.
Ha a szöveg nem teljes mondat, csak egy rövid státusz – például Nincs internetkapcsolat –, szintén elhagyhatjuk a mondatvégi írásjelet.
Az akciókra vonatkozó szövegírási útmutatók a Button komponensnél találhatók.
A bannereket csak fontos, rendszerszintű üzeneteknél használjuk, és akár több munkameneten keresztül is megmaradhatnak.
Ha egy adott művelettel kapcsolatban szeretnénk visszajelezni, a Feedback message vagy a Modal dialog komponenst használjuk.
Egy felületen egyszerre mindig csak egy banner jelenhet meg.
Több üzenet esetén a magasabb prioritású banner jelenik meg. Az alacsonyabb prioritású banner csak az üzenet kezelése vagy a banner bezárása után jelenhet meg.
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özölnek információt, mivel a banner mindig tartalmaz szöveget is.
Í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ót.