თქვენ ალბათ ადრე იყავით იქ. როგორ ავირჩიოთ მომხმარებლებისთვის მოდალის ჩვენება და როდის გადავიყვანოთ ისინი ცალკე, ახალ გვერდზე? და ამას საერთოდ აქვს მნიშვნელობა? სინამდვილეში, ეს ასეა. გადაწყვეტილება გავლენას ახდენს მომხმარებელთა ნაკადზე, მათ კონტექსტზე, დეტალების მოძიების უნარზე და, ამასთან, შეცდომების სიხშირესა და დავალების შესრულებაზე. ორივე ვარიანტი შეიძლება იყოს დამაბრკოლებელი და იმედგაცრუებული - არასწორ დროს და არასწორ ადგილას. ამიტომ ჯობია სწორად მივიღოთ. კარგად, ვნახოთ, როგორ გავაკეთოთ ეს. Modals vs. Dialogs vs. Overlays vs. Lightboxes მიუხედავად იმისა, რომ ჩვენ ხშირად ვსაუბრობთ ერთი მოდალური UI კომპონენტის შესახებ, ჩვენ ხშირად უგულებელყოფთ წვრილ, რთულ ნიუანსებს ყველა სხვადასხვა ტიპის მოდალს შორის. სინამდვილეში, ყველა მოდალი არ არის იგივე. მოდალები, დიალოგები, გადაფარვები და ლაითბოქსები - ყველა ერთნაირად ჟღერს, მაგრამ სინამდვილეში ისინი საკმაოდ განსხვავდებიან:
დიალოგი "საუბრის" ზოგადი ტერმინი (მომხმარებლის ↔ სისტემა). Overlay მცირე შინაარსის პანელი, რომელიც ნაჩვენებია გვერდის თავზე. ModalUser უნდა იმოქმედოს გადაფარვასთან + ფონზე გამორთული. NonmodalUser უნდა იმოქმედოს გადაფარვით + ფონზე ჩართული. Lightbox Dimmed ფონი მოდალზე ყურადღების ფოკუსირებისთვის.
როგორც ანა კეილი ხაზს უსვამს, გადაფარვების უმეტესობა არასწორ დროს ჩნდება, წყვეტს მომხმარებლებს კრიტიკული ამოცანების დროს, იყენებს ცუდ ენას და არღვევს მომხმარებლების ნაკადს. ისინი ბუნებით შემაფერხებელნი არიან და, როგორც წესი, მაღალი დონის სიმძიმით, ამის ძლიერი საჭიროების გარეშე.
რა თქმა უნდა, მომხმარებლები უნდა შეანელონ და შეწყვიტონ, თუ მათი მოქმედების შედეგებს დიდი გავლენა ექნება, მაგრამ უმეტეს სცენარისთვის არამოდალები ბევრად უფრო დახვეწილია და უფრო მეგობრული ვარიანტია მომხმარებლის ყურადღების მიქცევისთვის. თუ რამეა, მე ყოველთვის ვთავაზობ, რომ ის იყოს ნაგულისხმევი. მოდალები → მარტოხელა, თვითმყოფადი ამოცანებისთვის როგორც დიზაინერები, ჩვენ ხშირად უარვყოფთ მოდალებს, როგორც შეუსაბამო და შემაშფოთებელს - და ხშირად ისინიც არიან! - თუმცა მათაც აქვთ თავისი ღირებულება. ისინი შეიძლება იყოს ძალიან სასარგებლო, რათა გააფრთხილონ მომხმარებლები პოტენციური შეცდომების შესახებ ან დაეხმარონ მათ თავიდან აიცილონ მონაცემთა დაკარგვა. მათ ასევე შეუძლიათ დაეხმარონ შესაბამისი მოქმედებების შესრულებას ან დეტალების შესწავლას გვერდის მიმდინარე მდგომარეობის შეფერხების გარეშე. მაგრამ მოდალების ყველაზე დიდი უპირატესობა ის არის, რომ ისინი მომხმარებლებს ეხმარებიან მიმდინარე ეკრანის კონტექსტის შენარჩუნებაში. ეს არ ნიშნავს მხოლოდ ინტერფეისს, არამედ რედაქტირებულ შეყვანას, გადახვევის პოზიციას, აკორდეონების მდგომარეობას, ფილტრების შერჩევას, დახარისხებას და ა.შ.
ზოგჯერ, მომხმარებლებმა სწრაფად უნდა დაადასტურონ არჩევანი (მაგ. ფილტრები, როგორც ნაჩვენებია ზემოთ) და შემდეგ დაუყოვნებლივ გააგრძელონ იქიდან. ავტომატური შენახვა შეუძლია იგივეს მიღწევას, რა თქმა უნდა, მაგრამ ეს ყოველთვის არ არის საჭირო ან სასურველი. და UI-ის დაბლოკვა ხშირად არ არის კარგი იდეა. თუმცა, მოდალები არ გამოიყენება რაიმე ამოცანისთვის. როგორც წესი, ჩვენ მათ ვიყენებთ ცალკეული, ცალკეული ამოცანებისთვის, სადაც მომხმარებლებმა უნდა შევიდნენ, დაასრულონ დავალება და შემდეგ დაბრუნდნენ იქ, სადაც იყვნენ. გასაკვირი არ არის, რომ ისინი კარგად მუშაობენ მაღალი პრიორიტეტული, მოკლე ურთიერთქმედებისთვის (მაგ., გაფრთხილებები, დესტრუქციული ქმედებები, სწრაფი დადასტურებები). როდესაც მოდალები ეხმარება: 🚫 მოდალები ხშირად დამღუპველია, ინვაზიური და დამაბნეველი. ✅ აჩვენეთ მოდალი მხოლოდ იმ შემთხვევაში, თუ მომხმარებლები შეაფასებენ შეფერხებას.✅ ნაგულისხმევად, უპირატესობას ანიჭებთ დაუბლოკავ დიალოგებს ("არამოდალები"). ✅ მიეცით საშუალება მომხმარებლებს მინიმუმამდე დაიყვანონ, დამალონ ან აღადგინონ დიალოგი მოგვიანებით. ✅ გამოიყენეთ მოდალი მომხმარებლების შენელებისთვის, მაგ., რთული შეყვანის დასადასტურებლად. გვერდები → რთული, მრავალსაფეხურიანი სამუშაო ნაკადებისთვის ოსტატები ან ჩანართებით ნავიგაცია მოდალში არც თუ ისე კარგად მუშაობს, თუნდაც საწარმოს რთულ პროდუქტებში - იქ გვერდითი პანელები ან უჯრები ჩვეულებრივ უკეთესად მუშაობს. პრობლემები იწყება მაშინ, როდესაც მომხმარებლებს სჭირდებათ მონაცემთა წერტილების შედარება ან მითითება – თუმცა მოდალები ბლოკავს ამ ქცევას, ამიტომ ისინი ხელახლა ხსნიან იმავე გვერდს რამდენიმე ჩანართში.
უფრო რთული ნაკადებისა და მრავალსაფეხურიანი პროცესებისთვის, დამოუკიდებელი გვერდები საუკეთესოდ მუშაობს. გვერდები ასევე უკეთესად მუშაობს, როდესაც ისინი მომხმარებლის სრულ ყურადღებას მოითხოვენ და წინა ეკრანზე მითითება არც თუ ისე სასარგებლოა. და უჯრები მუშაობს ქვე-ამოცნებებისთვის, რომლებიც ძალიან რთულია მარტივი მოდალისთვის, მაგრამ არ საჭიროებს გვერდის ნავიგაციას. როდის ავიცილოთ თავიდან მოდალები: 🚫 მოერიდეთ მოდალებს შეცდომის შეტყობინებებისთვის.🚫 მოერიდეთ მოდალებს ფუნქციების შეტყობინებებისთვის.🚫 მოერიდეთ მოდალებს ჩართვის გამოცდილებისთვის.🚫 მოერიდეთ მოდალებს რთული, ხანგრძლივი მრავალსაფეხურიანი ამოცანებისთვის. მოერიდეთ ორივესგანმეორებითი ამოცანებისთვის ბევრ რთულ, ამოცანების მძიმე პროდუქტში მომხმარებლები აღმოაჩენენ, რომ ასრულებენ ერთსა და იმავე ამოცანებს არაერთხელ, უსასრულოდ. იქ, როგორც მოდალები, ასევე ახალი გვერდის ნავიგაცია ამატებს ხახუნს, რადგან ისინი წყვეტენ დინებას ან აიძულებენ მომხმარებლებს შეაგროვონ დაკარგული მონაცემები ყველა სხვადასხვა ჩანართსა თუ ხედს შორის. ძალიან ხშირად, მომხმარებლები მთავრდება გატეხილი გამოცდილებით, სავსეა დაუსრულებელი დადასტურებებით, გაზვიადებული გაფრთხილებებით, სიტყვიერი ინსტრუქციებით ან უბრალოდ დაკარგული პუნქტებით. როგორც საულიუს სტებულისმა აღნიშნა, ამ სცენარებში, გაფართოებადი სექციები ან ადგილზე რედაქტირება ხშირად უკეთესად მუშაობს - ისინი დავალებას ინარჩუნებენ მიმდინარე ეკრანზე. პრაქტიკაში, ბევრ სცენარში, მომხმარებლები არ ასრულებენ თავიანთ დავალებებს იზოლირებულად. მათ უნდა მოიძიონ მონაცემები, დააკოპირონ-პასტის მნიშვნელობები, დახვეწონ ჩანაწერები სხვადასხვა ადგილას, ან უბრალოდ განიხილონ მსგავსი ჩანაწერები დავალებების შესრულებისას. გადაფარვები და უჯრები უფრო სასარგებლოა დავალების დროს ფონურ მონაცემებზე წვდომის შესანარჩუნებლად. შედეგად, კონტექსტი ყოველთვის თავის ადგილზე რჩება, ხელმისაწვდომია მითითებისთვის ან კოპირ-პასტისთვის. შეინახეთ მოდალები და გვერდის ნავიგაცია იმ მომენტებისთვის, როდესაც შეფერხება ნამდვილად მატებს მნიშვნელობას - განსაკუთრებით კრიტიკული შეცდომების თავიდან ასაცილებლად. Modals vs. Pages: A Decision Tree ცოტა ხნის წინ, რაიან ნეიფელდმა შეადგინა ძალიან სასარგებლო სახელმძღვანელო, რომელიც დაეხმარა დიზაინერებს არჩევანის გაკეთებაში მოდალებსა და გვერდებს შორის. მას მოყვება მოსახერხებელი PNG თაღლითური ფურცელი და Google Doc შაბლონი კითხვებით დაყოფილი 7 სექციაში. ეს არის გრძელი, ძალიან საფუძვლიანი, მაგრამ ძალიან მარტივი შესასრულებელი:
ეს შეიძლება საშინლად გამოიყურებოდეს, მაგრამ ეს საკმაოდ მარტივი 4-საფეხურიანი პროცესია:
ეკრანის კონტექსტი. უპირველეს ყოვლისა, ჩვენ ვამოწმებთ, სჭირდება თუ არა მომხმარებლებმა ძირითადი ეკრანის კონტექსტის შენარჩუნება. დავალების სირთულე და ხანგრძლივობა. უფრო მარტივ, ფოკუსირებულ, ყურადღების მიქცევის გარეშე ამოცანების გამოყენება შეიძლება მოდალური, მაგრამ ხანგრძლივი, რთული ნაკადებისთვის საჭიროა გვერდი. მითითება ფუძემდებლურ გვერდზე. შემდეგ, ჩვენ ვამოწმებთ, ხშირად სჭირდებათ თუ არა მომხმარებლებს ფონური მონაცემების მითითება, თუ ამოცანა არის მარტივი დადასტურება ან შერჩევა. სწორი გადაფარვის არჩევა. და ბოლოს, თუ გადაფარვა მართლაც კარგი ვარიანტია, ის გვიბიძგებს არჩევანის გაკეთებაში მოდალური ან არამოდალური (დახრილი არამოდალურისკენ) შორის.
შეფუთვა შეძლებისდაგვარად, მოერიდეთ მთელი ინტერფეისის დაბლოკვას. გქონდეთ მცურავი დიალოგი, რომელიც ნაწილობრივ ფარავს ინტერფეისს, მაგრამ ნავიგაციის, გადახვევისა და კოპირების ჩასმის საშუალებას იძლევა. ან აჩვენეთ მოდალის შიგთავსი, როგორც გვერდითი უჯრა. ან მის ნაცვლად გამოიყენეთ ვერტიკალური აკორდეონი. ან მიიყვანეთ მომხმარებლები ცალკე გვერდზე, თუ ბევრი დეტალის ჩვენება გჭირდებათ. მაგრამ თუ გსურთ გაზარდოთ მომხმარებლების ეფექტურობა და სიჩქარე, მოერიდეთ მოდალებს ნებისმიერ ფასად. გამოიყენეთ ისინი მომხმარებლების ტემპის შესანელებლად, მათი ყურადღების მოსაზიდად, შეცდომების თავიდან ასაცილებლად. როგორც ტერეზა ფესენდენმა აღნიშნა, არავის უყვარს შეფერხება, მაგრამ თუ ასეა, დარწმუნდით, რომ ეს ნამდვილად ღირს. გაიცანით „ჭკვიანი ინტერფეისის დიზაინის ნიმუშები“ თქვენ შეგიძლიათ იპოვოთ მთელი განყოფილება მოდალებისა და ალტერნატივების შესახებ Smart Interface Design Patterns-ში, ჩვენს 15 საათიანი ვიდეო კურსში 100 პრაქტიკული მაგალითით რეალურ ცხოვრებაში - ცოცხალი UX ტრენინგით ამ წლის ბოლოს. ყველაფერი მეგა-ჩამოშლილებიდან დაწყებული რთული საწარმოების ცხრილებამდე — ყოველწლიურად ემატება 5 ახალი სეგმენტი. გადადით უფასო გადახედვაზე. გამოიყენეთ კოდი BIRDIE, რომ დაზოგოთ 15% ფასდაკლება. გაიცანით Smart Interface Design Patterns, ჩვენი ვიდეო კურსი ინტერფეისის დიზაინისა და UX-ის შესახებ.
ვიდეო + UX ტრენინგი მხოლოდვიდეოვიდეო + UX ტრენინგი $495.00 699.00$
მიიღეთ ვიდეო + UX ტრენინგი 25 ვიდეო გაკვეთილები (15 სთ) + ცოცხალი UX ტრენინგი. 100 დღიანი თანხის დაბრუნების გარანტია. მხოლოდ ვიდეო $300.00$ 395.00
მიიღეთ ვიდეო კურსი 40 ვიდეო გაკვეთილი (15 სთ). ახლდება ყოველწლიურად. ასევე ხელმისაწვდომია UX პაკეტის სახით 2 ვიდეო კურსით.
სასარგებლო რესურსები
Popups-ის სხვადასხვა ტიპები, ანა კეილის მიერ საუკეთესო პრაქტიკა UI მოდალების დიზაინისთვის, Uxcel-ის მიერ ჩვენ ვიყენებთ ძალიან ბევრ წყეულ მოდალს: UX სახელმძღვანელო, ადრიან ეგგერის მიერ მოდალური და არამოდალური დიალოგი, ტერეზა ფესენდენი თანამედროვე Enterprise UI Design: Modal Dialogs, ჯეიმს ჯეიკობსის მიერ მოდალები დიზაინის სისტემებში
