Вероятно сте били там преди. Как да избираме между показване на модал на потребителите и кога да ги навигираме към отделна нова страница? И има ли изобщо значение? Всъщност, така е. Решението влияе върху потока на потребителите, техния контекст, способността им да търсят подробности и с това честотата на грешките и изпълнението на задачите. И двата варианта могат да бъдат разрушителни и разочароващи - в неподходящото време и на неподходящото място. Така че е по-добре да го оправим. Е, нека да видим как да направим точно това. Модални срещу диалогови прозорци срещу наслагвания срещу лайтбоксове Въпреки че често говорим за един модален UI компонент, често пренебрегваме фините, сложни нюанси между всички различни типове модали. Всъщност не всеки модал е еднакъв. Модали, диалози, наслагвания и лайтбоксове – всички те звучат подобно, но всъщност са доста различни:
Диалог Общ термин за „разговор“ (потребител ↔ система). Наслагване Малък панел със съдържание, показван в горната част на страница. ModalUser трябва да взаимодейства с деактивирано наслагване + фон. NonmodalUser трябва да взаимодейства с активирано наслагване + фон. Лайтбокс Затъмнен фон за фокусиране на вниманието върху модала.
Както подчертава Анна Кейли, повечето наслагвания се появяват в неподходящ момент, прекъсват потребителите по време на критични задачи, използват нецензурен език и прекъсват потока на потребителите. Те са прекъсващи по природа и обикновено са с високо ниво на тежест, без да има силна нужда от това.
Разбира се, потребителите трябва да бъдат забавяни и прекъсвани, ако последствията от действията им имат голямо въздействие, но за повечето сценарии немодалните са много по-фини и по-приятелски вариант да привлечете вниманието на потребителя. Ако не друго, винаги предлагам да е по подразбиране. Модални → За единични, самостоятелни задачи Като дизайнери, ние често отхвърляме модалите като неуместни и досадни - и често те са! — но те също имат своята стойност. Те могат да бъдат много полезни, за да предупредят потребителите за потенциални грешки или да им помогнат да избегнат загуба на данни. Те могат също така да помогнат при извършването на свързани действия или да се задълбочават в подробности, без да прекъсват текущото състояние на страницата. Но най-голямото предимство на модалите е, че те помагат на потребителите да запазят контекста на текущия екран. Това не означава само потребителския интерфейс, но и редактиран вход, позиция на превъртане, състояние на акордеони, избор на филтри, сортиране и т.н.
Понякога потребителите трябва бързо да потвърдят избор (напр. филтри, както е показано по-горе) и след това да продължат веднага оттам. Автоматичното запазване може да постигне същото, разбира се, но не винаги е необходимо или желано. А блокирането на потребителския интерфейс често не е добра идея. Модалните обаче не се използват за никакви задачи. Обикновено ги използваме за единични, самостоятелни задачи, при които потребителите трябва да се включат, да изпълнят задача и след това да се върнат там, където са били. Не е изненадващо, че те работят добре за кратки взаимодействия с висок приоритет (напр. предупреждения, разрушителни действия, бързи потвърждения). Когато модалните помагат: 🚫 Модалите често са разрушителни, инвазивни и объркващи.🚫 Те затрудняват сравняването и копирането и поставянето.✅ Въпреки това модалите позволяват на потребителите да поддържат множество контексти.✅ Полезни за предотвратяване на необратими грешки и загуба на данни.✅ Полезни, ако изпращането на потребители към нова страница би било разрушително. ✅ Покажете модал само ако потребителите ще оценят смущението.✅ По подразбиране предпочитайте неблокиращи диалогови прозорци („немодални“).✅ Позволете на потребителите да минимизират, скрият или възстановят диалога по-късно.✅ Използвайте модал, за да забавите потребителите, напр., проверете сложния вход.✅ Дайте изход с „Затваряне“, клавиш ESC или щракнете извън полето. Страници → За сложни, многостъпкови работни процеси Съветниците или навигацията с раздели в рамките на модалите не работят твърде добре, дори в сложни корпоративни продукти – там страничните панели или чекмеджетата обикновено работят по-добре. Проблемите започват, когато потребителите трябва да сравняват или препращат точки от данни - но модалните блокове блокират това поведение, така че вместо това отварят отново същата страница в множество раздели.
За по-сложни потоци и многоетапни процеси, самостоятелните страници работят най-добре. Страниците също така работят по-добре, когато изискват пълното внимание на потребителя и позоваването на предишния екран не е много полезно. И чекмеджетата работят за подзадачи, които са твърде сложни за обикновен модал, но не се нуждаят от навигация на цялата страница. Кога да избягвате модалните: 🚫 Избягвайте модали за съобщения за грешки.🚫 Избягвайте модали за известия за функции.🚫 Избягвайте модали за включване в работата.🚫 Избягвайте модали за сложни, дълги многоетапни задачи.🚫 Избягвайте множество вложени модали и вместо това използвайте предишен/следващ.🚫 Избягвайте автоматично задействани модали, освен ако не е абсолютно необходимо. Избягвайте и дветеЗа повтарящи се задачи В много сложни, натоварващи задачи продукти потребителите ще открият, че изпълняват едни и същи задачи многократно, отново и отново. Там както модалните, така и новите навигации на страници добавят триене, защото прекъсват потока или принуждават потребителите да събират липсващи данни между всички различни раздели или изгледи. Твърде често потребителите завършват със счупен опит, пълен с безкрайни потвърждения, преувеличени предупреждения, многословни инструкции или просто липсващи референтни точки. Както спомена Saulius Stebulis, в тези сценарии разширяемите секции или редактирането на място често работят по-добре - те поддържат задачата закотвена към текущия екран. На практика в много сценарии потребителите не изпълняват задачите си изолирано. Те трябва да търсят данни, да копират и поставят стойности, да прецизират записи на различни места или просто да преглеждат подобни записи, докато изпълняват задачите си. Наслагванията и чекмеджетата са по-полезни за поддържане на достъп до фонови данни по време на задачата. В резултат на това контекстът винаги остава на мястото си, достъпен за справка или копиране-поставяне. Запазете модалите и навигацията на страницата за моменти, в които прекъсването наистина добавя стойност — особено за предотвратяване на критични грешки. Модални срещу страници: дърво на решенията Преди известно време Райън Нойфелд състави много полезно ръководство, за да помогне на дизайнерите да избират между модали и страници. Предлага се с удобен PNG измамник и шаблон на Google Doc с въпроси, разбити на 7 секции. Той е дълъг, изключително задълбочен, но много лесен за следване:
Може да изглежда обезсърчително, но това е доста прост процес в 4 стъпки:
Контекст на екрана. Първо проверяваме дали потребителите трябва да поддържат контекста на основния екран. Сложност и продължителност на задачите. По-простите, фокусирани, неразсейващи задачи биха могли да използват модален, но дългите, сложни потоци се нуждаят от страница. Препратка към основна страница. След това проверяваме дали потребителите често трябва да препращат към данни във фонов режим или задачата е просто потвърждение или избор. Избор на правилното наслагване. И накрая, ако наслагването наистина е добър вариант, то ни насочва да избираме между модално или немодално (клонящо към немодално).
Завършване Когато е възможно, избягвайте блокирането на целия потребителски интерфейс. Имайте плаващ диалогов прозорец, частично покриващ потребителския интерфейс, но позволяващ навигация, превъртане и копиране и поставяне. Или покажете съдържанието на модала като странично чекмедже. Или вместо това използвайте вертикален акордеон. Или преведете потребителите на отделна страница, ако трябва да покажете много подробности. Но ако искате да повишите ефективността и скоростта на потребителите, избягвайте модалните на всяка цена. Използвайте ги, за да забавите потребителите, да групирате вниманието им, да предотвратите грешки. Както отбеляза Терез Фесенден, никой не обича да бъде прекъсван, но ако трябва, уверете се, че си заслужава цената. Запознайте се с „модели за проектиране на интелигентен интерфейс“ Можете да намерите цял раздел за модали и алтернативи в Smart Interface Design Patterns, нашия 15-часов видео курс със 100 практически примера от реални проекти — с UX обучение на живо по-късно тази година. Всичко от мега падащи менюта до сложни корпоративни таблици — с 5 нови сегмента, добавяни всяка година. Преминете към безплатен преглед. Използвайте код BIRDIE, за да спестите 15% отстъпка. Запознайте се с шаблоните за проектиране на интелигентен интерфейс, нашия видео курс за дизайн на интерфейс и UX.
Видео + UX обучение Само видео Видео + UX обучение $ 495,00 $ 699,00
Вземете видео + UX обучение 25 видео урока (15 часа) + UX обучение на живо. 100 дни гаранция за връщане на парите. Само видео $ 300,00 $ 395,00
Вземете видео курса 40 видео урока (15 часа). Актуализира се ежегодно. Предлага се и като UX пакет с 2 видео курса.
Полезни ресурси
Различни видове изскачащи прозорци, от Анна Кейли Най-добри практики за проектиране на UI Modals, от Uxcel Използваме твърде много проклети модали: UX насоки, от Адриан Егер Модални и немодални диалози, от Терез Фесенден Модерен корпоративни UI дизайн: Модални диалози, от Джеймс Джейкъбс Модали в системите за проектиране
