Веројатно сте биле таму порано. Како избираме помеѓу прикажување модал на корисниците и кога ги префрламе на посебна, нова страница? И дали е тоа воопшто важно? Всушност, тоа го прави. Одлуката влијае на протокот на корисниците, нивниот контекст, нивната способност да бараат детали, а со тоа и зачестеноста на грешките и завршувањето на задачите. И двете опции можат да бидат вознемирувачки и фрустрирачки - во погрешно време и на погрешно место. Затоа е подобро да го сфатиме правилно. Па, ајде да видиме како да го направиме токму тоа. Модали наспроти дијалози наспроти преклопувања наспроти светлосни кутии Иако често зборуваме за една компонента на модален интерфејс, често ги игнорираме фините, сложени нијанси помеѓу сите различни типови модали. Всушност, не секој модал е ист. Модали, дијалози, преклопувања и светлосни кутии - сите звучат слично, но всушност се сосема различни:
Дијалог генерички термин за „разговор“ (корисник ↔ систем). ПреклопувањеМала табла со содржина прикажана на врвот на страницата. ModalUser мора да комуницира со преклоп + оневозможена позадина. NonmodalUser мора да комуницира со овозможено преклопување + позадина. Lightbox затемнета позадина за да се фокусира вниманието на модалот.
Како што нагласува Ана Кејли, повеќето преклопувања се појавуваат во погрешно време, ги прекинуваат корисниците за време на критичните задачи, користат слаб јазик и го прекинуваат протокот на корисниците. Тие се прекинувачки по природа, и обично со високо ниво на сериозност без силна потреба за тоа.
Сигурно, корисниците мора да бидат забавени и прекинати ако последиците од нивното дејство имаат големо влијание, но за повеќето сценарија немодалите се многу посуптилни и попријателска опција за да му се предочи нешто на корисникот. Ако нешто, јас секогаш предлагам да биде стандардно. Модали → За единечни, самостојни задачи Како дизајнери, ние често ги отфрламе модалите како ирелевантни и досадни - и често се тие! - но и тие имаат своја вредност. Тие можат да бидат многу корисни за да ги предупредат корисниците за потенцијални грешки или да им помогнат да избегнат загуба на податоци. Тие, исто така, можат да помогнат во извршувањето на поврзаните дејства или да ги разберат деталите без да ја прекинат моменталната состојба на страницата. Но, најголемата предност на модалите е тоа што им помагаат на корисниците да го задржат контекстот на тековниот екран. Тоа не значи само интерфејс, туку и уреден влез, позиција на лизгање, состојба на хармоника, избор на филтри, сортирање итн.
Понекогаш, корисниците треба брзо да потврдат избор (на пр., филтри како што е прикажано погоре) и потоа да продолжат веднаш од таму. Автоматското зачувување може да го постигне истото, се разбира, но тоа не е секогаш потребно или посакувано. И блокирањето на интерфејсот често не е добра идеја. Сепак, модалите не се користат за никакви задачи. Обично, ги користиме за единечни, самостојни задачи каде што корисниците треба да скокнат, да завршат задача и потоа да се вратат таму каде што биле. Очекувано, тие работат добро за кратки интеракции со висок приоритет (на пр., предупредувања, деструктивни дејства, брзи потврди). Кога модалите помагаат: 🚫 Модалите честопати предизвикуваат нарушување, инвазивни и збунувачки. ✅ Прикажи модал само ако корисниците го ценат нарушувањето. ✅ Стандардно, претпочитаат дијалози кои не се блокираат („немодали“). ✅ Дозволете им на корисниците подоцна да го минимизираат, сокријат или обноват дијалогот. Страници → За сложени, повеќестепени работни текови Волшебниците или навигацијата со јазичиња во модали не функционира премногу добро, дури и кај сложените производи на претпријатието - таму, страничните панели или фиоките обично работат подобро. Проблемите започнуваат кога корисниците треба да споредуваат или да ги упатуваат точките на податоци - но сепак модалите го блокираат ова однесување, па наместо тоа, повторно ја отвораат истата страница во повеќе јазичиња.
За посложени текови и процеси во повеќе чекори, самостојните страници најдобро функционираат. Страниците исто така работат подобро кога бараат целосно внимание од корисникот, а повикувањето на претходниот екран не е многу корисно. И фиоките работат за под-задачи кои се премногу сложени за едноставен модал, но не бараат навигација на целата страница. Кога да се избегнат модали: 🚫 Избегнувајте модали за пораки за грешки. 🚫 Избегнувајте модали за известувања за функции. Избегнувајте ги дветеЗа повторени задачи Во многу сложени производи со тешки задачи, корисниците ќе се најдат себеси како ги извршуваат истите задачи постојано, одново и одново. Таму, и модалите и навигациите на новите страници додаваат триење бидејќи го прекинуваат протокот или ги принудуваат корисниците да собираат податоци што недостасуваат помеѓу сите различни јазичиња или прикази. Премногу често, корисниците завршуваат со скршено искуство, полно со бескрајни потврди, претерани предупредувања, опширни инструкции или едноставно пропуштање на референтни точки. Како што спомена Саулиус Стебулис, во овие сценарија, деловите што можат да се прошират или уредувањето на место често функционираат подобро - тие ја задржуваат задачата закотвена на тековниот екран. Во пракса, во многу сценарија, корисниците не ги завршуваат своите задачи изолирано. Тие треба да бараат податоци, да копираат-залепат вредности, да ги усовршат записите на различни места или само да прегледуваат слични записи додека работат на нивните задачи. Преклопувањата и фиоките се покорисни за одржување на пристапот до податоците во заднина за време на задачата. Како резултат на тоа, контекстот секогаш останува на своето место, достапен за упатување или копирање-пејст. Зачувајте ги модалите и навигацијата на страницата за моменти кога прекинот навистина додава вредност - особено за да спречите критични грешки. Модали наспроти страници: Дрво на одлуки Пред некое време, Рајан Нојфелд состави многу корисен водич за да им помогне на дизајнерите да изберат помеѓу модали и страници. Доаѓа со практичен лист со PNG и шаблон Google Doc со прашања поделени во 7 секции. Долга е, исклучително темелна, но многу лесно да се следи:
Можеби изгледа застрашувачки, но тоа е прилично едноставен процес од 4 чекори:
Контекст на екранот. Прво, проверуваме дали корисниците треба да го одржуваат контекстот на основниот екран. Сложеност и времетраење на задачата. За поедноставни, фокусирани, неодвлекувачки задачи може да се користат модални, но долгите, сложени текови бараат страница. Повикување на основната страница. Потоа, проверуваме дали корисниците често треба да се повикуваат на податоци во заднина или дали задачата е едноставна потврда или избор. Избор на вистинското преклопување. Конечно, ако преклопот е навистина добра опција, тоа нè води да избереме помеѓу модално или немодално (наклонето кон немодално).
Завиткување Секогаш кога е можно, избегнувајте да го блокирате целиот интерфејс. Имајте лебдечки дијалог, кој делумно го покрива корисничкиот интерфејс, но дозволува навигација, лизгање и копирање-лепење. Или прикажете ја содржината на модалот како странична фиока. Или наместо тоа, користете вертикална хармоника. Или доведете ги корисниците на посебна страница ако треба да покажете многу детали. Но, ако сакате да ја зголемите ефикасноста и брзината на корисниците, избегнувајте модали по секоја цена. Користете ги за да ги забавите корисниците, да го здружите нивното внимание, да спречите грешки. Како што забележа Тереза Фесенден, никој не сака да биде прекинат, но ако морате, бидете сигурни дека тоа е апсолутно вредно за трошоците. Запознајте ги „Шаблони за дизајн на паметни интерфејси“ Може да најдете цел дел за модали и алтернативи во Шаблони за дизајн на паметни интерфејси, нашиот курс за видео од 15 часа со 100 практични примери од реални проекти - со обука за UX во живо подоцна оваа година. Сè, од мега-паѓачки табели до сложени табели за претпријатија - со 5 нови сегменти кои се додаваат секоја година. Скокни до бесплатен преглед. Користете го кодот BIRDIE за да заштедите 15% попуст. Запознајте ги моделите за дизајн на паметни интерфејси, нашиот видео курс за дизајн на интерфејс и UX.
Видео + UX обука Само видео Видео + UX обука $ 495,00 $ 699,00 $
Добијте Video + UX Training25 видео лекции (15h) + Live UX Training. 100 дена гаранција за враќање на парите. Само видео 300,00$ 395,00$
Добијте го видео курсот 40 видео лекции (15 часа). Ажурирано годишно. Достапно и како UX пакет со 2 видео курсеви.
Корисни ресурси
Различни типови скокачки прозорци, од Ана Кејли Најдобри практики за дизајнирање UI модали, од Uxcel Користиме премногу проклети модали: Упатства за UX, од Адријан Егер Модални и немодални дијалози, од Тереза Фесенден Модерен дизајн на интерфејс на претпријатијата: модални дијалози, од Џејмс Џејкобс Модали во дизајн системи
