Ви, напевно, були там раніше. Як ми вибираємо між показом модальності користувачам і коли ми переходимо їх на окрему нову сторінку? І чи це взагалі має значення? Насправді, це так. Рішення впливає на перебіг користувачів, їхній контекст, їх здатність шукати деталі, а разом з цим частоту помилок і виконання завдань. Обидва варіанти можуть бути руйнівними та розчаровувати — у невідповідний час і не в тому місці. Тож нам краще зробити це правильно. Ну, давайте подивимося, як це зробити. Модальні чи діалогові вікна, накладені та лайтбокси Хоча ми часто говоримо про один модальний компонент інтерфейсу користувача, ми часто ігноруємо тонкі, складні нюанси між усіма різними типами модалів. Насправді не кожен модаль є однаковим. Модалі, діалоги, накладки та лайтбокси — усе звучить схоже, але насправді вони дуже різні:
Діалог Загальний термін для «розмови» (користувач ↔ система). Накладання Невелика панель вмісту, що відображається у верхній частині сторінки. ModalUser має взаємодіяти з вимкненим накладанням і фоном. NonmodalUser має взаємодіяти з увімкненим накладанням і фоном. Лайтбокс: затемнений фон, щоб зосередити увагу на модалі.
Як підкреслює Анна Кейлі, більшість накладень з’являються в невідповідний час, заважають користувачам під час виконання критичних завдань, використовують нецензурну лексику та перешкоджають користувачам. За своєю природою вони переривають і зазвичай мають високий рівень тяжкості без гострої потреби в цьому.
Звичайно, користувачів потрібно сповільнювати та переривати, якщо наслідки їхніх дій мають значний вплив, але для більшості сценаріїв немодальні є набагато тоншим і більш дружнім варіантом, щоб привернути увагу користувача. У будь-якому випадку, я завжди пропоную, щоб це було за замовчуванням. Модальні → Для окремих самостійних завдань Як дизайнери, ми часто відкидаємо модали як нерелевантні та дратівливі — і часто вони є такими! — але вони також мають свою цінність. Вони можуть бути дуже корисними, щоб попередити користувачів про можливі помилки або допомогти їм уникнути втрати даних. Вони також можуть допомогти виконувати пов’язані дії або докладати деталі, не перериваючи поточний стан сторінки. Але найбільшою перевагою модалів є те, що вони допомагають користувачам зберігати контекст поточного екрана. Це не лише користувальницький інтерфейс, а й редагований вхід, положення прокручування, стан акордеонів, вибір фільтрів, сортування тощо.
Часом користувачам потрібно швидко підтвердити вибір (наприклад, фільтри, як показано вище), а потім негайно продовжити. Звичайно, автозбереження може досягти того ж, але воно не завжди потрібне чи бажане. І блокування інтерфейсу користувача часто не є гарною ідеєю. Однак модальні форми не використовуються для жодних завдань. Як правило, ми використовуємо їх для окремих самодостатніх завдань, до яких користувачі повинні зайти, виконати завдання, а потім повернутися туди, де вони були. Не дивно, що вони добре працюють для високопріоритетних, коротких взаємодій (наприклад, попередження, руйнівні дії, швидкі підтвердження). Коли модальні засоби допомагають: 🚫 Модалі часто є руйнівними, інвазивними та заплутаними. 🚫 Вони ускладнюють порівняння та копіювання та вставлення. ✅ Проте модалі дозволяють користувачам підтримувати кілька контекстів. ✅ Корисно для запобігання незворотним помилкам і втраті даних. ✅ Корисно, якщо пересилання користувачів на нову сторінку буде заважати. ✅ Показувати модаль, лише якщо користувачі оцінять перешкоди.✅ За замовчуванням віддавати перевагу неблокуючим діалоговим вікнам («немодальним»).✅ Дозволяти користувачам згортати, приховувати або відновлювати діалогове вікно пізніше.✅ Використовувати модаль, щоб уповільнити роботу користувачів, наприклад, перевірити складний вхід.✅ Дайте вихід за допомогою «Закрити», клавіші ESC або клацніть за межами поля. Сторінки → Для складних, багатоетапних робочих процесів Майстри чи навігація з вкладками в модалах не працюють надто добре, навіть у складних корпоративних продуктах — там бічні панелі чи ящики зазвичай працюють краще. Проблеми починаються, коли користувачам потрібно порівняти або посилатися на точки даних, але модальні блоки блокують таку поведінку, тому замість цього вони знову відкривають ту саму сторінку в кількох вкладках.
Для більш складних потоків і багатоетапних процесів найкраще підходять окремі сторінки. Сторінки також працюють краще, коли вони вимагають повної уваги користувача, і посилання на попередній екран не дуже корисно. І ящики працюють для підзавдань, які є надто складними для простого модалу, але не потребують повної навігації по сторінці. Коли слід уникати модалів: 🚫 Уникайте модалів для повідомлень про помилки.🚫 Уникайте модалів для сповіщень про функції.🚫 Уникайте модалів для ознайомлення.🚫 Уникайте модалів для складних тривалих багатоетапних завдань.🚫 Уникайте кількох вкладених модалів і використовуйте натомість попередній/наступний.🚫 Уникайте модалів, що запускаються автоматично, якщо це не є абсолютно необхідним. Уникайте обохДля повторюваних завдань У багатьох складних і важких продуктах користувачі виявляють, що виконують одні й ті самі завдання неодноразово, знову і знову. Там як модальна, так і нова навігація сторінками створюють тертя, оскільки вони переривають потік або змушують користувачів збирати відсутні дані між усіма різними вкладками чи видами. Дуже часто користувачі отримують несправний досвід, повний нескінченних підтверджень, перебільшених попереджень, багатослівних інструкцій або просто відсутніх орієнтирів. Як зазначив Саулюс Стебуліс, у цих сценаріях розділи, що розширюються, або редагування на місці часто працюють краще — вони зберігають завдання прив’язаним до поточного екрана. На практиці в багатьох сценаріях користувачі не виконують свої завдання окремо. Їм потрібно шукати дані, копіювати та вставляти значення, уточнювати записи в різних місцях або просто переглядати схожі записи під час виконання своїх завдань. Накладки та ящики більш корисні для підтримки доступу до фонових даних під час виконання завдання. У результаті контекст завжди залишається на своєму місці, доступним для довідки або копіювання. Збережіть моди та навігацію сторінкою для моментів, коли переривання справді додає цінності, особливо для запобігання критичних помилок. Модальні та сторінки: дерево рішень Нещодавно Райан Нойфельд склав дуже корисний посібник, який допоможе дизайнерам вибрати між модалами та сторінками. Він постачається зі зручною шпаргалкою у форматі PNG і шаблоном Google Doc із запитаннями, розбитими на 7 розділів. Він тривалий, надзвичайно ретельний, але його дуже легко дотримуватися:
Це може виглядати страшно, але це досить простий процес із 4 кроків:
Контекст екрана. Спочатку ми перевіряємо, чи потрібно користувачам підтримувати контекст базового екрана. Складність і тривалість завдань. Простіші, зосереджені завдання, які не відволікаються, можуть використовувати модальний режим, але довгі, складні потоки потребують сторінки. Посилання на базову сторінку. Потім ми перевіряємо, чи часто користувачам потрібно звертатися до даних у фоновому режимі, чи завдання є простим підтвердженням або вибором. Вибір правильного накладання. Нарешті, якщо накладання дійсно є хорошим вибором, воно скеровує нас до вибору між модальним або немодальним (з нахилом до немодального).
Підведення підсумків За можливості уникайте блокування всього інтерфейсу користувача. Зробіть діалогове вікно плаваючим, частково закриваючи інтерфейс користувача, але дозволяючи навігацію, прокручування та копіювання. Або показати вміст модалу як бічний ящик. Або використовувати замість нього вертикальну гармошку. Або переведіть користувачів на окрему сторінку, якщо вам потрібно показати багато деталей. Але якщо ви хочете підвищити ефективність і швидкість користувачів, будь-якою ціною уникайте модалів. Використовуйте їх, щоб уповільнити роботу користувачів, зосередити їх увагу, запобігти помилкам. Як зазначила Тереза Фессенден, ніхто не любить, коли його перебивають, але якщо потрібно, переконайтеся, що це того варте. Зустрічайте «Шаблони дизайну розумного інтерфейсу» Ви можете знайти цілий розділ про моди та альтернативи в Smart Interface Design Patterns, нашому 15-годинному відеокурсі із сотнями практичних прикладів із реальних проектів — із живим тренінгом 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 Bundle із 2 відеокурсами.
Корисні ресурси
Різні типи спливаючих вікон, автор Анна Кейлі Найкращі методи розробки модальних інтерфейсів користувача від Uxcel Ми використовуємо занадто багато чортових модалів: Рекомендації щодо UX, Адріан Еггер Модальні та немодальні діалоги, Тереза Фессенден Сучасний корпоративний дизайн інтерфейсу користувача: Модальні діалоги, Джеймс Джейкобс Модалі в системах проектування
