Pra, cili është ndryshimi midis combobox, multiselect, listbox dhe dropdown? Ndërsa të gjithë këta komponentë UI mund të duken të ngjashëm, ato shërbejnë për qëllime të ndryshme. Zgjedhja shpesh varet nga numri i opsioneve të disponueshme dhe dukshmëria e tyre. Le të shohim se si ndryshojnë ato, çfarë qëllimi shërbejnë dhe si të zgjedhim atë të duhurin - duke shmangur keqkuptimet dhe pritjet e gabuara gjatë rrugës.
Jo të gjitha modelet e listave janë të njëjta Të gjithë komponentët UI të theksuar më sipër kanë saktësisht një gjë të përbashkët: ata mbështesin ndërveprimet e përdoruesve me listat. Megjithatë, ata e bëjnë këtë pak më ndryshe. Le t'i hedhim një vështrim secilit, një nga një:
Lista me zbritje → fshihet derisa të aktivizohet. Combobox → shkruani për të filtruar + zgjidhni 1 opsion. Multiselect → shkruani për të filtruar + zgjidhni shumë opsione. Kutia e listës → të gjitha opsionet e listës të dukshme si parazgjedhje (+ lëviz). Kutia e dyfishtë e listave → zhvendosni artikujt midis 2 kutive të listave.
Me fjalë të tjera, Combobox kombinon një fushë të futjes së tekstit me një listë rënëse, kështu që përdoruesit mund të shkruajnë për të filtruar dhe zgjedhur një opsion të vetëm. Me Multiselect, përdoruesit mund të zgjedhin shumë opsione (shpesh shfaqen si pilula ose patate të skuqura). Kutitë e listave shfaqin të gjitha opsionet e listës të dukshme si parazgjedhje, shpesh me lëvizje. Është e dobishme kur përdoruesit duhet të shohin menjëherë të gjitha zgjedhjet e disponueshme. Kutia e listës së dyfishtë (e quajtur edhe lista e transfertave) është një variant i një kutie listimi që i lejon përdoruesit të lëvizin artikujt midis dy kutive të listave (majtas ↔ djathtas), zakonisht për përzgjedhje me shumicë. Never Hide Frequently Used Options Siç u përmend më lart, zgjedhja e komponentit të duhur UI varet nga 2 faktorë: sa opsione të listës janë të disponueshme dhe nëse të gjitha këto opsione duhet të jenë të dukshme si parazgjedhje. Të gjitha listat mund të kenë gjithashtu struktura pemësh, fole dhe përzgjedhje grupi.
Ekziston një parim që unë e kam ndjekur prej vitesh për çdo komponent UI: mos i fshihni kurrë opsionet e përdorura shpesh. Nëse përdoruesit mbështeten shpesh në një përzgjedhje të caktuar, ka shumë pak vlerë t'u fshehësh atë. Ne mund ta bëjmë atë të përzgjedhur paraprakisht, ose (nëse ka vetëm 2–3 opsione të përdorura shpesh) t'i shfaqim ato si çipa ose butona dhe më pas të shfaqim pjesën tjetër të listës në ndërveprim. Në përgjithësi, është një ide e mirë të shfaqësh gjithmonë opsione të njohura – edhe nëse mund të rrëmojë ndërfaqen e përdoruesit. Si të zgjidhni cilin? Jo çdo listë ka nevojë për një metodë komplekse përzgjedhjeje. Për listat me më pak se 5 artikuj, butonat e thjeshtë të radios ose kutitë e kontrollit zakonisht funksionojnë më mirë. Por nëse përdoruesit duhet të zgjedhin nga një listë e madhe opsionesh (p.sh., 200+ artikuj), combobox + multiselect janë të dobishme për shkak të filtrimit më të shpejtë (p.sh., zgjedhja e shtetit).
Kutitë e listave janë të dobishme kur njerëzit duhet të kenë qasje në shumë opsione në të njëjtën kohë, veçanërisht nëse duhet të zgjedhin gjithashtu shumë opsione nga ajo listë. Ato mund të jenë të dobishme për filtrat e përdorur shpesh.
Lista e dyfishtë shpesh neglizhohet dhe injorohet. Por mund të jetë shumë e dobishme për detyra komplekse, si p.sh. përzgjedhja në masë, ose caktimi i roleve, detyrave, përgjegjësive. Është i vetmi komponent UI që i lejon përdoruesit të rishikojnë listën e tyre të plotë të përzgjedhjes krah për krah me listën burimore përpara se të kryejnë (e quajtur edhe "Lista e transferimit"). Në fakt, kutia e listave të dyfishta është shpesh më e shpejtë, më e saktë dhe më e aksesueshme se zvarritja dhe lëshimi. Konsideratat e përdorshmërisë Një shënim i rëndësishëm për t'u mbajtur parasysh është se të gjitha llojet e listave duhet të mbështesin navigimin e tastierës (p.sh., tastet me shigjeta ↑/↓) për aksesueshmëri. Disa njerëz pothuajse gjithmonë do të mbështeten te tastiera për të zgjedhur opsionet sapo të fillojnë të shtypin.
Përtej kësaj:
Për listat me 7+ opsione, merrni parasysh shtimin e funksioneve "Zgjidh të gjitha" dhe "Pastro të gjitha" për të përmirësuar ndërveprimin e përdoruesit. Për listat e gjata me një kuti të kombinuar, ekspozoni të gjitha opsionet tek përdoruesit me klik/trokitje, pasi përndryshe ato mund të mos shihen kurrë, Më e rëndësishmja, mos shfaqni elementë jo-interaktivë si butona për të shmangur konfuzionin - dhe mos shfaqni elementë ndërveprues si etiketa statike.
Përfundimi: Jo gjithçka është një listë me rënie Emrat kanë rëndësi. Një listë vertikale e opsioneve zakonisht përshkruhet si një "zbritje" - por shpesh është paksa shumë e përgjithshme për të qenë kuptimplotë. “Dropdown” hints that the list is hidden by default. "Multiselect" nënkupton shumë-zgjedhje (kontrolli) brenda një liste. "Combobox" nënkupton futjen e tekstit. Dhe "Listabox" është thjesht një listë e artikujve të përzgjedhshëm, të dukshëm në çdo kohë. Qëllimi nuk është që të jetë në përputhje me përkufizimet e mësipërme për hir të tij. Por më mirë për të harmonizuar qëllimet – flisni të njëjtën gjuhë kur vendosni, dizajnoni, ndërtoni dhe më pas përdorni këto komponentë të ndërfaqes së përdoruesit. Duhet të funksionojë përtë gjithë - projektues, inxhinierë dhe përdorues përfundimtarë - për sa kohë që etiketat statike nuk duken si butona interaktivë dhe butonat e radios nuk veprojnë si kutitë e kontrollit. Takoni "Modelet e projektimit për ndërfaqet e AI" Njihuni me modelet e dizajnit për ndërfaqet e AI, kursi i ri video i Vitaly me shembuj praktikë nga produktet e jetës reale - me një trajnim të drejtpërdrejtë UX që do të ndodhë së shpejti. Shkoni në një pamje paraprake falas. Njihuni me modelet e dizajnit për ndërfaqet e AI, kursi video i Vitaly mbi dizajnin e ndërfaqes dhe UX.
Video + UX TrainingVetëmVideoVideo + UX Training$ 450,00 $ 799,00 $
Merr Video + UX Training30 mësime video (10 orë) + Trajnim UX live. 100 ditë garanci për kthimin e parave. Vetëm video 275,00$ 395,00$
Merrni kursin me video 30 mësime video (10 orë). Përditësohet çdo vit. Ofrohet gjithashtu si një paketë UX me 3 kurse video.
Burime të dobishme
Plotësimi automatik: UX UX, nga Vitaly Friedman Combobox, nga eBay 👍 Combobox, nga Elastic Combobox, nga Elisa Combobox, nga MongoDB 👍 Combobox, nga Visa 👍 Combobox, nga Watson (Docplanner) Combobox, nga Wikimedia Combobox, nga Zendesk Multiselect (MongoDB Combobox Design Docs), nga MongoDB 👍 Kërkim me shumë përzgjedhje, nga Wikimedia Multi-select Combo Box, nga Vaadin Multiselect, nga Visa Transferimi (shembulli i kutisë së listave), nga Ant Design Listbox, nga Hopper List Box, nga Vaadin Listbox, nga Visa Zgjedhësi i listës së dyfishtë, nga Red Hat (PatternFly) Dual Listbox, nga Salesforce (Lightning Design System) Lista e transferimeve, nga Mantine Dual Listbox, nga Dashlite Distinktivët kundër Pilulave kundër patate të skuqura kundër etiketave, nga Vitaly Friedman Kutitë e listave kundër listave me zbritje, nga Anna Kaley (NN/g)
