Yəqin ki, əvvəllər orada olmusunuz. İstifadəçilərə modal göstərmək arasında necə seçim edirik və onları ayrı, yeni səhifəyə nə vaxt keçəcəyik? Və bunun ümumiyyətlə əhəmiyyəti varmı? Əslində, belədir. Qərar istifadəçilərin axınına, kontekstinə, təfərrüatları axtarmaq qabiliyyətinə və bununla da xəta tezliyinə və tapşırığın tamamlanmasına təsir göstərir. Hər iki seçim səhv zamanda və yanlış yerdə pozucu və məyusedici ola bilər. Ona görə də düzgün başa düşsək daha yaxşı olar. Yaxşı, gəlin bunu necə edəcəyimizi görək. Modallar və Dialoqlar, Bindirmələr və Lightboxlar Biz tez-tez tək modal UI komponenti haqqında danışsaq da, biz tez-tez bütün müxtəlif modal növləri arasında incə, mürəkkəb nüanslara məhəl qoymuruq. Əslində hər modal eyni deyil. Modallar, dialoqlar, örtüklər və işıq qutuları - hamısı oxşar səslənir, lakin əslində tamamilə fərqlidirlər:
Dialoq “söhbət” üçün ümumi termindir (istifadəçi ↔ sistemi). Overlay Səhifənin yuxarısında göstərilən kiçik məzmun paneli. ModalUser overlay + fon deaktivi ilə qarşılıqlı əlaqə saxlamalıdır. NonmodalUser overlay + fon aktivləşdirilməklə qarşılıqlı əlaqədə olmalıdır. Diqqəti modala yönəltmək üçün LightboxSarılaşdırılmış fon.
Anna Kaley vurğuladığı kimi, üst-üstə düşmələrin əksəriyyəti səhv vaxtda görünür, kritik tapşırıqlar zamanı istifadəçilərin sözünü kəsir, zəif dildən istifadə edir və istifadəçilərin axınını pozur. Onlar təbiətcə kəsicidirlər və adətən buna güclü ehtiyac olmadan yüksək dərəcədə şiddətə malikdirlər.
Şübhəsiz ki, hərəkətlərinin nəticələri yüksək təsirə malik olarsa, istifadəçiləri yavaşlatmaq və dayandırmaq lazımdır, lakin əksər ssenarilər üçün qeyri-modallar istifadəçinin diqqətini cəlb etmək üçün daha incə və daha səmimi seçimdir. Bir şey varsa, mən həmişə defolt olmasını təklif edirəm. Modallar → Tək, Müstəqil Tapşırıqlar üçün Dizaynerlər olaraq biz modalları əhəmiyyətsiz və zəhlətökən kimi tez-tez rədd edirik - və çox vaxt belədir! - lakin onların da öz dəyəri var. Onlar istifadəçiləri potensial səhvlər barədə xəbərdar etmək və ya məlumat itkisinin qarşısını almaq üçün çox faydalı ola bilər. Onlar həmçinin səhifənin cari vəziyyətini kəsmədən əlaqəli hərəkətləri yerinə yetirməyə və ya təfərrüatları araşdırmağa kömək edə bilərlər. Lakin modalların ən böyük üstünlüyü istifadəçilərə cari ekranın kontekstini saxlamağa kömək etməsidir. Bu, yalnız UI demək deyil, həm də redaktə edilmiş giriş, sürüşmə mövqeyi, akkordeonların vəziyyəti, filtrlərin seçimi, çeşidləmə və s.
Bəzən istifadəçilər seçimi tez bir zamanda təsdiq etməli (məsələn, yuxarıda göstərildiyi kimi filtrlər) və dərhal oradan davam etməlidirlər. Avtomatik saxlama, əlbəttə ki, eyni nəticəyə nail ola bilər, lakin bu, həmişə lazım deyil və ya arzuolunmazdır. UI-ni bloklamaq çox vaxt yaxşı fikir deyil. Bununla belə, modallar heç bir tapşırıq üçün istifadə edilmir. Tipik olaraq, biz onlardan istifadəçilərin içəri keçməli, tapşırığı tamamlamalı və sonra olduqları yerə qayıtmalı olduğu tək, müstəqil tapşırıqlar üçün istifadə edirik. Təəccüblü deyil ki, onlar yüksək prioritetli, qısa qarşılıqlı əlaqə üçün yaxşı işləyirlər (məsələn, xəbərdarlıqlar, dağıdıcı hərəkətlər, sürətli təsdiqləmələr). Modallar kömək etdikdə: 🚫 Modallar tez-tez pozucu, invaziv və çaşdırıcıdır.🚫 Onlar müqayisə və kopyala-yapışdırmağı çətinləşdirir.✅ Bununla belə, modallar istifadəçilərə çoxsaylı kontekstləri saxlamağa imkan verir.✅ Geri dönməz xətaların və məlumat itkisinin qarşısını almaq üçün faydalıdır.✅ İstifadəçilərin yeni səhifəyə göndərilməsi pozucu olarsa faydalıdır. ✅ Yalnız istifadəçilər pozulmaya dəyər verərsə modal göstərin.✅ Defolt olaraq, bloklanmayan dialoqlara (“qeyri-modallar”) üstünlük verin.✅ İstifadəçilərə dialoqu daha sonra minimuma endirməyə, gizlətməyə və ya bərpa etməyə icazə verin. ✅ İstifadəçiləri yavaşlatmaq üçün modaldan istifadə edin, məsələn, mürəkkəb daxiletməni yoxlayın. ✅ “Bağla”, ESC düyməsi ilə çıxış yolu göstərin və ya qutudan kənara klikləyin. Səhifələr → Kompleks, Çox Mərhələli İş Akışları üçün Modallar daxilində sehrbazlar və ya sekmeli naviqasiya hətta mürəkkəb müəssisə məhsullarında çox yaxşı işləmir - orada yan panellər və ya çekmeceler adətən daha yaxşı işləyir. Problemlər istifadəçilərin məlumat nöqtələrini müqayisə etməli və ya istinad etməli olduqda başlayır - lakin modallar bu davranışı bloklayır, buna görə də eyni səhifəni bir neçə tabda yenidən açırlar.
Daha mürəkkəb axınlar və çox addımlı proseslər üçün müstəqil səhifələr ən yaxşı işləyir. Səhifələr istifadəçinin tam diqqətini tələb etdikdə daha yaxşı işləyir və əvvəlki ekrana istinad o qədər də faydalı deyil. Və çekmecelər sadə modal üçün çox mürəkkəb olan, lakin tam səhifə naviqasiyasına ehtiyac duymayan alt tapşırıqlar üçün işləyir. Modallardan nə vaxt çəkinmək lazımdır: 🚫 Səhv mesajları üçün modallardan qaçın.🚫 Xüsusiyyət bildirişləri üçün modallardan çəkinin.🚫 Onboarding təcrübəsi üçün modallardan çəkinin.🚫 Mürəkkəb, uzun çoxaddımlı tapşırıqlar üçün modallardan qaçın. Hər ikisindən çəkininTəkrarlanan tapşırıqlar üçün Bir çox mürəkkəb, işi ağır olan məhsullarda istifadəçilər eyni tapşırıqları təkrar-təkrar yerinə yetirərkən tapacaqlar. Orada həm modal, həm də yeni səhifə naviqasiyası sürtünmə əlavə edir, çünki onlar axını kəsirlər və ya istifadəçiləri bütün müxtəlif nişanlar və ya görünüşlər arasında itkin məlumatları toplamağa məcbur edirlər. Çox tez-tez istifadəçilər sonsuz təsdiqlər, şişirdilmiş xəbərdarlıqlar, ətraflı təlimatlar və ya sadəcə itkin istinad nöqtələri ilə dolu bir pozulmuş təcrübə ilə nəticələnirlər. Saulius Stebulis'in qeyd etdiyi kimi, bu ssenarilərdə genişləndirilə bilən bölmələr və ya yerində redaktə çox vaxt daha yaxşı işləyir - onlar tapşırığı cari ekranda saxlayır. Təcrübədə, bir çox ssenarilərdə istifadəçilər öz vəzifələrini tək-tək yerinə yetirmirlər. Onlar öz tapşırıqlarını yerinə yetirərkən məlumatları axtarmaq, dəyərləri kopyalayıb yapışdırmaq, müxtəlif yerlərdəki qeydləri dəqiqləşdirmək və ya sadəcə oxşar qeydləri nəzərdən keçirmək lazımdır. Bindirmələr və çekmeceler tapşırıq zamanı fon məlumatlarına çıxışı saxlamaqda daha faydalıdır. Nəticədə, kontekst həmişə öz yerində qalır, istinad və ya kopyala-yapışdırmaq üçün əlçatandır. Modalları və səhifə naviqasiyasını kəsilmənin həqiqətən dəyər qatdığı anlar üçün yadda saxlayın – xüsusən də kritik səhvlərin qarşısını almaq üçün. Modallara qarşı Səhifələr: Qərar Ağacı Bir müddət əvvəl, Rayan Neufeld dizaynerlərə modal və səhifələr arasında seçim etməkdə kömək etmək üçün çox faydalı bir bələdçi hazırladı. O, lazımlı PNG məlumat cədvəli və 7 bölmə üzrə bölünmüş suallardan ibarət Google Sənəd şablonu ilə gəlir. Bu uzun, son dərəcə hərtərəfli, lakin izləmək çox asandır:
Bu, çətin görünə bilər, lakin bu, olduqca sadə 4 addımlı bir prosesdir:
Ekranın konteksti. Birincisi, istifadəçilərin əsas ekranın kontekstini saxlamalı olub-olmadığını yoxlayırıq. Tapşırığın mürəkkəbliyi və müddəti. Daha sadə, diqqəti yayındırmayan tapşırıqlar modaldan istifadə edə bilər, lakin uzun, mürəkkəb axınlar üçün səhifə lazımdır. Əsas səhifəyə istinad. Sonra biz istifadəçilərin tez-tez arxa fonda məlumatlara müraciət etməli olub olmadığını və ya tapşırığın sadə təsdiq və ya seçim olub-olmadığını yoxlayırıq. Düzgün üst-üstə düşmənin seçilməsi. Nəhayət, əgər üst-üstə düşmə həqiqətən də yaxşı seçimdirsə, o, bizə modal və ya qeyri-modal (qeyri-modal tərəfə meyl) arasında seçim etməyə kömək edir.
Sarma Mümkün olduqda, bütün UI-ni bloklamaqdan çəkinin. UI-ni qismən əhatə edən, lakin naviqasiya, sürüşdürmə və kopyala-yapışdırmağa imkan verən üzən dialoqa sahib olun. Və ya modalın məzmununu yan çekmece kimi göstərin. Və ya onun yerinə şaquli akkordeondan istifadə edin. Və ya bir çox təfərrüat göstərmək lazımdırsa, istifadəçiləri ayrıca səhifəyə gətirin. Ancaq istifadəçilərin səmərəliliyini və sürətini artırmaq istəyirsinizsə, nəyin bahasına olursa olsun modallardan qaçın. İstifadəçiləri yavaşlatmaq, diqqətlərini toplamaq, səhvlərin qarşısını almaq üçün onlardan istifadə edin. Tereza Fessendenin qeyd etdiyi kimi, heç kim sözünün kəsilməsini sevmir, amma lazımdırsa, bunun tamamilə dəyər olduğuna əmin olun. “Ağıllı İnterfeys Dizayn Nümunələri” ilə tanış olun Modallar və alternativlər haqqında bütün bölməni bu ilin sonunda canlı UX təlimi ilə real həyat layihələrindən 100-lərlə praktik nümunə ilə 15 saatlıq video kursumuzda Smart Interface Design Patterns-də tapa bilərsiniz. Meqa açılanlardan tutmuş mürəkkəb müəssisə cədvəllərinə qədər hər şey — hər il əlavə edilən 5 yeni seqmentlə. Pulsuz önizləməyə keçin. 15% endirim üçün BIRDIE kodundan istifadə edin. İnterfeys dizaynı və UX üzrə video kursumuz olan Smart Interface Design Patterns ilə tanış olun.
Video + UX TəlimiYalnızVideoVideo + UX Təlimi$ 495,00 $ 699,00
Video əldə edin + UX Təlimi25 video dərsi (15 saat) + Canlı UX Təlimi. 100 gün pulun geri qaytarılması zəmanəti. Yalnız video$ 300,00$ 395,00
Video kursunu əldə edin 40 video dərs (15 saat). İllik yenilənir. Həmçinin 2 video kursu olan UX Paketi kimi mövcuddur.
Faydalı Resurslar
Fərqli pop-up növləri, Anna Kaley tərəfindən Uxcel tərəfindən UI Modallarının Dizaynı üçün Ən Yaxşı Təcrübələr Biz çox lənətə gəlmiş modallardan istifadə edirik: Adrian Egger tərəfindən UX Təlimatları Modal və qeyri-modal dialoqlar, Therese Fessenden tərəfindən Müasir Müəssisə UI Dizaynı: Modal Dialoqlar, James Jacobs tərəfindən Dizayn Sistemlərində Modallar
