Tingali nakaadto ka na kaniadto. Giunsa nato pagpili tali sa pagpakita og modal ngadto sa mga tiggamit, ug kanus-a nato sila i-navigate sa usa ka bulag, bag-ong panid? Ug importante ba kini? Sa pagkatinuod, kini tinuod. Ang desisyon nag-impluwensya sa dagan sa mga tiggamit, ang ilang konteksto, ang ilang abilidad sa pagpangita sa mga detalye, ug uban niini ang frequency sa sayup ug pagkompleto sa buluhaton. Ang duha nga mga kapilian mahimong makabalda ug makapahigawad - sa sayup nga oras, ug sa sayup nga lugar. Busa mas maayo nga ato kining buhaton. Aw, tan-awon nato kung unsaon pagbuhat niana. Modals vs. Dialogs vs. Overlays vs. Lightboxes Samtang kanunay kaming maghisgot bahin sa usa ka bahin sa modal nga UI, kanunay namon gibalewala ang maayo, makuti nga mga nuances tali sa tanan nga lainlaing mga lahi sa modal. Sa tinuud, dili tanan nga modal parehas. Mga modal, mga diyalogo, mga overlay, ug mga lightbox — tanan parehas nga paminawon, apan sa tinuud lahi sila:
DialogUsa ka generic nga termino alang sa "pag-istoryahanay" (user ↔ system). OverlayUsa ka gamay nga panel sa sulud nga gipakita sa ibabaw sa usa ka panid. Ang ModalUser kinahanglang makig-interact sa overlay + background disabled. Ang NonmodalUser kinahanglang makig-interact sa overlay + background enabled. LightboxDimmed background aron ipunting ang atensyon sa modal.
Sama sa gipasiugda ni Anna Kaley, kadaghanan sa mga overlay makita sa sayup nga oras, makabalda sa mga tiggamit sa panahon sa kritikal nga mga buluhaton, naggamit sa dili maayo nga sinultihan, ug nagbungkag sa dagan sa mga tiggamit. Sila mga interruptive sa kinaiyahan, ug kasagaran adunay taas nga lebel sa kagrabe nga walay kusog nga panginahanglan alang niana.
Sigurado nga ang mga tiggamit kinahanglan nga hinayhinay ug mabalda kung ang mga sangputanan sa ilang aksyon adunay taas nga epekto, apan alang sa kadaghanan nga mga senaryo nga dili modala labi ka maliputon ug usa ka labi ka mahigalaon nga kapilian aron madala ang usa ka butang sa atensyon sa tiggamit. Kung naa man, kanunay kong gisugyot nga kini usa ka default. Modals → Para sa Single, Kaugalingon nga mga Buluhaton Isip mga tigdesinyo, kanunay namong gisalikway ang mga modals ingon nga wala'y kalabutan ug makalagot - ug kasagaran sila! — apan aduna usab silay bili. Makatabang kaayo sila sa pagpasidaan sa mga tiggamit bahin sa mga potensyal nga sayup o pagtabang kanila nga malikayan ang pagkawala sa datos. Makatabang usab sila sa paghimo sa mga may kalabutan nga aksyon o pag-drill sa mga detalye nga dili makabalda sa karon nga kahimtang sa panid. Apan ang pinakadako nga bentaha sa modals mao nga kini makatabang sa mga tiggamit sa pagpadayon sa konteksto sa kasamtangan nga screen. Wala kini nagpasabot nga ang UI lang, apan gi-edit usab ang input, posisyon sa pag-scroll, estado sa mga akordyon, pagpili sa mga pagsala, paghan-ay, ug uban pa.
Usahay, ang mga tiggamit kinahanglan nga mokumpirma dayon sa usa ka pagpili (pananglitan, mga pagsala sama sa gipakita sa ibabaw) ug dayon magpadayon dayon gikan didto. Ang awtomatikong pag-save mahimo’g makab-ot ang parehas, siyempre, apan dili kanunay kinahanglan o gusto. Ug ang pagbabag sa UI kanunay dili maayong ideya. Bisan pa, ang mga modals wala gigamit alang sa bisan unsang mga buluhaton. Kasagaran, gigamit namo kini alang sa usa, adunay kaugalingon nga mga buluhaton diin ang mga tiggamit kinahanglan nga molukso, mokompleto sa usa ka buluhaton, ug dayon mobalik sa kung asa sila. Dili ikatingala, maayo ang ilang pagtrabaho alang sa taas nga prayoridad, mugbo nga mga interaksyon (pananglitan, mga alerto, makadaot nga mga aksyon, dali nga pagkumpirma). Kung ang modals makatabang: 🚫 Ang mga modal kasagarang makabalda, invasive, ug makalibog.🚫 Gipalisud nila ang pagtandi ug pagkopya-paste. ✅ Ipakita lang ang modala kon hatagan ug bili sa mga user ang pagkabalda. Mga Panid → Alang sa Komplikado, Daghang Lakang nga mga Workflow Ang mga wizard o tabbed nga nabigasyon sulod sa modals dili kaayo mogana, bisan sa komplikadong mga produkto sa negosyo - didto, ang mga side panel o mga drawer kasagarang mas mogana. Nagsugod ang mga kasamok kung ang mga tiggamit kinahanglan nga magkumpara o maghisgot sa mga punto sa datos - bisan pa gibabagan sa mga modal kini nga pamatasan, mao nga giablihan nila pag-usab ang parehas nga panid sa daghang mga tab.
Para sa mas komplikado nga mga agos ug daghang mga lakang nga mga proseso, ang mga standalone nga panid labing maayo. Ang mga panid usab molihok nga mas maayo kung ilang gipangayo ang tibuuk nga atensyon sa tiggamit, ug ang paghisgot sa miaging screen dili kaayo makatabang. Ug ang mga drawer nagtrabaho alang sa mga sub-tasks nga komplikado kaayo alang sa usa ka yano nga modal, apan wala magkinahanglan usa ka tibuuk nga pag-navigate sa panid. Kanus-a malikayan ang mga modal: 🚫 Likayi ang mga modals para sa mga mensahe sa sayop.🚫 Likayi ang mga modals para sa feature notifications.🚫 Likayi ang mga modals para sa onboarding nga kasinatian.🚫 Likayi ang mga modals alang sa komplikado, taas nga multi-step-tasks.🚫 Likayi ang daghang nested modals ug gamita ang prev/next instead.🚫 Likayi ang mga modals nga walay gikinahanglan nga dili kinahanglan nga auto-trigger. Likayi ang duhaPara sa Gibalikbalik nga mga Buluhaton Sa daghang mga komplikado, bug-at nga mga produkto, makit-an sa mga tiggamit ang ilang kaugalingon nga nagbuhat sa parehas nga mga buluhaton nga balik-balik, balik-balik. Didto, ang mga modals ug bag-ong mga nabigasyon sa panid makadugang sa panagbingkil tungod kay kini makabalda sa dagan o mopugos sa mga tiggamit sa pagtigom sa nawala nga datos tali sa tanang lain-laing mga tab o panglantaw. Kasagaran, ang mga tiggamit adunay usa ka guba nga kasinatian, puno sa walay katapusan nga mga kumpirmasyon, gipasobrahan nga mga pasidaan, verbose nga mga instruksyon, o nawala nga mga reference point. Sama sa nahisgutan ni Saulius Stebulis, sa kini nga mga senaryo, ang mapalapad nga mga seksyon o in-place nga pag-edit kanunay nga molihok nga mas maayo - gipadayon nila ang buluhaton nga nakaangkla sa karon nga screen. Sa praktis, sa daghang mga senaryo, ang mga tiggamit dili makompleto ang ilang mga buluhaton nga nag-inusara. Kinahanglan nilang pangitaon ang mga datos, kopya-paste ang mga kantidad, ipino ang mga entri sa lain-laing mga dapit, o ribyuha lang ang susama nga mga rekord samtang nagtrabaho sila sa ilang mga buluhaton. Ang mga overlay ug mga drawer mas makatabang sa pagpadayon sa pag-access sa background data sa panahon sa buluhaton. Ingon usa ka sangputanan, ang konteksto kanunay nga nagpabilin sa iyang lugar, magamit alang sa pakisayran o pagkopya-paste. I-save ang mga modals ug pag-navigate sa panid alang sa mga higayon diin ang pagkabalda tinuud nga nagdugang bili — labi na aron malikayan ang mga kritikal nga sayup. Modals vs. Mga Panid: Usa ka Desisyon nga Punoan Usa ka panahon kaniadto, si Ryan Neufeld nagbutang usa ka makatabang kaayo nga giya aron matabangan ang mga tigdesinyo sa pagpili tali sa mga modals ug mga panid. Kini adunay usa ka magamit nga PNG cheatsheet ug usa ka template sa Google Doc nga adunay mga pangutana nga gibahin sa 7 nga mga seksyon. Kini taas, hilabihan ka bug-os, apan sayon kaayo nga sundon:
Tingali kini makahadlok, apan kini usa ka yano nga proseso sa 4 ka lakang:
Konteksto sa screen.Una, among susihon kung ang mga tiggamit kinahanglan nga magpadayon sa konteksto sa nagpahiping screen. Ang pagkakomplikado ug gidugayon sa buluhaton. Ang mas simple, nakapokus, dili makabalda nga mga buluhaton mahimong mogamit ug modal, apan ang taas, komplikado nga mga dagan nagkinahanglan ug panid. Reference to underlying page.Then, we check if users often need to refer to data in the background or if the task is a simple confirmation or selection. Pagpili sa husto nga overlay.Sa katapusan, kung ang usa ka overlay usa gayud ka maayong kapilian, kini naggiya kanato sa pagpili tali sa modal o nonmodal (nagsandig ngadto sa usa ka nonmodal).
Pagputos Kon mahimo, likayi ang pagbabag sa tibuok UI. Adunay usa ka dialog nga naglutaw, nga adunay bahin nga nagtabon sa UI, apan gitugotan ang pag-navigate, pag-scroll, ug pagkopya-paste. O ipakita ang sulod sa modal isip side drawer. O gamita hinuon ang bertikal nga akordyon. O dad-a ang mga tiggamit sa usa ka bulag nga panid kung kinahanglan nimo nga ipakita ang daghang detalye. Apan kung gusto nimong pauswagon ang kahusayan ug katulin sa mga tiggamit, likayi ang mga modal sa tanan nga gasto. Gamita kini aron mapahinay ang mga tiggamit, aron mabugkos ang ilang atensyon, aron malikayan ang mga sayup. Sama sa giingon ni Therese Fessenden, walay usa nga ganahan nga mabalda, apan kung kinahanglan nimo, siguroha nga kini hingpit nga takus sa gasto. Himamata ang "Smart Interface Design Patterns" Makita nimo ang tibuok nga seksyon bahin sa mga modals ug mga alternatibo sa Smart Interface Design Patterns, ang among 15h-video nga kurso nga adunay 100s nga praktikal nga mga ehemplo gikan sa tinuod nga kinabuhi nga mga proyekto - nga adunay live UX nga pagbansay sa ulahi karong tuiga. Ang tanan gikan sa mega-dropdowns hangtod sa komplikado nga mga lamesa sa negosyo - nga adunay 5 ka bag-ong mga bahin nga gidugang matag tuig. Ambak sa usa ka libre nga preview. Gamita ang code BIRDIE aron makadaginot og 15% nga diskwento. Himamata ang Smart Interface Design Patterns, among video course sa interface design & UX.
Video + Paghanas sa UXVideo langVideo + Paghanas sa UX$ 495.00 $ 699.00
Pagkuha og Video + UX Training25 video lessons (15h) + Live UX Training.100 ka adlaw nga money-back-guarantee.Video lang$ 300.00$ 395.00
Kuhaa ang video course40 video lessons (15h). Gi-update matag tuig. Anaa usab ingon usa ka UX Bundle nga adunay 2 nga kurso sa video.
Mapuslanon nga mga Kapanguhaan
Nagkalainlain nga mga Matang sa Popup, ni Anna Kaley Labing Maayo nga Mga Praktis alang sa Pagdesinyo sa mga Modal sa UI, ni Uxcel Gigamit Nato ang Daghang Damn Modals: Mga Giya sa UX, ni Adrian Egger Modal ug Nonmodal Dialogs, ni Therese Fessenden Modernong Enterprise UI Design: Modal Dialogs, ni James Jacobs Mga Modal sa Sistema sa Disenyo
