Beraz, zer desberdintasun dago konbinazio-koadroa, aukeraketa anitzekoa, zerrenda-koadroa eta goitibeherakoa? UI osagai hauek guztiak antzekoak izan daitezkeen arren, helburu desberdinak dituzte. Aukera askotan eskuragarri dauden aukeren kopuruari eta haien ikusgarritasunari dagokio. Ikus dezagun nola desberdinak diren, zertarako balio duten eta nola aukeratu egokia, bidean gaizki-ulertuak eta itxaropen okerrak saihestuz.
Zerrenda-eredu guztiak ez dira berdinak Goian nabarmendutako UI osagai guztiek gauza komun bat dute: erabiltzaileen zerrendekin elkarrekintzak onartzen dituzte. Hala ere, zertxobait ezberdin egiten dute. Ikus ditzagun bakoitzari, banan-banan:
Goitibeherakoa → zerrenda ezkutatuta dago abiarazi arte. Combobox → idatzi iragazteko + hautatu 1 aukera. Multiselect → idatzi iragazteko + hautatu aukera asko. Zerrenda-koadroa → lehenespenez ikusgai dauden zerrenda-aukera guztiak (+ korritu). Zerrenda-koadro bikoitza → mugitu elementuak 2 zerrenda-koadroen artean.
Beste era batera esanda, Combobox-ek testua idazteko eremu bat goitibeherako zerrenda batekin konbinatzen du, erabiltzaileek iragazteko eta aukera bakar bat hauta dezaten. Multiselect-ekin, erabiltzaileek aukera asko hauta ditzakete (askotan pilulak edo txip gisa bistaratzen dira). Zerrenda-koadroek lehenespenez ikusgai dauden zerrenda-aukera guztiak erakusten dituzte, sarritan korritzearekin. Lagungarria da erabiltzaileek eskuragarri dauden aukera guztiak berehala ikusi behar dituztenean. Zerrenda-koadro bikoitza (transferentzia-zerrenda ere deitzen zaio) erabiltzaileek bi zerrenda-koadroen artean (ezkerrera ↔ eskuinera) elementuak mugitzeko aukera ematen dien zerrenda-koadroaren aldaera da, normalean hautatzeko multzoka egiteko. Ez ezkutatu inoiz erabili ohi diren aukerak Goian esan bezala, UI osagai egokia aukeratzea 2 faktoreren araberakoa da: zenbat zerrenda-aukera dauden eskuragarri eta aukera horiek guztiak lehenespenez ikusgai egon behar badira. Zerrenda guztiek zuhaitz-egiturak, habiak eta taldeen hautaketa ere izan ditzakete.
Badago printzipio bat urtetan jarraitzen dudan edozein UI osagaietarako: inoiz ez ezkutatu maiz erabiltzen diren aukerak. Erabiltzaileak aukeraketa jakin batean maiz fidatzen badira, oso balio txikia du beraiei ezkutatzeak. Aurrez hautatuta egin genezake, edo (maiz erabiltzen diren 2-3 aukera baino ez badira) txip edo botoi gisa erakutsi, eta, ondoren, gainerako zerrenda interakzioan erakutsi. Oro har, ideia ona da beti aukera ezagunak bistaratzea, nahiz eta UI nahastu. Nola Aukeratu Zein? Zerrenda guztiek ez dute hautapen metodo konplexurik behar. 5 elementu baino gutxiago dituzten zerrendetan, irrati-botoi edo kontrol-lauki sinpleek funtzionatzen dute hoberen. Baina erabiltzaileek aukera-zerrenda handi batetik hautatu behar badute (adibidez, 200 elementu baino gehiago), konbinazio-koadroa + hautaketa anitzeko lagungarriak dira iragazketa azkarragoa delako (adibidez, herrialdearen hautaketa).
Zerrenda-koadroak lagungarriak dira jendeak aldi berean aukera asko atzitu behar dituenean, batez ere zerrenda horretatik aukera asko aukeratu behar baditu. Maiz erabiltzen diren iragazkietarako lagungarriak izan daitezke.
Zerrenda-koadro bikoitza sarritan ahaztu eta baztertu egiten da. Baina oso lagungarria izan daiteke zeregin konplexuetarako, adibidez, hautatzeko, edo rolak, zereginak, ardurak esleitzeko. Erabiltzaileek beren hautapen-zerrenda osoa iturburu-zerrendarekin batera berrikusteko aukera ematen duen UI osagai bakarra da konpromisoa hartu aurretik («Transferen zerrenda» ere deitzen zaio). Izan ere, zerrenda-koadro bikoitza arrastatu eta jaregin baino azkarragoa, zehatzagoa eta eskuragarriagoa da. Erabilgarritasunari buruzko gogoetak Kontuan izan beharreko ohar garrantzitsu bat zera da: zerrenda mota guztiek teklatuaren nabigazioa onartu behar dutela (adibidez, ↑/↓ gezi-teklak) irisgarritasuna lortzeko. Pertsona batzuk ia beti teklatuan fidatuko dira aukerak hautatzeko, idazten hasten direnean.
Hortik harago:
7 aukera baino gehiago dituzten zerrendetarako, kontuan hartu "Hautatu guztiak" eta "Garbitu guztiak" funtzionalitateak gehitzea erabiltzailearen interakzioa arintzeko. Konbinazio-koadroa duten zerrenda luzeetarako, erakutsi aukera guztiak erabiltzaileei klik egin/sakatuz, bestela inoiz ikusiko ez baitira. Garrantzitsuena, ez bistaratu elementu interaktiboak botoi gisa nahasketa saihesteko, eta ez bistaratu elementu interaktiboak etiketa estatiko gisa.
Biltzea: dena ez da goitibeherako bat Izenek garrantzia dute. Aukeren zerrenda bertikala normalean "goiplina" gisa deskribatzen da, baina askotan generikoegia da esanguratsua izateko. "Goipalean" zerrenda lehenespenez ezkutatuta dagoela iradokitzen du. "Hautaketa anitzak" zerrenda baten barruan aukeraketa anitzeko (kontrol-laukia) dakar. "Combobox" testua idaztea dakar. Eta "Listbox" elementu hautagarrien zerrenda besterik ez da, uneoro ikusgai. Helburua ez da goiko definizioekin koherentea izatea horregatik. Asmoak lerrokatzeko baizik: hitz egin hizkuntza bera UI osagai hauek erabakitzeko, diseinatzeko, eraikitzeko eta, gero, erabiltzeko. Lan egin beharko lukedenek —diseinatzaileak, ingeniariak eta azken erabiltzaileak—, betiere, etiketa estatikoek botoi interaktiboen itxurarik ez badute eta irrati-botoiek kontrol-lauki gisa jokatzen ez badute. Ezagutu "AI Interfazeetarako Diseinu-ereduak" Ezagutu Design Patterns For AI Interfaces, Vitaly-ren bideo-ikastaro berria bizitza errealeko produktuen adibide praktikoekin, laster zuzeneko UX prestakuntza batekin. Joan doako aurrebista batera. Ezagutu Design Patterns For AI Interfaces, Vitaly-ren interfazeen diseinuari eta UXri buruzko bideo ikastaroa.
Bideoa + UX prestakuntzaBideoa soilikBideoa + UX prestakuntza$ 450,00 $ 799,00
Lortu bideoa + UX Training30 bideo-ikasgai (10h) + Live UX Training. 100 eguneko dirua itzultzeko bermea. Bideoa soilik 275,00 $ 395,00 $
Lortu bideo-ikastaroa30 bideo-ikasgai (10h). Urtero eguneratzen da. UX sorta gisa ere eskuragarri dago 3 bideo-ikastarorekin.
Baliabide erabilgarriak
Osatze automatikoa: UX gidalerroak, Vitaly Friedman-ek Combobox, eBay-ren eskutik 👍 Combobox, Elastic-en eskutik Combobox, Elisaren eskutik Combobox, MongoDB 👍 Combobox, Visa 👍 Combobox, Watson-ek (Docplanner) Combobox, Wikimediaren eskutik Combobox, Zendesk-en eskutik Multiselect (MongoDB Combobox Design Docs), MongoDB 👍-ren eskutik Aukera anitzeko bilaketa, Wikimediaren eskutik Aukera anitzeko kutxa konbinatua, Vaadin-ek Multiselect, Visa-ren eskutik Transfer (Listbox adibidea), Ant Design-ek Listbox, Hopper-ek List Box, Vaadin-ek Listbox, Visa-ren eskutik Zerrenda bikoitzeko hautatzailea, Red Hat-en eskutik (PatternFly) Zerrenda kutxa bikoitza, Salesforce-ren eskutik (Lightning Design System) Transferen zerrenda, Mantinek Dual Listbox, Dashlite-ren eskutik Txapak vs Pills vs Chips vs Etiketak, Vitaly Friedman-ek Zerrenda-koadroak eta goitibeherako zerrendak, Anna Kaley-ren eskutik (NN/g)
