Всплывающие окна: 10 проблемных тенденций и их альтернативы

При поддержке канала https://t.me/uxidesign

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перевод статьи NNGroup.