Чем отличается модальное окно от попапа

Обновлено: 15.05.2024

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

Как найти золотую середину? Стоит ли вообще использовать всплывающие окна? Если да, то для каких целей? На эти вопросы мы ответим в статье.

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

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

Попапы помогают увеличить продажи, так как концентрируют внимание целевой аудитории в направлении конверсионного действия, что подтверждается множеством практических кейсов. В среднем, коэффициент конверсии подписки на email-рассылку посредством попапов составляет от 1,95% до 2,9%. Это означает, что из 100 человек, которые увидят всплывающее окно на вашем сайте, вы можете получить 2-3 адреса электронной почты.

Несомненно, есть и более впечатляющие примеры. Некоторым удавалось поднять продажи на 162% посредством попапов (случилось это, правда, в 2005 году). А в 2012 году один из клиентов AWeber в результате экспериментов со всплывающими окнами получил + 1,375% подписок.

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

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

Всплывающее окно (поп-ап, оверлей) появляется поверх всего содержимого страницы. Их можно классифицировать так:

1. В зависимости от того, может ли пользователь взаимодействовать с содержимым страницы:

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

2. В зависимости от того, затемнён ли фон:

Если фон затемнён, «всплывашку» называют лайтбоксом.
Названия у всплывающего окна на незатемнённом фоне пока нет.

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

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

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

Время «всплывания»: не прерывайте взаимодействие или выполнение ключевых задач

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

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

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

3. Запрос адреса почты до первого взаимодействия. Многие сайты и приложения запрашивают e-mail пользователя ещё до того, как у них даже была возможность повзаимодействовать с контентом. E-commerce, новостные сайты и приложения, а также блоги – главные «нарушители» в данной категории. Это плохой вариант не только потому, что пользователей бесит окно, оно появляется невовремя или слишком рано запрашивает почту. Это ещё и приводит к мысли о том, что раз вы так по-спамерски собираете адреса, то и письма будете слать в том же ключе.

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

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

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

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

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

5. Прерывание важных пользовательских задач просьбой о фидбеке. Пользователи ненавидят, когда их сбивают. Но примеров сайтов и приложений, которые прерывают важные пользовательские задачи прямо на полпути предостаточно. Ребят, в большинстве случаев оставление фидбека – не главная причина, почему пользователь пришёл на сайт. Так что не надо «выкидывать» всплывающие окна в самый неподходящий для этого момент.

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

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

Контекст «всплывания»: не препятствуйте переходам или доступу к содержимому страницы

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

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

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

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

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

10. Предложение сменить канал (например, перейти в приложение) в модальных окнах без разъяснения преимуществ такого перехода. Для e-commerce и новостных сайтов окна, предлагающие перейти в мобильное приложения, не редкость. Такие оверлеи во многих ситуациях – настоящая проблема: часто пользователи сайта заходят на него один раз в жизни. Им совершенно не нужно это приложение для выполнения обычного задания.

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

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

Заключение

Бульк, бульк – это ваши бесконечные «всплывашки». Перестаньте портить пользовательский опыт.

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

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

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

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

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

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

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

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

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

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

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

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

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

Распределение попапов: Не показывать до взаимодействий пользователя с сайтом или в процессе выполнения задач.

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

Какую же альтернативу использовать: дождитесь загрузки контента во всплывающем окне, пока оно не станет релевантным для пользователя. Используйте принцип взаимности: повысьте значимость своих посетителей, прежде чем спрашивать у них что-либо — будь то запрос адреса электронной почты или даже кнопка закрытия всплывающего окна. Запустите пользовательское тестирование, чтобы определить контекст, подходящий для любого контента, который вы планировали отобразить во всплывающем окне, и выяснить, как лучше всего отобразить этот контент; во многих случаях это не будет отображаться во всплывающем окне. Единственный случай использования, когда допустимо отображение любого вида всплывающего окна до загрузки содержимого страницы, — это когда ваш сайт юридически обязан запрашивать согласие пользователей на использование файлов cookie или проверку их возраста. (Хотя мы хотим, чтобы ЕС и другие регулирующие органы приняли менее раздражающее толкование GDPR и аналогичных правил.)

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

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

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

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

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

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

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

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

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

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

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

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

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

British Airways показывает кнопку обратной связи на правой стороне всех своих страниц.

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

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

Всплывающие контекстные окна: не препятствуйте переходам или доступу к контенту.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всплывающие окна: 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.

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