A callouttal fontos információkat helyezhetünk el, tipikusan folyószövegekben.
Fejlesztői dokumentáció
Icon: A jelentést megerősítő információs vagy dekoratív ikon.
Title: A szöveges tartalom címe (opcionális)
Content: A callout szöveges tartalma.
Dismiss button: A calloutot bezáró gomb. (opcionális)
Actions: A callouthoz 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 callout brand színben és 4 szemantikus színben használható.
A háttérszínnél 4 erősség közül lehet választani. Ez biztosítja a komponens rugalmasságát.
A brand variánsban a komponenshez tartozó ikon tetszőleges ikonra cserélhető.
A callout keret nélkül és kerettel is használható.
Az ikon és a cím horizontális és vertikális elrendezést kaphat.
Mobilfelületeken érdemes a vertikális elrendezést használni, hogy ne legyen túl szűk a folyószöveg sorszélessége.
A callout opcionálisan bezárható a dismiss buttonnal.
Bezárható calloutot azoknál az információknál érdemes használni, amelyekről elég egyszer tájékoztatni a felhasználót.
Ha a calloutra reagálnia kell a felhasználónak, akciókat használunk. Az akciók Link vagy Button komponensek.
Az akciókat a szöveges tartalom alatt helyezzük el.
A callout címe opcionálisan elhagyható.
Ha nincs cím, horizontális elrendezésben a szöveges tartalom az ikonnal egy sorba kerül.
A komponensben található gombok és linkek interaktívak, és a design system sztenderd interakciós állapotainak logikáját követik.
A callout horizontálisan kitölti a rendelkezésre álló helyet. Magassága a benne lévő tartalomhoz igazodik.
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 használatá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.
Fontos, hogy ne vigyük túlzásba a callout használatát. Ha túl sok mindent emelünk ki, valójában semmi nem lesz kiemelt, mert a felhasználók – a bannerekhez és a hirdetésekhez hasonlóan – át fogják ugrani őket.
A calloutot hosszabb tartalmak összefoglalására is használhatjuk. Szorítkozzunk a lényegre, és ügyeljünk a tömörségre.
Ha felsorolásként fogalmazunk, 5-6 pontnál ne legyen hosszabb a felsorolás.
A globális, teljes szolgáltatásra vonatkozó üzeneteknél – például tervezett karbantartás, rendszerleállás – a Banner komponenst használjuk.
Callouttal az oldalon belül emelünk ki információkat.
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 általában teljes mondat, ezért a megfelelő mondatvégi írásjellel zárjuk.
Az akciókra vonatkozó szövegírási útmutatók a Button komponensnél találhatók.
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 komponens a design system sztenderd interakciós állapotainak logikáját követi, ezért a kontrasztcélok a komponens minden interaktív állapotánál biztosítottak.
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 callout 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.
A komponensben található dismiss gomb a Tab billentyűvel fókuszálható, a Space vagy az Enter billentyűvel aktiválható, és rendelkezik a design system sztenderd fókuszjelölőjével.
A callout ikonját alapértelmezetten elrejtjük az asszisztív technológiák elől, mert csak a szöveg jelentését erősítik meg.
