A language selector (nyelvválasztó) patternnel a felületek megjelenítési nyelvét módosíthatják a felhasználók.
A nyelvválasztó a
A komponens működése desktop és mobil nézetben azonos, így a felhasználók ugyanazzal az interakcióval válthatnak nyelvet minden eszközükön.
Két nyelv esetén a komponens egyszerű gombként működik, amely közvetlen váltást biztosít a másik nyelvre. A gomb mindig a választható nyelvet mutatja.
Ebben az esetben nem jelenik meg lenyíló lista, ezért a komponens viselkedése egy navigációs elemhez hasonlít.
Kettőnél több nyelv esetén a gomb egy lenyíló listát nyit meg. A gomb mindig az aktuális nyelvet jeleníti meg, és egy ikon jelzi, hogy további nyelvek érhetők el.
A lenyíló lista az összes választható nyelvet tartalmazza. Az aktuális nyelv jól láthatóan ki van emelve. A nyelv kiválasztása után a lenyíló lista bezáródik, és a felület a kiválasztott nyelvre vált.
Mobil nézetben a működés megegyezik a desktop verzióval, de a nyelvválasztó jellemzően teljes szélességű elemként vagy a navigációs menü részeként jelenik meg.
- Két nyelv esetén a nyelvválasztó közvetlen váltást biztosító gombként működik.
- Kettőnél több nyelv esetén egy külön listaoldal jelenik meg az elérhető nyelvekkel.
Alternatív megoldásként a Content switcher komponens akkor használható, ha
- két nyelv közül választhat a felhasználó,
- a nyelvváltás a felület kiemelt funkciója, vagy
- a felhasználónak folyamatosan látnia kell az elérhető nyelveket.
A nyelvválasztó a globális navigáció részeként, jellemzően a fejléc jobb oldalán jelenik meg. A teljes felületre vonatkozó beállításokat általában itt keresik a felhasználók, ezért a nyelvválasztó itt a legkönnyebben felfedezhető számukra.
A nyelvválasztót a felület minden oldalán azonos helyen kell elhelyezni.
A nyelvválasztó általában nem tartozik az elsődleges felhasználói feladatok közé, ezért vizuálisan nem dominálhatja a felületet. Fontos, hogy jól látható és könnyen megtalálható legyen, de nem vonhatja el a figyelmet a fő tartalomról.
A nyelvválasztó célja, hogy a felhasználó gyorsan és egyértelműen azonosíthassa a választható vagy az aktuális nyelvet, és szükség esetén könnyen válthasson.
A gomb labele (szövege) legyen a lehető legtömörebb – jellemzően csak a nyelv teljes natív neve –, és ne tartalmazzon felesleges információkat.
- Két nyelv esetén a gomb szövege a választható nyelv teljes natív neve (pl. English).
- Kettőnél több nyelv esetén a gomb szövege az aktuális nyelv teljes natív neve.
A lenyíló listában a nyelvek szintén a teljes natív formájukban szerepeljenek (pl. English, Magyar, Italiano).
Zászlók használata sem önmagukban, sem a gomb szövegének kiegészítéseként sem javasolt, mert a zászlók nem mindig jelölik egyértelműen a nyelvet. (Egy nyelvet több országban is beszélhetnek, és egy országnak több hivatalos nyelve is lehet.)
A nyelvválasztó ikonja nincs szigorúan meghatározva, a pattern többféle megoldást is megenged. Az ikon lehet:
- translate ikon,
- globe vagy global ikon,
- nyelvi rövidítést tartalmazó ikon vagy kombinált megoldás.
Az ikonok származhatnak a projektben használt icon libraryből vagy más, a designnal összhangban lévő ikoncsaládból.
A design system három megoldást mutat be. A megoldások közül egyik sem kötelező, de a választott megoldást a teljes felületen következetesen kell használni.
A nyelvválasztó egy gomb komponensből épül fel, amely szükség esetén lenyíló listával egészül ki.
Az összeállítás lépései:
- Válassz ki egy megfelelő gomb variánst.
- Cseréld ki a leading ikont az általad választott ikonra (pl. "icon-translate-2", "icon-earth-fill" vagy "icon-global-line").
- Állítsd be a gomb szövegét a kívánt nyelvi jelölésnek megfelelően.
- Több nyelv esetén egészítsd ki a gombot egy jobboldali chevronnal és a menü komponens lenyíló listájával.
- A lang="" attribútum használata minden oldal esetén kötelező. Értéke az oldalon használt szöveg nyelvének ISO 639-1 nyelvkódja.
- A lang attribútum értékének nyelvváltás esetén a kiválasztott nyelv ISO 639-1 nyelvkódjára kell módosulnia.
- A nyelvváltó gombnak elérhetőnek és működtethetőnek kell lennie billentyűzettel és képernyőolvasó szoftverrel is.
- Ha a gomb szövege mellett szerepel ikon, akkor az ikont el kell rejteni a képernyőolvasó szoftverek elől.
- A gomb szövegének megfelelő kontrasztaránnyal kell rendelkeznie:
- 18 képpont méret alatt a háttérhez viszonyítva 4,5:1,
- legalább 18 képpont vagy félkövér szövegnél legalább 14 képpont esetén 3:1.
- A gomb ikonjának megfelelő kontrasztaránnyal kell rendelkeznie. Az elvárt kontrasztminimum a háttérrel 3:1-hez.
A nyelvválasztás jellemzően nem külön komponensként jelenik meg, hanem egy gomb és lenyíló lista kombinációjára épül.
Két nyelv esetén közvetlen váltás, több nyelvnél dropdown alapú kiválasztás a bevett megoldás. Ez a minta nemcsak nemzetközi design systemekben, hanem a hazai DÁP Design System partnereinél is elterjedt.
Termék és forrás: Digitális Állampolgárság Program (hivatalos weboldal)
Miért jó UX megoldás: A felület célja az ügyintézés egyszerűsítése és egységesítése, így a nyelvválasztás is egy globális, könnyen elérhető helyen jelenik meg. A fejlécben elhelyezett, egyszerű megoldás jól illeszkedik a rendszer egészéhez, amely a gyors, átlátható és mobilról is könnyen használható ügyintézést támogatja.
