Разное

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

16.07.1981

Содержание

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

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

В статье разбираемся что такое модальное и немодальное окно и в каких случаях их лучше всего использовать.

Веб-дизайн

5 янв. 2021

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


Модальное окно — это окно, которое блокирует работу пользователя, но оставляет главный экран видимым вместе с модальным окном. Пользователи должны взаимодействовать с модальным окном, прежде чем смогут вернуться в родительское приложение.

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

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


Чтобы вам легко было воспринимать дальнейшую теорию, давайте сразу рассмотрим основные определения:

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

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


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


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

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

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


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


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

Когда следует использовать модальность


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

«Модальность создает фокусировку, не давая людям заниматься другими делами, прежде чем они не завершат задачу или не отклонят вызванное в модальном окне представление» — Apple

Google советует использовать модальные экраны(диалоговые окна) для…

«Критически важной информации, которая требует конкретной пользовательской задачи, решения или подтверждения» — Google

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

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

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

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

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


Читайте другие статьи

Как использовать белое пространство в веб-дизайне

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

Веб-дизайн

19 февр. 2021

Как дизайнеру создать удобную систему управления файлами?

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

Веб-дизайн

22 мая 2020

Как дизайнеру прокачать насмотренность: этапы и ресурсы

Что позволяет дизайнерам быстро и сразу качественно разрабатывать проекты, кроме умения пользоваться Photoshop? Опыт, что на языке этих специалистов называется насмотренностью. В статье разбираем, как и где прокачать этот навык.

Веб-дизайн

14 апр. 2020

Использование модальных окон в пользовательских интерфейсах / Хабр

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

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



Начнем это исследование со следующего смелого утверждения:

Существует два типа экранов:

  1. Модальные экраны
  2. Немодальные экраны

А теперь позвольте объяснить это утверждение. Практически каждый экран, который мы можем себе представить, попадает в одну из этих двух категорий. Чтобы понять, чем отличается модальный экран от немодального экрана, мы сначала должны перейти к определению понятия модального экрана.

Что такое «модальный экран»?

Модальные экраны можно обнаружить в различных его формах и представлениях, например одним из ниже перечисленных в списке:

  • Полноэкранные модальные виды
  • Всплывающие окна
  • Поп-апы
  • Лайтбоксы

Как модальные экраны, так и немодальные экраны являются дочерними представлениями, то есть они подчинены одному главному окну приложения. Однако, существует одно важное отличие:

«Модальное окно создает режим, который отключает главное окно, но сохраняет его видимым с модальным окном в виде дочернего окна перед ним. Пользователи должны повзаимодействовать с модальным окном, прежде чем они смогут вернуться в родительское приложение» — Википедия

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

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

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


Пример iOS: модальные окна на мобильных устройствах часто полностью скрывают главное окно приложения.

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

Наиболее ярким визуальным индикатором для немодальных окон является навигация (панель вкладок в нашем примере). Немодальные экраны позволяют пользователям переходить назад и вперед на основном уровне навигации приложения.

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

Почему следует использовать модальность?

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

«Модальность создает фокусировку, не давая людям заниматься другими делами, прежде чем они не завершат задачу или не отклонят вызванное в модальном окне представление» — Apple

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

Теперь, когда мы знаем, как выглядит модальный экран. Как же сравнить его с немодальным экраном и какова его цель? Прежде всего мы должны спросить себя: «В какой ситуации мы должны его использовать?»

Давайте представим, что мы создаем «гениальный и инновационный» стартап под названием «Purrrfect». Это база данных котят, которая позволяет пользователям загружать, просматривать и комментировать GIF-изображения милых котяток.

Упрощенный пользовательский поток нашего приложения может выглядеть следующим образом: пользователь открывает приложение и входит в одну из нескольких доступных вкладок (наша база данных о котятах), затем нажимает на одного из котят (входит в подробное представление одного котёнка) и затем нажимает на раздел комментариев (входит в раздел комментариев представления котёнка).


Пользовательский поток приложения «Purrrfect»

Кроме того, пользователь может выполнять дополнительные действия на каждом из этапов. Например, он может добавить другого котёнка в базу данных на экране списка котят. Или он может редактировать данные на экране подробностей котенка.

А теперь надо понять, какой из этих экранов является модальным, а какой нет? Классификация в данном случае вызывает сложность, но вот моё личное эмпирическое правило:

Используйте модальные экраны для автономных процессов, а немодальные экраны для всего остального.

«Автономный процесс» — это конкретное действие, которое имеет четкую начальную и конечную точку в процессе.

В течение ограниченного периода времени этого действия он выводит пользователя из общего потока пользователя, позволяя ему сосредоточиться на действии и затем возвращает его в ту точку потока, откуда он начал это действие.

Google формулирует это правило следующим образом:

Используйте модальные экраны (диалоги) для отображения «критической информации, которая требует конкретной пользовательской задачи, её решения или подтверждения» — Google

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

Все модальные действия могут быть отменены либо успешно завершены, прежде чем пользователь вернется в основной поток. По этой причине модальные экраны используют кнопки «Отмена» и «Сохранить» (или другие подобные подтверждения действия) вместо кнопки «Назад». Если ваша кнопка «Назад» одновременно запускает действие сохранения на немодальном экране, вы можете рассмотреть возможность перехода на модальный экран, добавив кнопки «Отмена» и «Сохранить».

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

Давайте вернемся к нашему приложению. Возможный интерфейс для «Purrrfect» может выглядеть так:


Пользовательский интерфейс «Purrrfect»

В реальном мире различие между модальными и немодальными экранами зачастую менее очевидно. Например, полноэкранный вид изображения является модальным в большинстве приложений, хотя это не процесс или диалог. Модальный экран может также иметь смысл в других особых ситуациях, когда нужно генерировать фокус пользователя на определенном блоке информации. Если бы наш подробный экран котёнка (в центре) был конечной точкой без других действий, таких как редактирование или комментарии, мы могли бы использовать модальность (полноэкранный просмотр). Но так как он позволяет пользователям глубже переходить по информационной архитектуре и выполнять различные дополнительные действия (показывать комментарии, редактировать и т.п.), у него больше нет чёткой конечной точки, и поэтому он является частью основного потока. Следовательно, это немодальное представление.

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

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

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

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

К настоящему времени надеюсь что возникло общее понимание того, когда использовать модальность. Остается только один вопрос: «Как мы спроектируем модальность?». Вот быстрый чеклист для использования модальных экранов:

  • Всегда показывайте кнопку закрытия/скрытия модального окна (или «отмена», «отменить», «свернуть») в верхней панели навигации. Когда пользователь теряется, он может легко закрыть такое окно и вернуться на уровень приложения, откуда было вызвано модальное окно.
  • Кнопки отмены на iOS и Android чаще всего располагаются в верхней левой части панели навигации. Android предпочитает иконку закрытия «X», в то время как iOS предпочитает кнопку с надписью «Отмена». Тем не менее, кнопки иконок также довольно распространен и в iOS.
  • Кнопки подтверждения действия на модальном окне в iOS и Android по умолчанию расположены в верхней правой части панели навигации. Тем не менее, это размещение может быть недоступным для пользователя на устройствах с большой диагональю. Поэтому фиксированное плавающее размещение такого в нижней части экрана или в конце страницы может быть неплохим альтернативным решением.

Многоступенчатые модальные окна

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

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

Заключение

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

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

Аудио перевод статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаблон: Google Docs

Заключение

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

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

Ссылки
  • ‍‍Popups: 10 Problematic Trends and Alternatives
  • ‍https://www.nngroup.com/articles/modes/
  • ‍https://www.nngroup.com/articles/modal-nonmodal-dialog/
  • ‍https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1
  • ‍https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c

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

Что такое модальный?

Модальный против немодального

Когда модальные окна используются в веб-дизайне?

Предупреждения, предупреждения и подтверждения

Формы

Медиа-дисплеи

Многоступенчатые процессы

Лучшие практики модального окна

1 Используйте модальные окна намеренно и нечасто.

2 Отключите все элементы фона.

3 Напишите четкие инструкции и текст кнопки.

4 Дайте пользователям выход.

5 Правильно установите размер модального окна.

6 Введите и закройте модальное окно с постепенным переходом.

7 Ограничьте модальные окна на мобильных устройствах.

8 Сделайте свои модальные окна доступными.

Как реализовать модальные окна в CSS

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

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

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

На практике все зависит от того, хорошо ли спроектировано модальное окно и имеет ли он смысл. Если все сделано правильно, они могут быть полезными как для ваших пользователей, так и для ваших чисел: согласно недавнему исследованию почти 2 миллиардов модальных всплывающих окон, 10% лучших исполнителей конвертируются с поразительной скоростью – 9,28%.

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

Что такое модальный?

Модальное окно (также называемое модальным окном или лайтбоксом) – это элемент веб-страницы, который отображается перед всем остальным содержимым страницы и отключает его. Чтобы вернуться к основному контенту, пользователь должен взаимодействовать с модальным окном, выполнив действие или закрыв его. Модальные окна часто используются, чтобы привлечь внимание пользователей к важному действию или информации на веб-сайте или в приложении.

Назначение модальных окон можно описать одним словом: фокус. Если вам нужно, чтобы посетители сосредоточились на чем-то простом, модальное окно – одно из наиболее эффективных средств для этого. Пользователи должны либо закрыть модальное окно, либо выполнить в нем определенное действие (например, прочитать сообщение и щелкнуть «ОК», заполнить форму и т.д. ).

Вот простой пример из New Yorker. Это модальное окно предлагает нам подписаться на их информационный бюллетень.

Источник изображения

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

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

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

Модальный против немодального

Мы называем этот тип элемента «модальным», потому что он вводит вторичный «режим» – или пользовательский интерфейс – на веб-страницу, на которой он появляется. Модальное окно отключает большую часть страницы и требует, чтобы пользователи сфокусировались на определенном окне, прежде чем продолжить. Веб-дизайнеры называют модальное окно «дочерним» окном, а остальную часть страницы – «родительским» окном.

Противоположностью модальному элементу является «немодальный» элемент, который не отключает родительское окно. Пользователи всегда могут взаимодействовать с родительским контентом, пока открыт немодальный элемент. Примеры немодальных элементов включают раскрывающееся меню, боковую панель или всплывающий элемент, который по-прежнему позволяет пользователям нажимать на другие элементы страницы.

Когда модальные окна используются в веб-дизайне?

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

Предупреждения, предупреждения и подтверждения

В тех случаях, когда пользователь действительно должен что-то увидеть, модальные окна отлично подходят для привлечения внимания. Модальное окно может содержать предупреждение о значительном событии или ошибке, предупреждение о последствиях какого-либо действия или подтверждение завершенного процесса. Например:

Источник изображения

Используйте модальные окна только для наиболее важных сообщений. Например, ошибки, которые активно препятствуют выполнению желаемого действия (например, «Мы не смогли выполнить ваш запрос из-за ошибки сервера. Обновите страницу и повторите попытку») и действия, которые нельзя отменить (например, вы уверены, что хотите продолжить? ») являются вескими причинами для модального окна. Предупреждение о «политике файлов cookie», не так много – сохраните это для немодального окна или панели уведомлений.

Формы

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

Многие веб-сайты, такие как Boston Globe, ограничивают свой контент только участниками, и об этом можно сообщить не членам через модальное окно:

Источник изображения

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

Медиа-дисплеи

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

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

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

Источник изображения

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

Многоступенчатые процессы

Для более длительных и энергоемких действий на вашем веб-сайте – создания профиля пользователя, подписки на службу или завершения настройки инструмента – рассмотрите возможность разделения каждого шага в собственное модальное окно, чтобы удобство было более управляемым. Этот метод распространен в программных приложениях в виде «мастера» или «руководства по установке». Прогресс должен отображаться в окне в виде полосы, последовательности маленьких точек, чисел или какого-либо другого индикатора.

Pinterest хорошо справляется с этим с процессом создания учетной записи. Обратите внимание на индикатор прогресса вверху.

Источник изображения

Лучшие практики модального окна

  1. Используйте модальные окна намеренно и нечасто.
  2. Отключите все элементы фона.
  3. Напишите четкие инструкции и текст кнопки.
  4. Дайте пользователям выход.
  5. Подберите размер модального окна.
  6. Ввести и закрыть модальное окно с постепенным переходом.
  7. Ограничьте модальные окна на мобильных устройствах.
  8. Создавайте модальные окна для обеспечения доступности.

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

1 Используйте модальные окна намеренно и нечасто.

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

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

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

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

2 Отключите все элементы фона.

Чтобы эффективно привлечь все внимание к модальному окну, все фоновые элементы должны быть визуально и функционально убраны за дочерним окном.

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

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

Еще одно важное замечание: поскольку модальное окно делает все остальное содержимое страницы недоступным до закрытия, вся информация, необходимая пользователям для завершения модального окна, должна быть предоставлена ​​в самом модальном окне. Пользователям не нужно возвращаться к родительскому контенту для решения модального окна – любая задача, требующая такого переключения, лучше подходит для немодального отображения.

3 Напишите четкие инструкции и текст кнопки.

Чтобы помочь пользователям быстро приспособиться к модальному дисплею и понять, почему он там есть, сделайте весь текст максимально кратким и понятным. Все модальные окна должны включать текст заголовка, в котором указывается намерение модального окна или требуемое действие. Напишите текст кнопки и другие подсказки к действию, чтобы они были краткими и интуитивно понятными.

4 Дайте пользователям выход.

Каждое хорошее модальное окно позволяет по крайней мере одно действие, возможность закрыть его. Соглашение гласит, что окно должно открываться после того, как пользователь нажмет клавишу ESC или щелкнет символ «X» или текст «Закрыть» в верхнем левом или правом углу модального окна.

Вы также можете закрыть окно, когда пользователи щелкают за пределами модального окна, и рассмотреть возможность размещения кнопки «Отмена» внутри модального окна в качестве альтернативы кнопке «Продолжить».

5 Правильно установите размер модального окна.

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

Хорошая рекомендация – ограничить модальное окно не более чем 50% ширины окна браузера и примерно такой же высотой, хотя точные размеры будут варьироваться в зависимости от того, что вы поместите в модальное окно.

6 Введите и закройте модальное окно с постепенным переходом.

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

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

Источник изображения

7 Ограничьте модальные окна на мобильных устройствах.

Все описанные мною конструктивные особенности отлично подходят для экранов настольных компьютеров, но мобильные устройства – это совсем другое дело. Уменьшенный размер экрана усложняет создание вида «окно в окне», не выглядя слишком большим или слишком маленьким.

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

8 Сделайте свои модальные окна доступными.

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

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

Как реализовать модальные окна в CSS

Чтобы добавить базовое модальное окно на свой сайт, можно использовать только CSS и HTML. Большинство факторов дизайна, которые мы рассмотрели в этом руководстве, можно изменить с помощью ноу-хау CSS. W3Schools предоставляет простой, но полезный шаблон кода для начала работы с методом CSS, или вы можете использовать бесплатный шаблон из Free Frontend или Material Design для Bootstrap.

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

Источник записи: https://blog.hubspot.com

краткий перевод свежих статей о digital. Читайте на Cossa.ru

Содержание

  • Удалите вложенные формы из digital-продуктов
  • UX вещей. Netflix

#915. Удалите вложенные формы из digital-продуктов

Removing Nested Modals From Digital Products

Визуальное представление вложенных модальных окон. Источник

Что такое вложенное модальное окно?

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

Почему следует избегать вложенных модальных окон

Сложно быстро выйти из потока

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

Начните размещать официальную рекламу в Telegram Ads через click.ru

Зарегистрируйтесь и продавайте товары или услуги в Telegram Ads с помощью готового решения от click.ru. Опередите конкурентов!

Бюджет от 3 000 €. Это гораздо дешевле, чем работать напрямую.

Для юрлиц и физлиц. Юрлица могут получить закрывающие документы, возместить НДС. Физлица — запустить рекламу без общения с менеджерами.

3 способа оплаты. Оплачивайте рекламу картой физического лица, с расчётного счета организации, электронными деньгами.

Подробнее →

Реклама

Схема пути пользователя с вложенными модальными окнами. Источник

Вводит в замешательство

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

Пример на видео ниже с сайта Dribbble кнопка. Кнопка «Назад» закрывает скрытое модальное окно и ещё ломает кнопку «Закрыть» на верхнем модальном окне.

Nested Modal Bug from Joseph Mueller on Vimeo.

Малоиспользуемое пространство

Большинство модальных окон обычно используют немного места на экране. Google-документы согласно Material Design предполагают, что «полноэкранные диалоги предназначены только для мобильных устройств. На планшете или компьютере используйте модальное диалоговое окно». Пространство за пределами модальных окон лучше использовать для более ценных компонентов. Для устройств с небольшими экранами и экранным пространством это особо актуально.

Когнитивная нагрузка увеличивается

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

Что можно использовать вместо?

Бесконечное модальное окно

В таком виде модальные окна не складываются в кучу, а объединяет их в новый поток. Это решение очень полезно для мобильных устройств, поскольку имитирует то, как пользователь может вернуться/закрыть окно в приложениях.

Боковая панель

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

Встроенное раскрывающееся окно

У вас немного вертикального пространства? Встроенное раскрывающееся окно — отличное решение для маленьких экранов или для оптимизации использования.

Всплывающее окно

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

Модальное окно с вкладками

Это эффективный способ четко упорядочить контент для пользователя и добавить удобства при навигации.

Настройка контента

Иногда одна только настройка UX-шаблонов окон не может исправить вложенные модальные окна. Вот несколько предложений для конкретного контента, которые следует взять во внимание, если вы возьметесь менять поток.

  • Следует ли превратить модальное окно в страницу и добавить в основной поток?

  • Можете ли вы расположить информацию на странице так, чтобы сфокусировать на ней внимание?

  • Следует ли разделить какую-то страницу на несколько страниц?

  • Перепроверьте опыт, специально созданный для другой платформы, чтобы убедиться, что он по-прежнему работает на новой платформе.

Как модальные окна должны интегрироваться в идеальный поток?

Оптимальный модальный обратный поток. Источник

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

#913. UX вещей, эпизод 1. Netflix

The UX of Things Ep.1 — Netflix

Источник

Знаете ли вы, что Netflix начинался как сайт проката DVD ещё в 1997 году? :–)

Источник

По состоянию на октябрь 2020 года Netflix обслуживает более 195 миллионов платных подписчиков с операционным доходом в 1,2 миллиарда долларов. Скорее всего, в офисах Netflix происходит довольно много обсуждений UX-стратегии.

Как это чувствуется

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

Искать самим по заголовку — не вариант. Мы идём в жары. И там ничего не находим.

А Netflix не даёт рекомендаций. Точнее, не так. Рекомендации Netflix не основаны на качестве самих фильмов или отзывах пользователей. Они основаны на нашей истории просмотров и на том, что сам Netflix считает хорошим.

Отзывы пользователей

Нет ничего лучшего для понимания хорош фильм или нет, чем отзывы пользователей. Представьте, если бы Amazon или App Store были без отзывов. Отзывы пользователей — самый важный показатель, на который мы можем положиться при покупках. Отзывы пользователей лучше всего отражают продукт, особенно когда отзывов много.

Одно «но»: на Amazon вы тратите деньги, а на Netflix вы тратите время. Время дороже :–)

Раньше у Netflix были хотя бы рейтинги, но они решили удалить их в 2018 году, потому что тролли намеренно «бомбили» неудачные заголовки сериалов.

Мало кто любит сервис Netflix. Такое ощущение, что мы просматриваем App Store, не имея возможности видеть и читать отзывы пользователей, но зато с промовидео, воспроизводимыми при прокрутке.

Отзывы пользователей: решение

Если вы смотрите Netflix из браузера, это расширение позволит вам видеть рейтинги IMDB и Rotten Tomatoes в пользовательском интерфейсе Netflix.

Это выглядит так.

Источник

Представим, что Netflix решил показывать рейтинги по умолчанию. Если бы они сделали это, было бы довольно сложно продвигать сериал с очень низким рейтингом и называть его «рекомендованным к просмотру».

Функция автозапуска

Ещё один момент, с которым Netflix намеренно не работает — это функция автовоспроизведения.

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

Это как если бы сервис Netflix был веб-сайтом, и они бы нажимали кнопку регистрации за вас, так что вам даже не приходилось бы делать это.

Функция автозапуска: решение

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

Для этого:

1. Войдите в свою учётную запись Netflix в браузере.
2. Нажмите на свой профиль в правом верхнем углу и выберите «Управление профилями».
3. Выберите профиль, настройки которого хотите изменить.
4. Вы должны найти «Элементы управления автозапуском» и изменить настройки.

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

Вывод: хорошая новость в том, что мы можем справиться с двумя этими неудобствами. Плохая новость в том, что большинство пользователей никогда этого не сделает, ведь настроек по умолчанию придерживаются большинство из них. Скорее всего, лишь небольшое количество пользователей действительно кастомизируют Netflix в веб-браузере.
Перевели, чтобы вы смогли сэкономить часок.

Хэй-хэй! Пятница же! Хоп-хэй-лалалэй всем!

Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на [email protected]. А наши требования к ним — вот тут.

Вы не знаете как должны работать модальные окна

Уверен, многие хоть раз создавали всплывающее модальное окно. Но задумывались ли вы об определении этого компонента? Как он должен работать?

В этом материале я постарался собрать максимально полный свод правил, рекомендаций и примеров реализации по которым модальные окна должны работать.

Я покажу, как просто создавать сложные, удобные, производительные и доступные модальные окна независимо от браузера, платформы, устройства или способа взаимодействия пользователя.

Этот список сформирован на основе спецификаций WAI-ARIA, HTML Living Standard и моего личного опыта. И хотя я буду говорить про веб, большинство правил и рекомендаций применимы для модальных окон где угодно.


Определение модального окна

Модальное окно — это окно наложенное либо на документ, либо на другие окна. При этом, любой контент под модальным окном является недоступным для взаимодействия.


Теги и атрибуты

Интерактивным элементом для открытия диалогового окна должна выступать кнопка. Не <div>, не <span> не <a>, не любой другой тег. Исключительно <button>. И касается не только диалоговых окон, <button> — самый надежный и доступный способ создавать интерактивные элементы на странице.

Простейшая реализация кнопки открывающая диалог по его id:

<button data-modal="dialogId">
    Открыть
</button>

<dialog>

Для различных диалогов, уведомлений и прочих перекрывающих документ элементов существует тег <dialog>. Его вы и должны использовать. К огромному сожалению, его поддержка не самая лучшая:


  • Chromium — полная поддержка.
  • Firefox — поддержка за флагом.
  • Safari не поддерживает вовсе.

Так что для этих браузеров нужно подгружать polyfill:

if (!document.createElement('dialog').showModal) {
  // Браузер нативно не поддерживает элемент dialog
  import('/dist/dialog-polyfill.js') // Подгружаем polyfill
    .then(dialogPolyfill =>
      document.querySelectorAll('dialog')
        .forEach(dialogPolyfill.registerDialog) // Применяем его для всех элементов на странице
    )
}

Вы, конечно, можете использовать и другой элемент для реализации диалогового окна, например так:

<section role="dialog" aria-modal="true">
...
</section>

но тогда вам придётся самостоятельно реализовывать всё поведение описанное далее. В то время как с <dialog> большую часть браузер реализует из коробки.


Внешний вид и содержание

Вскользь коснусь внешнего вида.

На небольших экранах диалоговое окно должно занимать 100% его размера. Если ваш диалог будет большим:


  1. Его будет легче «нащупать». Дело в том, что пользователь может взаимодействовать со страницей следующим образом: он водит пальцем по дисплею, а программа чтения с экрана озвучивает то, что в данный момент находится под пальцем.
  2. Пользователю гарантированно не будут озвучиваться элементы «под ним». Иначе, например, VoiceOver на iPad может озвучивать отдельные фрагменты страницы под модальным окном даже «сквозь» оверлей блокирующий доступ указателю.
  3. Вы скроете прокрутку фона на некоторых устройствах при прокрутке контента в диалоговом окне.
  4. Удобнее для одной руки. Если окно растянуто на всю высоту – то у вас есть возможность прижать кнопки управления к нижней части дисплея. Туда намного проще дотянуться одной рукой пользователям современных смартфонов.
  5. Больше места для контента на устройствах с маленьким экраном, таких как iPhone SE.

Заголовок обязателен

У модального окна, как у любой обычной страницы, должен быть свой заголовок. Короткий, точно описывающий его предназначение. Наличие заголовка намного упрощает восприятие пользователем.

Настоятельно рекомендуется использовать для заголовка тег <h2>-<h6>.

Но просто добавить заголовок в диалоговое окно недостаточно. Их нужно ещё и логически «связать». Сделать это можно с помощью атрибута aria-labelledby следующим образом:

<dialog aria-labeledby="subscribe-header">
  <h3>Предложение подписки</h3>
</dialog>

Теперь, при попадании пользователя в диалоговое окно, в случае с экранным диктором, будет зачитан не только факт наличия диалога, но и его заголовок.


Статический контент должен быть связан с окном

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

Делается это атрибутом aria-describedby:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Предложение подписки</h3>
    <p>
        Вы можете подписаться на нашу еженедельную рассылку.
        В ней представлены только лучшие публикации.
    </p>
</dialog>

Если в вашем диалоговом окне много контента, тогда стоит обернуть его в один <div> и связать элемент диалога уже с ним:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Условия подписки</h3>
    <div>
        <p>Ниже представлены условия нашей подписки.</p>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
        ...Много контента
    </div>
</dialog>

Важно! Заголовок и любые кнопки не относящиеся к содержимому, а служащие для управления диалоговым окном, не должны быть включены в элемент на который указывает aria-describedby. Они должны быть вынесены отдельно:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Условия подписки</h3>
    <div>
        <p>Ниже представлены условия нашей подписки.</p>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
        ...Много контента
    </div>
    <div>
        <button>Принять</button>
        <button>Отказаться и закрыть</button>
    </div>
</dialog>

Интерактивные элементы связывать не нужно

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

<dialog aria-labeledby="subscribe-header">
    <h3>Данные для подписки</h3>
    <form>
        <label>
            Введите ваш email
            <input type="email">
        </label>
    </form>
    <div>
        <button>Подписаться</button>
        <button>Отказаться и закрыть</button>
    </div>
</dialog>

Элементы формы являются интерактивными. И они будут озвучены скринридером, когда пользователь начнёт с ними взаимодействовать.

Если скомбинировать и статический текст и форму:

<dialog aria-labeledby="subscribe-header" aria-describedby="subscribe-content">
    <h3>Подпишитесь на рассылку</h3>
    <p>
        Вы можете подписаться на нашу еженедельную рассылку.
    </p>
    <form>
        <label>
            Введите ваш email
            <input type="email">
        </label>
    </form>
    <div>
        <button>Подписаться</button>
        <button>Отказаться и закрыть</button>
    </div>
</dialog>

Способы закрыть окно

Внутри диалогового окна обязана быть кнопка чтобы его закрыть. Не <div>, не <span> не <a>, не любой другой тег. Исключительно <button>. Это самый надежный способ гарантировать, что любой пользователь сможет закрыть диалоговое окно. Вы же не любите модальные окна которые невозможно закрыть?

Дополнительно, в зависимости от вашей логики, вы можете позволить пользователю закрыть диалог кликнув за его пределами или нажав Escape (встроено в <dialog> из коробки).

Но:


  1. Не рассчитывайте, что пользовать всегда может нажать на оверлей и так закрыть диалог.
    1. Как я писал ранее, во многих случаях диалоговое окно может занимать всю или большую часть экрана. Таким образом попасть в него может быть сложно или невозможно.
    2. Такой оверлей семантически не считается интерактивным элементом. Он не может быть в фокусе и на него невозможно «нажать» клавишами.
  2. Не рассчитывайте, что у пользователя под рукой есть клавиатура, чтобы нажать Escape.
  3. Существует множество устройств, программ и различных инструментов, способных читать веб-сайты и давать пользователю взаимодействовать с ними, но не так как в браузере. Во многих случаях единственным рабочим вариантом остаётся кнопка внутри.

Простейшая реализация кнопки закрывающей родительский диалог:

<button>
Закрыть
</button>

А если вы делаете кнопку с иконкой, то не забывайте про подпись, чтобы передать ёё назначение:

<button aria-label="Закрыть">
 ×
</button>

Поведение фокуса


При открытии диалога

Во время открытия диалогового окна фокус должен быть перемещён на элемент внутри него. На какой именно — зависит от содержания.

В общем случае фокус перемещается на первый интерактивный элемент. Именно так ведет себя нативный <dialog> в браузере. Но нельзя делать сам элемент окна фокусируемым и перемещать фокус на него.

Например, для диалога с формой первый интерактивный элемент это первый <input>. Если ваше диалоговое окно носит чисто информативный характер, например, уведомление об успешной подписке, тогда первым и единственным элементом будет кнопка закрывающая диалог.

Но есть и несколько исключений:


  1. Запрос подтверждения чего-либо. Если ваш диалог запрашивает у пользователя подтверждения перед выполнением каких-то необратимых действий (удаление чего-то или выполнение финансовых операций), тогда фокус автоматически должен ставится на кнопку «отмены» этих действий, независимо от её расположения.
  2. Ситуации, когда в диалоговом окне много статического контента и первый интерактивный элемент не помещается в видимую область. Проблема тут в том, что в таком случае браузер автоматически проскролит вниз к кнопке в фокусе. Это вынудит пользователя скролить обратно вверх, а потом снова вниз. Для таких случаев есть два подхода:
    1. Переместить или продублировать интерактивные элементы так, чтобы первый из них был в видимой части экрана. Например, выполнить кнопку закрыть в виде крестика и закрепить в верхней части диалогового окна.
    2. Заголовок или первый абзац текста нужно сделать фокусируемым при помощи tabindex="-1" и перемещать фокус на него. Но при этом подходе некоторые программы чтения с экрана могут озвучивать заданный текст дважды: сначала как заголовок и описание окна, а потом как содержание выделенного элемента.

Управлять куда именно попадёт фокус при открытии модального окна можно с помощью атрибута autofocus:

<dialog aria-labeledby="subscribe-header">
    <h3>Необратимые действия</h3>
    <form>
        <label>
            Введите пароль для подтверждения
            <input type="password">
        </label>
    </form>
    <div>
        <button>Подтверждаю</button>
        <button autofocus>Отказаться и закрыть</button> <!-- Будет выбрана эта кнопка -->
    </div>
</dialog>

Внутри диалога

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

Чтобы блокировать указатель обычно документ накрывается полупрозрачным блоком.

Но этого недостаточно, так как остаётся ещё и навигация клавишами Tab / Shift + Tab. Также это могут быть клавиши громкости на смартфонах или специальные клавиши на дополнительных инструментах подключенных по USB/Bluetooth. Этот способ навигации тоже должен быть заблокирован.

После попадания фокуса в модальное окно пользователь может перебирать интерактивные элементы внутри этого окна, но не должен выходить за его пределы. Другими словами, такое диалоговое окно работает как ловушка для фокуса. Это поведение встроено в <dialog>, так что от вас никаких действий не требуется. А вот используя другой элемент с role="dialog" его нужно реализовывать самостоятельно средствами JavaScript.


При закрытии диалога

При закрытии диалогового окна фокус должен быть перемещён туда, где он был в момент открытия. Это поведение не является частью <dialog> и браузер полностью оставляет это на усмотрение разработчика.

Но и тут есть одно исключение: если элемент более не доступен, тогда фокус нужно вернуть туда, откуда наиболее логично для пользователя продолжить работу.


Пример

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


  1. Сообщает пользователю об наличии подписки. В нем две кнопки: «Условия подписки» и «Подписаться»
  2. Отображается по клику на «Условия подписки». Открывается поверх первого.
  3. Отображается по клику на «Подписаться». Заменяет собой первое.

В примерах ниже я специально пропустил дополнительные атрибуты и элементы, для упрощения кода.

Итак, у нас есть стартовая кнопка.

<button>Рассылка</button> <!-- in focus -->

По нажатию на неё открывается первый диалог. Фокус автоматически перемещается на первый интерактивный элемент. А закрытие диалога должно возвращать фокус назад.

┌►<button>Рассылка</button>
│
└─  <dialog open>
        <button>Подписаться</button> <!-- in focus -->
        <button>Условия подписки</button>
    </dialog>

Далее пользователь перемещает фокус на «Условия подписки» и нажимает. Открывается второй диалог поверх первого. Фокус перемещается в него, а возвращаться должен на эту же кнопку в первом диалоге:

┌►<button>Рассылка</button>
│
└─  <dialog open>
        <h3>Рассылка</h3>
        <button>Подписаться</button>
┌────►  <button>Условия подписки</button>
│   </dialog>
│
└─  <dialog open>
        <h3>Условия подписки</h3>
        <button>Ок</button> <!-- in focus -->
    </dialog>

После закрытия второго диалога ваш JavaScript должен вернуть фокус на кнопку «Условия подписки» в первом.

┌►<button>Рассылка</button>
│
└─  <dialog open>
        <button>Подписаться</button> 
        <button>Условия подписки</button> <!-- in focus -->
    </dialog>

После чего пользователь нажимает кнопку «Подписаться». По условиям нашей задачи открывается третий диалог. Фокус автоматически перемещается в него. А первый диалог закрывается:

┌►<button>Рассылка</button>
│
└─  <dialog>
        <h3>Рассылка</h3>
┌────×  <button>Подписаться</button>
│       <button>Условия подписки</button>
│   </dialog>
│
│   <dialog>
│       <h3>Условия подписки</h3>
│
│       <button>Ок</button>
│   </dialog>
│
└─  <dialog open>
        <h3>Введите email</h3>
        <button>Подтвердить</button> <!-- in focus -->
    </dialog>

И вот проблема: третье окно должно вернуть фокус на кнопку в первом, но первое окно больше не доступно. В таких случаях фокус нужно вернуть туда, куда указывал закрытый диалог — на кнопку «Рассылка» с которой пользовать начал.

┌►<button>Рассылка</button>
│
│   <dialog>
│       <h3>Рассылка</h3>
│
│       <button>Подписаться</button>
│       <button>Условия подписки</button>
│   </dialog>
│
│   <dialog>
│       <h3>Условия подписки</h3>
│
│       <button>Ок</button>
│   </dialog>
│
└─  <dialog open>
        <h3>Введите email</h3>
        <button>Подтвердить</button> <!-- in focus -->
    </dialog>

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

Помните, как во время установки программы в Windows можно просто нажимать Enter? Так вот это пример хорошей работы с фокусом: каждый раз, при переходе на новый экран в фокус ставится элемент, с которым вы скорее всего будете взаимодействовать — кнопка «Далее» или «Обзор».


Подводя итог


  1. Используйте семантические теги <button> и <dialog>.
  2. Делайте ваши окна достаточно большими.
  3. В модальных окнах должен быть заголовок.
  4. Заголовок и содержимое должны быть соответствующим образом связаны с элементом модального окна.
  5. Убедитесь что в диалоге есть кнопка для закрытия окна.
  6. Перемещайте фокус внутрь при открытии, не выпускайте его из модального окна и возвращайте туда, где он был после закрытия.

Дополнительные ссылки


  • Modal Dialog Design Pattern in WAI-ARIA Authoring Practices 1. 2
  • HTML Living Standard
  • Polyfill for the HTML dialog element
  • Filament group Modal

юзабилити — Что такое модальное диалоговое окно?

спросил

Изменено 5 лет назад

Просмотрено 56 тысяч раз

Что такое модальное диалоговое окно и когда его следует использовать? Есть ли определенные случаи, когда вы должны воздержаться от его использования?

  • удобство использования
  • модальное диалоговое окно
  • всплывающее окно

Модальное диалоговое окно — это окно, которое заставляет пользователя взаимодействовать с ним, прежде чем он сможет вернуться к использованию родительского приложения. Отличным примером этого может быть запрос на сохранение или диалоговое окно «открыть файл».

Они часто используются, когда пользователь вынужден принять важное решение. Допустим, вы работали над документом в Microsoft Word и перед сохранением решили выйти из Word. Появится модальное диалоговое окно и попросит вас сохранить, не сохранять или отменить. Пока вы не примете решение, вы не сможете пользоваться приложением, и оно не закроется.

2

Я согласен с Мэттом, что диалоговое окно файла должно быть модальным диалоговым окном.

Модальные диалоговые окна следует использовать, когда пользователь выполняет действие, для правильного заполнения которого требуется дополнительная информация. Диалоговое окно печати также является хорошим примером. Или диалоги «параметров» во множестве программ.

Когда использовать модальные диалоги, определить немного сложно, но я считаю, что их следует использовать с осторожностью и по возможности избегать. Посмотрите на пример Фрейзера с загрузчиком изображений Facebook. .. это не обязательно, так как это можно сделать асинхронно.

Эмпирическое правило: всякий раз, когда для завершения действия требуется дополнительная информация.

4

Мэтт уже сказал, что такое модальный диалог.

Что касается того, когда его следует использовать: Эмпирическое правило таково: «Когда никакие другие действия не имеют смысла, пока пользователь не завершит это диалоговое окно». Прочтите внимательно, здесь не говорится о том, что вы хотите, чтобы пользователь сделал! Многие диалоги в Mac не являются модальными, тогда как их аналоги в Windows являются модальными. Это не означает, что Mac лучше, но означает, что многие дизайнеры диалогов без необходимости заставляют пользователя выполнять действие, которое пользователь может захотеть отложить до тех пор, пока он не будет готов.

Примеры: 1) программа SSH требует пароль для подключения к серверу. Это может быть реализовано через модальное диалоговое окно, хотя вы могли бы возразить, что открытие конфигурации параметров имеет смысл независимо от того, подключен пользователь или нет. Реальный суд.

2) Браузер с несколькими вкладками должен , а не реализовывать базовую аутентификацию HTTP 401 через модальный диалог. Пользователь вполне может захотеть открыть другую вкладку, чтобы прочитать пароль из письма активации.

3) Диалог печати в многодокументном интерфейсе не должен быть модальным. Если пользователь хочет напечатать два документа, один из 1000 страниц, а другой из 5, но ошибочно начинает с 1000-страничного документа, вы не должны требовать от него отмены диалогового окна (и всех заданных им настроек) только для того, чтобы он мог напечатать меньший работа в первую очередь.

1

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

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

Модальное диалоговое окно — это дополнительное окно, которое открывается в основном окне. Чтобы продолжить выполнение набора задач, пользователь должен взаимодействовать с ним, чтобы вернуться обратно в главное окно.

Для справки: https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

Best Practices for Modal Windows

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

Их можно использовать для самых разных целей, но обычно, когда пользователь хочет быстро вернуться на страницу, с которой появилось модальное окно.

См. ниже пример модального окна в стиле Facebook.

4

Твой ответ

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie

Руководство по UX для модальных окон: +20 лучших плагинов и инструментов (2022)