Что такое модальное окно: Чем отличаются модальные окна от pop-up’ов — Проекторат

27.04.2021 alexxlab

Содержание

Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают

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

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

Давайте начнем наше исследование со смелого утверждения:

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

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

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

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

Что такое «Модальный экран»? Примеры модальных экранов

Модальные экраны могут быть разных форм и размеров:

Полноэкранные модальные представления (1)
Всплывающие окна (Popups) (2)
Вспомогательные экраны (Popovers) (3)
Лайтбоксы (Lightboxes) (4)
Предупреждения / Уведомления
(Многошаговые) диалоги окна
…

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

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

Пользователи должны взаимодействовать с модальным окном, прежде чем смогут вернуться в родительское приложение»
Предстоящие воркшопы
— Wikipedia

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

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

немодальных экранов:

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

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

Наиболее ярким визуальным индикатором

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

https://ux.pub/panel-vkladok-eto-novoe-gamburger-menyu/

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

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

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

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

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

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

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

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

Юзерфлоу приложения Purrrfect

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

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

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

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

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

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

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

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

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

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

Возможный интерфейс приложения Purrrfect

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

или комментарии, мы могли бы использовать модальность (полноэкранный просмотр).

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

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

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

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

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

Непоследовательный интерфейс Apple

Непоследовательность слева может быть исправлена с помощью …

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

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

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

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

Многошаговые модальные окна

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

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

Анимации

Пока что iOS и Android очень похожи в том, как они используют модальные экраны. Однако все меняется, как только вы смотрите на анимацию.

iOS: анимация в iOS очень стандартизирована.
Немодальные экраны выталкиваются на фрейм справа. Панель вкладок остается неизменной в нижней части экрана. Панель навигации вверху также остается на месте, но ее содержимое исчезает в результате пользовательского перехода. Эта анимация также обеспечивает основу для жеста смахивания с края, используемого для возврата назад на экран, на котором размещена кнопка «Назад».
Модальные экраны, с другой стороны, скользят от нижней части фрейма и перекрывают весь интерфейс (новая верхняя панель навигации). Они не используют жест смахивание с края, но жест «потяните, чтобы закрыть» может помочь, если ничего не надо сохранять.
Android: анимации на Android гораздо разнообразнее. Google рекомендует использовать «значимые переходы» в рекомендациях Material Design. «Дочерний элемент раскрывается при нажатии», в то время, как верхняя панель навигации скрывает свое содержимое. Тем не менее, Android не различает модальные и немодальные анимации.

Вердикт

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

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

Модальное окно — это… Что такое Модальное окно?

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

Назначение

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

Потребовать от пользователя ввод какой-либо информации — начиная от простого «да/нет» до большого количества настроек или данных, необходимых для продолжения работы с родительским окном или приложением;
Привлечь внимание пользователя к чему-либо важному. Этот вариант часто критикуется специалистами по эргономике, потому что редко это важно настолько, чтоб блокировать работу приложения целиком, но, тем не менее, продолжает использоваться по той причине, что он существенно более лёгок в реализации;^[2]^[3]^[4]
Указать пользователю на невозможность отмены выполняемого им действия и потребовать подтверждения этого действия. Этот вариант тоже критикуется, вместо него рекомендуется обеспечить-таки возможность отмены.^[5]

Критика

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

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

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

Создание окна, модального относительно рабочего стола, могло нарушить доступность всей системы в целом. Например, такая функция была предусмотрена в Microsoft Windows 3.x, 95 и 98, однако была убрана из NT и последующих версий, и модальность окна относительно системы больше не блокировала доступ к ней.^[7]

См. также

Примечания

Модальное окно. Компоненты · Bootstrap. Версия v4.0.0

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

Как это работает

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа <body>, вместо него прокручивая модальные окна
Клик вне модального элемента автоматически закрывает его.
Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
Модальные элементы имеют position: fixed, что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal.
Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Далее – использование и примеры.

Примеры

Модальные компоненты

Ниже – пример статичного модального компонента (это значит, что его position и display «преодолены»). В примере есть заголовок модального компонента, тело (требуется для padding), футер модального компонента (по желанию). Мы советуем включать заголовки с отклонением действия, когда возможно, или обеспечить другой явный путь отклонить действие.

Modal body text goes here.

<div tabindex="-1" role="dialog">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        <p>Modal body text goes here.</p>
      </div>
      <div>
        <button type="button">Save changes</button>
        <button type="button" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

«Живое» демо

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

Woohoo, you’re reading this text in a modal!

Запустить модальное окно

<!-- Button trigger modal -->
<button type="button" data-toggle="modal" data-target="#exampleModal">
  Запустить модальное окно
</button>

<!-- Modal -->
<div tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div role="document">
    <div>
      <div>
        <h5>Modal title</h5>
        <button type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div>
        ...
      </div>
      <div>
        <button type="button" data-dismiss="modal">Close</button>
        <button type="button">Save changes</button>
      </div>
    </div>
  </div>
</div>

Прокрутка длинного содержимого

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

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.