Вы, вероятно, были там раньше. Как нам выбрать между показом модального окна пользователям и когда мы переведем их на отдельную новую страницу? И имеет ли это вообще значение? На самом деле это так. Решение влияет на поток пользователей, их контекст, их способность искать детали, а вместе с тем и частоту ошибок и выполнение задач. Оба варианта могут оказаться разрушительными и разочаровывающими — в неподходящее время и не в том месте. Так что нам лучше разобраться. Что ж, давайте посмотрим, как это сделать. Модальные окна, диалоги, наложения и лайтбоксы Хотя мы часто говорим об одном модальном компоненте пользовательского интерфейса, мы часто игнорируем мелкие, сложные нюансы между всеми различными типами модальных окон. На самом деле, не все модальные окна одинаковы. Модальные окна, диалоговые окна, наложения и лайтбоксы — все звучат одинаково, но на самом деле они совершенно разные:
ДиалогОбщий термин для «разговора» (пользователь ↔ система). НаложениеНебольшая панель содержимого, отображаемая в верхней части страницы. ModalUser должен взаимодействовать с отключенным наложением + фоном. NonmodalUser должен взаимодействовать с включенным наложением + фоном. LightboxЗатемненный фон, чтобы сосредоточить внимание на модальном окне.
Как подчеркивает Анна Кейли, большинство наложений появляются в неподходящее время, отвлекают пользователей от выполнения важных задач, используют ненормативную лексику и нарушают поток пользователей. По своей природе они прерываются и, как правило, имеют высокий уровень серьезности без острой необходимости в этом.
Конечно, пользователей необходимо замедлять и прерывать, если последствия их действий имеют большое влияние, но для большинства сценариев немодальные режимы являются гораздо более тонким и более дружественным способом привлечь к чему-то внимание пользователя. Во всяком случае, я всегда предлагаю сделать это по умолчанию. Модальные окна → Для отдельных, автономных задач Как дизайнеры, мы часто отвергаем модальные окна как ненужные и раздражающие — и часто это так! — тем не менее, они тоже имеют свою ценность. Они могут быть очень полезны, предупреждая пользователей о потенциальных ошибках или помогая им избежать потери данных. Они также могут помочь выполнить соответствующие действия или детализировать детали, не прерывая текущего состояния страницы. Но самое большое преимущество модальных окон заключается в том, что они помогают пользователям сохранять контекст текущего экрана. Речь идет не только о пользовательском интерфейсе, но и об редактируемом вводе, положении прокрутки, состоянии аккордеонов, выборе фильтров, сортировке и так далее.
Иногда пользователям необходимо быстро подтвердить выбор (например, фильтры, как показано выше), а затем немедленно продолжить работу. Конечно, автосохранение может добиться того же, но оно не всегда необходимо или желательно. А блокировать пользовательский интерфейс зачастую не очень хорошая идея. Однако модальные окна не используются ни для каких задач. Обычно мы используем их для отдельных, автономных задач, к которым пользователи должны подключиться, выполнить задачу, а затем вернуться туда, где они были. Неудивительно, что они хорошо работают для коротких взаимодействий с высоким приоритетом (например, оповещений, деструктивных действий, быстрых подтверждений). Когда модальные окна помогают: 🚫 Модальные окна часто мешают работе, навязчивы и сбивают с толку.🚫 Они затрудняют сравнение и копирование. ✅ Показывайте модальное окно только в том случае, если пользователи оценят нарушение. ✅ По умолчанию отдавайте предпочтение неблокирующим диалогам («немодальные окна»). ✅ Разрешите пользователям сворачивать, скрывать или восстанавливать диалог позже. ✅ Используйте модальное окно, чтобы замедлить работу пользователей, например, для проверки сложного ввода. ✅ Укажите выход, нажав «Закрыть», клавишу ESC или щелкнув за пределами поля. Страницы → Для сложных, многоэтапных рабочих процессов Мастера или навигация по вкладкам в модальных окнах работают не слишком хорошо даже в сложных корпоративных продуктах — там боковые панели или ящики обычно работают лучше. Проблемы начинаются, когда пользователям нужно сравнить или сослаться на точки данных, однако модальные окна блокируют такое поведение, поэтому вместо этого они повторно открывают одну и ту же страницу на нескольких вкладках.
Для более сложных потоков и многоэтапных процессов лучше всего подходят отдельные страницы. Страницы также работают лучше, когда они требуют полного внимания пользователя, и ссылка на предыдущий экран не очень полезна. А ящики подходят для подзадач, которые слишком сложны для простого модального окна, но не требуют полной навигации по страницам. Когда следует избегать модальных окон: 🚫 Избегайте модальных окон для сообщений об ошибках.🚫 Избегайте модальных окон для уведомлений о функциях.🚫 Избегайте модальных окон для ознакомления.🚫 Избегайте модальных окон для сложных, длительных многоэтапных задач.🚫 Избегайте нескольких вложенных модальных окон и используйте вместо них «предыдущий/следующий».🚫 Избегайте автоматически запускаемых модальных окон, если это не является абсолютно необходимым. Избегайте обоихДля повторяющихся задач Во многих сложных продуктах, требующих большого количества задач, пользователям придется выполнять одни и те же задачи снова и снова. Здесь как модальные окна, так и навигация по новым страницам добавляют проблем, поскольку они прерывают поток или заставляют пользователей собирать недостающие данные между всеми различными вкладками или представлениями. Слишком часто пользователи получают неудовлетворительный опыт, полный бесконечных подтверждений, преувеличенных предупреждений, многословных инструкций или просто отсутствующих контрольных точек. Как упомянул Саулюс Стебулис, в этих сценариях расширяемые разделы или редактирование на месте часто работают лучше — они удерживают задачу, привязанную к текущему экрану. На практике во многих сценариях пользователи не выполняют свои задачи изолированно. Им необходимо искать данные, копировать и вставлять значения, уточнять записи в разных местах или просто просматривать похожие записи во время выполнения своих задач. Наложения и ящики более полезны для обеспечения доступа к фоновым данным во время выполнения задачи. В результате контекст всегда остается на своем месте, доступным для ссылки или копирования-вставки. Сохраняйте модальные окна и навигацию по страницам на моменты, когда прерывание действительно приносит пользу — особенно для предотвращения критических ошибок. Модальные окна против страниц: дерево решений Некоторое время назад Райан Ньюфельд составил очень полезное руководство, которое поможет дизайнерам выбирать между модальными окнами и страницами. Он поставляется с удобной шпаргалкой в формате PNG и шаблоном Google Doc с вопросами, разбитыми на 7 разделов. Оно длинное, чрезвычайно подробное, но очень легкое в исполнении:
Это может показаться устрашающим, но это довольно простой процесс, состоящий из 4 шагов:
Контекст экрана. Сначала мы проверяем, нужно ли пользователям поддерживать контекст основного экрана. Сложность и продолжительность задачи. Для простых, целенаправленных и не отвлекающих задач можно использовать модальное окно, но для длинных и сложных потоков нужна страница. Ссылка на базовую страницу. Затем мы проверяем, часто ли пользователям приходится обращаться к данным в фоновом режиме или задача представляет собой простое подтверждение или выбор. Выбор правильного наложения. Наконец, если наложение действительно является хорошим вариантом, оно помогает нам выбирать между модальным или немодальным (склоняясь к немодальному варианту).
Подведение итогов По возможности избегайте блокировки всего пользовательского интерфейса. Пусть диалоговое окно будет плавающим, частично закрывающим пользовательский интерфейс, но позволяющим навигацию, прокрутку и копирование. Или покажите содержимое модального окна в виде бокового ящика. Или вместо этого используйте вертикальный аккордеон. Или выведите пользователей на отдельную страницу, если вам нужно показать много деталей. Но если вы хотите повысить эффективность и скорость работы пользователей, избегайте модальных окон любой ценой. Используйте их, чтобы замедлить работу пользователей, сосредоточить их внимание и предотвратить ошибки. Как заметила Тереза Фессенден, никто не любит, когда его отвлекают, но если необходимо, убедитесь, что это того стоит. Встречайте «Шаблоны проектирования умных интерфейсов» Вы можете найти целый раздел о модальных окнах и альтернативах в «Шаблонах проектирования смарт-интерфейсов», нашем 15-часовом видеокурсе с сотнями практических примеров из реальных проектов — с живым обучением UX позже в этом году. Все — от мегараскрывающихся списков до сложных корпоративных таблиц — каждый год добавляется 5 новых сегментов. Перейти к бесплатному предварительному просмотру. Используйте код BIRDIE, чтобы сэкономить 15%. Встречайте «Шаблоны проектирования умных интерфейсов» — наш видеокурс по дизайну интерфейсов и UX.
Обучение «Видео + UX» Только видеоВидео и обучение UX 495,00 $ 699,00 $
Получите видео + обучение UX25 видеоуроков (15 часов) + обучение UX в реальном времени. 100-дневная гарантия возврата денег.Только видео$ 300,00$ 395,00
Получите видеокурс: 40 видеоуроков (15 часов). Обновляется ежегодно. Также доступен в виде UX-пакета с 2 видеокурсами.
Полезные ресурсы
Различные типы всплывающих окон, Анна Кейли Лучшие практики проектирования модальных модулей пользовательского интерфейса, от Uxcel Мы используем слишком много модальных окон: рекомендации по UX, Адриан Эггер Модальные и немодальные диалоги, Тереза Фессенден Современный корпоративный дизайн пользовательского интерфейса: модальные диалоги, Джеймс Джейкобс Модальные окна в системах дизайна
