Сиз, балким, мурда ал жерде болгондур. Колдонуучуларга модалды көрсөтүүнү кантип тандайбыз жана аларды качан өзүнчө, жаңы баракка өтөбүз? Жана мунун баары маанилүүбү? Чынында, ошондой болот. Чечим колдонуучулардын агымына, алардын контекстине, чоо-жайын издөө жөндөмүнө жана аны менен бирге каталардын жыштыгына жана тапшырманын аткарылышына таасир этет. Эки вариант тең туура эмес убакта жана туура эмес жерде бузуку жана капа болушу мүмкүн. Андыктан биз аны туура кабыл алганыбыз жакшы. Келгиле, муну кантип жасоо керектигин карап көрөлү. Модальдар менен Диалогдор менен кабатташуулар жана Lightboxes Биз көп учурда бир модалдык UI компоненти жөнүндө сөз кылганыбыз менен, биз көбүнчө модальдардын ар кандай түрлөрүнүн ортосундагы майда, татаал нюанстарды этибарга албайбыз. Чынында, ар бир модаль бирдей эмес. Модальдар, диалогдор, катмарлар жана лайтбоксдор - баары окшош угулат, бирок алар чындыгында такыр башкача:
DialogA "сүйлөшүү" үчүн жалпы термин (колдонуучу ↔ системасы). Overlay Барактын үстүндө көрсөтүлгөн кичинекей мазмун панели. ModalUser үстүнкү катмар менен иштеши керек + фон өчүрүлгөн. NonmodalUser must interact with overlay + background enabled. Көңүлдү модалга буруу үчүн LightboxDimmed фон.
Анна Кейли баса белгилегендей, көпчүлүк катмарлар туура эмес убакта пайда болуп, критикалык тапшырмалар учурунда колдонуучуларды үзгүлтүккө учуратышат, начар тилди колдонушат жана колдонуучулардын агымын бузушат. Алар табияты боюнча үзгүлтүккө учурайт жана, адатта, катуу талап кылбастан, жогорку деңгээлдеги катаал.
Албетте, колдонуучулардын аракеттеринин кесепеттери чоң таасир этсе, аларды жайлатып, үзгүлтүккө учуратыш керек, бирок көпчүлүк сценарийлер үчүн модалдык эместер алда канча тымызын жана колдонуучунун көңүлүн бир нерсеге тартуу үчүн ыңгайлуураак вариант. Эгер бир нерсе болсо, мен ар дайым демейки болушун сунуштайм. Модалдар → Жалгыз, өз алдынча тапшырмалар үчүн Дизайнер катары биз көбүнчө модальдарды маанисиз жана тажатма деп четке кагып коёбуз - жана көбүнчө алар! — бирок алардын да баалуулугу бар. Алар колдонуучуларга мүмкүн болуучу каталар жөнүндө эскертүү же маалымат жоголбоого жардам берүү үчүн абдан пайдалуу болушу мүмкүн. Алар ошондой эле тиешелүү аракеттерди жасоого же беттин учурдагы абалын үзгүлтүккө учуратпастан майда-чүйдөсүнө чейин тереңдетүүгө жардам берет. Бирок модальдардын эң чоң артыкчылыгы - алар колдонуучуларга учурдагы экрандын контекстти сактоого жардам берет. Бул жөн гана UI дегенди билдирбейт, ошондой эле түзөтүлгөн киргизүүнү, сыдыруу абалын, аккордеондордун абалын, чыпкаларды тандоону, сорттоо ж.б.у.с.
Кээде колдонуучулар тандоону тез ырастап (мисалы, жогоруда көрсөтүлгөндөй чыпкаларды), андан кийин ошол жерден дароо улантуулары керек. Auto-save can achieve the same, of course, but it’s not always needed or desired. Ал эми UI бөгөттөө көп учурда жакшы идея эмес. Бирок, модалдар эч кандай тапшырмалар үчүн колдонулбайт. Адатта, биз аларды жалгыз, өз алдынча тапшырмалар үчүн колдонобуз, мында колдонуучулар секирип, тапшырманы аткарып, андан кийин алар турган жерине кайтып келиши керек. Таң калыштуусу, алар артыкчылыктуу, кыска өз ара аракеттенүү үчүн жакшы иштейт (мисалы, эскертүүлөр, кыйратуучу аракеттер, тез ырастоо). Модалдар жардам бергенде: 🚫 Модальдер көбүнчө үзгүлтүккө учуратуучу, инвазивдик жана баш аламандыкты жаратат.🚫 Алар салыштырууну жана көчүрүп коюуну кыйындатат.✅ Ошентсе да модалдар колдонуучуларга бир нече контекстти сактоого мүмкүндүк берет.✅ Кайтарылгыс каталарды жана маалыматтарды жоготууга жол бербөө үчүн пайдалуу.✅ Колдонуучуларды жаңы баракчага жөнөтүү үзгүлтүккө учураса пайдалуу. ✅ Колдонуучулар бузулууну баалай турган болсо гана модалды көрсөтүңүз.✅ Демейки боюнча, бөгөттөлбөгөн диалогдорду тандаңыз ("модалдык эмес").✅ Колдонуучуларга диалогду кичирейтүүгө, жашырууга же кийинчерээк калыбына келтирүүгө уруксат бериңиз. ✅ Колдонуучуларды жайлатуу үчүн модалды колдонуңуз, мис., татаал киргизүүнү текшерүү. ✅ "Жабуу", ESC баскычы менен чыгуунун жолун бериңиз же кутучанын сыртын чыкылдатыңыз. Барактар → Татаал, көп кадамдуу иш процесстери үчүн Модалдардын ичиндеги усталар же өтмөктүү навигация татаал ишкана өнүмдөрүндө деле жакшы иштебейт — ал жакта каптал панелдер же тартмалар адатта жакшыраак иштешет. Кыйынчылыктар колдонуучулар маалымат чекиттерин салыштыруу же шилтеме жасоо керек болгондо башталат - бирок модальдар бул жүрүм-турумду бөгөттөп, анын ордуна бир эле баракты бир нече өтмөктө кайра ачышат.
Татаал агымдар жана көп кадамдуу процесстер үчүн өз алдынча барактар эң жакшы иштейт. Барактар да колдонуучунун толук көңүл буруусун талап кылганда жакшыраак иштейт жана мурунку экранга шилтеме кылуу анча деле пайдалуу эмес. Жана суурмалар жөнөкөй модаль үчүн өтө татаал, бирок толук барак навигациясын талап кылбаган суб-милдеттери үчүн иштейт. Модалдардан качан качуу керек: 🚫 Ката билдирүүлөрү үчүн модалдардан алыс болуңуз. Экөөн тең качКайталануучу тапшырмалар үчүн Көптөгөн татаал, тапшырмасы оор продуктуларда колдонуучулар бир эле тапшырмаларды кайра-кайра аткарып жатканын көрүшөт. Ал жерде модалдар да, жаңы барак навигациялары да сүрүлүүнү кошот, анткени алар агымды үзгүлтүккө учуратышат же колдонуучуларды бардык ар кандай өтмөктөрдүн же көрүнүштөрдүн ортосунда жетишпеген маалыматтарды чогултууга мажбурлашат. Көп учурда колдонуучулар бүтпөгөн ырастоолорго, апыртылган эскертүүлөргө, кенен нускамаларга же жөн эле жетишпеген шилтемелерге толгон бузулган тажрыйбага ээ болушат. Саулиус Стебулис белгилегендей, бул сценарийлерде кеңейтилүүчү бөлүмдөр же ордунда оңдоо көбүнчө жакшыраак иштешет — алар тапшырманы учурдагы экранга бекитип беришет. Иш жүзүндө, көптөгөн сценарийлерде колдонуучулар өз милдеттерин өзүнчө аткарышпайт. Алар дайындарды издеп, баалуулуктарды көчүрүп, чаптап, ар кайсы жерлердеги жазууларды тактоосу керек же тапшырмаларын аткарып жатканда окшош жазууларды карап чыгышы керек. Тапшырма учурунда фондо маалыматка жетүү мүмкүнчүлүгүн сактоо үчүн катмарлар жана суурмалар көбүрөөк жардам берет. Натыйжада, контекст ар дайым өз ордунда калат, шилтеме же көчүрүп чаптоо үчүн жеткиликтүү. Модалдарды жана барактарды навигацияны үзгүлтүккө учуратуу чындап мааниге ээ болгон учурлар үчүн сактаңыз - өзгөчө маанилүү каталарды болтурбоо үчүн. Модальдерге каршы беттер: Чечим дарагы Бир аз убакыт мурун, Райан Нойфельд дизайнерлерге модалдар менен беттердин ортосунда тандоого жардам берүү үчүн абдан пайдалуу колдонмону чогулткан. Бул ыңгайлуу PNG схемасы жана 7 бөлүмгө бөлүнгөн суроолору бар Google Doc шаблону менен келет. Бул узун, өтө кылдат, бирок аткарууга абдан оңой:
Бул коркунучтуу көрүнүшү мүмкүн, бирок бул абдан жөнөкөй 4 кадамдан турган процесс:
Экрандын контексти. Биринчиден, биз колдонуучулар негизги экрандын контекстин сактоо керекпи же жокпу, текшеребиз. Тапшырма татаалдыгы жана узактыгы. Жөнөкөй, багытталган, алаксытпай турган тапшырмалар модалдыкты колдонушу мүмкүн, бирок узак, татаал агымдарга барактар керек. Негизги бетке шилтеме. Андан кийин, биз колдонуучулар көп учурда фондо маалыматтарга кайрылуу керекпи же тапшырма жөнөкөй ырастоо же тандообу текшеребиз. Туура катмарды тандоо. Акырында, эгер каптоо чындап эле жакшы вариант болсо, ал бизге модалдык же модалдык эмес (модалдык эмеске ыктоо) ортосунда тандоого жол көрсөтөт.
Орнотуу Мүмкүн болушунча UIди толугу менен бөгөттөөдөн алыс болуңуз. UI жарым-жартылай камтыган, бирок навигацияга, сыдырууга жана көчүрүп чаптоого мүмкүндүк берүүчү калкып турган диалогго ээ болуңуз. Же модалдын мазмунун каптал тартма катары көрсөтүңүз. Же анын ордуна вертикалдуу аккордеонду колдонуңуз. Or bring users to a separate page if you need to show a lot of detail. Бирок, эгер сиз колдонуучулардын эффективдүүлүгүн жана ылдамдыгын жогорулатууну кааласаңыз, бардык баалар боюнча модальдардан качыңыз. Аларды колдонуучуларды басаңдатуу, алардын көңүлүн топтоо, каталарды болтурбоо үчүн колдонуңуз. Тереза Фессенден белгилегендей, эч ким тоскоол болгонду жактырбайт, бирок керек болсо, анын баасы толугу менен татыктуу экенине ынаныңыз. "Акылдуу интерфейс дизайн үлгүлөрү" менен таанышыңыз Модалдар жана альтернативалар жөнүндө толук бөлүмдү 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 Bundle катары жеткиликтүү.
Пайдалуу ресурстар
Калкыма терезелердин ар кандай түрлөрү, Анна Кали тарабынан UI модалдарын долбоорлоо боюнча мыкты тажрыйбалар, Uxcel Биз өтө көп каргыш модалдарын колдонобуз: UX көрсөтмөлөрү, Адриан Эггер тарабынан Modal & Nonmodal Dialogs, by Therese Fessenden Заманбап Enterprise UI Дизайн: Модалдык диалогдор, Джеймс Джейкобс Дизайн системаларындагы модалдар
