Модальное окно или bottom sheet: что использовать в мобильном приложении

Модальные окна и bottom sheet оба выезжают поверх экрана, поэтому команды считают их одним и тем же в разной форме. Это не так. Одно останавливает человека, пока он не ответит, другое позволяет выбрать что-то и идти дальше. Вот один вопрос, который всё решает, оба паттерна в деле и таблица решений для случаев, которые встречаются в каждом приложении.

Один вопрос: нужен ли ответ прямо сейчас?

Если человек не может продолжить, пока не выберет, это модальное окно. Если его можно проигнорировать и экран останется осмысленным, это sheet.

Этот единственный вопрос закрывает большинство случаев раньше, чем кто-то начнет спорить о внешнем виде. Он же объясняет все остальные различия: модальное окно стоит по центру и затемняет всё, потому что пока на него не ответили, ничто другое не важно, а sheet поднимается снизу и оставляет экран на виду, потому что экран по-прежнему главный.

Модальное окно: решите, прежде чем идти дальше

Модальное окно, на Android его называют dialog, а на iOS alert, прерывает намеренно. Оно уместно, когда:

• Человек должен решить, прежде чем идти дальше. Приложение не может угадать ответ.
• Действие нельзя отменить. Удаление проекта, которое сотрет 24 файла у всех, заслуживает паузы.
• Вариантов не больше двух. Отмена и само действие, названное глаголом: Удалить, а не OK.

Где оно проваливается: во всем необязательном. Модальное окно, которое просит оценку, анонсирует функцию или предлагает меню, мешает людям делать то, зачем они пришли, и они учатся жать на всё, что закрывает его, не читая.

Bottom sheet: полистайте, затем выберите

Bottom sheet содержит варианты, относящиеся к тому, что уже на экране. Он уместен, когда:

• Опции относятся к этому экрану. Поделиться, дублировать, переместить или архивировать этот проект.
• Его можно смахнуть, чтобы отказаться. Ответ не обязателен.
• Вариантов больше двух. В sheet есть место для списка, и список лежит в зоне досягаемости большого пальца.

Где он проваливается: во всем, что нельзя пропустить. Sheet можно закрыть случайным свайпом, поэтому деструктивное подтверждение, которое живет только в sheet, легко потерять или вызвать по ошибке.

Слишком много кнопок: это sheet под маской

Неправильно: модальное окно

Правильно: sheet

Левый экран это самая частая путаница. Шесть кнопок друг под другом в центральном окне заставляют читать меню внутри прерывания. Ничто из этого не срочно, значит, блокировать экран не нужно. Те же опции в sheet читаются как список, остаются в зоне большого пальца и закрываются свайпом.

Правило Material Design короткое: в диалоге должно быть не больше двух действий. Когда нужно третье, у вас меню, а меню место в sheet.

Оба вместе: удаляем из sheet, подтверждаем модальным окном

Сначала sheet

Потом модальное окно

Эти паттерны не соперники. Деструктивная опция может лежать в sheet рядом с другими действиями, красная и последняя. Нажатие на нее открывает модальное окно, ведь только теперь есть решение, которое нельзя отменить. Листайте в sheet, блокируйте в момент, когда это важно.

Модальное окно или sheet: таблица решений

Кто делает это хорошо

Проверить можно на своем телефоне прямо сегодня:

• Apple Maps и Google Maps держат результаты поиска и сведения о местах в sheet поверх карты, так что вы никогда не теряете свое место.
• Share sheet в iOS перечисляет все приложения и действия для того, на что вы смотрите, и закрывается свайпом.
• Меню «еще» у поста в Instagram открывается как bottom sheet с опциями для этого поста.

Рекомендации Apple проводят ту же границу с другой стороны: alert нужны для критичной информации, которая требуется людям немедленно, включая предупреждение, что действие может уничтожить данные, а sheet и action sheet содержат варианты, связанные с тем, что человек делает.

FAQ

Когда использовать bottom sheet вместо модального окна?

Когда опции относятся к текущему экрану, их больше двух и никому не нужно выбирать, чтобы продолжить. Поделиться, отсортировать, отфильтровать и выбрать из списка это работа для sheet.

Когда использовать модальный диалог?

Когда человек должен решить, прежде чем идти дальше, обычно потому, что действие нельзя отменить. Ограничьтесь двумя действиями: отмена и действие, названное глаголом.

Сколько кнопок должно быть в модальном окне?

Не больше двух. Material Design говорит, что диалог должен содержать максимум два действия. Если нужно больше, это меню, и ему место в sheet.

Bottom sheet это модальное окно?

Модальный bottom sheet затемняет экран, и его нужно закрыть, прежде чем снова пользоваться экраном, но его можно смахнуть, и он ничего не спрашивает. Диалог задает вопрос и ждет ответа.

Чем отличаются alert и action sheet на iOS?

Alert прерывает критичной информацией и небольшим набором кнопок. Action sheet поднимается снизу с вариантами, связанными с действием, которое человек только что начал, например с опциями для фото.

Источники

• Dialogs и Bottom sheets, Material Design 3.
• Alerts, Sheets и Action sheets, Apple Human Interface Guidelines.
• Впервые опубликовано как карусель в UX Brainy.