Svo hver er munurinn á combobox, multiselect, listbox og dropdown? Þó að allir þessir notendaviðmótshlutir gætu litið út eins, þjóna þeir mismunandi tilgangi. Valið kemur oft niður á fjölda tiltækra valkosta og sýnileika þeirra. Við skulum sjá hvernig þeir eru ólíkir, hvaða tilgangi þeir þjóna og hvernig á að velja þann rétta - forðast misskilning og rangar væntingar í leiðinni.
Ekki eru öll listamynstur eins Allir notendaviðmótshlutirnir sem auðkenndir eru hér að ofan eiga nákvæmlega eitt sameiginlegt: þeir styðja samskipti notenda við lista. Hins vegar gera þeir það aðeins öðruvísi. Við skulum kíkja á hvern, einn í einu:
Fellilisti → listi er falinn þar til hann er ræstur. Combobox → sláðu inn til að sía + veldu 1 valmöguleika. Fjölval → sláðu inn til að sía + veldu marga valkosti. Listakassi → allir listavalkostir sjáanlegir sjálfgefið (+ skruna). Tvöfaldur listakassi → færa hluti á milli tveggja listakassa.
Með öðrum orðum, Combobox sameinar textainnsláttarreit með fellilista, svo notendur geta skrifað til að sía og valið einn valkost. Með Multiselect geta notendur valið marga valkosti (oft birt sem pillur eða franskar). Listboxar sýna alla listavalkosti sem eru sjálfgefnir sýnilegir, oft með því að fletta. Það er gagnlegt þegar notendur þurfa að sjá alla tiltæka valkosti strax. Tvöfaldur listakassi (einnig kallaður flutningslisti) er afbrigði af listakassa sem gerir notendum kleift að færa hluti á milli tveggja listakassa (vinstri ↔ hægri), venjulega fyrir magnval. Fela aldrei oft notaða valkosti Eins og nefnt er hér að ofan fer val á réttum UI hluti eftir 2 þáttum: hversu margir listavalkostir eru tiltækir og hvort allir þessir valkostir þurfa að vera sýnilegir sjálfgefið. Allir listar gætu líka haft trébyggingar, hreiður og hópval.
Það er ein meginregla sem ég hef fylgt í mörg ár fyrir hvaða notendahluti sem er: fela aldrei oft notaða valkosti. Ef notendur reiða sig oft á tiltekið úrval er mjög lítið gildi í því að fela það fyrir þeim. Við gætum annað hvort gert það forvalið eða (ef það eru aðeins 2–3 oft notaðir valkostir) sýnt þá sem spilapeninga eða hnappa, og síðan sýnt restina af listanum á samskiptum. Almennt séð er góð hugmynd að sýna alltaf vinsæla valkosti - jafnvel þótt það gæti ruglað viðmótið. Hvernig á að velja hvaða? Ekki þarf á hverjum lista flókna valaðferð. Fyrir lista með færri en 5 atriði virka einfaldir útvarpshnappar eða gátreitir venjulega best. En ef notendur þurfa að velja úr stórum lista yfir valmöguleika (t.d. 200+ atriði), þá eru combobox + fjölval gagnleg vegna hraðari síunar (t.d. landsval).
Listakassar eru gagnlegir þegar fólk þarf að fá aðgang að mörgum valkostum í einu, sérstaklega ef það þarf að velja marga valkosti af þeim lista líka. Þær gætu verið gagnlegar fyrir síur sem oft eru notaðar.
Oft er litið framhjá tvöföldum listakassi og hunsað. En það getur verið mjög gagnlegt fyrir flókin verkefni, t.d. magnval, eða úthluta hlutverkum, verkefnum, ábyrgð. Það er eini notendaviðmótshlutinn sem gerir notendum kleift að skoða allan vallistann hlið við hlið upprunalistans áður en þeir skuldbinda sig (einnig kallaður „Flytjalisti“). Reyndar er tvískiptur listakassi oft hraðari, nákvæmari og aðgengilegri en draga-og-sleppa. Nothæfisatriði Ein mikilvæg athugasemd sem þarf að hafa í huga er að allar listagerðir þurfa að styðja lyklaborðsleiðsögn (t.d. ↑/↓ örvatakkana) fyrir aðgengi. Sumir munu næstum alltaf treysta á lyklaborðið til að velja valkosti þegar þeir byrja að skrifa.
Fyrir utan það:
Fyrir lista með 7+ valkostum skaltu íhuga að bæta við „Veldu allt“ og „Hreinsa allt“ virkni til að hagræða samskiptum notenda. Fyrir langa lista með combobox, birtu alla valkosti fyrir notendum með því að smella/pikkaðu, því annars gætu þeir aldrei sést, Mikilvægast er að sýna ekki gagnvirka þætti sem hnappa til að forðast rugling – og ekki sýna gagnvirka þætti sem fasta merkimiða.
Lokun: Ekki er allt fallvalmynd Nöfn skipta máli. Lóðréttum lista yfir valkosti er venjulega lýst sem „fellilisti“ - en oft er hann aðeins of almennur til að vera þýðingarmikill. „Fellilisti“ gefur til kynna að listinn sé sjálfgefið falinn. „Multiselect“ felur í sér fjölval (gátreit) innan lista. „Combobox“ felur í sér textainnslátt. Og „Listbox“ er einfaldlega listi yfir hluti sem hægt er að velja, sýnilegir á hverjum tíma. Markmiðið er ekki að vera í samræmi við skilgreiningarnar hér að ofan vegna þess. En frekar til að samræma fyrirætlanir - tala sama tungumál þegar þú ákveður, hannar, smíðar og notar síðan þessa HÍ íhluti. Það ætti að virka fyrirallir - hönnuðir, verkfræðingar og endir notendur - svo framarlega sem fastir merkimiðar líta ekki út eins og gagnvirkir hnappar og útvarpshnappar virka ekki eins og gátreitir. Kynntu þér „Hönnunarmynstur fyrir gervigreind tengi“ Kynntu þér hönnunarmynstur fyrir gervigreindarviðmót, nýtt myndbandsnámskeið Vitaly með hagnýtum dæmum úr raunverulegum vörum - með lifandi UX þjálfun á næstunni. Farðu í ókeypis forskoðun. Kynntu þér hönnunarmynstur fyrir gervigreindarviðmót, myndbandsnámskeið Vitaly um viðmótshönnun og UX.
Myndband + UX þjálfun Aðeins myndskeið + UX þjálfun $ 450.00 $ 799.00
Fáðu myndband + UX þjálfun 30 myndskeiðskennslu (10 klst.) + UX þjálfun í beinni.100 daga peningaábyrgð. Aðeins 275,00 $ 395,00 $ vídeó
Fáðu myndbandsnámskeiðið30 myndbandstímar (10klst.). Uppfært árlega. Einnig fáanlegt sem UX búnt með 3 myndbandsnámskeiðum.
Gagnlegar auðlindir
Sjálfvirk útfylling: UX leiðbeiningar, eftir Vitaly Friedman Combobox, frá eBay 👍 Combobox, frá Elastic Combobox, eftir Elisa Combobox, frá MongoDB 👍 Combobox, frá Visa 👍 Combobox, eftir Watson (Docplanner) Combobox, af Wikimedia Combobox, frá Zendesk Multiselect (MongoDB Combobox Design Docs), frá MongoDB 👍 Fjölvalsleit, af Wikimedia Multi-select Combo Box, eftir Vaadin Multiselect, frá Visa Transfer (Listbox dæmi), eftir Ant Design Listbox, eftir Hopper Listabox, eftir Vaadin Listbox, eftir Visa Dual List Selector, eftir Red Hat (PatternFly) Dual Listbox, eftir Salesforce (Lightning Design System) Flutningalisti, eftir Mantine Dual Listbox, eftir Dashlite Merki vs. pillur vs. flögur vs. merki, eftir Vitaly Friedman Listboxar vs. fellilista, eftir Anna Kaley (NN/g)