Do kio estas la diferenco inter kombokesto, multelekto, listkesto kaj falmenuo? Kvankam ĉiuj ĉi tiuj UI-komponentoj povus aspekti similaj, ili servas malsamajn celojn. La elekto ofte dependas de la nombro da disponeblaj opcioj kaj ilia videbleco. Ni vidu kiel ili diferencas, kian celon ili servas kaj kiel elekti la ĝustan — evitante miskomprenojn kaj malĝustajn atendojn survoje.
Ne Ĉiuj Listo-Padronoj Estas Samaj Ĉiuj UI-komponentoj elstarigitaj supre havas ĝuste unu aferon komunan: ili subtenas la interagojn de uzantoj kun listoj. Tamen, ili faras tion iomete alimaniere. Ni rigardu ĉiun, unu post alia:
Dropdown → listo estas kaŝita ĝis ĝi estas ekigita. Combobox → tajpu por filtri + elektu 1 opcion. Multelekto → tajpu por filtri + elektu multajn opciojn. Listkesto → ĉiuj listopcioj videblaj defaŭlte (+ rulumu). Duobla listkesto → movu erojn inter 2 listkestoj.
Alivorte, Combobox kombinas tekstan enigkampon kun fallisto, do uzantoj povas tajpi por filtri kaj elekti ununuran opcion. Kun Multiselect, uzantoj povas elekti multajn opciojn (ofte montritajn kiel piloloj aŭ fritoj). Listkestoj montras ĉiujn listopciojn videblajn defaŭlte, ofte kun movo. Estas helpema kiam uzantoj bezonas tuj vidi ĉiujn disponeblajn elektojn. Duobla listkesto (ankaŭ nomita transiga listo) estas vario de listkesto kiu permesas al uzantoj movi erojn inter du listkestoj (maldekstre ↔ dekstre), tipe por groca elekto. Neniam Kaŝu Ofte Uzatajn Opciojn Kiel menciite supre, la elekto de la ĝusta UI-komponento dependas de 2 faktoroj: kiom da listaj opcioj disponeblas, kaj se ĉiuj ĉi tiuj opcioj devas esti videblaj defaŭlte. Ĉiuj listoj povus havi ankaŭ arbstrukturojn, nestadon kaj grupelekton.
Estas unu principo, kiun mi sekvas dum jaroj por iu ajn UI-komponento: neniam kaŝu ofte uzatajn opciojn. Se uzantoj ofte fidas al aparta elekto, estas tre malmulte da valoro kaŝi ĝin de ili. Ni povus aŭ fari ĝin antaŭelektita, aŭ (se estas nur 2–3 ofte uzataj opcioj) montri ilin kiel blatojn aŭ butonojn, kaj poste montri la reston de la listo pri interagado. Ĝenerale, estas bona ideo ĉiam montri popularajn opciojn - eĉ se ĝi povus malordigi la UI. Kiel Elekti Kiun? Ne ĉiu listo bezonas kompleksan elektan metodon. Por listoj kun malpli ol 5 eroj, simplaj radiobutonoj aŭ markobutonoj kutime funkcias plej bone. Sed se uzantoj bezonas elekti el granda listo de opcioj (ekz., 200+ eroj), kombobox + multiselektado estas helpemaj pro la pli rapida filtrado (ekz., lando elekto).
Listkestoj estas helpemaj kiam homoj bezonas aliri multajn eblojn samtempe, precipe se ili ankaŭ bezonas elekti multajn eblojn el tiu listo. Ili povus esti utilaj por ofte uzataj filtriloj.
Duobla listkesto ofte estas preteratentita kaj ignorita. Sed ĝi povas esti tre helpema por kompleksaj taskoj, ekz. amasa elekto, aŭ asignado de roloj, taskoj, respondecoj. Ĝi estas la nura UI-komponento, kiu permesas al uzantoj revizii sian plenan elektliston flank-al-flanke kun la fontlisto antaŭ ol fari (ankaŭ nomatan "Translokiga listo"). Fakte, duobla listkesto ofte estas pli rapida, pli preciza kaj pli alirebla ol treni kaj faligi. Konsideroj pri Uzebleco Unu grava noto memorinda estas ke ĉiuj listtipoj devas subteni klavarnavigadon (ekz., ↑/↓ sagoklavoj) por alirebleco. Iuj homoj preskaŭ ĉiam fidos al la klavaro por elekti opciojn post kiam ili komencas tajpi.
Preter tio:
Por listoj kun pli ol 7 opcioj, konsideru aldoni funkciojn "Elektu Ĉion" kaj "Forigi Ĉion" por plifaciligi la interago de la uzanto. Por longaj listoj kun kombokesto, elmontru ĉiujn opciojn al uzantoj per klako/frapo, ĉar alie ili eble neniam estos vidataj, Plej grave, ne montru neinteragajn elementojn kiel butonojn por eviti konfuzon — kaj ne montru interagajn elementojn kiel senmovaj etikedoj.
Envolvado: Ne Ĉio Estas Malsuprenigo Nomoj gravas. Vertikala listo de opcioj estas kutime priskribita kiel "falumenuo" - sed ofte ĝi estas iom tro ĝenerala por esti signifa. "Famulo" sugestas, ke la listo estas kaŝita defaŭlte. "Multielekto" implicas plur-elekton (markbutono) ene de listo. "Kombokesto" implicas tekstan enigon. Kaj "Listkesto" estas simple listo de elekteblaj eroj, videblaj ĉiam. La celo ne estas kongrui kun la supraj difinoj pro tio. Sed prefere vicigi intencojn - parolu la saman lingvon kiam vi decidas pri, projektado, konstruado kaj poste uzado de ĉi tiuj UI-komponentoj. Ĝi devus funkcii porĉiuj - dizajnistoj, inĝenieroj kaj finaj uzantoj - kondiĉe ke senmovaj etikedoj ne aspektas kiel interagaj butonoj, kaj radiobutonoj ne agas kiel markobutonoj. Renkontu "Dezajnaj Ŝablonoj Por AI-Interfacoj" Renkontu Design Patterns For AI Interfaces, la nova videokurso de Vitaly kun praktikaj ekzemploj de realaj produktoj - kun viva UX-trejnado okazos baldaŭ. Saltu al senpaga antaŭrigardo. Renkontu Design Patterns For AI Interfaces, la videokurso de Vitaly pri interfacdezajno kaj UX.
Video + UX-TrejnadoNurvidbendo + UX-Trejnado$ 450.00 $ 799.00
Akiru Videon + UX-Trejnadon30 videolecionojn (10h) + Viva UX-Trejnado. 100 tagojn mono-reveno-garantio.Nur filmeto$ 275.00$ 395.00
Akiru la videokurson30 videolecionojn (10h). Ĝisdatigita ĉiujare.Ankaŭ havebla kiel UX-Pakaĵo kun 3 videokursoj.
Utilaj Rimedoj
Aŭtomata kompletigo: UX-Gvidlinioj, de Vitaly Friedman Kombokesto, de eBay 👍 Combobox, de Elastic Combobox, de Elisa Combobox, de MongoDB 👍 Kombokesto, per Visa 👍 Kombokesto, de Watson (Docplanner) Kombokesto, de Vikimedio Combobox, de Zendesk Multelekto (MongoDB Combobox Design Docs), de MongoDB 👍 Multelekta Serĉo, de Vikimedio Multelekta Kombokesto, de Vaadin Multelekto, per Vizo Translokigo (Listkesto ekzemplo), de Ant Design Listkesto, de Hopper Listkesto, de Vaadin Listkesto, de Visa Duobla Listo-Selektilo, de Red Hat (PatternFly) Duobla Listkesto, de Salesforce (Lightning Design System) Translokiga Listo, de Mantine Duobla Listkesto, de Dashlite Insignoj kontraŭ Piloloj kontraŭ Blatoj kontraŭ Etikedoj, de Vitaly Friedman Listkestoj kontraŭ Dropdown Lists, de Anna Kaley (NN/g)
