Ebia woakɔ hɔ pɛn. Yɛbɛyɛ dɛn apaw sɛ yɛbɛkyerɛ modal bi akyerɛ wɔn a wɔde di dwuma no, ne bere bɛn na yɛde wɔn kɔ kratafa foforo a ɛyɛ soronko so? Na so ɛho hia koraa? Nokwarem no, ɛyɛ saa. Gyinaesi no nya wɔn a wɔde di dwuma no nsu a ɛsen, wɔn nsɛm a ɛfa ho, sɛnea wotumi hwehwɛ nsɛm nketenkete, ne nea ɛka ho no di mfomso mpɛn dodow ne adwuma a wowie. Nneɛma abien no nyinaa betumi ayɛ nea ɛhaw adwene na ɛyɛ abasamtu — wɔ bere a ɛnteɛ mu, ne beae a ɛnteɛ. Enti ɛbɛyɛ papa sɛ yɛbɛnya no yie. Wiɛ, ma yɛnhwɛ sɛnea yɛbɛyɛ saa pɛpɛɛpɛ. Modals vs. Nkɔmmɔbɔ vs. Overlays vs. Lightboxes Bere a yɛtaa ka modal UI fã biako ho asɛm no, yɛtaa bu yɛn ani gu nsɛm nketenkete a ɛyɛ fɛ a ɛyɛ nwonwa a ɛda modal ahorow no nyinaa ntam no so. Nokwarem no, ɛnyɛ modal biara na ɛyɛ pɛ. Modals, dialogs, overlays, ne lightboxes — ne nyinaa nnyigyei yɛ pɛ, nanso nokwarem no ɛyɛ soronko koraa:
DialogAsɛmfua a wɔde di dwuma wɔ ɔkwan a ɛkɔ akyiri so ma “nkɔmmɔbɔ” (ɔdefo ↔ nhyehyɛe). OverlayAsɛmti panel ketewa bi a wɔda no adi wɔ kratafa bi atifi. Ɛsɛ sɛ ModalUser ne overlay + background disabled di nkitaho. Ɛsɛ sɛ NonmodalUser di nkitaho ne overlay + background enabled. LightboxDimmed akyi de twe adwene si modal no so.
Sɛnea Anna Kaley si so dua no, overlay dodow no ara pue wɔ bere a ɛnteɛ mu, ɛtwitware wɔn a wɔde di dwuma no mu bere a wɔreyɛ nnwuma a ɛho hia, wɔde kasa a enye di dwuma, na ɛsɛe wɔn a wɔde di dwuma no nsu. Wɔn awosu mu yɛ wɔn a wɔtwa nsɛm mu, na mpɛn pii no wɔn mu yɛ den kɛse a enhia sɛ wɔyɛ saa denneennen.
Akyinnye biara nni ho sɛ ɛsɛ sɛ wɔbrɛ wɔn a wɔde di dwuma no ase na wɔtwa wɔn ntam sɛ nea efi wɔn adeyɛ no mu ba no nya nkɛntɛnso kɛse a, nanso wɔ tebea dodow no ara mu no, nea ɛnyɛ akwan horow no yɛ anifere kɛse na ɛyɛ adamfofa kwan so ɔkwan a wɔfa so de biribi ba nea ɔde di dwuma no anim. Sɛ biribi wɔ hɔ a, bere nyinaa mehyɛ nyansa sɛ ɛnyɛ default. Modals → Ma Nnwuma Baako, a Ɛwɔ Ne Ho Sɛ́ adwumfo no, yɛtaa bu modals sɛ ɛho nhia na ɛyɛ ahometew — na mpɛn pii no ɛte saa! — nanso wowo won bo nso. Wobetumi aboa kɛse sɛ wɔbɛbɔ wɔn a wɔde di dwuma no kɔkɔ wɔ mfomso ahorow a ebetumi aba ho anaasɛ wɔbɛboa wɔn ma wɔakwati data a wɔbɛhwere. Wobetumi nso aboa ma wɔayɛ nneyɛe a ɛfa ho anaasɛ wɔbɛhwehwɛ nsɛm nketenkete mu a wɔrentwitware kratafa no tebea a ɛwɔ hɔ mprempren no mu. Nanso mfaso kɛse a ɛwɔ modals so ne sɛ ɛboa wɔn a wɔde di dwuma no ma wɔkora nsɛm a ɛfa ho a ɛwɔ mprempren screen no so. Ɛnkyerɛ UI nko ara, na mmom edited input, scrolling position, state of accordions, selection of filters, sorting, ne nea ɛkeka ho nso.
Ɛtɔ da bi a, ɛsɛ sɛ wɔn a wɔde di dwuma no si nea wɔapaw so dua ntɛmntɛm (e.g., filters sɛnea wɔakyerɛ wɔ atifi hɔ no) na afei wɔtoa so ntɛm ara fi hɔ. Auto-save betumi ayɛ saa ara, nokwarem no, nanso ɛnyɛ bere nyinaa na ɛho hia anaasɛ wɔpɛ. Na UI no a wobɛsiw ano no ntaa nyɛ adwene pa. Nanso, wɔmfa modals nni dwuma mma nnwuma biara. Mpɛn pii no, yɛde di dwuma ma nnwuma biako a ɛyɛ ne ho a ɛsɛ sɛ wɔn a wɔde di dwuma no huruw kɔ mu, wie adwuma bi, na afei wɔsan kɔ baabi a na wɔwɔ. Ɛnyɛ nwonwa sɛ wɔyɛ adwuma yiye ma nkitahodi a ɛho hia kɛse, tiawa (e.g., kɔkɔbɔ, nneyɛe a ɛsɛe ade, nea wosi so dua ntɛmntɛm). Bere a modals boa: 🚫 Modals taa yɛ basabasa, invasive, na ɛyɛ basaa.🚫 Ɛma ɛyɛ den sɛ wɔde bɛtoto ho na wɔde copy-paste.✅ Nanso modals ma wɔn a wɔde di dwuma no kwan ma wɔhwɛ nsɛm a ɛfa ho pii so.✅ Mfaso wɔ so sɛ wobesiw mfomso a wontumi nsakra ne data a wɔhwere ano.✅ Mfaso wɔ so sɛ sɛ wɔde wɔn a wɔde di dwuma no bɛkɔ krataafa foforo so a, ɛbɛyɛ basabasa. ✅ Kyerɛ modal bi sɛ wɔn a wɔde di dwuma no bɛbu ɔhaw no sɛ ɛsom bo nkutoo a.✅ Sɛnea wɔahyɛ no, pɛ nkɔmmɔbɔ a ɛnyɛ nea esiw ano (“nonmodals”).✅ Ma wɔn a wɔde di dwuma no kwan ma wɔmfa nkɔmmɔbɔ no nyɛ ketewaa, sie, anaa nsan mfa nkɔ akyiri yi.✅ Fa modal di dwuma de brɛ wɔn a wɔde di dwuma no ase, s.e., hwɛ sɛ wɔde nsɛm a ɛyɛ den no yɛ nokware.✅ Fa “Close”, ESC safoa no ma ɔkwan a wobɛfa so afi mu adaka mu. Nkratafa → Ma Adwumayɛ a Ɛyɛ Den, Anamɔn Pii Wizards anaa tabbed navigation wɔ modals mu no nnyɛ adwuma yie dodo, mpo wɔ adwumayɛbea nneɛma a ɛyɛ den mu — ɛhɔ, side panels anaa drawers taa yɛ adwuma yie. Ɔhaw fi ase bere a ɛho hia sɛ wɔn a wɔde di dwuma no de toto anaa wɔde kyerɛ data nsɛntitiriw — nanso modals siw saa suban yi ano, enti wɔsan bue krataafa koro no ara wɔ tab ahorow pii mu mmom.
Sɛ wopɛ nsuo a ɛsene a ɛyɛ den ne anammɔn pii nhyehyɛeɛ a, nkratafa a ɛgyina hɔ ma no yɛ adwuma yie. Nkratafa nso yɛ adwuma yiye bere a ɛhwehwɛ sɛ nea ɔde di dwuma no de n’adwene si so koraa no, na sɛ wobɛtwe adwene asi screen a atwam no so a, ɛnyɛ mmoa kɛse. Na drawers yɛ adwuma ma sub-tasks a ɛyɛ den dodo ma modal a ɛnyɛ den, nanso enhia kratafa mũ no nyinaa navigation. Bere a ɛsɛ sɛ wokwati modals: 🚫 Kwati modals ma mfomso nkrasɛm.🚫 Kwati modals ma feature notifications.🚫 Kwati modals ma onboarding osuahu.🚫 Kwati modals ma complex, tenten multi-step-tasks.🚫 Kwati multiple nested modals na fa prev/next di dwuma mmom.🚫 Kwati auto-triggered modals gye sɛ ɛho hia koraa. Kwati Abien no nyinaaWɔ Nnwuma a Wɔyɛ no Mpɛn pii ho Wɔ nneɛma pii a ɛyɛ den na ɛyɛ adwumaden mu no, wɔn a wɔde di dwuma no behu sɛ wɔreyɛ nnwuma koro no ara mpɛn pii, mpɛn pii. Ɛhɔ no, modals ne krataafa foforo akwantuo nyinaa de friction ka ho ɛfiri sɛ ɛtwa flow no mu anaa ɛhyɛ wɔn a wɔde di dwuma no ma wɔboaboa data a ɛyera ano wɔ tab anaa view ahodoɔ no nyinaa ntam. Mpɛn pii no, wɔn a wɔde di dwuma no kowie osuahu a asɛe, a nsɛm a esi so dua a enni awiei, kɔkɔbɔ a ɛboro so, akwankyerɛ a ɛyɛ nsɛm pii, anaasɛ nsɛm a wɔde gyina so a ɛyera kɛkɛ ahyɛ mu ma. Sɛnea Saulius Stebulis kae no, wɔ saa tebea horow yi mu no, afã horow a wotumi trɛw mu anaasɛ in-place editing taa yɛ adwuma yiye — wɔma adwuma no si mprempren screen no so. Wɔ nneyɛe mu no, wɔ tebea horow pii mu no, wɔn a wɔde di dwuma no nwie wɔn nnwuma wɔ baabiara. Ɛsɛ sɛ wɔhwehwɛ data, copy-paste values, siesie nsɛm a wɔakyerɛw wɔ mmeae ahorow, anaasɛ wɔhwɛ kyerɛwtohɔ a ɛte saa ara mu ara kwa bere a wɔreyɛ wɔn nnwuma no. Overlays ne drawers boa kɛse wɔ sɛnea wobɛkɔ so anya akyi data bere a adwuma no rekɔ so no mu. Ne saa nti, nsɛm a ɛfa ho no tra ne sibea bere nyinaa, na ɛwɔ hɔ a wobetumi de ahwehwɛ mu anaasɛ wɔde ahyɛ mu. Sie modals ne krataafa akwantuo ma mmerɛ a ntwitwiridii no de mfasoɔ ka ho ankasa — titire sɛ wobɛsiw mfomsoɔ a ɛho hia ano. Modals vs. Nkratafa: Gyinaesi Dua Bere bi a atwam no, Ryan Neufeld boaboaa akwankyerɛ a ɛboa kɛse ano de boaa adwumfo ma wɔpaw modals ne nkratafa. Ɛde PNG cheatsheet a ɛyɛ mmerɛw ne Google Doc template a nsɛmmisa a wɔakyekyɛ mu wɔ afã horow 7 na ɛba. Ɛyɛ tenten, ɛyɛ nea ɛkɔ akyiri yiye, nanso ɛnyɛ den yiye sɛ wubedi akyi:
Ebia ɛbɛyɛ te sɛ nea ɛyɛ hu, nanso ɛyɛ anammɔn 4 a ɛyɛ mmerɛw koraa:
Context of the screen.Nea edi kan no, yɛhwɛ sɛ ɛho hia sɛ wɔn a wɔde di dwuma no hwɛ nsɛm a ɛfa screen a ɛwɔ ase no so anaa. Adwuma a ɛyɛ den ne bere tenten.Nnwuma a ɛyɛ mmerɛw, ɛtwe adwene si so, a ɛnyɛ nea ɛtwetwe adwene betumi de modal adi dwuma, nanso nsu a ɛsen tenten, a ɛyɛ den hia kratafa. Reference to underlying page.Afei, yɛhwɛ sɛ ɛtaa hia sɛ wɔn a wɔde di dwuma no hwɛ data a ɛwɔ akyi anaasɛ adwuma no yɛ si so dua anaasɛ wɔpaw a ɛnyɛ den. Choosing the right overlay.Awiei koraa no, sɛ overlay yɛ ɔkwan pa ampa a, ɛkyerɛ yɛn kwan ma yɛpaw modal anaa nonmodal (a yɛde yɛn ho kɔ nonmodal so).
Nsɛm a Wɔde Bɛkyekyere Bere biara a ɛbɛyɛ yiye no, kwati sɛ wubesiw UI no nyinaa kwan. Ma nkɔmmɔbɔ bi nsensɛn mu, a ne fã bi kata UI no so, nanso ɛma kwan ma wotumi kɔ, twetwe, ne kɔpi-pasting. Anaasɛ kyerɛ modal no mu nsɛm sɛ ɔfã drawer. Anaasɛ fa accordion a ɛda fam di dwuma mmom. Anaasɛ fa wɔn a wɔde di dwuma no bra kratafa a ɛyɛ soronko so sɛ ɛho hia sɛ wokyerɛ nsɛm pii a ɛkɔ akyiri a. Nanso sɛ wopɛ sɛ woma wɔn a wɔde di dwuma no adwumayɛ ne ahoɔhare kɔ soro a, kwati modals ɔkwan biara so. Fa di dwuma de brɛ wɔn a wɔde di dwuma no ase, fa wɔn adwene bom, na wɔasiw mfomso ano. Sɛnea Therese Fessenden kae no, obiara mpɛ sɛ wobetwitwa n’asɛm mu, nanso sɛ ɛsɛ sɛ wotwa mu a, hwɛ hu sɛ ɛfata koraa sɛ wobɛbɔ ka. Hu “Smart Interface Nsusuwii Nhwɛsode” . Wubetumi ahu ɔfa mũ bi a ɛfa modals ne akwan foforo ho wɔ Smart Interface Design Patterns, yɛn 15h-video adesua a ɛwɔ nhwɛso ahorow a mfaso wɔ so 100s a efi asetra mu nnwuma ankasa mu — a UX ntetee a ɛte ase wɔ afe yi awiei. Biribiara fi mega-dropdowns so kosi adwumayɛbea pon a ɛyɛ den so — a wɔde afã foforo 5 ka ho afe biara. Huruw kɔ preview a wontua hwee so. Fa code BIRDIE di dwuma na fa sie 15% off. Hu Smart Interface Design Patterns, yɛn video adesua a ɛfa interface design & UX ho.
Video + UX NteteeVideo nkutooVideo + UX Ntetee$ 495.00 $ 699.00
Nya Video + UX Ntetee25 video adesua (15h) + Live UX Ntetee.100 nna sika-san-guarantee.Video nkutoo$ 300.00$ 395.00
Nya video adesua40 video adesua (15h). Updated afe biara.Wɔsan nso wɔ hɔ sɛ UX Bundle a video adesua 2 wom.
Nneɛma a Mfaso Wɔ So
Popup Ahorow Ahorow, a Anna Kaley kyerɛwee Nneyɛe Pa a Wɔde Yɛ UI Modals, a Uxcel yɛe Yɛde Damn Modals Pii Di Dwuma: UX Akwankyerɛ, a Adrian Egger kyerɛwee Modal & Nonmodal Nkɔmmɔbɔ, a Therese Fessenden kyerɛwee Nnɛyi Nnwuma UI Nsusuwii: Modal Dialogs, a James Jacobs kyerɛwee Modals wɔ Design Systems mu
