Malamang nandoon ka na dati. Paano tayo pipili sa pagitan ng pagpapakita ng modal sa mga user, at kailan natin sila i-navigate sa isang hiwalay, bagong page? At mahalaga ba ito sa lahat? Sa totoo lang, ginagawa nito. Ang desisyon ay nakakaimpluwensya sa daloy ng mga user, ang kanilang konteksto, ang kanilang kakayahang maghanap ng mga detalye, at kasama nito ang dalas ng error at pagkumpleto ng gawain. Ang parehong mga opsyon ay maaaring nakakagambala at nakakadismaya — sa maling oras, at sa maling lugar. Kaya mas mabuting ayusin natin ito. Well, tingnan natin kung paano gawin iyon. Modals vs. Dialogs vs. Overlays vs. Lightboxes Bagama't madalas naming pinag-uusapan ang tungkol sa iisang bahagi ng modal UI, madalas naming binabalewala ang maayos at masalimuot na mga nuances sa pagitan ng lahat ng iba't ibang uri ng mga modal. Sa katunayan, hindi lahat ng modal ay pareho. Mga modal, dialog, overlay, at lightbox — lahat ay magkatulad, ngunit ang mga ito ay talagang magkaiba:
DialogIsang pangkaraniwang termino para sa "pag-uusap" (user ↔ system). OverlayIsang maliit na panel ng nilalaman na ipinapakita sa tuktok ng isang pahina. Dapat makipag-ugnayan ang ModalUser sa overlay + background na hindi pinagana. Dapat makipag-ugnayan ang NonmodalUser sa overlay + background na pinagana. LightboxDimmed background upang ituon ang pansin sa modal.
Tulad ng itinatampok ni Anna Kaley, lumilitaw ang karamihan sa mga overlay sa maling oras, nakakaabala sa mga user sa mga kritikal na gawain, gumagamit ng hindi magandang pananalita, at nakakasira sa daloy ng mga user. Ang mga ito ay likas na nakakagambala, at karaniwang may mataas na antas ng kalubhaan nang walang matinding pangangailangan para doon.
Tiyak na ang mga user ay dapat na mabagal at maantala kung ang mga kahihinatnan ng kanilang pagkilos ay may mataas na epekto, ngunit para sa karamihan ng mga sitwasyon, ang mga non-modal ay mas banayad at isang mas magiliw na opsyon upang dalhin ang isang bagay sa atensyon ng user. Kung mayroon man, palagi kong iminumungkahi na maging default ito. Modals → Para sa Single, Self-Contained Tasks Bilang mga taga-disenyo, madalas naming i-dismiss ang mga modal bilang hindi nauugnay at nakakainis — at kadalasan ay ganoon! — gayon ma'y mayroon din silang halaga. Maaari silang maging lubhang kapaki-pakinabang upang bigyan ng babala ang mga user tungkol sa mga potensyal na pagkakamali o tulungan silang maiwasan ang pagkawala ng data. Maaari din silang tumulong na magsagawa ng mga nauugnay na pagkilos o mag-drill down sa mga detalye nang hindi nakakaabala sa kasalukuyang estado ng page. Ngunit ang pinakamalaking bentahe ng mga modal ay ang pagtulong nila sa mga user na panatilihin ang konteksto ng kasalukuyang screen. Hindi lang ang UI ang ibig sabihin nito, kundi pati na rin ang na-edit na input, posisyon ng pag-scroll, estado ng mga accordion, pagpili ng mga filter, pag-uuri, at iba pa.
Kung minsan, kailangan ng mga user na kumpirmahin ang isang pagpili nang mabilis (hal., mga filter tulad ng ipinapakita sa itaas) at pagkatapos ay magpatuloy kaagad mula doon. Ang awtomatikong pag-save ay maaaring makamit ang pareho, siyempre, ngunit hindi ito palaging kailangan o ninanais. At madalas na hindi magandang ideya ang pagharang sa UI. Gayunpaman, ang mga modal ay hindi ginagamit para sa anumang mga gawain. Karaniwan, ginagamit namin ang mga ito para sa mga single, self-contained na mga gawain kung saan ang mga user ay dapat tumalon, kumpletuhin ang isang gawain, at pagkatapos ay bumalik sa kung nasaan sila. Hindi nakakagulat, gumagana nang maayos ang mga ito para sa mataas na priyoridad, maiikling pakikipag-ugnayan (hal., mga alerto, mapanirang pagkilos, mabilis na pagkumpirma). Kapag tumulong ang modals: 🚫 Ang mga modal ay kadalasang nakakagambala, nagsasalakay, at nakakalito.🚫 Pinapahirapan ng mga ito ang pagkumpara at pagkopya-paste. ✅ Magpakita lang ng modal kung papahalagahan ng mga user ang pagkagambala. Mga Pahina → Para sa Mga Kumplikado, Multi-Step na Workflow Ang mga wizard o naka-tab na navigation sa loob ng modals ay hindi masyadong gumagana, kahit na sa mga kumplikadong produkto ng enterprise — doon, ang mga side panel o drawer ay karaniwang mas gumagana. Magsisimula ang mga problema kapag kailangan ng mga user na maghambing o mag-reference ng mga data point — ngunit hinaharangan ng mga modal ang gawi na ito, kaya muli nilang buksan ang parehong page sa maraming tab.
Para sa mas kumplikadong mga daloy at maraming hakbang na proseso, pinakamahusay na gumagana ang mga standalone na page. Gumagana rin nang mas mahusay ang mga page kapag hinihingi nila ang buong atensyon ng user, at hindi masyadong nakakatulong ang pagtukoy sa nakaraang screen. At gumagana ang mga drawer para sa mga sub-task na masyadong kumplikado para sa isang simpleng modal, ngunit hindi nangangailangan ng buong page navigation. Kailan maiiwasan ang mga modal: 🚫 Iwasan ang mga modal para sa mga mensahe ng error.🚫 Iwasan ang mga modal para sa mga abiso sa feature.🚫 Iwasan ang mga modal para sa karanasan sa onboarding.🚫 Iwasan ang mga modal para sa kumplikado, mahahabang multi-step-task.🚫 Iwasan ang maraming nested modal at gamitin ang prev/next sa halip. Iwasan ang ParehoPara sa Paulit-ulit na mga Gawain Sa maraming kumplikado, mabigat sa gawaing produkto, makikita ng mga user ang kanilang sarili na gumaganap ng parehong mga gawain nang paulit-ulit, paulit-ulit. Doon, ang parehong mga modal at bagong page navigation ay nagdaragdag ng friction dahil nakakaabala ang mga ito sa daloy o pinipilit ang mga user na mangalap ng nawawalang data sa pagitan ng lahat ng iba't ibang tab o view. Kadalasan, ang mga user ay nauuwi sa isang sirang karanasan, puno ng walang katapusang mga kumpirmasyon, pinalaking babala, mga verbose na tagubilin, o kulang lang ng mga reference point. Gaya ng binanggit ni Saulius Stebulis, sa mga sitwasyong ito, kadalasang gumagana nang mas mahusay ang mga napapalawak na seksyon o in-place na pag-edit — pinapanatili nilang naka-angkla ang gawain sa kasalukuyang screen. Sa pagsasagawa, sa maraming sitwasyon, hindi kinukumpleto ng mga user ang kanilang mga gawain nang nakahiwalay. Kailangan nilang maghanap ng data, kopyahin-paste ang mga halaga, pinuhin ang mga entry sa iba't ibang lugar, o suriin lamang ang mga katulad na tala habang ginagawa nila ang kanilang mga gawain. Ang mga overlay at drawer ay mas nakakatulong sa pagpapanatili ng access sa background data sa panahon ng gawain. Bilang resulta, ang konteksto ay palaging nananatili sa lugar nito, na magagamit para sa sanggunian o kopyahin-i-paste. I-save ang mga modal at page navigation para sa mga sandali kung saan ang pagkaantala ay tunay na nagdaragdag ng halaga — lalo na upang maiwasan ang mga kritikal na pagkakamali. Modals vs. Pages: Isang Decision Tree Noong nakaraan, nagsama si Ryan Neufeld ng isang napaka-kapaki-pakinabang na gabay upang matulungan ang mga taga-disenyo na pumili sa pagitan ng mga modal at mga pahina. Ito ay may kasamang madaling gamiting PNG cheatsheet at isang template ng Google Doc na may mga tanong na pinaghiwa-hiwalay sa 7 seksyon. Ito ay mahaba, lubhang masinsinan, ngunit napakadaling sundin:
Maaaring mukhang nakakatakot, ngunit ito ay isang medyo simpleng proseso ng 4 na hakbang:
Konteksto ng screen. Una, tinitingnan namin kung kailangan ng mga user na panatilihin ang konteksto ng pinagbabatayan na screen. Ang pagiging kumplikado at tagal ng gawain. Ang mga mas simple, nakatuon, at hindi nakakagambalang mga gawain ay maaaring gumamit ng isang modal, ngunit ang mahaba, kumplikadong mga daloy ay nangangailangan ng isang pahina. Sanggunian sa pinagbabatayan na pahina. Pagkatapos, tinitingnan namin kung ang mga user ay madalas na kailangang sumangguni sa data sa background o kung ang gawain ay isang simpleng pagkumpirma o pagpili. Pagpili ng tamang overlay. Sa wakas, kung ang isang overlay ay talagang isang magandang opsyon, ginagabayan tayo nito na pumili sa pagitan ng modal o nonmodal (nakasandal sa isang nonmodal).
Pagbabalot Hangga't maaari, iwasang i-block ang buong UI. Magkaroon ng dialog na lumulutang, bahagyang sumasaklaw sa UI, ngunit pinapayagan ang pag-navigate, pag-scroll, at pagkopya-paste. O ipakita ang mga nilalaman ng modal bilang side drawer. O sa halip ay gumamit ng patayong akurdyon. O dalhin ang mga user sa isang hiwalay na page kung kailangan mong magpakita ng maraming detalye. Ngunit kung gusto mong palakasin ang kahusayan at bilis ng mga user, iwasan ang mga modal sa lahat ng gastos. Gamitin ang mga ito para pabagalin ang mga user, para i-bundle ang kanilang atensyon, para maiwasan ang mga pagkakamali. Gaya ng nabanggit ni Therese Fessenden, walang gustong maabala, ngunit kung kinakailangan, tiyaking sulit ang halaga nito. Kilalanin ang "Mga Pattern ng Smart Interface na Disenyo" Makakahanap ka ng buong seksyon tungkol sa mga modal at alternatibo sa Mga Pattern ng Disenyo ng Smart Interface, ang aming 15h-video na kurso na may 100 na praktikal na halimbawa mula sa mga proyekto sa totoong buhay — na may live na pagsasanay sa UX sa huling bahagi ng taong ito. Lahat mula sa mega-dropdown hanggang sa kumplikadong mga talahanayan ng enterprise — na may 5 bagong segment na idinaragdag bawat taon. Tumalon sa isang libreng preview. Gamitin ang code BIRDIE para makatipid ng 15% diskwento. Kilalanin ang Smart Interface Design Patterns, ang aming video course sa interface design at UX.
Pagsasanay sa Video + UXVideo lamangVideo + Pagsasanay sa UX$ 495.00 $ 699.00
Kumuha ng Video + UX Training25 video lessons (15h) + Live UX Training.100 araw na money-back-guarantee.Video lang$ 300.00$ 395.00
Kunin ang video course40 video lessons (15h). Ini-update taun-taon. Available din bilang isang UX Bundle na may 2 video course.
Mga Kapaki-pakinabang na Mapagkukunan
Iba't ibang Uri ng Popup, ni Anna Kaley Pinakamahuhusay na Kasanayan para sa Pagdidisenyo ng Mga Modal ng UI, ni Uxcel Gumagamit Kami ng Napakaraming Damn Modals: Mga Alituntunin ng UX, ni Adrian Egger Modal at Nonmodal Dialogs, ni Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, ni James Jacobs Mga Modal sa Mga Sistema ng Disenyo
