Vi verŝajne estis tie antaŭe. Kiel ni elektas inter montri modalon al uzantoj, kaj kiam ni navigas ilin al aparta, nova paĝo? Kaj ĉu entute gravas? Efektive, ĝi faras. La decido influas la fluon de uzantoj, ilian kuntekston, ilian kapablon serĉi detalojn, kaj kun ĝi erarfrekvencon kaj taskokompletigon. Ambaŭ opcioj povas esti interrompaj kaj frustraj - en la malĝusta tempo kaj en la malĝusta loko. Do ni prefere ĝustiĝu. Nu, ni vidu kiel fari ĝuste tion. Modaloj kontraŭ Dialogoj kontraŭ Supermetaĵoj kontraŭ Lightboxes Dum ni ofte parolas pri ununura modala UI-komponento, ni ofte ignoras bonajn, komplikajn nuancojn inter ĉiuj malsamaj specoj de modaloj. Fakte, ne ĉiu modalo estas la sama. Modaloj, dialogoj, supermetaĵoj kaj lumkestoj — ĉiuj sonas similaj, sed ili estas fakte sufiĉe malsamaj:
DialogoGenerala termino por "konversacio" (uzanto ↔ sistemo). OverlayMalgranda enhavpanelo montrata supre de paĝo. ModalUser devas interagi kun overlay + fono malŝaltita. Nemodala Uzanto devas interagi kun supermetaĵo + fono ebligitaj. Lumkesto Malklarigita fono por koncentri atenton sur la modalo.
Kiel Anna Kaley elstarigas, la plej multaj supermetaĵoj aperas en la malĝusta tempo, interrompas uzantojn dum kritikaj taskoj, uzas malbonan lingvon kaj rompas la fluon de uzantoj. Ili estas interrompaj laŭ naturo, kaj tipe kun alta nivelo de severeco sen forta bezono de tio.
Verŝajne uzantoj devas esti malrapidigitaj kaj interrompitaj se la sekvoj de sia ago havas altan efikon, sed por la plej multaj scenaroj ne-modaloj estas multe pli subtilaj kaj pli amika opcio por atentigi ion de la uzanto. Se io ajn, mi ĉiam sugestas ke ĝi estu defaŭlta. Modaloj → Por Unuopaj, Memenhavaj Taskoj Kiel dezajnistoj, ni ofte malakceptas modalojn kiel senrilatajn kaj ĝenajn - kaj ofte ili estas! — tamen ili havas ankaŭ sian valoron. Ili povas esti tre helpemaj por averti uzantojn pri eblaj eraroj aŭ helpi ilin eviti datumperdon. Ili ankaŭ povas helpi plenumi rilatajn agojn aŭ esplori detalojn sen interrompi la nunan staton de la paĝo. Sed la plej granda avantaĝo de modaloj estas, ke ili helpas uzantojn konservi la kuntekston de la nuna ekrano. Ĝi ne signifas nur la UI, sed ankaŭ redaktitan enigon, rulan pozicion, staton de akordionoj, elekton de filtriloj, ordigon ktp.
Kelkfoje, uzantoj devas rapide konfirmi elekton (ekz., filtriloj kiel montrite supre) kaj tiam tuj procedi de tie. Aŭtomata konservado povas atingi la samon, kompreneble, sed ĝi ne ĉiam estas bezonata aŭ dezirata. Kaj bloki la UI ofte ne estas bona ideo. Tamen, modaloj ne estas uzataj por iuj taskoj. Tipe, ni uzas ilin por unuopaj, memstaraj taskoj, kie uzantoj devus ensalti, plenumi taskon, kaj poste reveni al kie ili estis. Ne surprize, ili funkcias bone por altprioritato, mallongaj interagoj (ekz., atentigoj, detruaj agoj, rapidaj konfirmoj). Kiam modaloj helpas: 🚫 Modaloj ofte estas interrompaj, enpenetraj kaj konfuzaj.🚫 Ili malfaciligas kompari kaj kopii-alglui.✅ Tamen modaloj permesas al uzantoj konservi plurajn kuntekstojn.✅ Utilaj por malhelpi nemaligeblajn erarojn kaj datumperdon.✅ Utilaj se sendi uzantojn al nova paĝo estus interrompa. ✅ Montru modalon nur se uzantoj taksos la interrompon. ✅ Defaŭlte, preferu neblokantajn dialogojn ("nemodaloj"). ✅ Permesu al uzantoj minimumigi, kaŝi aŭ restarigi la dialogon poste. Paĝoj → Por Kompleksaj, Plurpaŝaj Laborfluoj Sorĉistoj aŭ klapeta navigado ene de modaloj ne tro bone funkcias, eĉ en kompleksaj entreprenaj produktoj - tie, flankaj paneloj aŭ tirkestoj kutime funkcias pli bone. Problemoj komenciĝas kiam uzantoj bezonas kompari aŭ referenci datumpunktojn — tamen modaloj blokas ĉi tiun konduton, do ili remalfermas la saman paĝon en pluraj langetoj anstataŭe.
Por pli kompleksaj fluoj kaj plurpaŝaj procezoj, memstaraj paĝoj funkcias plej bone. Paĝoj ankaŭ funkcias pli bone kiam ili postulas la plenan atenton de la uzanto, kaj referenco al la antaŭa ekrano ne estas tre helpema. Kaj tirkestoj funkcias por subtaskoj kiuj estas tro kompleksaj por simpla modalo, sed ne bezonas plenan paĝan navigadon. Kiam eviti modalojn: 🚫 Evitu modalojn por erarmesaĝoj.🚫 Evitu modalojn por funkcioj sciigoj.🚫 Evitu modalojn por enŝipiĝa sperto.🚫 Evitu modalojn por kompleksaj, longaj plurpaŝaj taskoj.🚫 Evitu multoblajn nestitajn modalojn kaj uzu antaŭan/sekvan anstataŭe. 🚫 Nepre necesajn modalojn. Evitu AmbaŭPor Ripetaj Taskoj En multaj kompleksaj, pezaj produktoj, uzantoj trovos sin plenumi la samajn taskojn ree, denove kaj denove. Tie, kaj modaloj kaj novaj paĝaj navigacioj aldonas froton ĉar ili interrompas la fluon aŭ devigas uzantojn kolekti mankantajn datumojn inter ĉiuj malsamaj langetoj aŭ vidoj. Tro ofte, uzantoj finiĝas kun rompita sperto, plena de senfinaj konfirmoj, troigitaj avertoj, multvortaj instrukcioj aŭ nur mankantaj referencpunktoj. Kiel Saulius Stebulis menciis, en ĉi tiuj scenaroj, disetendeblaj sekcioj aŭ surloka redaktado ofte funkcias pli bone - ili tenas la taskon ankrita al la nuna ekrano. En praktiko, en multaj scenaroj, uzantoj ne plenumas siajn taskojn izole. Ili devas serĉi datumojn, kopii-alglui valorojn, rafini enskribojn en malsamaj lokoj aŭ simple revizii similajn rekordojn dum ili funkcias per siaj taskoj. Supermetaĵoj kaj tirkestoj estas pli helpemaj por konservi aliron al fonaj datumoj dum la tasko. Kiel rezulto, la kunteksto ĉiam restas en sia loko, havebla por referenco aŭ kopio-gluo. Konservu modalojn kaj paĝan navigadon por momentoj, kie la interrompo vere aldonas valoron - precipe por malhelpi kritikajn erarojn. Modaloj kontraŭ Paĝoj: Decida Arbo Iom antaŭe, Ryan Neufeld kunmetis tre helpeman gvidilon por helpi dezajnistojn elekti inter modaloj kaj paĝoj. Ĝi venas kun oportuna PNG-trumfolio kaj ŝablono de Google Doc kun demandoj dividitaj en 7 sekcioj. Ĝi estas longa, ekstreme detala, sed tre facile sekvi:
Ĝi povus aspekti timiga, sed ĝi estas sufiĉe simpla 4-ŝtupa procezo:
Kunteksto de la ekrano. Unue, ni kontrolas ĉu uzantoj bezonas konservi la kuntekston de la suba ekrano. Taskokomplekseco kaj daŭro.Pli simplaj, fokusitaj, ne-distraj taskoj povus uzi modalon, sed longaj, kompleksaj fluoj bezonas paĝon. Referenco al suba paĝo. Tiam ni kontrolas ĉu uzantoj ofte bezonas raporti al datumoj en la fono aŭ ĉu la tasko estas simpla konfirmo aŭ elekto. Elektante la ĝustan supermetaĵon.Fine, se supermetaĵo ja estas bona elekto, ĝi gvidas nin elekti inter modala aŭ nemodala (klini al nemodala).
Envolvante Kiam ajn eblas, evitu bloki la tutan UI. Havu dialogon flosantan, parte kovrante la UI, sed permesante navigadon, movu kaj kopii-alglui. Aŭ montru la enhavon de la modalo kiel flanka tirkesto. Aŭ anstataŭe uzu vertikalan akordionon. Aŭ venigu uzantojn al aparta paĝo se vi bezonas montri multajn detalojn. Sed se vi volas akceli efikecon kaj rapidecon de uzantoj, evitu ĉiakoste modalojn. Uzu ilin por malrapidigi uzantojn, por kunigi ilian atenton, por malhelpi erarojn. Kiel Therese Fessenden notis, neniu ŝatas esti interrompita, sed se vi devas, certigu, ke ĝi absolute valoras la koston. Renkontu "Smart Interface Design Patterns" Vi povas trovi tutan sekcion pri modaloj kaj alternativoj en Smart Interface Design Patterns, nia 15h-video-kurso kun 100s da praktikaj ekzemploj de realaj projektoj — kun viva UX-trejnado poste ĉi-jare. Ĉio de mega-falumoj ĝis kompleksaj entreprenaj tabloj - kun 5 novaj segmentoj aldonitaj ĉiujare. Saltu al senpaga antaŭrigardo. Uzu kodon BIRDIE por ŝpari 15% rabaton. Renkontu Smart Interface Design Patterns, nian videokurson pri interfaca dezajno kaj UX.
Video + UX-TrejnadoNurvidbendo + UX-Trejnado$ 495.00 $ 699.00
Akiru Videon + UX-Trejnadon25 videolecionojn (15h) + Live UX-Trejnadon. 100 tagojn mono-reveno-garantio.Nur filmeto $ 300.00$ 395.00
Akiru la videokurson40 videolecionojn (15h). Ĝisdatigita ĉiujare.Ankaŭ havebla kiel UX-Pakaĵo kun 2 videokursoj.
Utilaj Rimedoj
Malsamaj Specoj de Popups, de Anna Kaley Plej bonaj Praktikoj por Dezajni UI-Modalojn, de Uxcel Ni Uzas Tro da Damnaj Modaloj: UX-Gvidlinioj, de Adrian Egger Modalaj & Nemodaj Dialogoj, de Therese Fessenden Modern Enterprise UI Design: Modalaj Dialogoj, de James Jacobs Modaloj en Dezajnaj Sistemoj
