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

UX дизайн окна потверждения

Определение:

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

Использование

Вы можете использовать модальное окно, когда вам нужно:

Привлечь внимание пользователя

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

Требуется ввод информации от пользователя

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

Показать дополнительную информацию в контексте

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

Показать дополнительную информацию (вне контекста)

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

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

Анатомия модального окна

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

Лучшие практики дизайна модальных окон, Анатомия модального окна

1.Аварийный люк

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

  • Кнопка Отмены
  • Кнопка закрытия
  • Клавиша Escape
  • Клик за пределами окна

Совет по доступности: каждое модальное окно должно иметь доступное управление с клавиатуры, чтобы закрыть это окно. Например, клавиша escape должна закрывать окно.

2. Название

Дайте пользователю контекст с модальным заголовком. Это позволяет пользователям узнать, где он/она, потому что они не покинули исходную страницу.

Лучшие практики дизайна модальных окон, Название
После клика по кнопке Tweet  — Модальный заголовок: Создание нового твита. Дает контекст.

Совет: ярлык кнопки (которая запускает модальное окно) и модальный заголовок должны совпадать

3. Кнопка

Ярлыки кнопок должны содержать понятные имена. Это относится к любой кнопке. Для модальных окон кнопка ‘закрыть' должна быть представлена в виде значка кнопки ‘закрыть' или ‘x'.

Лучшие практики дизайна модальных окон, кнопки
У Invision понятные значки кнопок

Примечание: Не делайте значок кнопки сбивающим с толку. Если пользователь пытается отменить действие, а модальное окно выскакивает с ЕЩЕ ОДНОЙ кнопкой отмены, возникает путаница. «Я отменяю отмену? Или продолжаю ее?»

4. Определение размера и расположения

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

Лучшие практики дизайна модальных окон, Определение размера и расположения

  • Расположение — в верхней части экрана, потому что в мобильном виде модальное окно может потеряться, если поместить его ниже.
  • Размер — Не используйте больше, чем 50% экрана модельного окна.

5. Фокус

Когда вы открываете модальное окно, используйте эффект lightbox (затемнение фона). Это привлекает внимание к модальному окну и указывает, что пользователь не может взаимодействовать с родительской страницей.

Совет по доступности: установите фокус клавиатуры на модальное окно.

6. Пользователь запускает модальное окно

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

Лучшие практики дизайна модальных окон, открытие модального окна
Модальное окно, вызванное нажатием кнопки Log In

Модальные окна в мобильных устройствах

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

Лучшие практики дизайна модальных окон, мобильные устройства
Хорошо сделанное модальное окно —  Facebook

Доступность

Лучшие практики дизайна модальных окон, доступность

Клавиатура

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

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

Перемещение фокуса в диалоговое окно Когда модальное окно открыто, фокус клавиатуры должен быть перемещен в его начало.

Управление фокусом клавиатурыКогда фокус перемещен в диалоговое окно, он должен быть «заперт» внутри него, пока диалоговое окно не будет закрыто.

Закрытие диалогакаждое модальное окно должно иметь доступное управление с клавиатуры для закрытия этого окна.

Чтобы получить больше информации по вышеприведенному списку читайте статью в блоге Nomensa.

ARIA

Стандарт доступности активных Интернет-приложений (Accessible Rich Internet Applications (ARIA) определяет способы повышения доступности веб-контента и веб-приложений.

Следующие теги ARIA могут быть полезны при создании доступного модального окна: Role = «dialog» , aria-hidden, aria-label

Чтобы получить больше информации по ARIA, читайте статью в журнале Smashing

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

Заключение

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

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

Контрольный список

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

Существует альтернативный компонент пользовательского интерфейса для модальных окон: не модальные или известные как всплывающие уведомления toast (термин, используемый Microsoft и Google в Материальном дизайне). Читайте мою следующую публикацию, чтобы узнать больше.

Ссылки:

Overlays — Patterny

 Модальные окна— Структуры интерфейса пользователя

Злоупотребление модальными окнами  — NNgroup

10 рекомендаций по использованию модальных окон — UX для масс

Делая модальные окна лучше для всех — Smashing Magazine

Как улучшить доступность модальных окон— Nomensa

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

13 способов представления форм и будущее ввода данных