Модальное окно или страница: схема принятия решений

При принятии решения об использовании модальных окон необходимо учесть множество различных факторов.

Обширный обзор имеющейся литературы на эту тему показал, что определенных правил использования модальных окон нет, есть только ряд рекомендаций и указаний. Автор статьи объединил все лучшие руководства, советы и рекомендации в блок-схему, которая не только поможет понять, нужен ли вашему дизайну оверлей, но и позволит убедительно обосновать свое решение.

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

Пример: Регистрационная форма сервиса AKIRA для владельцев корпоративного полиса медицинского страхования Manulife Financial. Что значит “номер страхового полиса Manulife”?

Вы в замешательстве. Как будет лучше поступить? Прервать сценарий? Добавить ещё одну страницу? Или модальное окно? Как принять верное решение?

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

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

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

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

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

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

‍Кто-нибудь когда-нибудь задавался вопросом: "В чем разница между модальными, диалоговыми окнами и оверлеем? Часто их принимают за один и тот же элемент, или же считают различия между ними просто формальностью. Давайте все же определимся с терминами, прежде чем продолжить:

Диалоговое окно (Dialog): Диалог — разговор между двумя людьми. В пользовательском интерфейсе диалог — это "разговор" между системой и пользователем, который осуществляется посредством диалоговых окон.
Режим (Mode): Особое состояние системы, в котором одна и та же система имеет несколько разных пользовательских интерфейсов. Каждый режим может предлагать различные виды действий или одни и те же действия, но с разными результатами, которые зависят от режима работы системы.
Оверлей (Overlay): Окно с контентом, которое отображается поверх другой страницы. Оверлеи обычно заметны меньше, чем основная страница.
Затемнение/Осветление (Scrim/Lightbox): Временное затемнение, которое может быть применено к экрану, чтобы сделать контент менее заметным для создания эффекта лайтбокса (Lightbox), когда более светлый оверлей выделяется на темном фоне.
Модальное окно (Modal): Блокировка содержимого фоновой страницы во время взаимодействия пользователя с оверлеем.
Немодальное окно (Non-modal): Пользователи могут продолжать взаимодействовать с содержимым фоновой страницы (например, кликать на ссылки или нажимать кнопки), в то время как оверлей по-прежнему остается видимым.

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

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

Карта модальных окон для разных компонентов

‍Для того чтобы вам было еще проще, я нарисовал удобную диаграмму, которая объединяет все, о чем мы говорили выше ☝️, и актуальные компоненты из Material Design от Google.

Итог: моя схема принятия решений

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

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

Шаблон: Google Docs

Заключение

‍Решить, стоит ли использовать модальное окно — довольно сложно, но еще сложнее, если вы пытаетесь определить, что будет лучше для пользователя, а не то, что будет проще для дизайнера. Данная блок-схема станет для вас надежной опорой и укажет правильное направление для принятия верного решения о том, как и когда использовать модальные окна. Каждая ситуация сама по себе уникальна, бывают случаи, когда данный ход решения не подходит для конкретной задачи, над которой работает дизайнер. Тем не менее, эта схема не раз выручала меня самого и мою команду, поэтому, надеюсь, она поможет и вам.

Ниже я оставил ссылки на ресурсы, которые я использовал при создании блок-схемы, возможно, они будут для вас полезны.