Программы с оверлеем что это

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

11 min read
Jul 23, 2019

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

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

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

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

Как включить мониторинг в играх?

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

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

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

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

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

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

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

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

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

КАК ВКЛЮЧИТЬ ОВЕРЛЕЙ STEAM. ВАРИАНТЫ РЕШЕНИЯ ПРОБЛЕМЫ.

Вместо этого: дождитесь пока представление контента во всплывающем окне не станет контекстуально релевантным для пользователя. Используйте принцип взаимности: оцените важность своих посетителей, прежде чем спрашивать у них что-либо — будь то запрос адреса электронной почты или даже действие по закрытию всплывающего окна. Запустите пользовательское тестирование, чтобы определить контекст, подходящий для любого контента, который вы планировали отобразить во всплывающем окне, и выяснить, в каком виде лучше всего отобразить этот контент; во многих случаях это не будет всплывающим окном. Единственный случай использования, когда допустимо отображение любого вида всплывающего окна до загрузки содержимого страницы — это когда ваш сайт юридически обязан запрашивать согласие пользователей на использование файлов 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.

Источник: medium.com

Плюсы и минусы использования оверлеев

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

Рекламный лайтбокс компании Chanel. Источник

Все хорошо в меру

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

Лайтбокс с описанием ошибки 452 в разделе «Помощь» на сайте apple.com

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

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

Текущая версия раздела помощи Apple не содержит оверлеев

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

Правила использования оверлеев

Стандартные требования к модальным окнам известны всем:

1. Хорошо различимая команда «Закрыть», чтобы пользователи легко могли вернуться на исходную страницу.
2. Визуальное отличие лайтбокса от основного окна за счет меньшего размера и полупрозрачного затенения фона, дабы было понятно: нижележащий контент в данный момент недоступен, но перехода на другую страницу не было.
3. Доступное управление с клавиатуры (клавиша Escape для закрытия окна, а также стандартные кнопки управления контентом и полями внутри оверлея).

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

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

1. Кто ваша целевая аудитория?
2. Что именно требуется от пользователей?
3. Когда появляется оверлей, и не прерывает ли он другой процесс?
4. Где именно он располагается?
5. Почему вы используете оверлей, а не обычную страницу?

Рассмотрим подробнее каждый из этих пунктов.

Кто ваша целевая аудитория?

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

Дезориентация

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

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

Блокировка доступа к контенту

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

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

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

Что именно требуется от пользователей?

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

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

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

Прочитать текст или просмотреть изображения

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

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

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

Заполнить форму

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

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

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

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

Принять решение

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

Оверлей US Airways спрашивает о согласии на списание средств с кредитной карты

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

При удалении контактов в LinkedIn появляется сообщение, содержащее кнопку «Да, удалить их»

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

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

Когда появляется оверлей, и не прерывает ли он другой процесс?

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

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

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

Вводный оверлей приложения The Zappos для iPhone

Модальное окно, активированное пользователем

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

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

Различные варианты кнопки «Поделиться»

Модальное окно, активированное не пользователем

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

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

Окно помощи Live Chat Support появляется на каждой странице сайта Bank of the West

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

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

Digitalmarketer.com перед закрытием страницы предлагает своим посетителям «Бесплатный подарок»

Где именно он располагается?

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

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

Оверлей сайта verizon.com практически невидим для пользователей

Лайтбокс почтовой службы USPS отцентрован и смещен в сторону верхней части страницы

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

Так, лайтбокс American Furniture Warehouse между фотографией стола сверху и элементом управления снизу содержит огромное количество белого пространства, вынуждая скролить в самый низ модального окна, чтобы его закрыть:

Почему вы используете оверлей, а не обычную страницу?

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

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

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

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

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

Оверлей содержит «выгодную» для пользователей информацию

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

Менее интересный призыв к действию: «3 больших победы уже близко, с вашей помощью»

Вместо заключения

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

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

Источник: lpgenerator.ru

Как пользоваться Оверлей в Discord

Оверлей — функция, которая позволяет, не выключая игру, общаться с товарищами-геймерами. Но не только общаться, ведь тогда можно было бы обойтись тем же Skype и без всяких Оверлеев. Благодаря программе Discord прямо внутри онлайн-игр можно смотреть, чей голос доносится из наушников, регулировать громкость друзей. Работает опция почти для всех игр, использующих DirextX 9, 11 и OpenGL. Однако по факту некоторые могут поддерживать не совсем корректно или вовсе не поддерживать Оверлей.

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

Включение

Установить и настроить эту фичу очень просто.

1. Открываем настройки Дискорда.
2. Выбираем вкладку с говорящим за себя названием, ставим маркер «Включить внутриигровой Оверлей».

С этого момента функция активна. Остальные настройки важны, но не так сильно:

• можно выбрать горячие клавиши для разблокировки;
• можно определить, когда будут отображаться имена и пользователи.

После этих действий отмечаем галочку во вкладке «Игры» напротив той, где он нужен.

Использование

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

• Нажатие заданного сочетания клавиш (по умолчанию shift+’) активирует панель со списком каналов.
• Клик левой кнопкой мыши по участнику — регулировка громкости.
• Клик мышкой в любое другое место — панель закрывается.

Проблемы при запуске

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

Вместо *highest-number* вводим свою версию программы. По заверениям разработчиков никакой опасности в процессе нет (даже не содержит ГМО), так что можете быть спокойны.

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

Вот список игр, где с этой опцией всё точно в порядке:

• Dota 2 [90% читателей вздыхают с облегчением];
• CS: GO [оставшиеся 10 делают то же самое];
• League of Legends;
• World of Warcraft;
• Diablo 3;
• Guild Wars 2.

Список можно продолжить.

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

Похожие статьи:

• ВКонтакте
• обычная форма

не помогает,я всё сделал,зашёл в кс 1.6,нажимаю нечего не работает,захожу в одиночную игру тож не работает

Спасибо большое, я вроде бы отключил оверлей и у меня заработала игра Rainbow Six: Siedge.Не знал ,что делать везде всё перелазил и через поддержку Юбисофт к вам заглянул.Вообщем спасибо!

Как переместить в правую сторону?
Как переместить имена в правую сторону экрана ?
TTyLLluCTblu :
Я не понимаю где настройка: «Оверлей»?
Скажите пожалуйста…
Ваш помошник :
Смотри , заходишь в Настройки, листаешь чуть-чуть в низ и там будет оверлей.
Как переместить имена в правую сторону экрана ?

Но в данном приложении Discord не обойтись без минусов:
1)Разнообразный коллектив который не всегда подстать себе найдешь;
2)В приложении дискорд на жалобы сквозь пальцы смотрят.могут и не отреагировать;
3)Конфиденциальность в общении не в почёте.
4)Странное комньюнити которое как «стая пчел».
5)На жалобы техобслуживание долго не реагирует.но попытаться можно.
6)Само общество дискорда может окунуть тебя в грязь.Если им что-то не нравится.У них своё представление о том или ином человеке.Они живут в своём собственном мирке под названием Discord.
7)Есть определенные «особые» личности которым всё непочем.и они суются куда не следует.
Проблема русскоязычного дискорда независит от сервера.
Сейчас русскоязычные сервера дискорд самое поганое место обитания.
Ни в коем случае не общайтесь в русскоязычных серверах Discord.
Это относится как к общему чату так и к личным сообщениям.
Твари, мрази и ублюдки — это основное комньюнити русскоязычных серверов Discord.
Избегайте любого общения в русскоязычных серверах Discord.

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

Источник: nastroyvse.ru