Всплывающие окна, обо всех и сразу
В интерфейсах есть такой объект как всплывающее окно, еще его называют модальное окно, уведомлние и тп. Но мало кто знает что онка бывают и не модальные, и полумодальные, а еще меньше дизайнеров знают как ими пользоваться.
Разбер все окна по порядку, где и как их использвать.
Типы окон
- Модальное окно;
- Немодальное окно;
- Полумодальные окна;
Описание поведения или отображения на mobile или web будет добавлено в каждом пункте, если оно будет требоваться.
Модальные окна
Полностью блокируют взаимодействие с контентом, пока пользователь не выполнит действие или не закроет окно. В основном появляются на затемненом фоне (overlay) для фокусировки.
Примеры применения: важные действия (удаление, подтверждение, оповещения), формы регистрации, авторизации, просмотр изображений или видео в полном размере.
Когда использовать:
- Пользователю необходимо принять важное решение;
- Действие необратимо (например, удаление данных);
- Необходимо сфокусировать внимание к сообщению;
Типы:
- Dialog - подтверждение действия или отображение ошибки;
- Form Modal - окно с возможностью ввода каких либо данных;
- System notifications - уведомления операционной системы или браузера;
Mobile
Dialog, Form Modal допускается отображение в bottomsheet, но System notifications лучше брать от системы и никак их не видоизменять.
Немодальные окна
Не блокируют основной контент и счезают при потере фокуса или автоматически, так же не требуют большого внимания. Используются для информирования пользователя.
Примеры применения: подсказки и вспомогательная информация, выпадающие меню и контекстные опции, уведомления, которые не требуют немедленного действия.
Когда использовать:
- Информация не требует немедленного ответа;
- Взаимодействие с интерфейсом не должно прерываться;
- Нужно предоставить быстрый доступ к дополнительным функциям;
Типы:
- Tooltip - всплывающая подсказка при наведении на иконку;
- Popover - всплывающее окно с кнопками и интерактивными элементами;
- Menu - выпадающее меню с фильтрами, настройками, функциями и тп;
- Snackbar или Toast - уведомление внизу / вверху экрана, исчезающее через несколько секунд;
Mobile
Snackbar или Toast могут иметь отличный вид от web.
Полу-модальные окна
Блокируют только часть контента, другая часть остается доступной для взаимодействия. Используется для вспомогательных действий.
Примеры применения: фильтры, параметры, быстрые настройки, взаимодействие с дополнительным функционалом без выхода из основного экрана.
Когда использовать:
- Требуется дополнительная информация без блокировки основного контента;
- Взаимодействие должно быть менее навязчивым;
- Важно обеспечить удобство работы в мобильных интерфейсах;
Типы:
- Bottom Sheet - используется в основном только на mobile, выезжающее снизу окно «Поделиться» на мобильных устройствах;
- Drawer или Sidebar - используется в основном на web, боковая панель с навигацией и фильтрами;
- Slide panel - используется в основном на web, боковое всплывающее окно быстрого редактирование / просмотра данных;
- Smart Banner - рекламные или информационные баннеры выезжающие откуда угодно;
- Lightbox - полноэкранное или в половину экрана окно для просмотра видео или фото;
Mobile
Lightbox допускается отображение в bottomsheet.
Адаптация web под mobile и обратно
- Обсудите в команде что вы будете использовать на mobile, modal или bottomsheet, или оба сразу, но тогда нужно понимать для чего вам это надо;
- Обсудите будете ли вы использвовать на web Slide panel или все редактирование будет происходить в модальных окнах;
- Избегайте на web больших модальных окон в которых будет скрол, это очень не удобно для пользователя, а на mobile больших boottomsheet, хоть это и более удобней чем на web;
- Не используйте никогда на mobile большие модальные окна, только для диалога с пользователем;
Как выбрать окно
- Если действие важное и нужно заблокировать интерфейс, то это модальные окна, во всех остальных случаях не модальные и полумодальные;
- Если нужна дополнительная информация без блокировки работы, немодальное окно;
- Если окно должно перекрывать часть экрана и не быть блокирующим, то это полу-модальное окно;
Советы для дизайнера
- Разграничивайте модальные и немодальные окна по важности действия;
- Следите за логикой появления и закрытия окон;
- Добавляйте плавные анимации для UX-комфорта;
- Поддерживайте адаптивность (мобильные и веб-интерфейсы);
- Минимизируйте количество модальных окон на одной странице;
Итог
Выбрав правильное окно можно не только упростить интерфейс, но и снизить когнитивную нагрузку на пользователя, ускорив взаимодействия с ним и сделать шаги очевидными, ясными и понятными повысив удовлетворенность от использования вашего интерфейса.
🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡