Что необходимо знать об оверлеях
Всплывающие окна: 10 худших трендов и лучших альтернатив
Из десятков проведенных пользовательских исследований мы знаем, что люди не любят всплывающие и модальные окна. Мне вспомнилось об этом факте во время недавнего юзабилити исследования. Пытаясь выполнить задачу, участник бросил свой телефон через стол после нескольких последовательно всплывающих окон. Разочарованный, он отказался от своей задачи и покинул сайт с очень плохим впечатлением об организации. Несколько других пользователей разделяли подобные чувства, хотя они и не швыряли свои телефоны.
Всплывающее окно (также называемое оверлей или поповер/всплывающая панель) — это панель или диалоговое окно, которое отображается поверх содержимого страницы. Всплывающее окно можно классифицировать по двум параметрам:
1. Может ли пользователь взаимодействовать с остальной частью страницы:
• Модальные: содержимое на странице отключено до тех пор, пока пользователь не будет явно взаимодействовать с оверлеем.
• Немодальные: пользователи могут по-прежнему взаимодействовать с фоновым содержимым (например, выбирая ссылки или нажимая кнопки), пока наложение остается видимым.
2. Затенен ли фон:
• Если фон затемнен, всплывающее окно называется лайтбоксом.
• Не существует специального названия для случая, когда фоновое содержимое визуально не затемнено.
Хотя во многих случаях лайтбоксы являются модальными, это не всегда так.
В течение нескольких недель я делала скриншоты каждого всплывающего окна, с которым я сталкивалась на веб-сайтах и в мобильных приложениях: в среднем 25 всплывающих окон в неделю, что больше, чем может вынести любой человек (но это довольно привычно для пользователей Интернета сегодня). Этот эксперимент, вместе с моим юзабилити исследованием, выявил множество плохих практик реализации и стал доказательством того, что злоупотребление оверлеями еще далеко от завершения. Мы близки к тому моменту, когда веб-сайты настолько злоупотребляют этими элементами, что проблемные ситуации значительно перевешивают случаи, когда всплывающие окна являются полезной практикой разработки. В этой статье я опишу проблемы, которые я наблюдала, и расскажу о ключевых факторах, которые необходимо учитывать, а также о реальных альтернативах всплывающим окнам, которые сохраняют задачи организации и опыт пользователей.
Тайминг для всплывающего окна: не использовать перед взаимодействием или во время критических задач
1. Появление всплывающего окна до загрузки содержимого главной страницы. Независимо от используемого варианта, никогда не показывайте всплывающее окно, пока пользователи в состоянии оценить пользу вашего сайта или приложения. Этот тренд выглядит очень назойливым, потому что задача пользователей прерывается еще до того, как они оказались на странице. Люди привыкли видеть преждевременно всплывающие окна на сайтах и обычно игнорируют их или сразу же ищут самые быстрые способы закрытия всплывающего окна, чтобы вернуться к своей задаче. Всплывающие окна, которые появляются до загрузки страницы, заставляют сайт выглядеть бесперспективным, а пользовательский интерфейс — ужасным. Кроме того, сайты, которые игнорируют эти факты, рискуют получить низкий рейтинг в результатах поисковых систем, поскольку Google наказывает сайты, которые используют методы, делающие контент менее доступным для пользователей, особенно на мобильных устройствах.
Вместо этого: дождитесь пока представление контента во всплывающем окне не станет контекстуально релевантным для пользователя. Используйте принцип взаимности: оцените важность своих посетителей, прежде чем спрашивать у них что-либо — будь то запрос адреса электронной почты или даже действие по закрытию всплывающего окна. Запустите пользовательское тестирование, чтобы определить контекст, подходящий для любого контента, который вы планировали отобразить во всплывающем окне, и выяснить, в каком виде лучше всего отобразить этот контент; во многих случаях это не будет всплывающим окном. Единственный случай использования, когда допустимо отображение любого вида всплывающего окна до загрузки содержимого страницы — это когда ваш сайт юридически обязан запрашивать согласие пользователей на использование файлов cookies или проверку их возраста. (Хотя мы хотим, чтобы ЕС и другие регулирующие органы приняли менее раздражающие установки GDPR и аналогичных правил.)
2. Появление всплывающего окна сразу после авторизации пользователя: всплывающее окно, отображаемое сразу после входа пользователя, так же утомительно, как и показанное перед загрузкой содержимого страницы. Когда пользователи входят в учетную запись, они мысленно готовятся к следующему шагу или следующей задаче — иначе зачем бы они авторизировались?! Незамедлительное явление всплывающего окна любого вида отвлечет и помешает им выполнить следующий шаг. Поскольку они сосредоточены на следующем шаге, вероятно, пользователи не станут обращать внимания на всплывающее окно или быстро его закроют. И это не всё: они могут быть разочарованы прерыванием и дополнительными затратами времени и усилий, необходимых для закрытия всплывающего окна или его перемещения.
Вместо этого: дайте пользователям время и пространство для завершения своих задач после входа в учетную запись и не показывайте всплывающие окна сразу. Вполне допустимо через некоторое время представить полезные советы, рекомендации или новые функции учетной записи, но только в том случае, если задача пользователя расширяется или дополнительно поддерживается представленным контентом или новыми функциями. В этих случаях всегда предпочитайте менее навязчивые методы, такие как всплывающие подсказки и небольшие немодальные оверлеи, чтобы делиться информацией об этих элементах.
3. Запрос адреса электронной почты до взаимодействия. Многие сайты и приложения используют всплывающие окна, чтобы запросить адрес электронной почты пользователей, прежде чем они даже смогут поработать с контентом сайта. Электронная коммерция, новостные сайты и приложения, а также блоги проявили себя как крупнейшие нарушители в этой категории. Такой подход создает проблемы, не только потому что всплывающее окно раздражает людей, время его появления и тот факт, что сайт запрашивает адреса электронной почты слишком рано, наводит на мысли, что сайт будет рассылать нежелательные спам-сообщения.
Например, одна из посетительниц веб-сайта Uncommon Goods’, выразила недовольство, когда ее встретило модальное окно с запросом адреса электронной почты для доступа к секретным распродажам. Она сказала: «Меня действительно раздражает, когда появляются подобные вещи, прежде чем я что-то еще делаю на сайте. Как мне узнать, хочу ли я стать подписчиком, если я только что пришла сюда? Я бы предпочла получить это чуть позже».
Есть много компромиссов, которые следует учитывать при запросе у пользователей их электронной почты. Сайты и приложения часто делают это слишком рано ради кратковременного повышения показателей метрик, которые они могут получить. Тем не менее, за краткосрочный рост показателей часто приходится расплачиваться разочарованием большинства пользователей, которые не мотивированы такими случайными стимулами, как секретные распродажи.
Вместо этого: подумайте, когда пользователям может быть наиболее удобно делиться своими адресами электронной почты с вами. Может они просматривают категорию, в которой есть действующий промокод? Или, может быть, они только что прочитали (или просмотрели) весь пост в блоге? Эти действия могут быть подходящими триггерами для минимально навязчивого немодального оверлея, который может отображаться близко к верхнему или нижнему правому углу, и использовать разумное количество экранного пространства. Предложите пользователям что-то ценное и осязаемое в обмен на их адрес электронной почты, и не ожидайте, что они им с вами тут же поделятся.
4. Запрос об обратной связи, прежде чем люди сделают что-то значительное на сайте: получать отзывы от ваших пользователей важно, но вы не должны атаковать людей требуя обратную связь, прежде чем они что-то сделают на вашем сайте. Сайты и приложения, как правило, сразу же предоставляют пользователям всплывающие окна с обратной связью в надежде на то, что они получат высокий рейтинг и будут выполнять свои задачи. Вряд ли это случится; чаще всего пользователи быстро закрывают всплывающее окно, не имея намерения увидеть его снова.
Получение содержательной обратной связи от ваших пользователей в подходящие моменты дает представление об их проблемах и препятствиях. Но если вы просите о обратной связи слишком рано, вы рискуете не получить ее вообще, даже когда это важно. Например, пытаясь оплатить телефонный счет на ATT.com, участница исследования была раздражена всплывающим окном с просьбой об обратной связи, которое появилась сразу после того, как она зашла на страницу с формой оплаты. Она сказала: «Ну, я бы ответила после того, как оплатила счет, но теперь я расстроена, что это здесь, и я еще не успела сделать что-то, чтобы дать отзыв».
Вместо этого: попросите пользователей оставить отзыв сразу после того, как они выполнили основную задачу на вашем сайте. Такой подход сводит к минимуму заминки в работе и гарантирует, что обратная связь будет основана на реальном взаимодействии. Например, программное обеспечение для видеоконференций BlueJeans запросило отзывы пользователей после завершения сеанса. Этот запрос не отображался преждевременно, но в контекстуально релевантное и подходящее время.
5. Прерывание пользователей для запроса обратной связи во время критических задач: пользователи ненавидят, когда их прерывают, но примеров веб-сайтов и приложений, которые мешают пользователям всплывающими окнами с требованием обратной связи во время выполнения критических задач до сих пор предостаточно. В большинстве случаев написание отзыва не будет основной причиной посещения сайта для ваших пользователей, поэтому не мешайте людям всплывающими окнами в середине критических задач.
Вместо этого: в дополнение к тому, чтобы просить пользователей дать обратную связь только после того, как критические задачи выполнены, предложите статичные, ненавязчивые средства для предоставления обратной связи в любое время, когда они захотят. Вкладка в боковой части экрана, ссылка в нижнем колонтитуле или ссылка в навигации — все это приемлемые альтернативы назойливым модалальным окнам, позволяющие пользователю поделиться своим мнением, когда они будут готовы.
6. Появление нескольких одно за другим всплывающих окон. Появление нескольких всплывающих друг над другом окон делает ваш сайт непрофессиональным, бесперспективным и неорганизованным. Это также ошеломляет пользователей и заставляет их прилагать усилия, чтобы закрыть каждое из них. Если на вашем сайте используется много разных типов всплывающих окон, протестируйте реализацию, чтобы не показывать пользователям несколько всплывающих окон одновременно.
Вместо этого: если вы должны представить критическую информацию (например, важные предупреждения для предотвращения или исправления ошибок) во всплывающем окне, обязательно отображайте только одну за раз. Более того, не показывайте критически важную информацию во всплывающем окне, так как люди, как правило, закрывают их, не читая. Вместо этого используйте визуально различимый элемент и поместите его непосредственно на страницу, где сообщение лучше всего соответствует контексту. Убедитесь, что копия четко сообщает, что именно пользователь должен сделать, чтобы исправить проблему и двигаться вперед.
Контекст всплывающих окон: не препятствуйте переходам или доступу к контенту
7. Появление модального окна перед переходом пользователя на новый поддомен или внешний сайт: некоторые корпоративные сайты ссылаются на контент или приложения, которые находятся на поддоменах или внешних сайтах. Прежде чем пользователи покинут основной сайт, появится модальное окно, чтобы предупредить пользователей о предстоящем переходе. Этот тип всплывающих окон является проблематичным, поскольку он придает чрезмерное значение переходу, заставляя пользователей чувствовать себя потерянными и сконфуженными, особенно если дочерние сайты открываются в новой вкладке браузера.
Во время одной из наших сессий юзабилити-тестирования участник, который искал работу на сайте HSBC, столкнулся с двумя различными модальными окнами перехода при попытке выполнить задачу, которая по существу была распределена на 3 отдельных веб-сайта. Он сказал: «Ух ты, так это продолжает уводить меня на другие сайты, даже не знаю, где я сейчас нахожусь. Если их процесс приема на работу является таким сложным и разрозненным, я, честно говоря, не думаю, что это было бы удачным местом для работы. Это похоже на помойку, независимо от того, как красиво выглядит этот сайт».
Вместо этого: удалите модалы, сведите к минимуму переходы между сайтами и всегда сохраняйте переход к основному сайту при отсылке пользователей к внешнему контенту. Если ваши пользователи должны быть предупреждены при выходе с вашего сайта, используйте менее навязчивую опцию, такую как всплывающая подсказка для ссылки, чтобы сделать переход более изящным.
8. Прерывание доступа к контенту с помощью модальных оверлеев. Модальное диалоговое окно, которое появляется сразу после того, как люди загрузили статью или другой фрагмент контента в расширенном формате (например, тот, который обычно находится в разделах «О нас» или «Новости»), вызывает ощущение, что сайт ограничивает доступ к этому контенту. Этот контекст является особенно неблагоприятным и раздражающим, поскольку он снижает доверие и надежность. Один пользователь в мобильном приложении CNN испытал разочарование, когда сразу после перехода к статье, которую он хотел прочитать, он обнаружил модал информационного бюллетеня. Он сказал: «Это меня наводит на подозрения, что CNN достигли предела. Не спрашивайте меня о моей электронной почте или подписке сразу.»
Вместо этого: обеспечьте пользователям доступ к контенту без препятствий. Замените всплывающее окно тонким, легко удаляемым баннером в верхней части страницы. Эта альтернатива всплывающему окну позволит пользователю самому решить, хочет ли он подписаться на новостную рассылку, не блокируя при этом свою главную задачу получения информации.
Содержание всплывающих окон: не обольщайтесь, что модалы донесут ваше сообщение до пользователя
9. Использование модальных окон для уведомлений GDPR и файлов cookie: пользователи, как правило, быстро закрывают модальные окна, полагая, что ничего хорошего от них не ожидается. Для передачи важной информации, связанной с GDPR и использованием файлов cookie, не используйте модальные окна.
Вместо этого: отдавайте предпочтение немодальным оверлеям, размещенным внизу или сбоку страницы. Они гораздо менее навязчивы и позволяют пользователям продолжать выполнять свои задачи. Обязательно предоставьте достаточную информацию о том, как собираются и используются личные данные пользователей.
10. Информирование о переходе с помощью модальных окнон без объяснения конкретных преимуществ. Обычно модалы ведут к переходу с мобильных веб-сайтов на связанное мобильное приложение, это характерно для электронной коммерции или новостных сайтов. Эти оверлеи ведут себя разрушительно и проблематично во многих ситуациях: часто посетители — это случайные пользователи, которые не заинтересованы в загрузке приложения ради одной задачи.
Резонно, что организации хотят поощрять загрузку приложений, но модальное окно не является правильным решением для продвижения вашего мобильного приложения. Даже пользователи, у которых уже есть ваше приложение на телефоне, могут с неохотой переключать каналы из-за страха начать процесс загрузки заново. Модальное окно будет только беспокоить их.
Вместо этого: повышайте осведомленность о мобильном приложении вашей компании, но не за счет вмешательства в текущую задачу пользователя. Подумайте над простыми подходами, такими как стандартный верхний баннер, и опишите преимущества использования приложения для облегчения перехода людей на этот канал.
Заключение
Вывод: независимо от того, являются ли они модальными или нет, большинство всплывающих окон появляются в неподходящее время, прерывают пользователей во время критических задач, используют ограниченный язык и способствуют дезориентации пользователей.
Pop, pop, it never stops. Недопустимый пользовательский опыт, так что останавливайте всплывающие окна.
Учитывая это общее заключение, вы можете задаться вопросом, когда допустимо использовать всплывающие окна; Ответ: экономно. Воздерживайтесь от искушения гнаться за толпой и не прерывайте своих пользователей, ради краткосрочных показателей. Изучите альтернативные пути, которые учтут потребности ваших пользователей и при этом не лишат возможности собирать отзывы, уведомлять пользователей о сборе данных, получать адреса электронной почты или предлагать переходы на другие каналы.
Используйте модальные окна для предоставления критически важной информации, только в соответствующее время. Не прерывайте важные задачи и не блокируйте необходимый контент с помощью огромного, назойливого всплывающего окна. Проведите юзабилити-тестирование, чтобы убедиться, что ваши всплывающие окна не разочаровывают ваших пользователей, и, как дополнительное преимущество, вы получите реальную информацию, которая поможет вам улучшить общее впечатление. Чтобы узнать больше об эффективном использовании модалов и всплывающих окон, пройдите наш однодневный курс по веб-дизайну UX Design.
