Tehát mi a különbség a kombinált doboz, a multiselect, a listbox és a legördülő menü között? Bár ezek a felhasználói felület összetevői hasonlónak tűnhetnek, eltérő célokat szolgálnak. A választás gyakran a rendelkezésre álló lehetőségek számától és azok láthatóságától függ. Lássuk, miben különböznek egymástól, milyen célt szolgálnak, és hogyan válasszuk ki a megfelelőt – elkerülve a félreértéseket és a rossz elvárásokat.
Nem minden listaminta ugyanaz Az összes fent kiemelt felhasználói felületnek pontosan egy közös vonása van: támogatják a felhasználók interakcióit a listákkal. Ezt azonban kissé másképp teszik. Nézzük meg mindegyiket egyenként:
A legördülő menü → lista el van rejtve, amíg ki nem váltja. Combobox → írja be a szűréshez + válasszon 1 lehetőséget. Többszörös kijelölés → írja be a szűréshez + válasszon sok lehetőséget. Listadoboz → az összes listaopció alapértelmezés szerint látható (+ görgetés). Dual listbox → elemek mozgatása 2 listbox között.
Más szavakkal, a Combobox a szövegbeviteli mezőt egy legördülő listával kombinálja, így a felhasználók gépelhetnek a szűréshez, és kiválaszthatnak egyetlen lehetőséget. A Multiselect segítségével a felhasználók számos lehetőséget választhatnak (gyakran tablettákként vagy zsetonként jelennek meg). A listadobozok az alapértelmezés szerint látható összes listalehetőséget megjelenítik, gyakran görgetéssel. Akkor hasznos, ha a felhasználóknak azonnal látniuk kell az összes elérhető lehetőséget. A kettős listadoboz (más néven átviteli lista) a listbox egy olyan változata, amely lehetővé teszi a felhasználók számára, hogy elemeket mozgassanak két listamező között (bal ↔ jobb), jellemzően tömeges kijelölés céljából. Soha ne rejtse el a gyakran használt opciókat Ahogy fentebb említettük, a megfelelő felhasználói felület komponens kiválasztása két tényezőtől függ: hány listalehetőség áll rendelkezésre, és hogy ezeknek az opcióknak alapértelmezés szerint láthatóknak kell lenniük. Minden lista tartalmazhat fastruktúrát, egymásba ágyazást és csoportkijelölést is.
Van egy alapelv, amelyet évek óta követek minden UI összetevő esetében: soha ne rejtsd el a gyakran használt opciókat. Ha a felhasználók gyakran támaszkodnak egy adott kijelölésre, akkor nagyon kevés érték van elrejteni előlük. Vagy előre kiválaszthatjuk, vagy (ha csak 2-3 gyakran használt opció van) megjeleníthetjük chipekként vagy gombokként, majd a lista többi részét az interakciónál. Általában jó ötlet mindig megjeleníteni a népszerű lehetőségeket – még akkor is, ha ez összezavarhatja a felhasználói felületet. Hogyan válasszuk ki melyiket? Nem minden listára van szükség összetett kiválasztási módszerre. Az 5-nél kevesebb elemet tartalmazó listák esetében általában az egyszerű rádiógombok vagy jelölőnégyzetek működnek a legjobban. Ha azonban a felhasználóknak a lehetőségek nagy listájából kell választaniuk (pl. 200+ elem), akkor a Combobox + Multiselect hasznos a gyorsabb szűrés (pl. országválasztás) miatt.
A listadobozok akkor hasznosak, ha az embereknek egyszerre több opcióhoz kell hozzáférniük, különösen akkor, ha ebből a listából is több lehetőséget kell választaniuk. Hasznosak lehetnek a gyakran használt szűrőkhöz.
A kettős listadobozt gyakran figyelmen kívül hagyják és figyelmen kívül hagyják. De nagyon hasznos lehet összetett feladatoknál, például tömeges kiválasztásnál, vagy szerepek, feladatok, felelősségek kiosztásánál. Ez az egyetlen felhasználói felület-összetevő, amely lehetővé teszi a felhasználók számára, hogy a teljes kiválasztási listát a forráslistával párhuzamosan tekintsék át, mielőtt elkötelezik magukat (más néven „átviteli lista”). Valójában a kettős lista gyakran gyorsabb, pontosabb és könnyebben elérhető, mint a fogd és vidd. Használhatósági szempontok Fontos tudnivaló, hogy minden listatípusnak támogatnia kell a billentyűzetes navigációt (például a ↑/↓ nyílbillentyűket) a kisegítő lehetőségekhez. Vannak, akik szinte mindig a billentyűzetre hagyatkoznak a lehetőségek kiválasztásához, miután elkezdenek gépelni.
Azon túl:
A 7+ opciót tartalmazó listák esetén fontolja meg az „Összes kijelölése” és „Összes törlése” funkciók hozzáadását a felhasználói interakció egyszerűsítése érdekében. Hosszabb, kombinált listát tartalmazó listák esetén kattintson/koppintson minden beállítást a felhasználók elé, különben soha nem látják őket, A legfontosabb, hogy a félreértések elkerülése érdekében ne jelenítsen meg nem interaktív elemeket gombként – és ne jelenítsen meg interaktív elemeket statikus címkeként.
Összefoglaló: Nem minden egy legördülő lista A nevek számítanak. A lehetőségek függőleges listáját általában „legördülő listának” nevezik – de gyakran túl általános ahhoz, hogy értelmes legyen. A „legördülő menü” arra utal, hogy a lista alapértelmezés szerint el van rejtve. A „többszörös kijelölés” a listán belüli többszörös kijelölést (jelölőnégyzet) jelenti. A „Combobox” szövegbevitelt jelent. A „Listbox” pedig egyszerűen a kiválasztható elemek listája, amely mindig látható. A cél nem az, hogy a fenti definíciókkal összhangban legyen. De inkább a szándékok összehangolása érdekében – beszéljen ugyanazt a nyelvet, amikor dönt, tervez, épít, majd használ ezekről a felhasználói felület-összetevőkről. Ennek működnie kellmindenki – tervezők, mérnökök és végfelhasználók – mindaddig, amíg a statikus címkék nem úgy néznek ki, mint az interaktív gombok, és a rádiógombok nem jelölőnégyzetként működnek. Ismerje meg az „AI-interfészek tervezési mintáit” Ismerje meg az AI-interfészek tervezési mintáit, Vitaly új videotanfolyamát valós termékek gyakorlati példáival – egy élő UX képzéssel hamarosan. Ugrás az ingyenes előnézethez. Ismerje meg a mesterséges intelligencia-interfészek tervezési mintáit, Vitaly interfésztervezésről és UX-ről szóló videotanfolyamát.
Videó + UX tréning Csak videó Videó + UX képzés 450,00 USD 799,00 USD
Szerezzen be videót + UX-képzés 30 videóleckét (10 óra) + élő UX-képzést. 100 napos pénz-visszafizetési garancia. Csak videó 275,00 395,00 USD
Szerezze meg a videó tanfolyamot 30 videó óra (10 óra). Évente frissítik. UX csomagként is elérhető 3 videó tanfolyammal.
Hasznos források
Automatikus kiegészítés: UX irányelvek, Vitaly Friedman Combobox, az eBay-től 👍 Combobox, Elastic Combobox, Elisa Combobox, MongoDB 👍 Combobox, a Visa 👍-tól Combobox, Watson (Docplanner) Combobox, a Wikimedia Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), a MongoDB 👍 Multiselect Lookup, Wikimedia Többszörös kijelölésű kombinált doboz, Vaadin Multiselect, Visa Átvitel (Listbox példa), az Ant Design Listbox, Hoppertől List Box, Vaadin Listbox, Visa Dual List Selector, Red Hat (PatternFly) Dual Listbox, Salesforce (Lightning Design System) Átigazolási lista, Mantine Dual Listbox, a Dashlite Jelvények vs. tabletták vs zsetonok vs címkék, Vitaly Friedman Listadobozok és legördülő listák, Anna Kaley (NN/g)
