Kāda ir atšķirība starp kombinēto lodziņu, vairāku atlasi, sarakstlodziņu un nolaižamo izvēlni? Lai gan visi šie lietotāja interfeisa komponenti var šķist līdzīgi, tie kalpo dažādiem mērķiem. Izvēle bieži vien ir atkarīga no pieejamo opciju skaita un to redzamības. Apskatīsim, kā tie atšķiras, kādam nolūkam tie kalpo un kā izvēlēties pareizo, lai izvairītos no pārpratumiem un nepareizām cerībām.
Ne visi saraksta modeļi ir vienādi Visiem iepriekš izceltajiem lietotāja interfeisa komponentiem ir tieši viena kopīga iezīme: tie atbalsta lietotāju mijiedarbību ar sarakstiem. Tomēr viņi to dara nedaudz savādāk. Apskatīsim katru atsevišķi:
Nolaižamais saraksts → saraksts ir paslēpts, līdz tas tiek aktivizēts. Kombinētais lodziņš → ierakstiet, lai filtrētu + atlasiet 1 opciju. Vairāku atlasi → ierakstiet, lai filtrētu + atlasiet daudzas opcijas. Listbox → visas saraksta opcijas ir redzamas pēc noklusējuma (+ ritināšana). Dual listbox → pārvietot vienumus starp 2 sarakstlodzēm.
Citiem vārdiem sakot, Combobox apvieno teksta ievades lauku ar nolaižamo sarakstu, lai lietotāji varētu rakstīt, lai filtrētu un atlasītu vienu opciju. Izmantojot Multiselect, lietotāji var izvēlēties daudzas iespējas (bieži tiek parādītas kā tabletes vai mikroshēmas). Sarakstu lodziņās tiek rādītas visas saraksta opcijas, kas ir redzamas pēc noklusējuma, bieži vien ar ritināšanu. Tas ir noderīgi, ja lietotājiem nekavējoties jāredz visas pieejamās iespējas. Dual listbox (saukts arī par pārsūtīšanas sarakstu) ir sarakstlodziņa variants, kas ļauj lietotājiem pārvietot vienumus starp diviem sarakstlodziņam (pa kreisi ↔ pa labi), parasti lielapjoma atlasei. Nekad neslēpt bieži lietotās opcijas Kā minēts iepriekš, pareizā lietotāja saskarnes komponenta izvēle ir atkarīga no 2 faktoriem: pieejamo saraksta opciju skaita un to, vai visām šīm opcijām ir jābūt redzamām pēc noklusējuma. Visos sarakstos var būt arī koku struktūras, ligzdošana un grupu atlase.
Ir viens princips, ko es esmu ievērojis gadiem ilgi attiecībā uz jebkuru lietotāja interfeisa komponentu: nekad neslēpt bieži izmantotās opcijas. Ja lietotāji bieži paļaujas uz noteiktu atlasi, to slēpšana no viņiem ir ļoti maza. Mēs varētu to iestatīt kā iepriekš atlasītu vai (ja ir tikai 2–3 bieži izmantotas opcijas) parādīt tās kā mikroshēmas vai pogas un pēc tam parādīt pārējo saraksta daļu par mijiedarbību. Kopumā ieteicams vienmēr rādīt populāras opcijas — pat ja tas varētu pārblīvēt lietotāja interfeisu. Kā izvēlēties kādu? Ne katram sarakstam ir nepieciešama sarežģīta atlases metode. Sarakstiem, kuros ir mazāk nekā 5 vienumi, parasti vislabāk darbojas vienkāršas radio pogas vai izvēles rūtiņas. Taču, ja lietotājiem ir jāizvēlas no liela opciju saraksta (piem., 200+ vienumi), kombinētā lodziņa un vairāku vienumu izvēle ir noderīga ātrākas filtrēšanas (piemēram, valsts atlases) dēļ.
Sarakstu lodziņi ir noderīgi, ja cilvēkiem vienlaikus ir jāpiekļūst daudzām opcijām, it īpaši, ja viņiem ir jāizvēlas arī daudzas opcijas no šī saraksta. Tie varētu būt noderīgi bieži lietotiem filtriem.
Dual listbox bieži tiek ignorēts un ignorēts. Taču tas var būt ļoti noderīgs sarežģītiem uzdevumiem, piemēram, lielapjoma atlasei vai lomu, uzdevumu un pienākumu piešķiršanai. Tas ir vienīgais lietotāja interfeisa komponents, kas lietotājiem ļauj pārskatīt pilnu atlases sarakstu līdzās avotu sarakstam pirms apņemšanās (saukts arī par "pārsūtīšanas sarakstu"). Faktiski duālais sarakstlodziņš bieži ir ātrāks, precīzāks un pieejamāks nekā vilkšana un nomešana. Lietojamības apsvērumi Viena svarīga piezīme, kas jāpatur prātā, ir tā, ka visiem sarakstu veidiem ir jāatbalsta tastatūras navigācija (piemēram, bulttaustiņi ↑/↓), lai nodrošinātu pieejamību. Daži cilvēki gandrīz vienmēr paļaujas uz tastatūru, lai atlasītu opcijas, kad viņi sāk rakstīt.
Papildus tam:
Sarakstiem ar 7+ opcijām apsveriet iespēju pievienot funkcijas “Atlasīt visu” un “Notīrīt visu”, lai racionalizētu lietotāja mijiedarbību. Gariem sarakstiem ar kombinēto lodziņu atklājiet lietotājiem visas opcijas, noklikšķinot/pieskaroties, jo pretējā gadījumā tie var netikt pamanīti, Vissvarīgākais — nerādiet neinteraktīvus elementus kā pogas, lai izvairītos no neskaidrībām, un interaktīvos elementus nerādījiet kā statiskas etiķetes.
Noslēgums: ne viss ir nolaižams Vārdiem ir nozīme. Vertikāls opciju saraksts parasti tiek raksturots kā “nolaižams saraksts”, taču bieži tas ir pārāk vispārīgs, lai būtu jēgpilns. “Nolaižamā izvēlne” norāda, ka saraksts pēc noklusējuma ir paslēpts. “Multiselect” nozīmē vairākkārtēju atlasi (izvēles rūtiņa) sarakstā. “Combobox” nozīmē teksta ievadi. Un “Listbox” ir vienkārši atlasāmo vienumu saraksts, kas vienmēr ir redzams. Mērķis nav nodrošināt atbilstību iepriekš minētajām definīcijām. Bet drīzāk, lai saskaņotu nodomus — runājiet vienā valodā, pieņemot lēmumus, projektējot, veidojot un pēc tam izmantojot šos UI komponentus. Tam vajadzētu strādātvisi — dizaineri, inženieri un galalietotāji, ja vien statiskās etiķetes neizskatās kā interaktīvās pogas un radio pogas nedarbojas kā izvēles rūtiņas. Iepazīstieties ar “AI interfeisu dizaina modeļiem” Iepazīstieties ar dizaina modeļiem AI saskarnēm, Vitālija jaunais video kurss ar praktiskiem piemēriem no reāliem produktiem — drīzumā notiks tiešraides UX apmācība. Pāriet uz bezmaksas priekšskatījumu. Iepazīstieties ar AI interfeisu dizaina modeļiem, Vitālija video kursu par saskarnes dizainu un lietotāja pieredzi.
Video + UX apmācība tikai videoVideo + UX apmācība 450,00 USD 799,00
Iegūstiet video + UX apmācību 30 video nodarbības (10 h) + tiešraides UX apmācību. 100 dienu naudas atdošanas garantija. Tikai video 275,00 $ 395,00
Iegūstiet video kursu30 video nodarbības (10h). Atjaunina katru gadu. Pieejams arī kā UX komplekts ar 3 video kursiem.
Noderīgi resursi
Automātiskā pabeigšana: UX vadlīnijas, Vitālijs Frīdmens Combobox, no eBay 👍 Combobox, no Elastic Kombinētā kaste, Elisa Combobox, MongoDB 👍 Combobox, no Visa 👍 Combobox, autors Vatsons (Docplanner) Combobox, Wikimedia Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), MongoDB 👍 Vairāku atlases meklēšana, izmantojot Wikimedia Vairāku atlases kombinētais lodziņš, autors Vaadin Multiselect, ar Visa Pārsūtīšana (Sarakstlodziņa piemērs), Ant Design Listbox, autors Hopper Vādina saraksta lodziņš Listbox, no Visa Duālā saraksta atlasītājs, Red Hat (PatternFly) Dual Listbox, Salesforce (zibens dizaina sistēma) Pārsūtīšanas saraksts, Mantine Dual Listbox, Dashlite Nozīmītes pret tabletēm pret mikroshēmām pret tagiem, Vitālijs Frīdmens Sarakstu lodziņi pret nolaižamajiem sarakstiem, Anna Keilija (NN/g)
