Ou pwobableman te la anvan. Ki jan nou chwazi ant montre yon modal itilizatè yo, ak ki lè nou navige yo nan yon nouvo paj separe? Epi èske li enpòtan nan tout? Aktyèlman, li fè sa. Desizyon an enfliyanse koule itilizatè yo, kontèks yo, kapasite yo pou gade detay, epi avèk li frekans erè ak fini travay. Tou de opsyon yo ka deranje ak fwistre - nan move moman, ak nan move kote. Se konsa, nou ta pi bon jwenn li dwat. Oke, ann wè ki jan fè jis sa. Modèl vs Dyalòg vs Superpositions vs Lightboxes Pandan ke nou souvan pale sou yon sèl eleman modal UI, nou souvan inyore amann, nuans konplike ant tout diferan kalite modal yo. An reyalite, se pa tout modal yo menm. Modèl, dyalòg, superpositions, ak lightboxes - tout son menm jan an, men yo aktyèlman byen diferan:
Dyalòg Yon tèm jenerik pou "konvèsasyon" (itilizatè ↔ sistèm). Overlay Yon ti panèl kontni ki parèt sou tèt yon paj. ModalUser dwe kominike avèk superposition + background andikape. NonmodalUser dwe kominike avèk kouvri + background aktive. LightboxDimed background pou konsantre atansyon sou modal la.
Kòm Anna Kaley mete aksan sou, pifò superpositions parèt nan move moman, entèwonp itilizatè yo pandan travay enpòtan yo, sèvi ak langaj pòv, epi kraze koule itilizatè yo. Yo se interruptive pa nati, ak tipikman ak yon wo nivo de severite san yon gwo bezwen pou sa.
Se vre wi itilizatè yo dwe ralanti epi koupe si konsekans yo nan aksyon yo gen yon gwo enpak, men pou pifò senaryo ki pa modal yo pi plis sibtil ak yon opsyon ki pi zanmitay pote yon bagay nan atansyon itilizatè a. Si nenpòt bagay, mwen toujou sijere li yo dwe yon default. Modèl → Pou Travay sèl, endepandan Kòm konsèpteur, nou souvan rejte modal kòm petinan ak anmèdan - e souvan yo ye! — poutan yo gen valè yo tou. Yo ka trè itil pou avèti itilizatè yo sou erè potansyèl oswa ede yo evite pèt done yo. Yo ka ede tou fè aksyon ki gen rapò oswa fè egzèsis desann nan detay san yo pa entèwonp eta aktyèl la nan paj la. Men, pi gwo avantaj modal yo se ke yo ede itilizatè yo kenbe kontèks ekran aktyèl la. Li pa vle di sèlman UI a, men tou, opinyon modifye, pozisyon defile, eta akòdeyon, seleksyon filtè, klasman, ak sou sa.
Pafwa, itilizatè yo bezwen konfime yon seleksyon byen vit (egzanp, filtè jan yo montre pi wo a) ak Lè sa a, kontinye imedyatman soti nan la. Oto-sove ka reyalize menm bagay la, nan kou, men li pa toujou nesesè oswa vle. Ak bloke UI a souvan pa yon bon lide. Sepandan, modal yo pa itilize pou okenn travay. Tipikman, nou itilize yo pou yon sèl, travay endepandan kote itilizatè yo ta dwe sote nan, ranpli yon travay, ak Lè sa a, retounen nan kote yo te ye. San sipriz, yo travay byen pou entèraksyon kout priyorite (egzanp, alèt, aksyon destriktif, konfimasyon rapid). Lè modal yo ede: 🚫 Modal yo souvan deranje, anvayisan, ak konfizyon.🚫 Yo fè li difisil pou konpare ak kopye-kole.✅ Men, modal pèmèt itilizatè yo kenbe plizyè kontèks.✅ Itil pou anpeche erè irevokabl ak pèt done.✅ Itil si voye itilizatè yo nan yon nouvo paj ta deranje. ✅ Montre yon modal sèlman si itilizatè yo ap apresye dezòd la. ✅ Pa defo, prefere dyalòg ki pa bloke ("nonmodals").✅ Pèmèt itilizatè yo minimize, kache oswa retabli dyalòg la pita.✅ Sèvi ak yon modal pou ralanti itilizatè yo, pa egzanp, verifye opinyon konplèks. ✅ Bay yon fason pou soti ak "Fèmen", kle ESC, oswa klike deyò bwat la. Paj → Pou Workflows Konplèks, Plizyè Etap Wizards oswa navigasyon onglet nan modal pa travay twò byen, menm nan pwodwi antrepriz konplèks - la, panno bò oswa tiwa anjeneral travay pi byen. Pwoblèm kòmanse lè itilizatè yo bezwen konpare oswa referans pwen done - men modal bloke konpòtman sa a, kidonk yo re-louvri menm paj la nan plizyè onglet olye.
Pou koule pi konplèks ak pwosesis milti-etap, paj otonòm travay pi byen. Paj yo travay pi byen tou lè yo mande itilizatè a tout atansyon, epi referans a ekran anvan an pa trè itil. Ak tiwa travay pou sous-travay ki twò konplèks pou yon modal senp, men pa bezwen yon navigasyon paj konplè. Lè pou evite modal yo: 🚫 Evite modal pou mesaj erè.🚫 Evite modal pou notifikasyon karakteristik yo.🚫 Evite modal pou eksperyans abòde.🚫 Evite modal pou travay konplèks, ki long ki gen plizyè etap. Evite tou dePou Travay Repete Nan anpil pwodwi konplèks, travay-lou, itilizatè yo pral jwenn tèt yo fè menm travay yo repete, sou yo ak sou ankò. La, tou de modal ak nouvo navigasyon paj ajoute friksyon paske yo entèwonp koule a oswa fòse itilizatè yo rasanble done ki manke ant tout onglet diferan oswa opinyon yo. Twò souvan, itilizatè yo fini ak yon eksperyans kase, plen ak konfimasyon ki pa janm fini, avètisman ekzajere, enstriksyon pwolib, oswa jis manke pwen referans. Kòm Saulius Stebulis mansyone, nan senaryo sa yo, seksyon dilatabl oswa koreksyon an plas souvan travay pi byen - yo kenbe travay la ancrage nan ekran aktyèl la. Nan pratik, nan anpil senaryo, itilizatè yo pa ranpli travay yo nan izolasyon. Yo bezwen chèche done, kopye-kole valè, rafine antre nan diferan kote, oswa jis revize dosye ki sanble pandan y ap travay nan travay yo. Kouvèti ak tiwa yo pi itil nan kenbe aksè a done background pandan travay la. Kòm yon rezilta, kontèks la toujou rete nan plas li, disponib pou referans oswa kopye-kole. Sove modal ak navigasyon paj pou moman kote entèripsyon an vrèman ajoute valè - espesyalman pou anpeche erè kritik. Modal vs Paj: Yon Pye Desizyon Yon ti tan ankò, Ryan Neufeld mete ansanm yon gid trè itil pou ede konsèpteur yo chwazi ant modal ak paj. Li vini ak yon cheatsheet PNG sou la men ak yon modèl Google Doc ak kesyon ki divize atravè 7 seksyon. Li long, trè apwofondi, men trè fasil pou swiv:
Li ta ka sanble redoutable, men li se yon pwosesis byen senp 4-etap:
Kontèks ekran an.Premyèman, nou tcheke si itilizatè yo bezwen kenbe kontèks ekran an kache. Konpleksite ak dire travay la. Travay ki pi senp, konsantre, ki pa distrè ta ka itilize yon modal, men long, koule konplèks bezwen yon paj. Referans nan paj kache.Lè sa a, nou tcheke si itilizatè yo souvan bezwen al gade nan done nan background nan oswa si travay la se yon konfimasyon senp oswa seleksyon. Chwazi bon kouch. Finalman, si yon kouch se vre yon bon opsyon, li gide nou pou chwazi ant modal oswa nonmodal (apiye nan direksyon pou yon nonmodal).
Anbalaj Chak fwa sa posib, evite bloke tout UI a. Gen yon dyalòg k ap flote, ki kouvri pasyèlman UI a, men ki pèmèt navigasyon, defile, ak kopye-kole. Oswa montre sa ki nan modal la kòm yon tiwa bò. Oswa sèvi ak yon akòdeyon vètikal olye. Oswa pote itilizatè yo nan yon paj separe si ou bezwen montre anpil detay. Men, si ou vle ranfòse efikasite itilizatè yo ak vitès, evite modal nan tout pri. Sèvi ak yo pou ralanti itilizatè yo, pou rasanble atansyon yo, pou anpeche erè. Kòm Therese Fessenden te note, pèsonn pa renmen entèwonp, men si ou dwe, asire w ke li absoliman vo pri a. Rankontre "Modèl konsepsyon entèfas entelijan" Ou ka jwenn yon seksyon antye sou modal ak altènativ nan Smart Interface Design Patterns, kou 15h-videyo nou an ak 100s nan egzanp pratik ki soti nan pwojè lavi reyèl - ak yon fòmasyon UX ap viv pita nan ane sa a. Tout bagay soti nan mega-dropdowns nan tablo antrepriz konplèks - ak 5 nouvo segman ajoute chak ane. Ale nan yon aperçu gratis. Sèvi ak kòd BIRDIE pou ekonomize 15% remise. Rankontre Smart Interface Design Patterns, kou videyo nou an sou konsepsyon koòdone ak UX.
Videyo + Fòmasyon UX Videyo sèlman Videyo + Fòmasyon UX$ 495.00 $ 699.00
Jwenn Videyo + Fòmasyon UX 25 leson videyo (15h) + Fòmasyon UX Live.100 jou garanti lajan-back.Videyo sèlman$ 300.00$ 395.00
Jwenn kou videyo a 40 leson videyo (15h). Mizajou chak ane. Disponib tou kòm yon pake UX ak 2 kou videyo.
Resous itil
Diferan Kalite Popups, pa Anna Kaley Pi bon pratik pou konsepsyon UI Modal, pa Uxcel Nou itilize twòp modèl modi: direktiv UX, pa Adrian Egger Modal & Nonmodal Dyalòg, pa Therese Fessenden Modèn Enterprise UI Design: Modal Dyalòg, pa James Jacobs Modal nan Sistèm Design
