Людина вже описала майбутній проєкт, залишила контакт і зупинилася перед кнопкою надсилання. Поруч є посилання на коротку примітку про підготовку брифу. Вона відкриває його лише на хвилину, щоб уточнити деталь. Якщо після закриття вікна текст зникає або сторінка перестає прокручуватися, маленьке пояснення перетворюється на перешкоду. Це вигаданий сценарій, але корисна точка відліку для проєктування: діалог має допомагати завершити справу, не забираючи контроль над нею. Розглядаймо його разом із діями до відкриття та після закриття, а не як окрему красиву картку.
Спочатку перевірте, чи потрібне окреме вікно
Модальний діалог просить відкласти основну справу. Така пауза доречна, коли треба зосередитися на конкретному рішенні, перевірити його наслідки або виконати коротку самостійну дію. Для довідкової інформації поруч із вибором часто вистачає звичайного тексту чи розгортання блоку. Умови доставки біля способу отримання або розміри біля варіанта товару легше порівнювати, коли вони залишаються перед очима.
У нашому прикладі коротка примітка про бриф також може розкриватися просто під посиланням. Запитайте, що саме виправдовує перекриття сторінки. Якщо відповідь стосується лише композиції макета, варто спробувати простіший варіант.
За MDN, виклик showModal() для елемента dialog робить фон неактивним; show() або атрибут open відкривають немодальний діалог. Цю різницю слід враховувати ще під час вибору поведінки.
Дайте зрозумілу причину зупинитися і очевидний вихід
Заголовок має пояснювати, що відкрилося. «Що додати до опису проєкту» корисніше за «Додаткова інформація». Усередині варто залишити лише матеріал, необхідний для цієї зупинки. Довге читання, кілька рівнів переходів і нові вікна всередині старого швидко віддаляють людину від початкової мети.
WAI-ARIA APG описує модальний діалог із доступною назвою та видимою кнопкою закриття: фокус залишається всередині, Tab рухається по колу, Escape закриває вікно. Після закриття фокус зазвичай повертається до елемента, який його відкрив.
Назви кнопок мають розрізняти наслідки. «Повернутися до заявки» і «Надіслати заявку» не повинні виглядати як взаємозамінні виходи. Окремо перевірте видимість клавіатурного фокуса: людина повинна розуміти, де вона перебуває, без здогадок і повторних натискань.
Збережіть роботу, яку людина вже зробила
У вигаданій заявці найдорожча частина взаємодії вже відбулася: відвідувач сформулював думку. Відкриття примітки не повинно стирати її. Заздалегідь опишіть, що відбувається з полями після закриття діалогу, повторного відкриття та невдалої спроби надсилання. Не залишайте це випадковим наслідком того, як зібрано інтерфейс.
Якщо сам діалог містить редагування, відрізняйте закриття від відкидання змін. Там, де вихід справді знищує введене, поясніть наслідок і дайте повернутися. Не показуйте попередження, коли втрачати нічого. А після помилки допоможіть виправити конкретне поле, зберігаючи решту. Про це докладніше в матеріалі про повідомлення про помилки, які допомагають людям.
Перевірте діалог із відкритою мобільною клавіатурою
На телефоні доступна висота змінюється саме тоді, коли людина починає писати. Макет, який виглядав вільним у редакторі, може залишити видимими лише заголовок і один рядок поля. Перевіряйте справжнє введення тексту, довгий абзац, збільшений шрифт та обидві орієнтації екрана.
Потрібно бачити поточне поле, дістатися до дій і знайти закриття без боротьби з прокручуванням. У довгому вмісті має бути зрозуміло, яка саме область рухається. Після виходу перевірте, чи основна сторінка знову прокручується і чи людина повернулася до своєї заявки. Не покладайтеся лише на знімок екрана без клавіатури: він показує тільки один спокійний стан.
Пройдіть увесь шлях, а не лише відкриття
Для перевірки візьміть одну завершену історію. Введіть кілька речень у заявку, відкрийте примітку, прочитайте її, закрийте діалог і продовжте писати. Повторіть шлях клавіатурою та на телефоні. Потім відкрийте вікно ще раз, спробуйте доступні способи закриття й перевірте поведінку після помилки надсилання.
Фіксуйте конкретні спостереження: чи зберігся текст, чи зрозуміла поточна позиція, чи доступні кнопки, чи можна повернутися до справи. Корисно дати цей сценарій колезі без підказок. Успішний діалог залишає після себе зрозумілий наступний крок. Людині не доводиться згадувати, що вона робила, відновлювати чернетку або шукати спосіб звільнити сторінку.