Сіз ол жерде бұрын болған шығарсыз. Пайдаланушыларға модальды көрсетуді қалай таңдаймыз және оларды бөлек, жаңа бетке қашан шарлаймыз? Және бұл мүлдем маңызды ма? Шын мәнінде, солай. Шешім пайдаланушылардың ағынына, олардың контекстіне, мәліметтерді іздеу қабілетіне, сонымен қатар қате жиілігіне және тапсырманың аяқталуына әсер етеді. Екі нұсқа да қате уақытта және дұрыс емес жерде бұзылып, көңілсіз болуы мүмкін. Сондықтан біз оны дұрыс қабылдағанымыз жөн. Ал, мұны қалай жасауға болатынын көрейік. Модальдер және диалогтар және қабаттасулар және жарық жәшіктері Біз бір модальді UI құрамдас бөлігі туралы жиі айтатын болсақ, біз модальдардың барлық түрлері арасындағы нәзік, күрделі нюанстарды жиі елемейміз. Шындығында, кез келген модаль бірдей емес. Модальдер, диалогтық терезелер, қабаттасулар және жарық жәшіктері — бәрі бірдей естіледі, бірақ олар мүлдем басқаша:
Dialog «әңгімелесу» үшін жалпы термин (пайдаланушы ↔ жүйесі). Overlay Беттің жоғарғы жағында көрсетілетін шағын мазмұн тақтасы. ModalUser қабаттасу + фон өшірулі әрекеттесу керек. NonmodalUser қосулы қабат + фонмен өзара әрекеттесуі керек. Модалға назар аудару үшін Lightbox күңгірттенген фон.
Анна Кали атап өткендей, қабаттасудың көпшілігі дұрыс емес уақытта пайда болады, маңызды тапсырмалар кезінде пайдаланушылардың жұмысын тоқтатады, нашар тілді қолданады және пайдаланушылардың ағынын бұзады. Олар табиғаты бойынша үзіліс болып табылады және әдетте бұған қатты мұқтаждықсыз жоғары деңгейдегі ауырлықпен.
Әрине, егер олардың әрекетінің салдары жоғары әсер ететін болса, пайдаланушыларды баяулату және үзу керек, бірақ көптеген сценарийлер үшін модальды еместер әлдеқайда нәзік және пайдаланушының назарын бір нәрсеге аудару үшін ыңғайлы нұсқа болып табылады. Егер бірдеңе болса, мен оны әрқашан әдепкі деп ұсынамын. Модальдер → Бірыңғай, дербес тапсырмалар үшін Дизайнер ретінде біз модальдарды маңызды емес және тітіркендіргіш деп жиі қабылдамаймыз - және жиі олар! — дегенмен олардың да құндылығы бар. Олар пайдаланушыларды ықтимал қателер туралы ескертуге немесе деректердің жоғалуын болдырмауға көмектесу үшін өте пайдалы болуы мүмкін. Олар сондай-ақ қатысты әрекеттерді орындауға немесе беттің ағымдағы күйін үзбей мәліметтерді егжей-тегжейлі көрсетуге көмектеседі. Бірақ модальдардың ең үлкен артықшылығы - олар пайдаланушыларға ағымдағы экранның контекстін сақтауға көмектеседі. Бұл пайдаланушы интерфейсін ғана білдірмейді, сонымен қатар өңделген енгізуді, айналдыру орнын, аккордеон күйін, сүзгілерді таңдауды, сұрыптауды және т.б.
Кейде пайдаланушылар таңдауды жылдам растауы керек (мысалы, жоғарыда көрсетілген сүзгілер), содан кейін сол жерден дереу әрекет ету керек. Автоматты сақтау, әрине, бірдей нәтижеге қол жеткізе алады, бірақ бұл әрқашан қажет немесе қажет емес. Ал UI блоктау жиі жақсы идея емес. Дегенмен, модальдар ешбір тапсырма үшін пайдаланылмайды. Әдетте, біз оларды пайдаланушылар секіріп, тапсырманы орындап, содан кейін бұрынғы орнына қайтуы керек жалғыз, дербес тапсырмалар үшін пайдаланамыз. Таңқаларлық емес, олар жоғары басымдықты, қысқа өзара әрекеттесулер үшін жақсы жұмыс істейді (мысалы, ескертулер, жойқын әрекеттер, жылдам растаулар). Модальдер көмектескенде: 🚫 Модальдер жиі бұзушы, инвазивті және шатастырады.🚫 Олар салыстыруды және көшіріп қоюды қиындатады.✅ Дегенмен модальдар пайдаланушыларға бірнеше контексттерді сақтауға мүмкіндік береді.✅ Қайтыс болмайтын қателер мен деректердің жоғалуын болдырмау үшін пайдалы.✅ Пайдаланушыларды жаңа бетке жіберу кедергі келтіретін болса пайдалы. ✅ Пайдаланушылар бұзылуды бағалайтын болса ғана модальды көрсетіңіз.✅ Әдепкі бойынша, блокталмаған диалогтарды («модальды емес») таңдаңыз.✅ Пайдаланушыларға диалогты кейінірек кішірейтуге, жасыруға немесе қалпына келтіруге рұқсат беріңіз. ✅ Пайдаланушыларды баяулату үшін модальды пайдаланыңыз, мысалы, күрделі енгізуді тексеріңіз. ✅ «Жабу», ESC пернесі арқылы шығу жолын көрсетіңіз немесе қораптың сыртын басыңыз. Беттер → Күрделі, көп сатылы жұмыс процестері үшін Модальдардағы шеберлер немесе қойындыларды шарлау тіпті күрделі кәсіпорын өнімдерінде де жақсы жұмыс істемейді — онда бүйірлік панельдер немесе жәшіктер әдетте жақсырақ жұмыс істейді. Ақаулықтар пайдаланушыларға деректер нүктелерін салыстыру немесе сілтеме жасау қажет болғанда басталады, бірақ модальдар бұл әрекетті блоктайды, сондықтан оның орнына бірнеше қойындыларда бір бетті қайта ашады.
Күрделі ағындар мен көп сатылы процестер үшін оқшау беттер жақсы жұмыс істейді. Сондай-ақ, беттер пайдаланушының толық назарын талап еткенде жақсы жұмыс істейді және алдыңғы экранға сілтеме жасау өте пайдалы емес. Ал жәшіктер қарапайым модаль үшін тым күрделі, бірақ толық бетті шарлауды қажет етпейтін қосалқы тапсырмалар үшін жұмыс істейді. Модальдерден қашан аулақ болу керек: 🚫 Қате туралы хабарлар үшін модальдардан аулақ болыңыз.🚫 Мүмкіндіктер туралы хабарландырулар үшін модальдардан аулақ болыңыз.🚫 Жұмысқа қосу тәжірибесі үшін модальдардан аулақ болыңыз.🚫 Күрделі, ұзақ көп қадамды тапсырмалар үшін модальдардан аулақ болыңыз.🚫 Бірнеше кірістірілген модальдарды болдырмаңыз және оның орнына алдыңғы/келесі пайдаланыңыз.🚫 Автоматты түрде іске қосылмаған модальдарды болдырмаңыз. Екеуінен де аулақ болыңызҚайталанатын тапсырмалар үшін Көптеген күрделі, тапсырмалары ауыр өнімдерде пайдаланушылар бірдей тапсырмаларды қайта-қайта, қайта-қайта орындайтынын көреді. Онда модальдар да, жаңа бет шарлаулары да үйкеліс қосады, себебі олар ағынды үзеді немесе пайдаланушыларды барлық әртүрлі қойындылар немесе көріністер арасында жетіспейтін деректерді жинауға мәжбүр етеді. Көбінесе пайдаланушылар аяқталмайтын растауларға, асыра ескертулерге, егжей-тегжейлі нұсқауларға немесе жай ғана жетіспейтін анықтамалық нүктелерге толы бұзылған тәжірибемен аяқталады. Саулиус Стебулис атап өткендей, бұл сценарийлерде кеңейтілетін бөлімдер немесе орнындағы өңдеу жиі жақсы жұмыс істейді — олар тапсырманы ағымдағы экранға бекітеді. Іс жүзінде, көптеген сценарийлерде пайдаланушылар өз тапсырмаларын оқшаулап орындамайды. Олар деректерді іздеуі, мәндерді көшіру-қою, әртүрлі орындардағы жазбаларды нақтылау немесе тапсырмалар арқылы жұмыс істеу кезінде ұқсас жазбаларды қарап шығуы керек. Тапсырма кезінде фондық деректерге қол жеткізуді қамтамасыз ету үшін қабаттасулар мен жәшіктер пайдалырақ. Нәтижесінде мәтінмән әрқашан өз орнында қалады, сілтеме немесе көшіру-қою үшін қолжетімді. Модальдерді және бетті шарлауды үзіліс шынымен мән беретін сәттерге сақтаңыз, әсіресе маңызды қателерді болдырмау үшін. Модальдерге қарсы беттер: Шешім ағашы Біраз уақыттан кейін Райан Нойфельд дизайнерлерге модальдар мен беттер арасында таңдау жасауға көмектесетін өте пайдалы нұсқаулықты жинады. Ол ыңғайлы PNG парағымен және 7 бөлімге бөлінген сұрақтары бар Google Doc үлгісімен бірге келеді. Бұл ұзақ, өте мұқият, бірақ орындау өте оңай:
Бұл қорқынышты болып көрінуі мүмкін, бірақ бұл өте қарапайым 4 қадамдық процесс:
Экранның мәтінмәні. Біріншіден, пайдаланушыларға негізгі экранның контекстін сақтау қажеттігін тексереміз. Тапсырманың күрделілігі және ұзақтығы. Қарапайымырақ, бағытталған, алаңдатпайтын тапсырмалар модальды қолдануы мүмкін, бірақ ұзақ, күрделі ағындарға бет қажет. Негізгі бетке сілтеме. Содан кейін біз пайдаланушыларға фондық режимдегі деректерге жиі сілтеме жасау қажет пе немесе тапсырма қарапайым растау немесе таңдау болса, тексереміз. Дұрыс қабаттасуды таңдау. Соңында, егер қабаттастыру шынымен жақсы опция болса, ол бізге модальды немесе модальды емес (модальды емеске сүйенеді) арасында таңдау жасауға бағыттайды.
Орау Мүмкіндігінше, бүкіл пайдаланушы интерфейсін блоктаудан аулақ болыңыз. Пайдаланушы интерфейсін ішінара қамтитын, бірақ шарлау, айналдыру және көшіру-қоюға мүмкіндік беретін қалқымалы диалогтық терезе бар. Немесе модальдың мазмұнын бүйірлік тартпа ретінде көрсетіңіз. Немесе оның орнына тік аккордеонды пайдаланыңыз. Немесе көп мәліметтерді көрсету қажет болса, пайдаланушыларды бөлек бетке әкеліңіз. Бірақ егер сіз пайдаланушылардың тиімділігі мен жылдамдығын арттырғыңыз келсе, модальдан аулақ болыңыз. Оларды пайдаланушыларды баяулату, олардың назарын жинақтау, қателерді болдырмау үшін пайдаланыңыз. Терезе Фессенден атап өткендей, ешкім кедергі болғанды ұнатпайды, бірақ қажет болса, оның құнына мүлдем тұрарлық екеніне көз жеткізіңіз. «Ақылды интерфейс дизайн үлгілерімен» танысыңыз Модалдар мен баламалар туралы толық бөлімді Smart Interface Design Patterns бөлімінен таба аласыз, біздің 15 сағаттық бейне курсымыз нақты өмірдегі жобалардан 100 практикалық мысалдар – осы жылдың соңында тікелей UX тренингімен. Мега ашылмалы тізімнен бастап күрделі кәсіпорын кестелеріне дейін — жыл сайын 5 жаңа сегмент қосылады. Тегін алдын ала қарауға өтіңіз. 15% жеңілдік алу үшін BIRDIE кодын пайдаланыңыз. Smart Interface Design Patterns, интерфейс дизайны және UX бойынша бейне курсымызбен танысыңыз.
Бейне + UX тренингіТек бейне бейне + UX тренингі$ 495,00 $ 699,00
Бейнені алыңыз + UX тренингі 25 бейне сабақ (15 сағ) + Live UX тренингі. 100 күндік ақшаны қайтару кепілдігі. Тек бейне $ 300,00$ 395,00
Бейне курсты 40 бейне сабақ алыңыз (15 сағ). Жыл сайын жаңартылады. Сондай-ақ 2 бейне курсы бар UX жинағы ретінде қолжетімді.
Пайдалы ресурстар
Қалқымалы терезелердің әртүрлі түрлері, Анна Кали UI модальдарын жобалаудың үздік тәжірибелері, Uxcel Біз тым көп қарғыс модальдарын қолданамыз: UX нұсқаулары, Адриан Эггер Модальдық және модальды емес диалогтар, Терезе Фессенден Қазіргі заманғы Enterprise UI дизайны: модальды диалогтар, Джеймс Джейкобс Дизайн жүйелеріндегі модальдар
