Модальные окна
Привет! Я Владимир Белов — продуктовый дизайнер в Group-IB.
Веду телеграм-канал «Заметки дизайнера» , где делюсь полезными ссылками, интересными продуктами для собственного анализа
и статьями.
Модальное окно (Диалоговое окно) является отличным способом для привлечения внимания к информации, для взаимодействия с контентом. Проще говоря, это окно, которое появляется поверх основного пути по интерфейсу для отображения чего-либо.
Примеры:
- Неважно, Windows или Mac, когда мы сохраняем файлы появляется системное модальное окно для выбора пути сохранения.
- В Trello при клике на карточку открывается большое модальное окно с описанием задачи, действия.
- В Twitter появляется, когда мы постим новый твит.
А теперь представим, что в таких случаях нас перекидывали бы на другую страницу. Что в итоге? После выполнения наших алгоритмов действия, м ы бы потеряли свой путь в интерфейсе, пришлось через браузер возвращаться назад или в сервисе искать навигацию для перехода в необходимый раздел. Ухх, это очень-очень плохо. Нас просто бросили в Тайгу и сказали: выбирайтесь сами.
Личные примеры
Есть базовые рекомендации, которые повсюду пишут. Вы можете с ними ознакомиться во всех дизайн-блогах. Я приведу 4 примера, в каких случаях использую модальные окна.
- Создание проекта/доски
Когда пользователь заходит на главную страницу веб-сервиса, ему необходимо создать проект или доску. Клик на кнопку даёт большое модальное окно, где он сможет выбрать из +100500 шаблонов. Круто. В принципе полезное модальное окно. Есть только одно НО. Проведя аналитику, можно узнать, что 95% пользователям просто нужно создать проект без шаблона, они автоматом закрывают эту модалку, а 5% любят использовать шаблоны. В этом случае я бы убрал модалку и сделал отдельный раздел с шаблонами для использования (Потрясающий пример в Notion). - Предупреждение
Пользователь может заполнять данные, потом переходит в следующий раздел на сайте. Оп, вот тут диалоговое окно: “дорогой пользователь, если вы уйдете с этой страницы, заполненные данные не сохранятся”. Главное тут подтянуть UX-текст, особенно в кнопках, чтобы пользователь понимал, нужно ли ему сохранить или уйти с этой страницы. Направить его. Почему это надо? Во-первых, пользователь скажет вам спасибо за такое. Во-вторых, паттерн сохранения в каждом сервисе, платформе разные. Где-то нужно подтверждать действием “Save data” или происходит автосохранение после заполнения. - Детальная информация
Когда отображаем какие-нибудь блоки с короткой информацией в основной сетке, при этом показываем, например, иконку (i) для просмотра детальной информации, то при клике показываем в модалке. Исключение: если там не диссертация. - Запрос и ввод данных
Я вам приведу из своей практики, когда есть профиль, в котором есть блок “навыки”, то пользователь может их добавлять для отображения работодателю. В этом случае при клике на кнопку “добавить” появляется небольшое короткое модальное окно с поисковой строкой, в которой при вводе пользователь находит необходимый навык, добавляет, заполняет информацию. Почему модалка? Пользователь понимает, что он остаётся в контексте профиля, добавляет навык к себе. Закрыл модалку, и опять он в профиле. Круто 👍 .
Старайтесь проводить исследование на использование ваших модальных окон. Самое основное: не делайте их гигантскими, с большим потоком информации, с которой ещё необходимо взаимодействовать. Кроме этого, не делайте их слишком много.
Очень хороший пример привёл Кевин Ричард, как вы идёте домой и вас постоянно останавливают просто для информации? Разве вы не предпочли бы уделять внимание, когда у вас есть на это время? Я с ним согласен. Модальное окно должно отображаться как ответ на действие пользователя, проведя аналитику поведения.
Адаптивность.
Не забываем модальные окна делать отзывчивыми вне зависимости от экрана. Тестируйте и смотрите, чтобы вашему пользователю было удобно и понятно работать в модалке как на десктопе, так в мобилке.
Сайт • Инстаграм • Телеграм-канал • Ютуб-канал
Подкаст «Заметки дизайнера»:
Apple Podcast • Яндекс.Музыка • Google Podcasts
