Человек уже описал будущий проект, оставил контакт и остановился перед кнопкой отправки. Рядом есть ссылка на короткое пояснение о подготовке брифа. Он открывает его на минуту, чтобы уточнить деталь. Если после закрытия окна текст исчезает или страница перестаёт прокручиваться, небольшая подсказка превращается в препятствие. Это вымышленный сценарий, но полезная отправная точка для проектирования: диалог должен помогать закончить дело, не отнимая контроль над ним. Рассматривайте его вместе с действиями до открытия и после закрытия, а не как отдельную красивую карточку.
Сначала проверьте, нужно ли отдельное окно
Модальный диалог просит отложить основную задачу. Такая пауза уместна, когда нужно сосредоточиться на конкретном решении, проверить его последствия или выполнить короткое самостоятельное действие. Для справочной информации рядом с выбором часто достаточно обычного текста или раскрывающегося блока. Условия доставки возле способа получения или размеры рядом с вариантом товара проще сравнивать, когда они остаются перед глазами.
В нашем примере короткое пояснение о брифе тоже можно раскрыть прямо под ссылкой. Спросите, что именно оправдывает перекрытие страницы. Если ответ касается только композиции макета, стоит попробовать более простой вариант.
Согласно MDN, вызов showModal() для элемента dialog делает фон неактивным; show() или атрибут open открывают немодальный диалог. Это различие стоит учитывать ещё при выборе поведения.
Объясните причину остановки и сделайте выход очевидным
Заголовок должен объяснять, что открылось. «Что добавить в описание проекта» полезнее, чем «Дополнительная информация». Внутри стоит оставить только материал, необходимый для этой остановки. Долгое чтение, несколько уровней переходов и новые окна внутри старого быстро отдаляют человека от первоначальной цели.
WAI-ARIA APG описывает модальный диалог с доступным названием и видимой кнопкой закрытия: фокус остаётся внутри, Tab движется по кругу, Escape закрывает окно. После закрытия фокус обычно возвращается к элементу, который его открыл.
Названия кнопок должны различать последствия. «Вернуться к заявке» и «Отправить заявку» не должны выглядеть как взаимозаменяемые выходы. Отдельно проверьте видимость клавиатурного фокуса: человеку нужно понимать, где он находится, без догадок и повторных нажатий.
Сохраните работу, которую человек уже сделал
В вымышленной заявке самая ценная часть взаимодействия уже произошла: посетитель сформулировал мысль. Открытие пояснения не должно её стирать. Заранее опишите, что происходит с полями после закрытия диалога, повторного открытия и неудачной попытки отправки. Не оставляйте это случайным следствием того, как собран интерфейс.
Если в самом диалоге можно что-то редактировать, различайте закрытие и отказ от изменений. Там, где выход действительно уничтожает введённое, объясните последствия и дайте вернуться. Не показывайте предупреждение, когда терять нечего. А после ошибки помогите исправить конкретное поле, сохранив остальные. Подробнее об этом в материале про сообщения об ошибках, которые помогают людям.
Проверьте диалог с открытой мобильной клавиатурой
На телефоне доступная высота меняется именно тогда, когда человек начинает писать. Макет, который выглядел просторным в редакторе, может оставить видимыми только заголовок и одну строку поля. Проверяйте настоящее заполнение формы, длинный абзац, увеличенный шрифт и обе ориентации экрана.
Нужно видеть текущее поле, добираться до действий и находить закрытие без борьбы с прокруткой. В длинном содержимом должно быть понятно, какая именно область движется. После выхода проверьте, прокручивается ли основная страница снова и вернулся ли человек к своей заявке. Не полагайтесь только на снимок экрана без клавиатуры: он показывает лишь одно спокойное состояние, а не сам процесс работы.
Пройдите весь путь, а не только открытие
Для проверки возьмите одну законченную историю. Введите несколько предложений в заявку, откройте пояснение, прочитайте его, закройте диалог и продолжите писать. Повторите путь с клавиатурой и на телефоне. Затем откройте окно ещё раз, попробуйте доступные способы закрытия и проверьте поведение после ошибки отправки.
Записывайте конкретные наблюдения: сохранился ли текст, понятна ли текущая позиция, доступны ли кнопки, можно ли вернуться к делу. Полезно дать этот сценарий коллеге без подсказок. Удачный диалог оставляет после себя понятный следующий шаг. Человеку не приходится вспоминать, что он делал, восстанавливать черновик или искать способ освободить страницу, прежде чем продолжить свою первоначальную задачу.