Представьте: вы проектируете процесс регистрации пациентов; ваш пользователь уже заполнил часть формы и дошёл до поля «номер страхового полиса» — осталось найти и ввести его, чтобы продолжить. Некоторые пользователи могут не знать, что это за номер. Другие — где его найти (подсказка: на отдельном документе).

Форма регистрации AKIRA для пользователей с корпоративными медицинскими страховыми полисами Manulife Financial. Что же такое номер страхового полиса Manulife?

Итак, вы на распутье: прервать процесс регистрации? добавить ещё одну страницу? или же модальное окно? Как решить, что выбрать?

Проблема: нет готовых правил использования модальных окон

Анализ доступной литературы показал, что нет готовых правил по использованию оверлеев, только несколько рекомендаций и руководств (их можно посмотреть в конце статьи).

Модальные окна помогают не потерять контекст

Однажды кто-то задался вопросом: «как передать важную информацию, не уходя из контекста текущего экрана?» — и так появились модальные оверлеи! Они помогают пользователю сфокусироваться на одной конкретной задаче, при этом не ограничивая его свободу перемещения внутри информационной архитектуры приложения. Так сохраняется контекст текущего экрана, и в то же время пользователю передаётся важная информация.

Язык модальных окон

Наверняка вы сталкивались с вопросом «В чём разница между оверлеем, модальным окном и диалоговым окном?». Их часто принимают за одно и тоже, либо отличия между ними считают исключительно формальными. Так что давайте сразу договоримся об определениях:

• Диалог — разговор между двумя людьми. В пользовательском интерфейсе диалог — это «разговор» между системой и пользователем.
• Модальность — особое состояние системы, когда одна и та же система имеет разные интерфейсы. Каждая модальность может сопровождаться различными действиями, или одно и то же действие может приводить к различным результатам в зависимости от модальности системы.
• Оверлей — окно, которое отображается поверх страницы. Обычно окно оверлея значительно меньше страницы под ним.
• Скрим/лайтбокс — временный эффект, применяемый к страницам: их содержимое становится менее заметно/более затемнено; собственно, отсюда и название «лайтбокс» (световой куб) — оно описывает визуальный эффект, фокусирующий внимание пользователя на содержимом оверлея.
• Модальное окно — содержимое страницы недоступно до тех пор, пока пользователь взаимодействует с оверлеем.
• Немодальное окно — пользователи могут взаимодействовать с содержимым на фоне (например, кликать на ссылки или кнопки), в то время, как оверлей остаётся видимым.

Типы модальных окон

Чтобы облегчить ситуацию, Nielsen Norman Group создали очень удобную схему, на которой отлично показаны основные отличия между типами модельных окон: