Belki, öňem şol ýerde bolandyrsyňyz. Ulanyjylara modal görkezmegiň arasynda nädip saýlamaly we haçan aýratyn, täze sahypa geçeris? Munuň ähmiýeti barmy? Aslynda şeýle. Karar ulanyjylaryň akymyna, mazmunyna, jikme-jiklikleri gözlemek ukybyna we ýalňyşlyk ýygylygyna we ýumuşyň ýerine ýetirilmegine täsir edýär. Iki wariant hem bozuk we lapykeç bolup biler - nädogry wagtda we nädogry ýerde. Şonuň üçin has dogry düşüneris. Geliň, muny nädip etmelidigini göreliň. Modallar we Dialoglar vs. Örtükler we Çyra gutulary Köplenç ýekeje modal UI komponenti hakda gürlänimizde, dürli modallaryň arasyndaky inçe, çylşyrymly nuanslary köplenç äsgermezlik edýäris. Aslynda, her modal birmeňzeş däl. Modallar, gepleşikler, örtükler we çyralar - bularyň hemmesi meňzeýär, ýöne aslynda düýbünden başga:

“Söhbetdeşlik” (ulanyjy ↔ ulgamy) üçin DialogA umumy termin. “Overlay” sahypanyň ýokarsynda görkezilen kiçijik mazmun paneli. ModalUser örtük + fon bilen ýapyk bolmaly. NonmodalUser örtük + fon açyk bolmaly. Modala ünsi jemlemek üçin “LightboxDimmed” fon.

Anna Kaliniň belleýşi ýaly, örtükleriň köpüsi nädogry wagtda ýüze çykýar, möhüm meseleler wagtynda ulanyjylary kesýär, dilini pes ulanýar we ulanyjylaryň akymyny bozýar. Olar tebigat bilen kesilýär we adatça gaty zerurlyk bolmazdan ýokary derejeli agyrlyk bilen.

Elbetde, hereketleriniň netijeleri ýokary täsir etse, ulanyjylar haýallaşdyrylmaly we kesilmeli, ýöne köp ssenariýa üçin modal däller has inçe we ulanyjynyň ünsüni özüne çekmek üçin has dostlukly wariant. Her niçigem bolsa, mydama asyl bolmagyny maslahat berýärin. Modallar le leeke, öz-özüne bagly meseleler üçin Dizaýner hökmünde köplenç modallary ähmiýetsiz we bizar ediji hasaplaýarys - köplenç olar! - şonda-da olaryň gymmaty bar. Ulanyjylara bolup biljek ýalňyşlyklar barada duýduryş bermek ýa-da maglumatlaryň ýitmeginiň öňüni almak üçin gaty peýdaly bolup biler. Şeýle hem, baglanyşykly hereketleri ýerine ýetirmäge ýa-da sahypanyň häzirki ýagdaýyna päsgel bermezden jikme-jiklikleri öwrenmäge kömek edip bilerler. Modöne modallaryň iň uly artykmaçlygy, ulanyjylara häzirki ekranyň mazmunyny saklamaga kömek etmekdir. Bu diňe UI-ni aňlatmaýar, redaktirlenen giriş, aýlanyş ýagdaýy, akkordeonyň ýagdaýy, süzgüçleri saýlamak, sortlamak we ş.m.

Käwagt ulanyjylar saýlamany çalt tassyklamaly (meselem, ýokarda görkezilişi ýaly süzgüçler) we derrew şol ýerden dowam etmeli. Awto-tygşytlamak, elbetde, şol bir zady gazanyp biler, ýöne hemişe zerur ýa-da islenmeýär. UI-ni petiklemek köplenç gowy pikir däl. Şeýle-de bolsa, modallar haýsydyr bir mesele üçin ulanylmaýar. Adatça, ulanyjylaryň içeri girmeli, bir işi tamamlamaly we soňra bolýan ýerine gaýdyp barmaly ýeke-täk meseleler üçin ulanýarys. Göwnüňe bolmasa, ýokary ähmiýetli, gysga täsirleşmeler (meselem, duýduryşlar, weýran ediji hereketler, çalt tassyklamalar) üçin gowy işleýärler. Modallar kömek edenlerinde: Als Modallar köplenç bozujy, täsir ediji we bulaşyk. Compare Deňeşdirmegi we göçürmegi kynlaşdyrýar. ✅ Şeýle-de bolsa, modal ulanyjylara birnäçe konteksti saklamaga mümkinçilik berýär. Yzyna gaýtaryp bolmajak ýalňyşlyklaryň we maglumatlaryň ýitmeginiň öňüni almak peýdaly. Users Täze ulanyjylara ulanyjy ibermek peýdaly bolar. Users Diňe ulanyjylar bökdençlige baha berjek bolsa modal görkeziň. Default Düzgüne görä, blokirlemeýän gepleşikleri ("modal däl") ileri tutuň. Users Ulanyjylara gepleşikleri azaltmaga, gizlemäge ýa-da soň dikeltmäge rugsat beriň. Users Ulanyjylary haýallatmak üçin modal ulanyň, meselem, çylşyrymly girişleri barlaň. "Closeap", ESC düwmesi bilen çykyň ýa-da gutynyň daşynda basyň. Sahypalar complex Çylşyrymly, köp basgançakly iş akymlary üçin Jadygöýler ýa-da modallaryň içinde goýlan nawigasiýa gaty gowy işlemeýär, hatda çylşyrymly kärhana önümlerinde-de, gapdal paneller ýa-da çyzgylar has gowy işleýär. Ulanyjylar maglumat nokatlaryny deňeşdirmeli ýa-da salgylanmaly bolanda kynçylyklar başlaýar - ýöne modallar bu häsiýeti bökdeýärler, şonuň üçin şol bir sahypany birnäçe goýmada täzeden açýarlar.

Has çylşyrymly akymlar we köp basgançakly amallar üçin özbaşdak sahypalar has gowy işleýär. Ulanyjynyň doly ünsüni talap edenlerinde sahypalar has gowy işleýär we öňki ekrana salgylanmak gaty peýdaly däl. Çyzgylar ýönekeý modal üçin gaty çylşyrymly, ýöne doly sahypa nawigasiýa zerurlygy bolmadyk kiçi meseleler üçin işleýär. Haçan modallardan gaça durmaly: Erroralňyş habarlary üçin modallardan gaça duruň. Aýratynlyk habarnamalary üçin modallardan gaça duruň. Gämi gatnawy tejribesi üçin modallardan gaça duruň. Çylşyrymly, uzyn köp basgançakly iş üçin modallardan gaça duruň. Ikisinden gaça duruňGaýtalanýan meseleler üçin Çylşyrymly, agyr önümleriň köpüsinde ulanyjylar şol bir meseleleri gaýta-gaýta ýerine ýetirýärler. Şol ýerde modallar we täze sahypa nawigasiýalary sürtülme goşýar, sebäbi akymy kesýär ýa-da ulanyjylary dürli bellikleriň ýa-da görnüşleriň arasynda ýitirilen maglumatlary ýygnamaga mejbur edýär. Ulanyjylar köplenç bozulan tejribe bilen gutarýarlar, soňsuz tassyklamalardan, çişirilen duýduryşlardan, sözli görkezmelerden ýa-da diňe ýitirilen salgy nokatlaryndan doly. Saulius Stebulisiň belleýşi ýaly, bu ssenariýalarda giňeldilip bilinýän bölümler ýa-da ýerinde redaktirlemek köplenç has gowy işleýär - meseläni häzirki ekrana dakýarlar. Iş ýüzünde, köp senariýada ulanyjylar öz meselelerini üzňelikde ýerine ýetirmeýärler. Maglumatlary gözlemeli, bahalary göçürmeli, dürli ýerlerde ýazgylary arassalamaly ýa-da wezipeleriniň üstünde işleýänlerinde şuňa meňzeş ýazgylary gözden geçirmeli. Örtükler we çyzgylar, iş wagtynda fon maglumatlaryna elýeterliligi saklamakda has peýdalydyr. Netijede, kontekst elmydama öz ýerinde galýar, salgylanma ýa-da göçürmek üçin elýeterli. Arakesmäniň hakykatdanam baha goşýan pursatlary üçin modallary we sahypa nawigasiýasyny tygşytlaň - esasanam möhüm ýalňyşlyklaryň öňüni almak. Modallar we Sahypalar: Karar agajy Az salymdan, Raýan Neufeld dizaýnerlere modal we sahypalaryň arasynda saýlamaga kömek etmek üçin örän peýdaly gollanma düzdi. Amatly PNG sahypasy we 7 bölüme bölünen soraglar bilen Google Doc şablony gelýär. Uzyn, gaty jikme-jik, ýöne ýerine ýetirmek gaty aňsat:

Bu gorkunç bolup görünmegi mümkin, ýöne gaty ýönekeý 4 basgançakly:

Ekranyň mazmuny. Ilki bilen, ulanyjylaryň esasy ekranyň mazmunyny saklamalydygyny ýa-da ýokdugyny barlaýarys. Wezipe çylşyrymlylygy we dowamlylygy. Has ýönekeý, ünsi jemleýän, ünsüni bölmeýän meseleler modal ulanyp biler, ýöne uzyn, çylşyrymly akymlar sahypa gerek. Esasy sahypa salgylanma. Soňra, ulanyjylaryň köplenç fonda maglumatlara ýüzlenmelidigini ýa-da meseläniň ýönekeý tassyklama ýa-da saýlama bolandygyny barlaýarys. Dogry örtügi saýlamak. Iň soňunda, örtük hakykatdanam gowy warianty bolsa, modal ýa-da modal däl (modal däl tarapa egilmek) saýlamaga ugrukdyrýar.

Upapmak Mümkin boldugyça tutuş UI-ni petiklemekden gaça duruň. UI-ni bölekleýin öz içine alýan, ýöne nawigasiýa, aýlamak we göçürmek üçin gepleşik geçiriň. Ora-da modalyň mazmunyny gapdal çekme hökmünde görkeziň. Ora-da onuň ýerine dik akkordeon ulanyň. Ora-da köp jikme-jiklik görkezmeli bolsaňyz, ulanyjylary aýratyn sahypa getiriň. Emma ulanyjylaryň netijeliligini we tizligini ýokarlandyrmak isleseňiz, ähli çykdajylardan modallardan gaça duruň. Ulanyjylary haýallatmak, ünsüni jemlemek, ýalňyşlyklaryň öňüni almak üçin ulanyň. Tereza Fessendeniň belleýşi ýaly, hiç kim päsgel bermegi halamaýar, ýöne zerur bolsa, onuň bahasynyň düýbünden ýokdugyna göz ýetiriň. “Akylly interfeýs dizaýn nagyşlary” bilen tanyşyň “Smart Interface Design Patterns” modallary we alternatiwalary barada doly bölümi tapyp bilersiňiz, 15h wideo kursumyz, hakyky durmuş taslamalaryndan 100-lik amaly mysallar bilen - şu ýylyň ahyrynda göni UX okuwy bilen. Mega-açyşlardan başlap, çylşyrymly kärhana tablisalaryna çenli - her ýyl 5 sany täze segment goşulýar. Mugt deslapky syn. 15% arzanlamak üçin BIRDIE koduny ulanyň. Akylly interfeýs dizaýn nagyşlary, interfeýs dizaýny we UX boýunça wideo kursumyz bilen tanyşyň.

Wideo + UX Okuw Wideo diňe Wideo + UX Okuw 495.00 $ 699.00

Wideo + UX Training25 wideo sapaklaryny alyň (15s) + Live UX Training.100 gün pul- yzyna- kepillik. Wideo diňe 300.00 $ 395.00

Wideo kursuny 40 wideo sapaklaryny alyň (15s). Lyylda täzelenýär. Şeýle hem 2 wideo kursy bolan UX bukjasy hökmünde elýeterli.

Peýdaly çeşmeler

Pop popuplaryň dürli görnüşleri, Anna Kaliý Uxcel tarapyndan UI modallaryny dizaýn etmegiň iň oňat tejribeleri Örän köp modal ulanýarys: UX görkezmeleri, Adrian Egger Modal we Nonmodal gepleşikler, Tereza Fessenden Döwrebap kärhana UI dizaýny: Modal gepleşikler, Jeýms sakobs Dizaýn ulgamlaryndaky modeller

You May Also Like

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free