Чем заменить модальные окна

Обновлено: 08.05.2024

С недавнего времени появилась проблема с модальными окнами в web-клиенте 1С. У некоторых пользователей стала выскакивать ошибка: "Использование модальных окон в данном режиме запрещено!" . Причем интересная особенность, что у других пользователей все продолжает нормально работать. С теми же самыми правами, в том же самом браузере, той же версии!
Конфигурация: 1C:CRM, редакция 2.0 (2.0.11.5)
Платформа: 1С:Предприятие 8.3 (8.3.8.2197)
Работают пользователи через веб-клиент.
Запускаются все в браузере Mozilla Firefox (версия 51.0.1 32-bit).
В свойствах конфигурации установлено: Режим использования модальности = Использовать.

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

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

Я нарыла, что проблему модальных окон при использовании веб-клиента 1С решает некое расширение для браузера 1C:Enterprise 8 Extension (почитать про него можно, например, здесь: https://1c.link/article/ff-addon-installation) . Но! Главный вопрос был, как его установить. И это оказалось не так очевидно, как хотелось бы;). Итак, заходим в меню "Общие настройки" -> "Персональные настройки", переходим на вкладку "Работа с файлами", там есть волшебная кнопка "Установить расширение работы с файлами", нажимаем ее.

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

После этого все работает! Ура. Устанавливаем вышеупомянутое Расширение, и продолжаем наслаждаться работой веб-клиента в последней версии Firefox без каких-либо проблем с модальными окнами!

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

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

Вопрос задан более трёх лет назад
453 просмотра

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

А как далее "тыкать" на нее повторно? Крестик - это снова "открыл, закрыл, открыл". плюсов не вижу, увы.
Да, ситуация утопичная, как и сама постановка мною задачи, но что поделать.

xmoonlight, у меня периодически проскальзывает в голове навязчивая идея разделить сайт (не именно этот) на 2 половины вертикально. По клике на кнопку открывается "половина" с данными. При повторном клике данные изменяются. При нажатии на крестик эта самая "половина" закрывается, и сайт снова становится "нормальным". На мобильных устройствах вторая половина = модальное окно с крестиком.
Правда, это убивает все юзабилити, заставит пользователя метаться между "право" и "лево". Могу ошибаться, конечно, но эффект вряд ли будет иным.

xmoonlight, не двойной)) Нажал - прочитал. Кнопка работает как "похожая статья" (назовем это так). Нажмем - другая статья, естественно. Не понравилась первая - понравится вторая или третья. Но даже самому утомительно по 4 раза закрывать модальное окно в "ожидании чуда". Но решения другого не вижу. Интерфейс с одной кнопкой портить не хочется совсем - мне это по душе. Тем более, одна кнопка - кнопка действия, а страница и без того "заполнена" опциями для "кнопки". Место остается, да, но не для статьи:) В модальном окне скриншоты и прочее - это удобно. В соц. сетях модальные окна уместны, так или иначе. но здесь не особо, хотя альтернатив не вижу, увы(

ZaxapKramer: я не могу понять: что выводить-то хотите по этой кнопке посередине?! Если это публикация (preview) -> сдвиньте кнопку под preview-текста публикации.
Назовите кнопку "Пропустить и перейти к следующей".
(слишком мало информации, чтобы дать ответ на Ваш вопрос)

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

xmoonlight, тогда давайте остановимся на "аннотациям" к фильмам (для простоты примера). Пользователь заходит на сайт и нажимает на кнопку. Ему выводится краткое описание фильма (допустим, случайного). Не понравилось - кликнул снова на кнопку. Под кнопкой несколько (штук 10) опций для фильтрования фильмов. Выбрал нужные опции (год и жанр, к примеру) - кликаешь по кнопке и получаешь фильм. Не понравился? Кликаешь снова. Но как "упростить" этот процесс? На то же модальное окно можно повесить кнопку "Перевыбор", но как-то это не особо хорошо/удобно/понятно. И особый дискомфорт при работе с телефона.

ZaxapKramer: "Не понравился? Кликаешь снова." => Я же написал: Назовите кнопку "Пропустить и перейти к следующей". Ну или "Другой вариант", "Ещё. ". и т.д.

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

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

Модальные окна можно использовать для:

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

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

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

Кнопка отмены
Кнопка закрытия
Закрытие по нажатию клавиши «escape»
Закрытие по клику на пространстве вне модального окна

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

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

Названия кнопок должны передавать действие и быть понятными. Это применимо не только к кнопкам модальных окон, но и ко всем остальным. В модальных окнах, кнопка «close» должна присутствовать в виде кнопки с надписью «close», или просто «х».

Совет: не путайте пользователя названиями. Если пользователь пытается отменить операцию, после чего выскакивает модальное окно, с кнопкой «cancel» — возникает путаница. «Я отменяю отмену той операции? Или это продолжение отмены?»

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

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

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

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

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

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

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

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

Перемещение фокуса в диалоговое окно –фокус клавиатуры должен быть помещен в модальное окно сразу после его открытия

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

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

Accessible Rich Internet Applications (ARIA) помогает создавать доступные приложения и веб контент.

Следующие ARIA тэги могут быть полезными для создания доступного модального окна:

Role = “dialog”, aria-hidden, aria-label

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

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

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

Всплывающие окна: 10 худших трендов и лучших альтернатив

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

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

1. Может ли пользователь взаимодействовать с остальной частью страницы:

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

• Немодальные: пользователи могут по-прежнему взаимодействовать с фоновым содержимым (например, выбирая ссылки или нажимая кнопки), пока наложение остается видимым.

2. Затенен ли фон:

• Если фон затемнен, всплывающее окно называется лайтбоксом.

• Не существует специального названия для случая, когда фоновое содержимое визуально не затемнено.

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

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

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

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

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

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

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

Например, одна из посетительниц веб-сайта Uncommon Goods’, выразила недовольство, когда ее встретило модальное окно с запросом адреса электронной почты для доступа к секретным распродажам. Она сказала: «Меня действительно раздражает, когда появляются подобные вещи, прежде чем я что-то еще делаю на сайте. Как мне узнать, хочу ли я стать подписчиком, если я только что пришла сюда? Я бы предпочла получить это чуть позже».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Во время одной из наших сессий юзабилити-тестирования участник, который искал работу на сайте HSBC, столкнулся с двумя различными модальными окнами перехода при попытке выполнить задачу, которая по существу была распределена на 3 отдельных веб-сайта. Он сказал: «Ух ты, так это продолжает уводить меня на другие сайты, даже не знаю, где я сейчас нахожусь. Если их процесс приема на работу является таким сложным и разрозненным, я, честно говоря, не думаю, что это было бы удачным местом для работы. Это похоже на помойку, независимо от того, как красиво выглядит этот сайт».

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

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

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

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

Conde’ Nast Traveller’s предложил подписку на информационный бюллетень в виде тонкого и ненавязчивого баннера под навигацией. Этот дизайн позволил заинтересованным пользователям подписаться на новостную рассылку, но не отвлекал тех, кто просто хотел прочитать содержимое сайта.

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

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

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

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

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

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

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

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

Pop, pop, it never stops. Недопустимый пользовательский опыт, так что останавливайте всплывающие окна.

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

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

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

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

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

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

Модальное окно в формате “Загрузка…” является довольно распространённой практикой для уведомления о длительных операциях. Использование модальных окон в таких случаях можно считать логичным, поскольку такое окно не позволяет пользователю взаимодействовать с экраном. Однако можно найти и более подходящее решение — добавление на сайт строки загрузки прямо в кнопку, которая начинает действие. Такое решение будет сигнализировать о том, что нужно немного подождать, и не дает пользователю снова нажать на кнопку загрузки.

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

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

2. Осторожнее с модальными окнами, вызываемыми системой

Есть два типа модальных окон: вызываемые пользователем и вызываемые системой:

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

Дизайнеры обычно используют такие окна в рекламных целях. Такие окна прерывают пользователя и заставляют его выполнить какое-либо определенное действие. “Незваные” окна часто производят плохое впечатление на пользователей — люди инстинктивно ищут кнопку “закрыть”. Такие окна считаются раздражающими и неуместными.

3. Убедитесь, что пользователи понимают, что от них требуется

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

К примеру, если пользователь хочет удалить свои файлы, то вместо того, чтобы спрашивать “Очистить хранилище?” с ответами “Да” или “Нет”, лучше спросить “Вы точно хотите удалить свои файлы?” с вариантами “Удалить” и “Отмена”.

4. Выносите содержимое сайта и его активные кнопки в модальные окна

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

В идеале, модальное окно должно содержать пару-тройку предложений, а также не более двух кнопок действия.
Третье действие, например кнопка “Узнать больше”, лишь уводит пользователя от основного окна и не дает ему завершить желаемое действие.

5. Делайте кнопки закрытия окна видимыми

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

Добавить заметную кнопку “Закрыть” или “×” в правом верхнем углу окна.
Добавить заметную кнопку “Закрыть” или “Отменить” в нижней части окна.
Добавить возможность закрытия модального окна при клике за его пределами.

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

7. Выделяйте модальные окна

Вот как можно дать пользователям понять, что перед ними модальное окно:

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

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

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

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

9. Не используйте вложенные модальные окна

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

Читайте также: