Aký je teda rozdiel medzi zoznamom, viacnásobným výberom, zoznamom a rozbaľovacím zoznamom? Aj keď sa všetky tieto komponenty používateľského rozhrania môžu zdať podobné, slúžia na rôzne účely. Voľba často závisí od počtu dostupných možností a ich viditeľnosti. Pozrime sa, ako sa líšia, na aký účel slúžia a ako si vybrať ten správny – aby ste sa vyhli nedorozumeniam a nesprávnym očakávaniam.
Nie všetky vzory zoznamov sú rovnaké Všetky vyššie uvedené komponenty používateľského rozhrania majú presne jednu spoločnú vec: podporujú interakcie používateľov so zoznamami. Robia to však trochu inak. Pozrime sa na každý jeden po druhom:
Rozbaľovacia ponuka → zoznam je skrytý, kým sa nespustí. Rozbaľovacie pole → zadajte filtrovanie + vyberte 1 možnosť. Viacnásobný výber → typ na filtrovanie + výber mnohých možností. Listbox → všetky možnosti zoznamu sú predvolene viditeľné (+ rolovanie). Dvojitý zoznam → presúvanie položiek medzi 2 zoznamami.
Inými slovami, Combobox kombinuje pole na zadávanie textu s rozbaľovacím zoznamom, takže používatelia môžu písať, filtrovať a vyberať jednu možnosť. Pomocou funkcie Multiselect si používatelia môžu vybrať veľa možností (často sa zobrazujú ako pilulky alebo čipy). V zoznamoch sa zobrazujú všetky možnosti zoznamu, ktoré sú štandardne viditeľné, často s rolovaním. Je to užitočné, keď používatelia potrebujú okamžite vidieť všetky dostupné možnosti. Duálny zoznam (nazývaný aj zoznam prenosov) je variáciou zoznamu, ktorý umožňuje používateľom presúvať položky medzi dvoma zoznamami (vľavo ↔ vpravo), zvyčajne na hromadný výber. Nikdy neskrývajte často používané možnosti Ako je uvedené vyššie, výber správneho komponentu používateľského rozhrania závisí od 2 faktorov: od počtu dostupných možností zoznamu a od toho, či musia byť všetky tieto možnosti predvolene viditeľné. Všetky zoznamy môžu mať stromové štruktúry, vnorenie a výber skupín.
Existuje jeden princíp, ktorý už roky dodržiavam pre akýkoľvek komponent používateľského rozhrania: nikdy neskrývajte často používané možnosti. Ak sa používatelia často spoliehajú na konkrétny výber, nemá cenu ho pred nimi skrývať. Mohli by sme to buď vopred vybrať, alebo (ak existujú iba 2–3 často používané možnosti) ich zobraziť ako žetóny alebo tlačidlá a potom zobraziť zvyšok zoznamu pri interakcii. Vo všeobecnosti je dobré vždy zobrazovať obľúbené možnosti – aj keď to môže zahltiť používateľské rozhranie. Ako si vybrať ktorý? Nie každý zoznam potrebuje komplexnú metódu výberu. Pre zoznamy s menej ako 5 položkami zvyčajne najlepšie fungujú jednoduché prepínače alebo začiarkavacie políčka. Ak si však používatelia potrebujú vybrať z veľkého zoznamu možností (napr. viac ako 200 položiek), combobox + multiselect sú užitočné z dôvodu rýchlejšieho filtrovania (napr. výber krajiny).
Zoznamy sú užitočné, keď ľudia potrebujú prístup k mnohým možnostiam naraz, najmä ak si potrebujú vybrať aj veľa možností z tohto zoznamu. Môžu byť užitočné pre často používané filtre.
Duálny zoznam je často prehliadaný a ignorovaný. Ale môže byť veľmi nápomocný pri zložitých úlohách, napr. hromadný výber alebo prideľovanie rolí, úloh, zodpovedností. Je to jediný komponent používateľského rozhrania, ktorý umožňuje používateľom skontrolovať ich úplný výberový zoznam vedľa zdrojového zoznamu pred potvrdením (nazývaný aj „zoznam prenosov“). V skutočnosti je dvojitý zoznam často rýchlejší, presnejší a dostupnejší ako presúvanie myšou. Úvahy o použiteľnosti Jedna dôležitá poznámka, ktorú treba mať na pamäti, je, že všetky typy zoznamov musia podporovať navigáciu pomocou klávesnice (napr. klávesy so šípkami ↑/↓), aby boli prístupné. Niektorí ľudia sa takmer vždy spoliehajú na klávesnicu pri výbere možností, keď začnú písať.
Okrem toho:
V prípade zoznamov s viac ako 7 možnosťami zvážte pridanie funkcií „Vybrať všetko“ a „Vymazať všetko“, aby ste zefektívnili interakciu používateľa. V prípade dlhých zoznamov s rozbaľovacím poľom zobrazte používateľom všetky možnosti po kliknutí/klepnutí, inak by ich možno nikdy nevideli, Najdôležitejšie je, že nezobrazujte neinteraktívne prvky ako tlačidlá, aby ste sa vyhli nejasnostiam – a nezobrazujte interaktívne prvky ako statické štítky.
Zbalenie: Nie všetko je rozbaľovacia ponuka Na menách záleží. Vertikálny zoznam možností sa zvyčajne popisuje ako „rozbaľovací zoznam“ – ale často je príliš všeobecný na to, aby mal zmysel. „Rozbaľovacia ponuka“ naznačuje, že zoznam je predvolene skrytý. „Viacnásobný výber“ znamená viacnásobný výber (začiarkavacie políčko) v rámci zoznamu. „Combobox“ znamená zadávanie textu. A „Listbox“ je jednoducho zoznam voliteľných položiek, ktorý je vždy viditeľný. Cieľom nie je byť v súlade s vyššie uvedenými definíciami. Ale skôr na zosúladenie zámerov – hovorte rovnakým jazykom pri rozhodovaní o týchto komponentoch používateľského rozhrania, ich navrhovaní, zostavovaní a následnom používaní. Malo by to fungovať prevšetci – dizajnéri, inžinieri a koncoví používatelia – pokiaľ statické štítky nevyzerajú ako interaktívne tlačidlá a prepínače nefungujú ako začiarkavacie políčka. Zoznámte sa s „Návrhovými vzormi pre rozhrania AI“ Zoznámte sa s návrhovými vzormi pre rozhrania AI, Vitalyho nový videokurz s praktickými príkladmi z produktov zo skutočného života – čoskoro sa uskutoční živé školenie UX. Prejdite na bezplatnú ukážku. Zoznámte sa s návrhovými vzormi pre rozhrania AI, Vitalyho videokurzom o dizajne rozhrania a používateľskom rozhraní.
Video + školenie UX IbavideoVideo + školenie UX 450,00 USD 799,00 USD
Získajte video + školenie UX 30 video lekcií (10 hodín) + školenie UX naživo. 100-dňová záruka vrátenia peňazí. Len video 275,00 $ 395,00 $
Získajte video kurz 30 video lekcií (10 hodín). Aktualizované ročne. K dispozícii aj ako balík UX s 3 video kurzami.
Užitočné zdroje
Automatické dopĺňanie: Pokyny pre používateľské prostredie, Vitaly Friedman Combobox, od eBay 👍 Combobox od Elastic Combobox od Elisy Combobox, od MongoDB 👍 Combobox, od spoločnosti Visa 👍 Combobox, od Watsona (Docplanner) Combobox, Wikimedia Combobox od spoločnosti Zendesk Multiselect (MongoDB Combobox Design Docs), od MongoDB 👍 Multiselect Lookup, Wikimedia Multi-select Combo Box od Vaadina Multiselect, od spoločnosti Visa Transfer (príklad zoznamu), od Ant Design Listbox od Hoppera List Box od Vaadina Listbox od spoločnosti Visa Dual List Selector, od Red Hat (PatternFly) Dual Listbox od Salesforce (Lightning Design System) Zoznam prestupov podľa Mantine Dual Listbox od Dashlite Odznaky vs. pilulky vs. čipy vs. štítky, Vitaly Friedman Zoznamy vs. rozbaľovacie zoznamy, Anna Kaley (NN/g)
