Popups: 10 Problematic Trends and Alternatives

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

British Airways разместила кнопку с надписью « Обратная связь » в правой части всех своих страниц.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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