Модальное окно или страница: как выбрать?

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://www.nngroup.com/articles/popups/
Оригинал

Сопоставление модальности по компонентам

Я сделал ещё проще: получилась удобная диаграмма, соединяющая терминологию, которую мы только что рассмотрели☝️, с реальными компонентами Google Material Design.

Оригинал

Мой способ принятия решений

Я объединил все лучшие гайдлайны и рекомендации, чтобы создать алгоритм, который при правильном применении поможет лучше понять, стоит использовать в вашем дизайне оверлей или нет. Он может использоваться вместе с картой сопоставления компонентов (см. выше), чтобы помочь вам в выборе лучшего компонента для макета. В совокупности эти инструменты укажут верное направление и дадут вашему решению веское обоснование.

Я рекомендую использовать следующий шаблон для записи ваших ответов на каждый вопрос по мере прохождения блок-схемы.

Шаблон (на английском)

А тут мы перевели её на русский: