Joten mitä eroa on yhdistelmälaatikolla, monivalintaruudulla, luetteloruudulla ja avattavalla valikolla? Vaikka kaikki nämä käyttöliittymäkomponentit saattavat näyttää samanlaisilta, ne palvelevat eri tarkoituksia. Valinta riippuu usein käytettävissä olevien vaihtoehtojen määrästä ja niiden näkyvyydestä. Katsotaanpa, miten ne eroavat toisistaan, mitä tarkoitusta ne palvelevat ja kuinka valita oikea – välttäen väärinkäsityksiä ja vääriä odotuksia matkan varrella.
Kaikki luettelomallit eivät ole samoja Kaikilla yllä korostetuilla käyttöliittymäkomponenteilla on täsmälleen yksi yhteinen piirre: ne tukevat käyttäjien vuorovaikutusta luetteloiden kanssa. He tekevät sen kuitenkin hieman eri tavalla. Katsotaanpa kutakin yksitellen:
Pudotusvalikko → luettelo on piilotettu, kunnes se laukeaa. Yhdistelmäruutu → suodattaa tyyppi + valitse 1 vaihtoehto. Monivalinta → suodata kirjoittamalla + valitse useita vaihtoehtoja. Listbox → kaikki luettelovaihtoehdot näkyvät oletuksena (+ vieritys). Kaksoisluettelolaatikko → siirrä kohteita 2 luetteloruudun välillä.
Toisin sanoen Combobox yhdistää tekstinsyöttökentän avattavaan luetteloon, joten käyttäjät voivat kirjoittaa suodattaakseen ja valita yhden vaihtoehdon. Multiselectillä käyttäjät voivat valita useita vaihtoehtoja (näytetään usein pillereinä tai siruina). Luettelolaatikot näyttävät kaikki oletusarvoisesti näkyvät luettelovaihtoehdot, usein vierittämällä. Siitä on hyötyä, kun käyttäjien on nähtävä kaikki käytettävissä olevat vaihtoehdot välittömästi. Kaksoisluettelolaatikko (kutsutaan myös siirtoluetteloksi) on muunnelma luettelolaatikosta, jonka avulla käyttäjät voivat siirtää kohteita kahden luetteloruudun välillä (vasen ↔ oikea), tyypillisesti joukkovalintaa varten. Älä koskaan piilota usein käytettyjä vaihtoehtoja Kuten edellä mainittiin, oikean käyttöliittymäkomponentin valinta riippuu kahdesta tekijästä: kuinka monta luettelovaihtoehtoa on käytettävissä ja onko kaikkien näiden vaihtoehtojen oltava näkyvissä oletuksena. Kaikissa luetteloissa voi olla myös puurakenteita, sisäkkäisyyttä ja ryhmävalintaa.
Olen noudattanut yhtä periaatetta vuosia minkä tahansa käyttöliittymäkomponentin kohdalla: älä koskaan piilota usein käytettyjä vaihtoehtoja. Jos käyttäjät luottavat tiettyyn valintaan usein, sen piilottaminen heiltä on hyvin vähäistä. Voisimme joko tehdä sen esivalituksi tai (jos usein käytettyjä vaihtoehtoja on vain 2–3) näyttää ne siruina tai painikkeina ja näyttää loput luettelosta vuorovaikutuksesta. Yleisesti ottaen on hyvä idea näyttää aina suosittuja vaihtoehtoja – vaikka se saattaisi sotkea käyttöliittymän. Kuinka valita kumpi? Jokainen luettelo ei tarvitse monimutkaista valintamenetelmää. Luetteloissa, joissa on alle 5 kohdetta, yksinkertaiset valintanapit tai valintaruudut toimivat yleensä parhaiten. Mutta jos käyttäjien on valittava laajasta vaihtoehtoluettelosta (esim. yli 200 kohdetta), yhdistelmälaatikko + monivalinta ovat hyödyllisiä nopeamman suodatuksen (esim. maan valinnan) vuoksi.
Listalaatikot ovat hyödyllisiä, kun ihmisten on käytettävä useita vaihtoehtoja kerralla, varsinkin jos heidän on valittava myös useita vaihtoehtoja luettelosta. Ne voivat olla hyödyllisiä usein käytetyille suodattimille.
Dual listbox jätetään usein huomiotta ja huomiotta. Mutta se voi olla erittäin hyödyllinen monimutkaisissa tehtävissä, kuten joukkovalinnassa tai roolien, tehtävien tai vastuiden määrittämisessä. Se on ainoa käyttöliittymäkomponentti, jonka avulla käyttäjät voivat tarkastella koko valintaluetteloaan lähdeluettelon rinnalla ennen sitoutumista (kutsutaan myös "siirtoluetteloksi"). Itse asiassa kaksoisluetteloruutu on usein nopeampi, tarkempi ja helpompi käyttää kuin vedä ja pudota. Käytettävyysnäkökohdat Yksi tärkeä huomautus, joka on pidettävä mielessä, on, että kaikkien luettelotyyppien on tuettava näppäimistön navigointia (esim. ↑/↓ nuolinäppäimiä) esteettömyyttä varten. Jotkut ihmiset luottavat lähes aina näppäimistöön valittaessa asetuksia, kun he alkavat kirjoittaa.
Sen lisäksi:
Jos luettelossa on yli 7 vaihtoehtoa, harkitse "Valitse kaikki"- ja "Tyhjennä kaikki" -toimintojen lisäämistä käyttäjien vuorovaikutuksen tehostamiseksi. Jos sinulla on pitkiä luetteloita, joissa on yhdistelmälaatikko, paljasta käyttäjille kaikki vaihtoehdot napsauttamalla/napauttamalla, koska muuten niitä ei ehkä koskaan nähdä. Mikä tärkeintä, älä näytä ei-interaktiivisia elementtejä painikkeina sekaannusten välttämiseksi – äläkä näytä interaktiivisia elementtejä staattisina tarroina.
Päätös: Kaikki ei ole pudotusvalikkoa Nimillä on väliä. Pystysuuntaista vaihtoehtoluetteloa kuvataan tyypillisesti "pudotusvalikosta", mutta usein se on liian yleinen ollakseen mielekäs. "Dropdown" vihjaa, että luettelo on piilotettu oletuksena. "Monivalinta" tarkoittaa monivalintaa (valintaruutu) luettelossa. "Combobox" tarkoittaa tekstinsyöttöä. Ja "Listalaatikko" on yksinkertaisesti luettelo valittavissa olevista kohteista, joka on aina näkyvissä. Tavoitteena ei ole olla johdonmukainen yllä olevien määritelmien kanssa sen vuoksi. Mutta mieluummin aikomusten yhdenmukaistamiseksi – puhu samaa kieltä, kun päätät, suunnittelet, rakennat ja käytät näitä käyttöliittymäkomponentteja. Sen pitäisi toimiakaikki – suunnittelijat, insinöörit ja loppukäyttäjät – niin kauan kuin staattiset tarrat eivät näytä interaktiivisilta painikkeilta ja valintanapit eivät toimi valintaruutuina. Tapaa "Tekoälyrajapintojen suunnittelumallit" Tapaa AI Interfaces -suunnittelukuvioita, Vitalyn uusi videokurssi, jossa on käytännön esimerkkejä tosielämän tuotteista – live UX -koulutus järjestetään pian. Siirry ilmaiseen esikatseluun. Tapaa AI-rajapintojen suunnittelumallit, Vitalyn videokurssi käyttöliittymäsuunnittelusta ja käyttökokemuksesta.
Video + UX-koulutus VainVideoVideo + UX-koulutus 450,00 $ 799,00 $
Hanki video + UX-koulutus 30 videotuntia (10 h) + Live UX -koulutus. 100 päivän rahat takaisin -takuu. Vain video 275,00 395,00 dollaria
Hanki videokurssi30 videotuntia (10h). Päivitetään vuosittain. Saatavilla myös UX-pakettina, jossa on 3 videokurssia.
Hyödyllisiä resursseja
Automaattinen täydennys: UX-ohjeet, kirjoittanut Vitaly Friedman Combobox, eBay 👍 Combobox, valmistaja Elastic Combobox, Elisa Combobox, MongoDB 👍 Combobox, Visalta 👍 Yhdistelmälaatikko, kirjoittanut Watson (Docplanner) Combobox, Wikimedia Combobox, Zendesk Multiselect (MongoDB Combobox Design Docs), MongoDB 👍 Monivalintahaku, Wikimedia Monivalinta-yhdistelmälaatikko, Vaadin Monivalinta, Visa Siirto (Listbox-esimerkki), Ant Design Listbox, kirjoittanut Hopper List Box, kirjoittanut Vaadin Listbox, Visa Dual List Selector, valmistaja Red Hat (PatternFly) Dual Listbox, Salesforce (Lightning Design System) Siirtoluettelo, kirjoittanut Mantine Dual Listbox, Dashlite Merkit vs. pillerit vs. sirut vs. tagit, kirjoittanut Vitaly Friedman Luettelolaatikot vs. avattavat luettelot, kirjoittanut Anna Kaley (NN/g)
