A dropdownnal egy listából egy vagy több lehetőséget választhatnak ki a felhasználók.
Fejlesztői dokumentáció
Label komponens: A dropdown címe. A Label komponens opcionálisan helper textet, toggletipet és a required (kötelező) vagy az optional (nem kötelező) mezőket jelző indikátort is tartalmazhat.
Input field: A dropdown mező teljes interaktív területe.
Content: A felhasználó által kiválasztott opció. Üres, kitöltetlen állapotban placeholder szöveget is tartalmazhat.
Clear button: A beírt szöveg törlésére szolgáló gomb.
Menu: A kiválasztható lehetőségek befoglaló eleme.
Menu items: A kiválasztható lehetőségek.
A filterable opcióval a beviteli mezőbe írt szöveggel szűrhet a felhasználó a menu itemek között. Akkor érdemes használni, ha sok – 20-nál több – menu item van.
A dropdown két méretben – small és large – használható. A méretet a rendelkezésre álló hely és a felhasználói felület kontextusának megfelelően kell kiválasztani.
A dropdown loading állapotában a mező jobb szélén egy Loading spinner jelenik meg.
Akkor érdemes használni, ha a menu itemeket élőben töltjük be, és ez hosszabb ideig tart.
Disabled állapotban a komponens és a hozzá tartozó label halványabb, szürke megjelenést kap és nem interaktív.
Read-only állapotban a komponens nem interaktív, de filterable opciónál a szöveg kimásolható belőle.
Error (hiba) állapotban a komponens piros keretet kap. A feedback message a komponens alatt jelenik meg.
Success (sikeres vagy helyes) állapotban a komponens zöld keretet kap. Ha szükséges, ilyenkor is elhelyezhetünk feedback message-et a komponens alatt.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
A clear button és a menu itemek interaktívak, és külön állapotokkal rendelkeznek.
A dropdown minimális szélessége 7,5rem. Ez kényelmes aktiválási felületet biztosít mobilfelületeken is.
Ha a szöveg hosszabb a beviteli mezőnél, akkor kifut oldalra, és a mező görgethetővé válik.
A menu itemek több sorba törnek.
A mező teljes területe interaktív, és a hozzátartozó labelre való kattintás is aktiválja azt. A clear button és a menu itemek külön interaktív területet képeznek.
A menu itemek kiválasztása után a menu bezáródik, és a beviteli mező tartalma a kiválasztott menu itemre cserélődik.
A kiválasztott menu itemet háttérszínnel és ikonnal jelezzük.
Select opciónál az első, “Válasszon!” menu item csak az üres állapotot közli, és nem kiválasztható.
A mezőbe írt tartalom a clear buttonnal vagy az ESC billentyűvel törölhető.
Teljes mondat helyett a menu itemek lehetőleg 1-3 szóból álljanak. Ha mégis teljes mondatban fogalmaztunk, töröljük a töltelékszavakat és kerüljük a többszörösen összetett mondatokat.
A kontextuson belül ügyelni kell az egységes fogalmazásra. A menu itemek szóhasználata és hossza is legyen hasonló.
A menu itemeket érdemes valamilyen jellemző alapján sorba rendezni, hogy megkönnyítsük a keresést. Ez kontextustól függően lehet ABC-rend vagy fontossági sorrend.
A hibaüzenetekre vonatkozó szövegírási útmutatók a Feedback message komponensnél találhatók.
Ha a dropdown kötelező, de nem választott a felhasználó:
-
Válassza ki [az adatot / információt]!
-
Válassza ki az ingatlan típusát!
A filterable opcióval a beviteli mezőbe írt szöveggel szűrhet a felhasználó a menu itemek között. Akkor érdemes használni, ha dinamikusan állnak elő a menu itemek, vagy ha sok – 20-nál több – menu item van, ezért a böngészés nem lenne komfortos.
Dinamikusan előállított menu itemeknél a felhasználók nem feltétlenül tudják, hogy milyen lehetőségek közül választhatnak, ami használhatósági problémákat okozhat. Érdemes helper texttel vagy placeholder szöveggel segíteni a választást.
Dropdownt használunk, ha a keresés az űrlap része, és egy előre meghatározott listából választhat a felhasználó.
A Search fielddel az adott oldal vagy szolgáltatás teljes tartalmában kereshet a felhasználó.
10-nél kevesebb lehetőség esetén Radio buttont vagy Checkboxot használunk.
A Radio buttonnál és a Checkboxnál minden opció látható, ezért kisebb a kiválasztás interakciós költsége.
Mobilfelületeken a Tray komponenssel is megjeleníthetjük a menu itemeket.
A Tray megegyezik a natív platformok által használt sztenderdekke. Érintéssel egyszerűbb görgetni, illetve kiválasztani az opciókat.
A látható, egyértelmű labelek a dropdownok és az űrlapok használhatóságának kulcsai. Sem az úgynevezett floating labelek, sem a placeholderek, sem a csak ikonokkal jelzett mezők nem helyettesítik a labeleket, és számos használhatósági és akadálymentesítési problémát okoznak.
A labeleket csak nagyon indokolt esetben lehet elrejteni. Ilyenkor gondoskodni kell az akadálymentesítésről, és szakértővel kell validálni az implementációt.
A beviteli mező labelének egyértelműen le kell írnia, hogy milyen adatot várunk a felhasználótól. Ha a label kiegészítésre szorul, helper texttel vagy toggletippel segíthetünk a felhasználónak.
A helper text és a toggletip is helyben, navigálás nélkül elérhető, kontextuális segítség, ezért felfedezhetőbb és gyorsabb megoldás, mint például a súgó.
-
A helper textet a mező kitöltéséhez szükséges információk – például formátum – megjelenítésére használjuk.
-
A toggletip csak interakció után olvasható, ezért csak indokolt esetben, kevésbé fontos kiegészítő információkhoz használjuk.
Csak akkor használjunk helper textet vagy toggletipet, ha valóban szükség van rá! Érdemes felhasználói kutatásokkal vagy tesztekkel felmérni, hogy hol igényel segítséget a felhasználó.
A helper textet és a toggletipet a Label komponens tartalmazza.
A hibaüzeneteket – és a sikeres üzeneteket –, illetve a hozzájuk tartozó részletes útmutatókat a Feedback message komponens tartalmazza. A legfontosabb megfontolások:
-
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óknak is “megőrzik” azt. Ne hagyjuk el őket!
-
Az üzeneteket kódban asszociálni kell a hozzájuk tartozó mezőkkel. Erről a design system komponensei gondoskodnak.
-
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ó.
A kötelező mezőket a label mögötti piros csillaggal jelöljük. Ha minden mező kötelező, elhagyhatjuk a piros csillagot, elég kódban jelölni az asszisztív technológiák számára.
Az opcionális mezőket a label mögötti (Nem kötelező) szöveggel jelöljük. Ha egy űrlap kötelező és opcionális mezőket is tartalmaz, érdemes azt jelölni, amelyikből kevesebb van.
Ezeket a tulajdonságokat a Label komponens tartalmazza.
A dropdownokat a többi űrlapelemmel együtt egymás alá, balra rendezzük. Ez az elrendezés követi a szem természetes mozgását, és a nagyítóval böngészőket is támogatja.
Mobilfelületeken, illetve ha az űrlapot jellemzően mobilon töltik ki a felhasználók érdemes natív, a mobil platformok által szolgáltatott selectet használni, mert sok esetben ez jobban kézre fog állni a felhasználóknak.
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 és a clear button a Tab billentyűvel fókuszálható. Filterable opciónál az Esc billentyű is törli a beírt tartalmat, illetve bezárja a menu item listet.
A menu itemek között a kurzor billentyűkkel lehet navigálni.
Select opciónál a kiválasztás Enter vagy Space billentyűvel, filterable opció esetén csak Enter billentyűvel lehetséges. (A Space az input fieldbe írna.)
Ha az input field üres, select opciónál a felfelé nyíl billentyű nyitja ki a menu itemeket.
A menu itemek nem képeznek külön tab stopot. A DOM fókusz az inputon marad, a menu itemek csak vizuális fókuszt kapnak.
A komponenst a combobox pattern segítségével implementáljuk, aria-activedescendatot és virtuális fókuszt használva a menu itemeken.
Mind az alapértelmezett, mind a Tray megjelenítés egy natív select elemet is karbantart a háttérben.
A kiválasztott állapotot jelző ikon el van rejtve az asszisztív technológiák elől, hiszen a kijelölés tényét már más attribútumokkal közöljük.
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 label, a helper text és a feedback message is asszociálva van a dropdownhoz, így ezek mind elérhetőek az asszisztív technológiák számára, beleértve a required indicatort is. (Bővebb dokumentáció a Label komponensben.)
