Модальное окно Modal
Модальное окно работает как системный диалог браузера. Оно появляется поверх страницы и блокирует доступ к содержимому под ним.
Между собой дизайнеры называют его модалкой.
Когда использовать
Используйте модальное окно, чтобы сосредоточить внимание пользователя или для вспомогательных страниц, которые требуются только в некоторых случаях. Как правило, это настройки, создание новых документов, заполнение небольших форм, пошаговый мастер. Например, заполнение адреса.
Не используйте модальное окно для больших форм, которые не помещаются в экран монитора.
Если важно оставить контекст страницы, лучше использовать сайдпейдж.
Описание работы
Модальное окно появляется поверх страницы, затемняя её. Это помогает сфокусировать внимание пользователя на конкретных действиях, не теряя при этом общий контекст.
Содержание
Модальное окно может состоять из:
- Шапки — заголовка и крестика,
- Контента,
- Подвала — терминальной зоны с кнопками.
Заголовок
Если модальное окно предназначено для выполнения одной конкретной задачи, она должна быть отражена в заголовке. Заголовок должен быть кратким (1 — 3 слова) и являться названием процесса или объекта.
Неправильно
Правильно
Но если модальное окно носит информационный характер, заголовок должен ёмко передавать суть сообщения:
Если модальное окно используется для подтверждения, то пишите в заголовке вопрос.
Действия
Чаще всего в модальном окне есть минимум два действия:
- Целевое действие — сохраняет проделанную работу или подтверждает вызванную ранее команду.
- Действие отмены или закрытия — закрывает модальное окно, не выполняя целевое действие.
Действия расположены слева направо. Чем правее действие, тем оно менее важное.
Дополнительные кнопки и ссылки располагайте справа.
Закрытие модального окна
В правом верхнем углу модального окна расположен крестик для закрытия — делает то же самое, что действие отмены или закрытия.
Также модальное окно закрывается по нажатию клавиши Esc на клавиатуре.
Модальные окна, несущие чисто информационную функцию, могут закрываться при клике за пределами окна.
Не закрывайте модальные окна кликом за пределами окна, если в этом окне есть ценные данные пользователя, которые легко потерять. А лучше сохраняйте изменения автоматически.
Если пользователь изменил данные, то всегда уточняйте у него — сохранить данные или уйти без сохранения. Больше советов по работе с данными форм в гайде Сохранение данных.
Не делайте модальные окна, которые исчезают по таймауту — есть вероятность, что пользователь не увидит их или не успеет разобрать текст.
Мини-модальное окно
Используйте мини-модалку для диалоговых окон, в которых нет дополнительных контролов, мало контента или его совсем нет.
В мини-модалке кнопки могут располагаться вертикально и горизонтально.
Если смысл третьей кнопки сильно отличается от остальных, то отодвиньте её.
У мини-модалки всегда должна быть иконка. Если подобрать иконку по смыслу не получается, используйте дефолтную.
В некоторых случаях полезно красить иконку. Например, когда нужно привлечь внимание пользователя к опасному действию — удалению.
Дизайн
Модальное окно без заголовка:
Модальное окно без кнопок:
Обычно это информационное окно, которое можно только закрыть.
Модальное окно с терминальной плашкой:
Модальное окно без терминальной плашки:
Не используйте модальное окно без терминальной плашки, когда присутствуют поля, не выровненные по левому краю, или текст, выровненный по центру.
Неправильно
Размер и расположение
По горизонтали модальное окно позиционируется по центру. По вертикали — по центру и на 10 % смещено к верхней части окна браузера.
Когда высота модального окна почти равна высоте окна браузера, задайте верхний отступ в 40 px. Это предотвратит прилипание окна к верхней границе экрана.
Размер модального окна должен соответствовать его содержимому — внутри окна не должно быть пустых областей.
В то же время, если контент требует большого экранного пространства — модальное окно должно иметь максимально возможный размер. Например, если внутри длинный список — модальное окно должно открываться на максимально возможную высоту, а скролл работать как описано ниже. Если интерактивная карта — максимальную высоту и ширину.
Если высота модального окна меняется при работе с ним, то такое окно лучше зафиксировать у верхней границы экрана с отступом, чтобы избежать неприятных скачков.
Прокрутка
Не делайте длинных модальных окон, которые выходят за границы экрана. Лучше сделать отдельную страницу или использовать сайдпейдж.
Если всё же высота контента внутри модального окна больше высоты браузера, то модальное окно открывается на всю высоту браузера и с отступом 40 px от верхнего края страницы. Контрол скролла появляется у всей страницы, а не внутри модального окна. Контент страницы под модальным окном не должен скроллиться.
Во время скролла модальное окно занимает всю высоту окна без отступов, а после скролла до нижнего края — позиционируется с отступом 40 px от нижнего края страницы.
Залипающие элементы
Шапка и подвал могут залипать, если для пользователя важно видеть название и управлять действиями. При этом окно так же открывается с отступом от верхнего края окна браузера, и скроллится до появления отступа снизу.
Следите за тем, чтобы контент страницы или модального окна не скакал при открытии и закрытии окна или открытии новых модальных окон. Такое случается при появлении или исчезновении скролл-бара — со скролл-баром страница становится у́же.
Наложение модальных окон
Всеми силами старайтесь избегать вложенности модальных окон.
Если поверх модального окна открывается ещё одно, то затемнение не множится, а все открытые ранее модальные окна помещаются под него.
Неправильно
Правильно
Доступность
Управление клавиатурой
Если модальное окно содержит поля ввода, при открытии окна на десктопе ставьте фокус в первое поле автоматически. На мобильных устройствах, где фокус открывает виртуальную клавиатуру, такое поведение лучше отключать.
При открытом модальном окне нажатие Tab не переводит фокус на элементы страницы, фокус переходит только по элементам модального окна, включая крестик.
Клавиша Esc закрывает модальное окно.