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

Posted on by riasevastopol

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

Оверлей — это бокс с контентом, расположенный поверх главной страницы. Его размер заметно меньше по величине нижележещего окна, которое при появлении оверлея довольно часто затенено, чтобы обратить внимание на содержание сообщения. Фактически, сам термин «лайтбокс» (от англ. lightbox — световой короб) был выбран по аналогии с зрительным эффектом одноименных рекламных щитов с внутренней подсветкой.

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

  • Сплит-тест: оверлей vs pop-up — какой инструмент действеннее?

Все прекрасно в меру

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

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

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

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

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

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

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

  • 4 неточности веб-дизайна, убивающие конверсию

Правила применения оверлеев

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

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

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

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

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

Разглядим подробнее любой из этих пунктов.

  • 24 догадки сплит-тестирований

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

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

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

Лендинг 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 между фотографией стола сверху и элементом управления снизу содержит огромное количество белого пространства, вынуждая скролить в самый низ модального окна, дабы его закрыть:

  • Школа интернет-маркетинга: 7 ограничений мобильного интерфейса

Из-за чего вы используете оверлей, а не простую страницу?

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

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

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

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

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

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

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

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

  • 4 обстоятельства, по которым лиды не конвертируются в клиентов

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

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

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

По данным nngroup.com

Случайные статьи:

Плюсы и Минусы БЫТЬ МУЖЧИНОЙ


Подборка похожих статей:

riasevastopol

More Posts